// Lumen — Marketing landing page
function MarketingPage({ onCTA, onSignIn }) {
  const D = window.LUMEN_DATA;
  return (
    <div className="mkt">
      {/* Nav */}
      <nav className="mkt__nav">
        <div className="row" style={{ gap: 10 }}>
          <div className="sidebar__logo" style={{ width: 30, height: 30 }}>L</div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 17, letterSpacing: "-0.02em" }}>Lumen</div>
          <span className="badge" style={{ marginLeft: 6 }}>Beta</span>
        </div>
        <div className="row" style={{ gap: 24, fontSize: 13, color: "var(--ink-2)" }}>
          <a>Product</a><a>Templates</a><a>Pricing</a><a>Customers</a><a>Changelog</a>
        </div>
        <div className="row" style={{ gap: 8 }}>
          <button className="btn btn--ghost btn--sm" onClick={onSignIn}>Sign in</button>
          <button className="btn btn--primary btn--sm" onClick={onCTA}>Start free <I.arrowRight size={14}/></button>
        </div>
      </nav>

      {/* Hero */}
      <section className="mkt__hero">
        <div className="mkt__eyebrow">
          <span className="live-dot" style={{ background: "var(--accent)" }}></span>
          New · Cohort tools, AI lesson outliner, Stripe Tax
        </div>
        <h1 className="mkt__title">
          The course platform<br/>
          <span className="serif" style={{ fontStyle: "italic" }}>creators</span> actually ship on.
        </h1>
        <p className="mkt__sub">
          Build, sell, and run your course business from one place. Sales pages, drip schedules,
          quizzes, payments, analytics — without ten disconnected tools.
        </p>
        <div className="mkt__cta">
          <button className="btn btn--primary btn--lg" onClick={onCTA}>Start free for 14 days <I.arrowRight size={16}/></button>
          <button className="btn btn--secondary btn--lg" onClick={onSignIn}><I.playOutline size={14}/> Watch a 90-sec tour</button>
        </div>
        <div style={{ fontSize: 12, color: "var(--ink-3)" }}>
          No credit card · 0% transaction fees on Pro · Cancel anytime
        </div>

        {/* Hero product shot */}
        <div style={{ marginTop: 56 }}>
          <ProductShot/>
        </div>

        {/* Logos */}
        <div style={{ marginTop: 56, paddingTop: 32, borderTop: "1px solid var(--border)" }}>
          <div style={{ fontSize: 11, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 16 }}>
            Trusted by 12,400+ creators · $84M+ in course sales
          </div>
          <div style={{ display: "flex", gap: 48, justifyContent: "center", alignItems: "center", flexWrap: "wrap", opacity: 0.6 }}>
            {["WORKSHOP", "Refold", "stacked.", "Mira Studio", "Klein·Co", "Atrium"].map(n => (
              <div key={n} style={{ fontFamily: "var(--font-display)", fontSize: 16, letterSpacing: "-0.02em", fontWeight: 500 }}>{n}</div>
            ))}
          </div>
        </div>
      </section>

      {/* Features grid */}
      <section className="mkt__section">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "end", marginBottom: 48 }}>
          <h2>Run the whole<br/><span className="serif" style={{ fontStyle: "italic" }}>operation</span> from one tab.</h2>
          <p className="muted" style={{ fontSize: 16, lineHeight: 1.6, maxWidth: 480 }}>
            Most creators duct-tape together five tools to launch a course. Lumen replaces them with a
            single, fast, opinionated workspace that knows how course businesses actually work.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--border)", border: "1px solid var(--border)", borderRadius: "var(--r-xl)", overflow: "hidden" }}>
          {[
            { icon: "layers", title: "Course builder", body: "Drag-and-drop modules, drip schedules, video, text, quizzes, and downloads — all in one editor." },
            { icon: "cash", title: "Built-in checkout", body: "Stripe-powered, with subscriptions, payment plans, bundles, coupons and Stripe Tax. 0% platform fees on Pro." },
            { icon: "bar", title: "Real analytics", body: "Watch-time heatmaps, lesson drop-off curves, cohort retention and revenue cohorts. Not just pageviews." },
            { icon: "users", title: "Cohort tools", body: "Run live cohorts alongside on-demand: sessions, attendance, breakouts, drip unlocks per cohort." },
            { icon: "sparkle", title: "AI assistants", body: "Outline a course from a transcript, draft lesson summaries, auto-generate quiz questions and chapters." },
            { icon: "globe", title: "Sites & SEO", body: "Sales pages, course pages, custom domain, blog, and a static-fast public site — no Webflow needed." },
          ].map(f => (
            <div key={f.title} style={{ background: "var(--bg)", padding: "32px 28px" }}>
              <div style={{ width: 36, height: 36, background: "var(--bg-sunken)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
                {React.createElement(I[f.icon], { size: 18 })}
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 6 }}>{f.title}</div>
              <div style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.55 }}>{f.body}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Analytics-rich callout */}
      <section className="mkt__section" style={{ paddingTop: 0 }}>
        <div style={{ background: "var(--ink)", color: "var(--bg)", borderRadius: "var(--r-2xl)", padding: "64px 56px", display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 56, alignItems: "center" }}>
          <div>
            <div style={{ fontSize: 12, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 16 }}>Analytics, but actually useful</div>
            <h2 style={{ color: "var(--bg)", fontSize: 44, lineHeight: 1.05, marginBottom: 20 }}>
              See <span className="serif" style={{ fontStyle: "italic" }}>where</span> students drop off. Fix it on Tuesday.
            </h2>
            <p style={{ color: "rgba(255,255,255,.7)", fontSize: 16, lineHeight: 1.6, marginBottom: 24 }}>
              Lesson-level watch heatmaps. Cohort retention curves. Quiz item analysis.
              Funnel from visitor → buyer → completer. Built-in, no Mixpanel required.
            </p>
            <button className="btn btn--lg" style={{ background: "var(--bg)", color: "var(--ink)" }} onClick={onCTA}>
              See your numbers <I.arrowRight size={14}/>
            </button>
          </div>
          <div style={{ background: "rgba(255,255,255,.04)", border: "1px solid rgba(255,255,255,.1)", borderRadius: "var(--r-xl)", padding: 24 }}>
            <FakeAnalyticsPanel/>
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section className="mkt__section">
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <h2 style={{ marginBottom: 12 }}>Pricing that scales with you.</h2>
          <p className="muted" style={{ fontSize: 16, maxWidth: 540, margin: "0 auto" }}>
            14-day free trial. No credit card. Switch tiers anytime.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, maxWidth: 1080, margin: "0 auto" }}>
          {[
            { name: "Starter", price: 39, sub: "For your first launch", feats: ["Up to 3 courses", "1,000 students", "Basic analytics", "5% platform fee", "Email support"] },
            { name: "Pro", price: 99, sub: "Most creators land here", popular: true, feats: ["Unlimited courses", "Unlimited students", "Full analytics suite", "0% platform fee", "Cohort tools", "Custom domain", "Priority support"] },
            { name: "Studio", price: 299, sub: "For teams & agencies", feats: ["Everything in Pro", "Up to 10 team seats", "Custom roles & SSO", "Branded mobile app", "API access", "Dedicated CSM"] },
          ].map(t => (
            <div key={t.name} className="card card__pad" style={{ position: "relative", padding: 28, ...(t.popular ? { borderColor: "var(--ink)", borderWidth: 2 } : {}) }}>
              {t.popular && <div className="badge badge--ink" style={{ position: "absolute", top: -10, left: 24 }}>Most popular</div>}
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 20 }}>{t.name}</div>
              <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>{t.sub}</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 4, margin: "20px 0" }}>
                <span style={{ fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 600, letterSpacing: "-0.04em" }}>${t.price}</span>
                <span className="muted" style={{ fontSize: 13 }}>/mo</span>
              </div>
              <button className={`btn ${t.popular ? "btn--primary" : "btn--secondary"} btn--lg`} style={{ width: "100%", justifyContent: "center", marginBottom: 24 }} onClick={onCTA}>
                Start free trial
              </button>
              {t.feats.map(f => (
                <div key={f} className="row" style={{ fontSize: 13, color: "var(--ink-2)", marginBottom: 10 }}>
                  <I.check size={14}/> {f}
                </div>
              ))}
            </div>
          ))}
        </div>
      </section>

      {/* Footer */}
      <footer style={{ borderTop: "1px solid var(--border)", padding: "32px 32px 48px", maxWidth: 1280, margin: "0 auto" }}>
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start", gap: 32 }}>
          <div style={{ maxWidth: 320 }}>
            <div className="row" style={{ gap: 10, marginBottom: 12 }}>
              <div className="sidebar__logo" style={{ width: 28, height: 28 }}>L</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16 }}>Lumen</div>
            </div>
            <div className="muted" style={{ fontSize: 13 }}>Course platform for creators who actually ship. Made in Brooklyn & Lisbon.</div>
          </div>
          <div className="row" style={{ gap: 64, alignItems: "flex-start" }}>
            {[
              ["Product", ["Course builder", "Checkout", "Cohorts", "Analytics", "AI"]],
              ["Resources", ["Docs", "Templates", "Changelog", "API", "Status"]],
              ["Company", ["About", "Customers", "Careers", "Press", "Contact"]],
            ].map(([title, items]) => (
              <div key={title}>
                <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--ink-3)", marginBottom: 12, fontWeight: 600 }}>{title}</div>
                <div className="col" style={{ gap: 8, fontSize: 13 }}>
                  {items.map(i => <a key={i}>{i}</a>)}
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="row" style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--border)", justifyContent: "space-between", fontSize: 12, color: "var(--ink-3)" }}>
          <div>© 2026 Lumen Labs, Inc.</div>
          <div className="row" style={{ gap: 16 }}><a>Privacy</a><a>Terms</a><a>Security</a></div>
        </div>
      </footer>
    </div>
  );
}

