/* global React */

function BootcampPage({ setRoute }) {
  const modules = [
    ["Options Fundamentals That Actually Work", ["Calls and puts in plain English","How and when to use each strategy","Strike, expiry, and breakeven mechanics","Live execution on a real Apple stock trade"]],
    ["Moving Averages for Consistent Profits", ["20, 50, and 200-day moving averages decoded","Golden cross vs death cross signals","Support and resistance the way actually works","When to enter and exit using moving averages"]],
    ["Professional Research Tools", ["Stock screeners we use to find ideas every morning","How to spot trades and read analyst reports","Using resources to find the next mover"]],
    ["Chart Patterns That Print Money", ["Flag, channel, wedge, and breakout reads","Volume and price-action strategies","How to identify patterns early and exit clean"]],
    ["Options Pricing & Time-Decay Mastery", ["Using IV and Vega for swing trading","Delta, theta, and gamma in practice","Using puts as a hedge strategy"]],
    ["Earnings Season Gold Mine", ["Pre-earnings setups we run every quarter","How and when to use a covered call","The 'magic' moments — playing earnings on cue"]],
    ["Your Complete Trading System", ["Step-by-step everything covered","Risk management rules: how much to risk per trade","Trade journal templates and checklists"]],
  ];

  return (
    <div className="page">

      {/* —— HERO —— */}
      <section className="bc-hero">
        <div className="bc-hero-bg" aria-hidden></div>
        <div className="container bc-hero-inner">
          <span className="t-mono-label" style={{ color: "var(--acc)" }}>// 7-HOUR INTENSIVE</span>
          <h1 className="t-display bc-title">
            Go from <span className="t-serif-italic">trading newbie</span><br/>
            to <span className="t-serif-italic" style={{ color: "var(--acc)" }}>intermediate trader</span><br/>
            in just 7 hours.
          </h1>
          <p className="t-lede bc-sub">
            Master stocks &amp; options trading with proven strategies that actually work.
            Join our intensive Saturday bootcamp and learn what takes most traders years to figure out.
          </p>
          <div className="bc-next">
            <span className="t-mono-label">NEXT BOOTCAMP</span>
            <span style={{ color: "var(--ink-0)", fontSize: 18 }}>January <span className="t-serif-italic" style={{ color: "var(--acc)" }}>(date TBD)</span></span>
            <span className="bc-next-tag">Limited seats</span>
          </div>
          <div className="row gap-3 wrap" style={{ marginTop: 32 }}>
            <button className="btn btn-primary btn-lg" onClick={() => setRoute("contact")}>Reserve your spot →</button>
            <a className="btn btn-ghost btn-lg" href="https://calendly.com/thetraderdaddy1/10min" target="_blank" rel="noopener noreferrer">Book a free 10-minute call</a>
          </div>
          <div className="bc-trust-row">
            <GoogleBadge />
          </div>
        </div>
      </section>

      {/* —— INVESTMENT + GUARANTEE —— */}
      <section style={{ padding: "80px 0" }}>
        <div className="container">
          <div className="bc-money-grid">
            <div className="bc-money-card">
              <div className="t-mono-label" style={{ color: "var(--acc)" }}>// INVESTMENT</div>
              <div className="bc-price">
                <span className="bc-price-num">$1,649</span>
                <span className="bc-price-unit">complete 7-hour program</span>
              </div>
              <div className="bc-bonus">
                <span className="t-mono-label" style={{ color: "var(--gold)" }}>BONUS INCLUDED</span>
                <span style={{ color: "var(--ink-0)", fontSize: 15, marginTop: 4 }}>1-month premium group access (worth $99)</span>
              </div>
              <div className="bc-when">
                <div className="t-mono-label">DATE TBD · 9:00 AM – 4:00 PM</div>
                <div style={{ marginTop: 8, color: "var(--ink-1)" }}>TraderDaddy HQ · 433 5th Avenue, New York, NY</div>
                <div className="t-mono" style={{ marginTop: 6, color: "var(--ink-3)", fontSize: 12 }}>Lunch included</div>
              </div>
            </div>
            <div className="bc-guarantee">
              <div className="bc-guarantee-mark">
                <svg viewBox="0 0 24 24" width="32" height="32" fill="none">
                  <path d="M12 2 L4 6 V12 C4 17 8 21 12 22 C16 21 20 17 20 12 V6 L12 2 Z" stroke="currentColor" strokeWidth="1.5"/>
                  <path d="M8 12 L11 15 L16 9" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <h3 className="t-h3" style={{ marginTop: 16 }}>No-risk learning guarantee.</h3>
              <p style={{ marginTop: 16, color: "var(--ink-1)" }}>
                If you attend the complete program and still don't have a clear, profitable system,
                we'll work with you one-on-one until you do.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* —— CURRICULUM —— */}
      <section className="bc-modules">
        <div className="container">
          <div className="section-head">
            <span className="t-mono-label">// CURRICULUM</span>
            <h2 className="t-h2" style={{ marginTop: 12 }}>What you'll master <span className="t-serif-italic">in 7 hours.</span></h2>
          </div>
          <div className="bc-module-grid">
            {modules.map(([title, items], i) => (
              <div key={i} className="bc-module">
                <div className="bc-module-num t-mono-label">{String(i + 1).padStart(2, "0")}</div>
                <h4 className="bc-module-title">{title}</h4>
                <ul className="bc-module-list">
                  {items.map((it, j) => (
                    <li key={j}><span className="bc-check">✓</span><span>{it}</span></li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* —— STUDENT TESTIMONIAL VIDEOS —— */}
      <section className="bc-results">
        <div className="container">
          <div className="section-head">
            <span className="t-mono-label">// SEE WHAT OUR STUDENTS ARE SAYING</span>
            <h2 className="t-h2" style={{ marginTop: 12 }}>
              Real students. <span className="t-serif-italic">Real results.</span>
            </h2>
            <p className="t-lede" style={{ marginTop: 16, maxWidth: 600 }}>
              Hear directly from bootcamp graduates about what changed for them.
            </p>
          </div>

          <div className="bc-testimonial-vids">
            {/* Ben Video */}
            <div className="bc-student-vid">
              <div className="bc-student-vid-frame">
                <video
                  src="media/ben-video.mp4"
                  controls
                  playsInline
                  style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", borderRadius: "inherit" }}
                />
              </div>
              <div className="bc-student-vid-meta">
                <div className="t-mono-label" style={{ color: "var(--acc)" }}>// STUDENT SPOTLIGHT</div>
                <div style={{ color: "var(--ink-0)", fontSize: 20, fontWeight: 500, marginTop: 10 }}>Ben's Story</div>
                <p style={{ color: "var(--ink-2)", marginTop: 10, fontSize: 15, lineHeight: 1.55 }}>
                  How the bootcamp helped Ben go from confusion to a consistent trading system he trusts.
                </p>
              </div>
            </div>

            {/* Shayla Video */}
            <div className="bc-student-vid">
              <div className="bc-student-vid-frame">
                <video
                  src="media/shayla-video.mp4"
                  controls
                  playsInline
                  style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", borderRadius: "inherit" }}
                />
              </div>
              <div className="bc-student-vid-meta">
                <div className="t-mono-label" style={{ color: "var(--acc)" }}>// STUDENT SPOTLIGHT</div>
                <div style={{ color: "var(--ink-0)", fontSize: 20, fontWeight: 500, marginTop: 10 }}>Shayla's Story</div>
                <p style={{ color: "var(--ink-2)", marginTop: 10, fontSize: 15, lineHeight: 1.55 }}>
                  Shayla shares how the 7-hour intensive gave her clarity on options she never had before.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* —— QUOTE —— */}
      <section style={{ padding: "100px 0", background: "var(--bg-1)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container" style={{ maxWidth: 900, textAlign: "center" }}>
          <span className="t-mono-label">// QUOTED</span>
          <blockquote className="t-display" style={{ marginTop: 24, fontSize: "clamp(32px, 4vw, 56px)", lineHeight: 1.15 }}>
            <span className="t-serif-italic" style={{ color: "var(--gold)" }}>"</span>
            The stock market is filled with individuals who know the price of everything, but the value of <span className="t-serif-italic">nothing.</span>
            <span className="t-serif-italic" style={{ color: "var(--gold)" }}>"</span>
          </blockquote>
          <div className="t-mono" style={{ marginTop: 24, color: "var(--ink-3)", letterSpacing: "0.05em" }}>— WARREN BUFFETT</div>
        </div>
      </section>

      {/* —— FINAL CTA —— */}
      <section className="bc-cta">
        <div className="container">
          <div className="bc-cta-block">
            <span className="t-mono-label" style={{ color: "var(--acc)" }}>// READY?</span>
            <h2 className="t-display" style={{ marginTop: 16, fontSize: "clamp(40px, 5vw, 72px)" }}>
              Ready to get these <span className="t-serif-italic">same results?</span>
            </h2>
            <p className="t-lede" style={{ marginTop: 24, maxWidth: 580, marginInline: "auto" }}>
              Join our next intensive bootcamp. Limited seats — most cohorts close two weeks early.
            </p>
            <div className="row gap-3 center" style={{ marginTop: 40, justifyContent: "center" }}>
              <button className="btn btn-primary btn-lg" onClick={() => setRoute("contact")}>Reserve my spot →</button>
              <a className="btn btn-ghost btn-lg" href="https://calendly.com/thetraderdaddy1/10min" target="_blank" rel="noopener noreferrer">Book a free 10-min call</a>
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}

window.BootcampPage = BootcampPage;