/* global React */

/* ============================================================
   STAT
   ============================================================ */
function Stat({ value, label, prefix = "", suffix = "", decimals = 0 }) {
  return (
    <div className="stat">
      <div className="stat-num t-mono">
        {prefix}{value.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}{suffix}
      </div>
      <div className="t-mono-label">{label}</div>
    </div>
  );
}

/* ============================================================
   LIVE VIDEO REEL
   ============================================================ */
function LiveVideoReel() {
  const [active, setActive] = React.useState(null);
  const videoRefs = React.useRef([]);

  const videos = [
    { src: "media/live-1.mp4" },
    { src: "media/live-2.mp4" },
    { src: "media/live-3.mp4" },
    { src: "media/live-4.mp4" },
    { src: "media/live-5.mp4" },
  ];

  const handleClick = (i) => {
    const prev = active;
    if (prev !== null && videoRefs.current[prev]) {
      videoRefs.current[prev].pause();
      videoRefs.current[prev].muted = true;
    }
    if (prev === i) {
      setActive(null);
    } else {
      setActive(i);
      const el = videoRefs.current[i];
      if (el) {
        el.muted = false;
        el.play().catch(() => { el.muted = true; el.play(); });
      }
    }
  };

  return (
    <div className="live-reel">
      {videos.map((v, i) => (
        <div key={i} className={"live-reel-item" + (active === i ? " active" : "")}
          onClick={() => handleClick(i)}>
          <video
            ref={el => videoRefs.current[i] = el}
            src={v.src}
            playsInline
            loop
            muted
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", borderRadius: "inherit" }}
          />
          {active !== i && (
            <div className="live-reel-overlay">
              <div className="live-reel-play">▶</div>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

/* ============================================================
   HOME PAGE
   ============================================================ */
function HomePage({ setRoute, showResults }) {
  return (
    <div className="page">

      {/* —— HERO —— */}
      <section className="hero">
        <div className="hero-bg-grid" aria-hidden></div>
        <div className="container hero-grid">
          <div className="hero-copy">
            <span className="t-mono-label" style={{ color: "var(--acc)" }}>// SINCE 2012 · NYC</span>
            <h1 className="t-display" style={{ marginTop: 28 }}>
              You don't have to<br/>
              <span className="t-serif-italic" style={{ color: "var(--acc)" }}>trade alone.</span>
            </h1>
            <p className="t-lede" style={{ marginTop: 28, maxWidth: 540 }}>
              TraderDaddy is a private community of traders, mentors, and Wall Street professionals —
              built around live sessions, direct access, and 40+ years of combined experience across Futures, Forex, Equities, and Crypto.
            </p>
            <div className="row gap-3 wrap" style={{ marginTop: 36 }}>
              <button className="btn btn-primary" onClick={() => setRoute("contact")}>
                Get in touch
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8 H13 M9 4 L13 8 L9 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
              <a className="btn btn-ghost" href="https://calendly.com/thetraderdaddy1/10min" target="_blank" rel="noopener noreferrer">
                Book a free 10-min call →
              </a>
            </div>
            <div className="hero-trust">
              <GoogleBadge />
              <div className="t-mono" style={{ fontSize: 12, color: "var(--ink-2)", marginTop: 10 }}>
                <span style={{ color: "var(--ink-0)" }}>WhatsApp</span> &amp; <span style={{ color: "var(--ink-0)" }}>Discord</span> · members across <span style={{ color: "var(--ink-0)" }}>23 countries</span>
              </div>
            </div>
          </div>

          <div className="hero-art">
            {/* Full hero video */}
            <div className="hero-vid-wrap" style={{ gridColumn: "1 / -1", gridRow: "1 / -1" }}>
              <video
                src="media/hero-video.mp4"
                autoPlay
                loop
                muted
                playsInline
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
              />
            </div>
          </div>
        </div>
      </section>

      {/* —— AS SEEN IN —— */}
      <section className="as-seen">
        <div className="container">
          <div className="as-seen-row" style={{ gridTemplateColumns: "auto 1fr" }}>
            <div className="t-mono-label as-seen-label">AS SEEN IN</div>
            <a href="https://www.businessinsider.com/day-trading-course-learn-to-trade-stock-market-quitting-job-2025-9" target="_blank" rel="noopener noreferrer" className="bi-link">
              <span className="bi-mark">BUSINESS<br/>INSIDER</span>
              <span className="bi-headline t-serif-italic">"Day-trading course: learn to trade the stock market — and consider quitting your job."</span>
              <span className="bi-cta t-mono-label">Read article →</span>
            </a>
          </div>
        </div>
      </section>

      {/* —— MARKETS —— */}
      <section className="logos">
        <div className="container">
          <div className="t-mono-label" style={{ textAlign: "center", marginBottom: 32 }}>ONE COMMUNITY · FOUR MARKETS</div>
          <div className="logos-row">
            {[
              ["FUTURES", "ES · NQ · CL · GC"],
              ["FOREX", "EUR · GBP · JPY"],
              ["EQUITIES", "Stocks · Options"],
              ["CRYPTO", "BTC · ETH · Alts"],
            ].map(([l, s]) => (
              <div key={l} className="market-item">
                <div className="logo-item" style={{ color: "var(--ink-0)", textAlign: "center" }}>{l}</div>
                <div className="t-mono" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 6, letterSpacing: "0.05em", textAlign: "center" }}>{s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* —— STATS —— */}
      {showResults && (
        <section className="stats-section">
          <div className="container">
            <div className="section-head">
              <span className="t-mono-label">// 02 — THE COMMUNITY</span>
              <h2 className="t-h2" style={{ marginTop: 12, maxWidth: 760 }}>
                Real people. Real sessions.<br/>
                <span style={{ color: "var(--ink-3)" }}>Real screens shared.</span>
              </h2>
            </div>
            <div className="stats-grid">
              <Stat value={40} label="YRS COMBINED EXP" suffix="+"/>
              <Stat value={4} label="MARKETS COVERED" />
              <Stat value={23} label="COUNTRIES" />
              <Stat value={365} label="LIVE SESSIONS / YR" />
            </div>
            <div className="stats-disclaimer t-mono">
              * Trading involves substantial risk. Educational and community content only — not investment advice.
            </div>
          </div>
        </section>
      )}

      {/* —— WHAT YOU GET —— */}
      <section>
        <div className="container">
          <div className="section-head">
            <span className="t-mono-label">// 03 — WHAT MEMBERS GET</span>
            <h2 className="t-h2" style={{ marginTop: 12, maxWidth: 720 }}>
              Direct access. <span className="t-serif-italic">Not another video library.</span>
            </h2>
          </div>
          <div className="curriculum">
            {[
              ["01", "Private Live Sessions", "Real-time interactive sessions with the team. Screens shared, questions answered live, no replays only."],
              ["02", "Direct Access", "Talk to working professionals. Daniel, Philip, Brandon, Adel — not chatbots, not assistants."],
              ["03", "WhatsApp + Discord", "Lifetime access to the private member community. Setups, questions, and conversation 24/5."],
              ["04", "Technical + Fundamental", "Learn both sides. Tape, levels, structure — and the macro context that drives them."],
              ["05", "Custom to You", "Sessions tailored to your level, lifestyle, and risk profile. Beginner to advanced. Full-time worker or student."],
              ["06", "All Markets", "One mentorship covers Futures, Forex, Equities, and Crypto. Apply the same discipline across instruments."],
            ].map(([num, title, desc]) => (
              <div key={num} className="curric-card">
                <div className="row between" style={{ marginBottom: 28 }}>
                  <span className="curric-num t-mono">{num}</span>
                </div>
                <h3 className="t-h3">{title}</h3>
                <p className="t-body" style={{ color: "var(--ink-2)", marginTop: 12 }}>{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* —— LIVE VIDEOS —— */}
      <section style={{ background: "var(--bg-1)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div className="section-head" style={{ marginBottom: 48 }}>
            <span className="t-mono-label" style={{ color: "var(--acc)" }}>// LIVE SESSIONS</span>
            <h2 className="t-h2" style={{ marginTop: 12 }}>
              See what happens <span className="t-serif-italic">inside the room.</span>
            </h2>
            <p className="t-lede" style={{ marginTop: 16, maxWidth: 600 }}>
              Tap any clip to watch a real live session — real trades, real screens, real conversation.
            </p>
          </div>
          <LiveVideoReel />
        </div>
      </section>

      {/* —— PREMIUM GROUP —— */}
      <section style={{ background: "var(--bg-0)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div className="premium-grid">
            {/* Left: offer */}
            <div className="premium-offer">
              <span className="t-mono-label" style={{ color: "var(--acc)" }}>// PREMIUM MEMBERSHIP</span>
              <h2 className="t-h2" style={{ marginTop: 16 }}>
                Join Our Premium Group<br/>
                <span style={{ color: "var(--gold)" }}>for only $99<span style={{ fontSize: "0.55em", fontWeight: 400 }}>/mo</span></span>
              </h2>
              <p className="t-lede" style={{ marginTop: 16, maxWidth: 480 }}>
                Get direct access to the full TraderDaddy community — live sessions every week, private chat, recordings, and personal support from Daniel and the instructors.
              </p>

              <ul className="premium-list">
                {[
                  "Live Zoom sessions 8:15–9:15pm Sunday–Thursday",
                  "Meeting recordings & notes for every session you miss",
                  "Supplemental video course included",
                  "Private premium group chat",
                  "Voice chats during market hours",
                  "Personal support from Daniel and instructors",
                ].map((item, i) => (
                  <li key={i}>
                    <span className="premium-check">✓</span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>

              <div className="row gap-3 wrap" style={{ marginTop: 40 }}>
                <a href="https://whop.com/checkout/plan_hkobGKkdcyvdD?d2c=true" target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ fontSize: 17, padding: "16px 32px" }}>
                  Join Now — $99/mo
                </a>
                <a className="btn btn-ghost" href="https://calendly.com/thetraderdaddy1/10min" target="_blank" rel="noopener noreferrer">
                  Schedule a free 30-min call →
                </a>
              </div>
              <div className="t-mono" style={{ marginTop: 14, fontSize: 11, color: "var(--ink-3)" }}>
                NO CONTRACTS · CANCEL ANYTIME · INSTANT ACCESS
              </div>
            </div>

            {/* Right: comparison graphic */}
            <div className="premium-comparison">
              <img src="media/td-vs-comparison.png" alt="TraderDaddy vs Big Trading Group" style={{ width: "72%", maxWidth: 320, borderRadius: "var(--r-3)", display: "block", border: "1px solid var(--line)", margin: "0 auto" }} />
            </div>
          </div>
        </div>
      </section>

      {/* —— MISSION —— */}
      <section className="method">
        <div className="container method-grid">
          <div>
            <span className="t-mono-label">// 04 — OUR MISSION</span>
            <h2 className="t-h2" style={{ marginTop: 12 }}>
              Educate. Develop. <span className="t-serif-italic" style={{ color: "var(--acc)" }}>Don't go it alone.</span>
            </h2>
          </div>
          <div className="method-body">
            <p className="t-lede">
              We didn't get the chance to learn from professionals in an accessible way.
              So we built TraderDaddy — a place where students and professionals can develop a predictable,
              affordable, and proven approach to the markets.
            </p>
            <div className="method-list">
              {[
                ["Predictable", "A repeatable process you can run on any timeframe."],
                ["Affordable", "Mentorship pricing built for real lives, not finance bros."],
                ["Successful", "Backed by Wall Street experience — Series 7, 63, 65, 32."],
                ["Together", "A community of traders watching the same screens you are."],
              ].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: 130 }}>{k}</span>
                  <span style={{ color: "var(--ink-2)" }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* —— MEET THE TEAM —— */}
      <section style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div className="section-head">
            <span className="t-mono-label">// THE PEOPLE BEHIND IT</span>
            <h2 className="t-h2" style={{ marginTop: 12, maxWidth: 720 }}>
              Meet the <span className="t-serif-italic">team.</span>
            </h2>
            <p className="t-lede" style={{ marginTop: 16, maxWidth: 580 }}>
              Wall Street professionals, educators, and traders — all in the same room as you.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 24, marginTop: 48, marginBottom: 16 }}>
            {[
              { name: "Daniel Graham",  role: "CEO · Head Instructor",          bio: "Series 7, 63, 65, 32. Wall Street since 2009. Leads the live desk and mentorship program.", img: "media/daniel.png" },
              { name: "Artur Voroj",    role: "Chief Technical Officer",          bio: "Creator of TraderDaddy Indicators and the TraderDaddy Pro Options Platform.", img: "media/artur.jpg" },
              { name: "Brandon Chui",   role: "Advisor to CEO · Analyst",        bio: "Bridges the team and membership. Coordinates community programming and member success.", img: "media/brandon.jpg" },
              { name: "Martin",         role: "Senior Mentor · Trading Pro",     bio: "Deep expertise in Futures and Forex. Hands-on mentorship for members at every level.", img: "media/martin.jpg" },
            ].map(({ name, role, bio, img }, i) => (
              <div key={name} style={{ padding: "28px 24px", border: "1px solid var(--line)", borderRadius: "var(--r-2)", background: "var(--bg-1)" }}>
                <div style={{ width: 64, height: 64, borderRadius: "50%", overflow: "hidden", marginBottom: 20, background: `oklch(${40 + i * 8}% 0.10 ${220 + i * 30})`, flexShrink: 0 }}>
                  {img && <img src={img} alt={name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />}
                </div>
                <div style={{ color: "var(--ink-0)", fontWeight: 600, fontSize: 16 }}>{name}</div>
                <div className="t-mono-label" style={{ marginTop: 4, color: "var(--acc)", fontSize: 10 }}>{role}</div>
                <p className="t-body" style={{ color: "var(--ink-2)", marginTop: 12, fontSize: 14 }}>{bio}</p>
              </div>
            ))}
          </div>
          <div style={{ paddingBottom: 8 }}>
            <button className="btn btn-ghost" style={{ marginTop: 8 }} onClick={() => setRoute("about")}>
              Full team bios →
            </button>
          </div>
        </div>
      </section>

      {/* —— TIRED —— */}
      <section className="tired">
        <div className="container">
          <div className="tired-block">
            <span className="t-mono-label" style={{ color: "var(--acc)" }}>// THE PITCH</span>
            <h2 className="t-display" style={{ marginTop: 16, fontSize: "clamp(40px, 5.5vw, 80px)", maxWidth: 1100 }}>
              Tired of fake social media traders flashing cars and fake bankrolls? <span className="t-serif-italic" style={{ color: "var(--acc)" }}>So are we.</span>
            </h2>
            <p className="t-lede" style={{ marginTop: 32, maxWidth: 760 }}>
              All they're trying to do is sell you a dream and a course — making themselves successful, not you.
              For 13 years we've been NYC's premier trading academy, helping traders learn many corners of the market.
            </p>
            <div className="tired-week">
              <div className="t-mono-label">IN THAT WEEK YOU GET</div>
              <ul>
                <li>One 60-minute private session with a trading professional</li>
                <li>Related material that corresponds to the session</li>
                <li>Weekly support from your mentor</li>
                <li>Access to TraderDaddy community WhatsApp &amp; Discord groups</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* —— BOOKS —— */}
      <section className="books">
        <div className="container">
          <div className="books-grid">
            <div>
              <span className="t-mono-label">// LIBRARY</span>
              <h2 className="t-h2" style={{ marginTop: 12 }}>
                Our books, <span className="t-serif-italic">on Amazon.</span>
              </h2>
              <p className="t-lede" style={{ marginTop: 20, maxWidth: 460 }}>
                Two books from the team — covering technical foundations and trader's mindset.
                Useful with the program. Useful without.
              </p>
            </div>
            <div className="book-list">
              {[
                { img: "media/photo-1.webp", title: "A Student's Guide: Investment Strategies in the Foreign Exchange Market", author: "The Foreign Exchange Trading Academy", sub: "Forex fundamentals & strategy", link: "https://www.amazon.com/Students-Guide-Investment-Strategies-Exchange/dp/1537683896/" },
                { img: "media/photo-2.webp", title: "Must-Know Chart Set-Ups In The Foreign Exchange Market", author: "The Foreign Exchange Trading Academy", sub: "Technical analysis deep-dive", link: "https://www.amazon.com/Students-Guide-Must-Know-Set-Ups-Exchange-ebook/dp/B01N0614O7/" },
              ].map((b, i) => (
                <a key={i} href={b.link} target="_blank" rel="noopener noreferrer" className="book-card">
                  <div className="book-cover" style={{ overflow: "hidden", borderRadius: "var(--r-2)", border: "1px solid var(--line)" }}>
                    <img src={b.img} alt={b.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                  </div>
                  <div style={{ marginTop: 16 }}>
                    <div style={{ color: "var(--ink-0)", fontSize: 15, lineHeight: 1.3 }}>{b.title}</div>
                    <div className="t-mono" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 6, letterSpacing: "0.05em" }}>
                      {b.author.toUpperCase()} · {b.sub.toUpperCase()}
                    </div>
                    <div className="t-mono" style={{ fontSize: 12, color: "var(--acc)", marginTop: 12, letterSpacing: "0.05em" }}>BUY ON AMAZON →</div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* —— TESTIMONIALS —— */}
      <section className="testimonials">
        <div className="container">
          <div className="section-head">
            <span className="t-mono-label">// 05 — WORDS FROM THE ROOM</span>
            <h2 className="t-h2" style={{ marginTop: 12, maxWidth: 720 }}>
              The people who <span className="t-serif-italic">showed up.</span>
            </h2>
            <button className="btn btn-ghost" style={{ marginTop: 20 }} onClick={() => setRoute("reviews")}>
              See all reviews →
            </button>
          </div>
          <div className="testimonials-grid">
            {[
              { q: "I had been losing money for two years before this. The mentorship gave me one process to be good at — and I finally got good at it.", n: "Marcus L.", r: "Equities, part-time", from: "Brooklyn, NY" },
              { q: "It's not a pump room. It's people watching levels, talking through setups, owning their losses. That's what I needed.", n: "Priya S.", r: "Futures · ES/NQ", from: "London, UK" },
              { q: "Daniel and Philip changed how I journal. I went from blaming the market to fixing my process — which was the whole unlock.", n: "Diego R.", r: "Forex swing", from: "Mexico City" },
              { q: "The WhatsApp is the part nobody else has. Real questions, real answers, no gurus posting Lambos.", n: "Aisha B.", r: "Options, beginner", from: "Toronto, ON" },
              { q: "I came in cocky after a hot streak. Brandon basically saved me from blowing up. I needed someone to tell me the truth.", n: "Jonas K.", r: "Crypto · BTC/ETH", from: "Berlin, DE" },
              { q: "Showed up to one NYC meetup as a guest. Joined that night. These are real people, not avatars.", n: "Cassandra T.", r: "Equities · day", from: "Jersey City, NJ" },
            ].map((t, i) => (
              <figure key={i} className="testimonial">
                <div className="t-mono-label" style={{ color: "var(--gold)" }}>★ ★ ★ ★ ★</div>
                <blockquote className="t-h3" style={{ marginTop: 20, fontWeight: 400, lineHeight: 1.35, fontSize: 18 }}>
                  "{t.q}"
                </blockquote>
                <figcaption className="testimonial-foot">
                  <div className="testimonial-avatar" style={{ background: `oklch(${40 + i * 5}% 0.10 ${220 + i * 30})` }}/>
                  <div>
                    <div style={{ color: "var(--ink-0)", fontSize: 14 }}>{t.n}</div>
                    <div className="t-mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{t.r} · {t.from}</div>
                  </div>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* —— LETTER FROM DANIEL —— */}
      <section className="letter">
        <div className="container">
          <div className="letter-block">
            <div className="letter-meta">
              <span className="t-mono-label">// FROM THE DESK OF DANIEL GRAHAM</span>
              <div className="t-mono" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 8 }}>433 5TH AVE · NEW YORK, NY</div>
            </div>
            <div className="letter-body">
              <p className="t-lede">
                I started trading in 2009. Got my Series 7 the year the market was still cleaning up after the crash.
                Worked at firms where the only way to learn was to sit next to someone who'd done it for twenty years.
              </p>
              <p className="t-lede" style={{ marginTop: 20 }}>
                Most people never get that. They get a course, a Discord they paid $99 for, and a guy in a rented Lamborghini
                telling them they're three trades away from quitting their job. <span className="t-serif-italic" style={{ color: "var(--acc)" }}>That's not what we are.</span>
              </p>
              <p className="t-lede" style={{ marginTop: 20 }}>
                We're a small group of working professionals who decided to teach the way we were taught — by sitting next to you,
                by being available, by being honest when something isn't working.
              </p>
              <div className="letter-sign">
                <div className="t-serif-italic" style={{ fontSize: 36, color: "var(--ink-0)", lineHeight: 1, transform: "rotate(-2deg)" }}>Daniel</div>
                <div className="t-mono" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 12, letterSpacing: "0.08em" }}>DANIEL GRAHAM · CEO · TRADERDADDY</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* —— FAQ —— */}
      <section>
        <div className="container">
          <div className="section-head">
            <span className="t-mono-label">// 06 — QUESTIONS</span>
            <h2 className="t-h2" style={{ marginTop: 12 }}>Things people ask before joining.</h2>
          </div>
          <div className="faq">
            {[
              ["Is this a course or a community?", "Both — but mostly a community. You get access to live sessions, mentors, and a private WhatsApp + Discord. There's structured learning, but the real value is the conversation and direct access."],
              ["Do you give signals?", "No. We share live setups and reasoning so you can learn the why, not copy the what. Signals don't make traders — practice and process do."],
              ["What markets do you cover?", "Futures, Forex, Equities, and Crypto. Same discipline across all four. Many members start in one and expand."],
              ["Is this for beginners?", "Yes — we tailor sessions to your level. We have brand-new traders and Wall Street pros in the same community. The mentors meet you where you are."],
              ["How do I join?", "Fill out the contact form. We have a brief intake call to make sure it's a fit, then you're in. We keep the community small enough to actually know each other."],
            ].map(([q, a], i) => (
              <details key={i} className="faq-item">
                <summary>
                  <span style={{ color: "var(--ink-0)" }}>{q}</span>
                  <span className="faq-plus" aria-hidden>+</span>
                </summary>
                <p className="t-body" style={{ color: "var(--ink-2)", marginTop: 16, maxWidth: 720 }}>{a}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* —— CTA —— */}
      <section>
        <div className="container">
          <div className="cta-block">
            <div className="cta-bg-grid" aria-hidden></div>
            <span className="t-mono-label" style={{ color: "var(--acc)" }}>// READY?</span>
            <h2 className="t-display" style={{ marginTop: 16, fontSize: "clamp(48px, 6vw, 96px)" }}>
              Come trade with <span className="t-serif-italic">people who get it.</span>
            </h2>
            <p className="t-lede" style={{ marginTop: 24, maxWidth: 560, marginInline: "auto" }}>
              We keep the room small. Get in touch and we'll set up a brief intake call.
            </p>
            <div className="row gap-3 center" style={{ marginTop: 40, justifyContent: "center" }}>
              <button className="btn btn-primary" onClick={() => setRoute("contact")}>Get in touch</button>
              <a className="btn btn-ghost" href="https://calendly.com/thetraderdaddy1/10min" target="_blank" rel="noopener noreferrer">
                Book a free 10-minute call →
              </a>
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}

window.HomePage = HomePage;