function ProductShot() {
  const D = window.LUMEN_DATA;
  return (
    <div className="browser-frame" style={{ maxWidth: 1080, margin: "0 auto", textAlign: "left" }}>
      <div className="browser-frame__bar">
        <div className="browser-frame__dot"></div>
        <div className="browser-frame__dot"></div>
        <div className="browser-frame__dot"></div>
        <div style={{ marginLeft: 16, padding: "4px 10px", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 4, fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>
          studio.lumen.app/courses
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", minHeight: 480 }}>
        <div style={{ background: "var(--bg-elev)", padding: 16, borderRight: "1px solid var(--border)" }}>
          <div className="row" style={{ marginBottom: 18 }}>
            <div className="sidebar__logo" style={{ width: 22, height: 22, fontSize: 12 }}>L</div>
            <div style={{ fontWeight: 600, fontSize: 13 }}>Lumen</div>
          </div>
          {[
            { i: "home", l: "Overview", on: true },
            { i: "users", l: "Students" },
            { i: "cash", l: "Revenue" },
            { i: "layers", l: "Course builder" },
            { i: "book", l: "My courses" },
            { i: "bar", l: "Analytics" },
          ].map(it => (
            <div key={it.l} className={`navitem ${it.on ? "navitem--active" : ""}`} style={{ height: 28, fontSize: 12 }}>
              {React.createElement(I[it.i], { size: 14 })} {it.l}
            </div>
          ))}
        </div>
        <div style={{ padding: 24 }}>
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 18 }}>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" }}>Good morning, Mara</div>
              <div className="muted" style={{ fontSize: 12 }}>Here's what happened in your studio overnight</div>
            </div>
            <div className="row">
              <button className="btn btn--secondary btn--sm">Last 30 days <I.chevDown size={12}/></button>
              <button className="btn btn--primary btn--sm"><I.plus size={12}/> New course</button>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginBottom: 14 }}>
            {[
              { l: "MRR", v: "$48,210", d: "+12.4%", up: true, spark: D.REVENUE_30D },
              { l: "Students", v: "4,218", d: "+218", up: true, spark: D.ENROLLMENTS_12W },
              { l: "Completion", v: "62%", d: "+3.1%", up: true, spark: [40,42,48,52,54,58,60,62] },
              { l: "Refund rate", v: "1.2%", d: "−0.4%", up: true, spark: [3,2.8,2.5,2.2,1.9,1.6,1.4,1.2] },
            ].map(s => (
              <div key={s.l} style={{ border: "1px solid var(--border)", borderRadius: 8, padding: "10px 12px" }}>
                <div style={{ fontSize: 10, color: "var(--ink-3)" }}>{s.l}</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600, letterSpacing: "-0.02em" }}>{s.v}</div>
                <div style={{ fontSize: 10, color: "var(--green)" }}>{s.d}</div>
                <Sparkline data={s.spark} width={140} height={20} color="var(--ink)" />
              </div>
            ))}
          </div>
          <div style={{ border: "1px solid var(--border)", borderRadius: 8, padding: 16 }}>
            <div className="row" style={{ marginBottom: 8, justifyContent: "space-between" }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>Revenue · last 30 days</div>
              <span className="badge badge--green badge--dot">Live</span>
            </div>
            <AreaChart data={D.REVENUE_30D} labels={D.REVENUE_LABELS} height={140} format={v => "$"+v.toLocaleString()}/>
          </div>
        </div>
      </div>
    </div>
  );
}

