/* global React */

function ProPage({ setRoute }) {
  return (
    <div className="page">

      {/* —— HERO —— */}
      <section style={{ padding: "80px 24px 72px", textAlign: "center", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 720, margin: "0 auto" }}>
          <span className="t-mono-label" style={{ color: "var(--acc)" }}>// INSTITUTIONAL DATA · BUILT FOR RETAIL</span>
          <h1 style={{ marginTop: 20, fontSize: "clamp(36px, 5vw, 60px)", fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.1 }}>
            TraderDaddy <span className="t-serif-italic" style={{ color: "var(--acc)" }}>Pro</span>
          </h1>
          <p className="t-lede" style={{ marginTop: 20, maxWidth: 600, margin: "20px auto 0" }}>
            See what the desks see. Real-time options flow, dealer positioning, and AI-driven alerts —
            in one platform, without the Bloomberg price tag.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", justifyContent: "center", marginTop: 36 }}>
            <a href="https://traderdaddy.pro" target="_blank" rel="noopener noreferrer"
               className="btn btn-primary" style={{ fontSize: 16, padding: "15px 36px" }}>
              Launch the platform →
            </a>
            <a href="https://calendly.com/thetraderdaddy1/10min" target="_blank" rel="noopener noreferrer"
               className="btn btn-ghost">
              Book a 10-min walkthrough
            </a>
          </div>
        </div>
      </section>

      {/* —— THREE PILLARS —— */}
      <section style={{ borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", borderLeft: "1px solid var(--line)" }}>
            {[
              { emoji: "📡", name: "Options Flow",     sub: "See size hit before the move" },
              { emoji: "🧬", name: "Market Structure", sub: "GEX · Heatmap · Liquidity" },
              { emoji: "🤖", name: "AI Alerts",        sub: "Setups pushed to your phone" },
            ].map(({ emoji, name, sub }) => (
              <div key={name} style={{ textAlign: "center", padding: "56px 32px", borderRight: "1px solid var(--line)" }}>
                <div style={{ fontSize: 48 }}>{emoji}</div>
                <div style={{ marginTop: 20, color: "var(--ink-0)", fontWeight: 600, fontSize: 18 }}>{name}</div>
                <div className="t-mono" style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 8, letterSpacing: "0.06em" }}>{sub.toUpperCase()}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* —— FEATURE GRID —— */}
      <section style={{ background: "var(--bg-1)", borderBottom: "1px solid var(--line)", padding: "80px 0" }}>
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 56px" }}>
            <span className="t-mono-label">// WHAT'S INSIDE</span>
            <h2 className="t-h2" style={{ marginTop: 12 }}>
              The tools <span className="t-serif-italic" style={{ color: "var(--acc)" }}>professionals run.</span>
            </h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }}>
            {[
              ["Unusual Activity",   "Catch large, off-pattern options orders the moment they print."],
              ["Live Flow",          "Real-time tape of every notable contract — filterable by size, side, and IV."],
              ["Sector Flow",        "See where institutional money is rotating across all 11 sectors."],
              ["GEX (Gamma)",        "Dealer positioning maps that show where the market wants to pin or break."],
              ["Liquidity Heatmap",  "Visualize resting orders and walls before price reaches them."],
              ["AI Alerts",          "Custom triggers built around your setups — pushed in real time."],
              ["Screeners",          "Pre-built scans for breakouts, bounces, earnings gaps, and more."],
              ["Smart Money Tools",  "Insider trades, congressional buys, and ETF rotation in one feed."],
            ].map(([title, desc]) => (
              <div key={title} style={{ background: "var(--bg-0)", padding: "32px 28px" }}>
                <div style={{ color: "var(--ink-0)", fontWeight: 600, fontSize: 17 }}>{title}</div>
                <div style={{ color: "var(--ink-2)", marginTop: 8, fontSize: 14, lineHeight: 1.55 }}>{desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* —— WHY IT MATTERS —— */}
      <section style={{ borderBottom: "1px solid var(--line)" }}>
        <div className="container method-grid">
          <div>
            <span className="t-mono-label">// THE EDGE</span>
            <h2 className="t-h2" style={{ marginTop: 12 }}>
              Stop trading <span className="t-serif-italic" style={{ color: "var(--acc)" }}>headlines.</span>
            </h2>
          </div>
          <div className="method-body">
            <p className="t-lede">
              Every retail trader sees the same chart. Pros see the order flow underneath it.
              TraderDaddy Pro pulls the same OPRA tape, dealer positioning data, and institutional
              signals the desks watch — and surfaces it in one screen built for active traders.
            </p>
            <div className="method-list" style={{ marginTop: 32 }}>
              {[
                ["Real OPRA data",         "Direct exchange feed — not delayed, not synthesized."],
                ["Built by traders",       "Designed alongside the TraderDaddy desk in NYC."],
                ["Works on mobile & desktop", "Push alerts to your phone. Run dashboards on your desk."],
              ].map(([k, v], i) => (
                <div key={k} className="method-row">
                  <span className="t-mono" style={{ color: "var(--ink-3)", fontSize: 12, width: 28 }}>0{i + 1}</span>
                  <span style={{ color: "var(--ink-0)", fontWeight: 500, width: 200 }}>{k}</span>
                  <span style={{ color: "var(--ink-2)" }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* —— FINAL CTA —— */}
      <section>
        <div className="container">
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", padding: "80px 0", gap: 20 }}>
            <span className="t-mono-label" style={{ color: "var(--acc)" }}>// READY?</span>
            <h2 className="t-h2" style={{ maxWidth: 640 }}>
              See the market the way <span className="t-serif-italic">desks see it.</span>
            </h2>
            <p className="t-lede" style={{ maxWidth: 520 }}>
              Join the traders running TraderDaddy Pro every session. Cancel anytime.
            </p>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", justifyContent: "center", marginTop: 8 }}>
              <a href="https://traderdaddy.pro" target="_blank" rel="noopener noreferrer"
                 className="btn btn-primary" style={{ fontSize: 16, padding: "15px 36px" }}>
                Get TraderDaddy Pro →
              </a>
            </div>
            <div className="t-mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>
              CANCEL ANYTIME · REAL-TIME OPRA DATA · WEB & MOBILE
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}

window.ProPage = ProPage;