function FakeAnalyticsPanel() {
  // a small heat-strip + retention curve
  const heat = Array.from({ length: 60 }, (_, i) => {
    let v = 0.5 + 0.3 * Math.sin(i / 8);
    if (i > 12 && i < 20) v += 0.3;
    if (i > 38 && i < 46) v -= 0.4;
    return Math.max(0.05, Math.min(1, v));
  });
  const retention = [100, 96, 88, 76, 67, 60, 54, 48, 44, 41, 38];
  return (
    <div>
      <div style={{ fontSize: 12, color: "rgba(255,255,255,.6)", marginBottom: 8, textTransform: "uppercase", letterSpacing: "0.08em" }}>Lesson watch heatmap · Module 2 · Lesson 4</div>
      <div style={{ display: "flex", gap: 1, height: 32, marginBottom: 4 }}>
        {heat.map((v, i) => (
          <div key={i} style={{ flex: 1, background: `color-mix(in srgb, var(--accent) ${(v*100).toFixed(0)}%, transparent)`, borderRadius: 1 }}/>
        ))}
      </div>
      <div className="row" style={{ justifyContent: "space-between", fontSize: 10, color: "rgba(255,255,255,.5)", fontFamily: "var(--font-mono)" }}>
        <span>0:00</span><span>10:30 — 53% rewatched</span><span>21:00</span>
      </div>
      <div style={{ marginTop: 24, fontSize: 12, color: "rgba(255,255,255,.6)", marginBottom: 12, textTransform: "uppercase", letterSpacing: "0.08em" }}>
        Cohort retention · 6 cohorts overlay
      </div>
      <svg viewBox="0 0 400 140" width="100%" height="140">
        {[0, 25, 50, 75, 100].map(p => (
          <line key={p} x1="0" y1={140 - (p/100)*120 - 10} x2="400" y2={140 - (p/100)*120 - 10} stroke="rgba(255,255,255,.1)" strokeDasharray="2 4"/>
        ))}
        {[0.4, 0.6, 0.8, 1].map((alpha, idx) => {
          const pts = retention.map((v, i) => `${(i / (retention.length - 1)) * 400},${140 - (v/100)*120 - 10 + (idx-1.5) * 4}`).join(" ");
          return <polyline key={idx} fill="none" stroke="var(--accent)" strokeOpacity={alpha} strokeWidth="1.5" points={pts}/>;
        })}
      </svg>
    </div>
  );
}

window.MarketingPage = MarketingPage;