// Sections — composable page parts. All read from window globals (Frank, AppMock).

// ─── Icons (simple shapes only — no hand-drawn illustrations) ───────────────
const Icon = {
  grammar: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7h16M4 12h10M4 17h16"/><circle cx="19" cy="12" r="2" fill="currentColor" stroke="none"/></svg>
  ),
  vocab: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M8 4v16M3 8h5M3 12h5M3 16h5"/></svg>
  ),
  reading: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 5c3-1.5 6-1.5 9 0v14c-3-1.5-6-1.5-9 0zM21 5c-3-1.5-6-1.5-9 0v14c3-1.5 6-1.5 9 0z"/></svg>
  ),
  listening: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 14V11a8 8 0 0116 0v3"/><rect x="2" y="13" width="5" height="7" rx="1.5"/><rect x="17" y="13" width="5" height="7" rx="1.5"/></svg>
  ),
  speaking: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0014 0M12 18v4M8 22h8"/></svg>
  ),
  roleplay: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a5 5 0 015-5h3a5 5 0 015 5v0a5 5 0 01-5 5H8l-3 3v-3a5 5 0 01-2-5z"/><circle cx="16" cy="9" r="3" fill="currentColor" stroke="none" opacity="0.3"/></svg>
  ),
  spark: (<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 0l1.5 4.5L13 6l-4.5 1.5L7 12 5.5 7.5 1 6l4.5-1.5z"/></svg>),
  arrow: (<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7h8M7 3l4 4-4 4"/></svg>),
};

// ─── Nav ────────────────────────────────────────────────────────────────────
function Nav() {
  return (
    <header className="nav" data-screen-label="Nav">
      <div className="wrap nav-inner">
        <a className="brand" href="#">
          <span className="brand-mark">
            <FrankMark size={26} />
          </span>
          Frankly English
        </a>
        <nav className="nav-links">
          <a href="#features">Features</a>
          <a href="#how">How it works</a>
          <a href="#topics">Topics</a>
          <a href="#community">Community</a>
        </nav>
        <div className="nav-cta">
          <a className="btn btn-ghost" href="/login" style={{ padding: "9px 16px", fontSize: 14 }}>Log in</a>
          <a className="btn btn-primary" href="/signup" style={{ padding: "9px 16px", fontSize: 14 }}>Start free</a>
        </div>
      </div>
    </header>
  );
}

// ─── Hero ──────────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="hero wrap" data-screen-label="Hero" style={{ padding: "72px 32px 96px" }}>
      <div className="hero-grid">
        <div>
          <div className="eyebrow">
            <span className="eyebrow-dot">{Icon.spark}</span>
            Built for adults learning English
          </div>
          <h1 className="display">
            English that <em>actually</em> sticks — fifteen minutes at a time.
          </h1>
          <p className="lede">
            Six skills, one calm app. Grammar, vocab, reading, listening,
            speaking and roleplay — paced to your CEFR level, gently held
            together by Frank, your AI tutor.
          </p>
          <div className="cta-row">
            <a className="btn btn-primary btn-lg" href="/signup">
              Start learning — it's free
              {Icon.arrow}
            </a>
            <a className="btn btn-ghost btn-lg" href="#how">
              See how it works
            </a>
          </div>
          <div className="hero-meta">
            <div className="avatars">
              <div className="av1"></div>
              <div className="av2"></div>
              <div className="av3"></div>
              <div className="av4"></div>
            </div>
            <span><strong style={{ color: "var(--ink)" }}>32,400+</strong> adult learners</span>
            <span className="hero-meta-dot"></span>
            <span>★★★★★ 4.8</span>
          </div>
        </div>

        <div className="stage">
          <div className="stage-bg"></div>
          <AppMock />
        </div>
      </div>

      <div className="strip">
        <div><div className="strip-n">6</div><div className="strip-l">Skill areas</div></div>
        <div><div className="strip-n">A1 → C2</div><div className="strip-l">CEFR levels covered</div></div>
        <div><div className="strip-n">2,400+</div><div className="strip-l">Lessons & exercises</div></div>
        <div><div className="strip-n">15 min</div><div className="strip-l">Daily commitment</div></div>
      </div>
    </section>
  );
}

// ─── Subjects ──────────────────────────────────────────────────────────────
const SUBJECTS = [
  { key: "grammar",   color: "#4F46E5", grad: "linear-gradient(135deg, #818CF8, #4F46E5)",
    name: "Grammar",   desc: "From present continuous to subjunctive — explained once, practised until it's automatic.",
    pill: "32 units", icon: Icon.grammar },
  { key: "vocab",     color: "#7C3AED", grad: "linear-gradient(135deg, #A78BFA, #7C3AED)",
    name: "Vocabulary", desc: "Spaced repetition + context cards. Words you'll actually use this week, not just remember.",
    pill: "8,500 words", icon: Icon.vocab },
  { key: "reading",   color: "#0891B2", grad: "linear-gradient(135deg, #22D3EE, #0891B2)",
    name: "Reading",   desc: "Real articles, emails and stories — graded by CEFR level so nothing feels out of reach.",
    pill: "Adaptive", icon: Icon.reading },
  { key: "listening", color: "#EA580C", grad: "linear-gradient(135deg, #FB923C, #EA580C)",
    name: "Listening", desc: "Native speakers at adjustable speeds. Subtitles toggle when you're ready for the leap.",
    pill: "12 accents", icon: Icon.listening },
  { key: "speaking",  color: "#DB2777", grad: "linear-gradient(135deg, #F472B6, #DB2777)",
    name: "Speaking",  desc: "Pronunciation feedback that pinpoints the exact sound to fix — no shame, no scoring out of ten.",
    pill: "Live feedback", icon: Icon.speaking },
  { key: "roleplay",  color: "#059669", grad: "linear-gradient(135deg, #34D399, #059669)",
    name: "Roleplay",  desc: "Practise a job interview, a doctor's visit, a tense meeting. Frank plays the other person.",
    pill: "50+ scenarios", icon: Icon.roleplay },
];

function Subjects() {
  return (
    <section id="features" data-screen-label="Subjects">
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">Six skills, one habit</div>
          <h2 className="section-title">Everything you'd practise in a serious class.</h2>
          <p className="section-sub">Frankly is laid out like a language school — six tracks that build on each other, not a feed of random mini-games.</p>
        </div>

        <div className="subjects">
          {SUBJECTS.map((s) => (
            <div key={s.key} className="subject">
              <div className="subject-glow" style={{ background: s.color }}></div>
              <div className="subject-icon" style={{ background: s.grad, color: s.color }}>
                <span style={{ color: "#fff" }}>{s.icon}</span>
              </div>
              <h3>{s.name}</h3>
              <p>{s.desc}</p>
              <div className="subject-foot">
                <span className="pill" style={{ background: `${s.color}14`, color: s.color }}>{s.pill}</span>
                <strong>Open track</strong>
              </div>
              <div className="subject-arrow">{Icon.arrow}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CEFR ─────────────────────────────────────────────────────────────────
const CEFR_LEVELS = [
  { k: "A1", label: "Beginner" },
  { k: "A2", label: "Elementary" },
  { k: "B1", label: "Intermediate" },
  { k: "B2", label: "Upper-int." },
  { k: "C1", label: "Advanced" },
  { k: "C2", label: "Mastery" },
];

function CEFR({ current = 2 }) {
  return (
    <section data-screen-label="CEFR">
      <div className="wrap">
        <div className="cefr-card">
          <div className="cefr-grid">
            <div>
              <div className="section-eyebrow" style={{ marginBottom: 8 }}>CEFR-aligned</div>
              <h2 className="section-title" style={{ fontSize: "clamp(28px, 3.4vw, 40px)", marginBottom: 16 }}>
                Always know where you stand.
              </h2>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", margin: 0, maxWidth: 460 }}>
                Every lesson, story and roleplay is tagged A1 to C2. Your level updates as you go — not by a test, but by what you can actually do.
              </p>

              <div className="cefr-rail">
                <div className="cefr-track"></div>
                <div className="cefr-stops">
                  {CEFR_LEVELS.map((l, i) => (
                    <div key={l.k} className="cefr-stop">
                      <div className={`cefr-dot ${i < current ? "active" : ""} ${i === current ? "current" : ""}`}></div>
                      <span className={`cefr-label ${i === current ? "current" : ""}`}>{l.k}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="cefr-caption">
                <span>Started at A1 · 3 months ago</span>
                <span className="cefr-cap-tag">B1 — 68% to B2</span>
              </div>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <CefrCheck text="Order food, ask for directions, small talk" done />
              <CefrCheck text="Write a clear email about a familiar topic" done />
              <CefrCheck text="Follow a meeting at normal pace" current />
              <CefrCheck text="Defend a position in a discussion" />
              <CefrCheck text="Pick up nuance, irony, dry humour" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CefrCheck({ text, done, current }) {
  const bg = done ? "rgba(5, 150, 105, 0.08)" : current ? "rgba(79, 70, 229, 0.06)" : "rgba(30, 27, 75, 0.03)";
  const color = done ? "#059669" : current ? "#4F46E5" : "rgba(30, 27, 75, 0.25)";
  return (
    <div style={{ display: "flex", gap: 14, alignItems: "center", padding: "14px 18px", background: bg, borderRadius: 14, border: `1px solid ${current ? "rgba(79,70,229,0.18)" : "transparent"}` }}>
      <div style={{ width: 24, height: 24, borderRadius: "50%", background: color, color: "#fff", display: "grid", placeItems: "center", flexShrink: 0, opacity: done || current ? 1 : 0.35 }}>
        {done && <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7l3 3 5-6"/></svg>}
        {current && <svg width="9" height="9" viewBox="0 0 9 9" fill="currentColor"><circle cx="4.5" cy="4.5" r="3.5"/></svg>}
      </div>
      <span style={{ fontSize: 14.5, color: done || current ? "var(--ink)" : "var(--ink-soft)", fontWeight: current ? 600 : 500 }}>{text}</span>
    </div>
  );
}

// ─── Gamification ──────────────────────────────────────────────────────────
function Gamification() {
  return (
    <section data-screen-label="Gamification">
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">Habit, not addiction</div>
          <h2 className="section-title">A daily nudge — without the slot-machine.</h2>
          <p className="section-sub">Just enough rhythm to keep showing up. Lives end the session, not your week. Streaks pause when life gets in the way.</p>
        </div>

        <div className="gam">
          {/* XP */}
          <div className="gam-card">
            <div className="gam-visual">
              <div className="xp-stack">
                <div className="xp-row">
                  <span className="xp-row-l">Mon</span>
                  <div className="xp-bar"><div className="xp-bar-fill" style={{ width: "62%" }}></div></div>
                  <span className="xp-row-v">155</span>
                </div>
                <div className="xp-row">
                  <span className="xp-row-l">Tue</span>
                  <div className="xp-bar"><div className="xp-bar-fill" style={{ width: "82%" }}></div></div>
                  <span className="xp-row-v">205</span>
                </div>
                <div className="xp-row">
                  <span className="xp-row-l">Wed</span>
                  <div className="xp-bar"><div className="xp-bar-fill" style={{ width: "48%" }}></div></div>
                  <span className="xp-row-v">120</span>
                </div>
                <div className="xp-row">
                  <span className="xp-row-l">Thu</span>
                  <div className="xp-bar"><div className="xp-bar-fill" style={{ width: "94%", background: "linear-gradient(90deg, #818CF8, #7C3AED)" }}></div></div>
                  <span className="xp-row-v">240</span>
                </div>
              </div>
            </div>
            <h3>XP that builds.</h3>
            <p>Earn points for every correct answer, perfect lesson and personal best. Goals adapt to how much you actually study.</p>
          </div>

          {/* Lives */}
          <div className="gam-card">
            <div className="gam-visual">
              <div className="hearts">
                {[1,2,3,4,5].map((i) => (
                  <div key={i} className={i <= 3 ? "heart" : "heart gone"}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M12 21s-7-4.5-9.5-9.5C1 7.5 4 4 7.5 4c1.7 0 3.3.9 4.5 2.3C13.2 4.9 14.8 4 16.5 4 20 4 23 7.5 21.5 11.5 19 16.5 12 21 12 21z"/>
                    </svg>
                  </div>
                ))}
              </div>
            </div>
            <h3>Lives, not punishment.</h3>
            <p>Five hearts. Lose one for a careless slip — get them back by reviewing or just waiting. The point is to slow down, not to scare you.</p>
          </div>

          {/* Streak */}
          <div className="gam-card">
            <div className="gam-visual">
              <div className="streak-flame">
                <div style={{ textAlign: "center", position: "relative", zIndex: 1 }}>
                  <div className="streak-num">47</div>
                  <div className="streak-day">days</div>
                </div>
              </div>
            </div>
            <h3>Streaks that forgive.</h3>
            <p>Two pause days a month, no guilt. The streak isn't a chain to lock you in — it's a quiet reminder that you've shown up.</p>
            <div className="streak-week">
              {["M","T","W","T","F","S","S"].map((d, i) => (
                <div key={i} className={`streak-day-dot ${i < 4 ? "done" : i === 4 ? "today" : "future"}`}>{d}</div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── How it works ──────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    { n: "01", t: "Take a 4-minute placement", d: "Frank reads, listens and chats with you to set your starting CEFR level — no test anxiety." },
    { n: "02", t: "Pick what matters this month", d: "Travel for Tokyo? A new job? Just speaking with confidence? Your goal shapes every lesson." },
    { n: "03", t: "Practise 15 min a day", d: "A mix of grammar, vocab, listening, speaking and one roleplay — chosen for where you are right now." },
    { n: "04", t: "Watch the level move", d: "Skills update as you demonstrate them. When B1 becomes B2, you'll know — and so will recruiters." },
  ];
  return (
    <section id="how" data-screen-label="How it works">
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">How it works</div>
          <h2 className="section-title">From hello to fluent — paced honestly.</h2>
          <p className="section-sub">No tricks, no infinite scroll. Just a study plan that fits in a coffee break.</p>
        </div>
        <div className="steps">
          {steps.map((s) => (
            <div key={s.n} className="step">
              <div className="step-n">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Ask Frank ────────────────────────────────────────────────────────────
function AskFrank() {
  return (
    <section data-screen-label="Ask Frank">
      <div className="wrap">
        <div className="frank-grid">
          <div>
            <div className="section-eyebrow" style={{ marginBottom: 8 }}>Ask Frank — your AI tutor</div>
            <h2 className="section-title" style={{ fontSize: "clamp(30px, 3.8vw, 44px)", textAlign: "left" }}>
              The patient explainer in your pocket.
            </h2>
            <p style={{ fontSize: 17, color: "var(--ink-soft)", margin: 0, maxWidth: 460 }}>
              Stuck on a phrasal verb? Want to know why "have had" sounds right? Ask Frank — in English or in your own language. He'll explain like a kind teacher, not a textbook.
            </p>

            <div className="frank-bullets">
              <FrankBullet
                icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9 10a3 3 0 116 0c0 2-3 2-3 4M12 17h.01"/></svg>}
                title="Explains the why"
                body="Not just the rule — the intuition behind it, with examples in your level."
              />
              <FrankBullet
                icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12h6l3-7 4 14 3-7h2"/></svg>}
                title="Listens, then speaks"
                body="Try a sentence out loud. Frank catches the missed sound and shows you the mouth shape."
              />
              <FrankBullet
                icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.4 8.4 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.4 8.4 0 01-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.4 8.4 0 013.8-.9h.5a8.5 8.5 0 018 8z"/></svg>}
                title="Always in context"
                body="He remembers your level, your goal and the last lesson you stumbled on."
              />
            </div>
          </div>

          <div className="chat-card">
            <div className="chat-head">
              <div style={{ width: 40, height: 40, borderRadius: "50%", background: "linear-gradient(135deg, #FBBF24, #F59E0B)", display: "grid", placeItems: "center" }}>
                <Frank size={32} mood="happy" />
              </div>
              <div>
                <div className="chat-head-name">Frank</div>
                <div className="chat-head-status">Online · B1 mode</div>
              </div>
            </div>

            <div className="bubble user">When do I use "had been" vs "was being"?</div>
            <div className="bubble frank">
              Great question. <b>"Had been"</b> = something started earlier and finished before another past moment. <b>"Was being"</b> = something happening <em>during</em> a past moment.
            </div>
            <div className="bubble frank">
              Try this: <em>By 9am the office <b>had been</b> cleaned</em>. <em>At 9am the office <b>was being</b> cleaned</em>. Want a quick 3-question drill?
            </div>
            <div className="bubble user" style={{ background: "rgba(79,70,229,0.08)", color: "var(--indigo-deep)" }}>Yes please 🙂</div>

            <div className="chat-input">
              <span>Ask anything in English or your language…</span>
              <span className="chat-input-send">
                <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FrankBullet({ icon, title, body }) {
  return (
    <div className="frank-bullet">
      <div className="frank-bullet-dot">{icon}</div>
      <div>
        <h4>{title}</h4>
        <p>{body}</p>
      </div>
    </div>
  );
}

// ─── Topics ───────────────────────────────────────────────────────────────
const TOPICS = [
  ["✈️", "Travel"], ["💼", "Work & meetings"], ["🩺", "Health & doctors"],
  ["💻", "Technology"], ["🍽️", "Food & restaurants"], ["🏠", "Home & family"],
  ["💰", "Money & banking"], ["📚", "Education"], ["🎬", "Culture & media"],
  ["🏛️", "News & politics"], ["🌱", "Environment"], ["⚽", "Sports & hobbies"],
  ["💌", "Dating & relationships"], ["🚆", "Cities & directions"], ["🎤", "Interviews"],
];

function Topics() {
  return (
    <section id="topics" data-screen-label="Topics">
      <div className="wrap">
        <div className="topics-card">
          <div style={{ textAlign: "center" }}>
            <div className="section-eyebrow">Topic-based practice</div>
            <h2 className="section-title" style={{ fontSize: "clamp(28px, 3.4vw, 40px)" }}>
              Learn the English you'll use this week.
            </h2>
            <p className="section-sub" style={{ maxWidth: 560, margin: "0 auto" }}>
              Pick a theme. Every lesson — vocab, listening, roleplay — pulls from it, so what you study on Monday is what you say on Tuesday.
            </p>
          </div>
          <div className="topic-grid">
            {TOPICS.map(([e, n]) => (
              <span key={n} className="topic-chip">
                <span className="topic-emoji">{e}</span>
                {n}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Leaderboard ──────────────────────────────────────────────────────────
const LB_ROWS = [
  { rank: 1, name: "Mariana S.", meta: "B2 · Portugal", xp: 4820, av: "linear-gradient(135deg, #F472B6, #DB2777)", you: false },
  { rank: 2, name: "Kenji T.",   meta: "B1 · Japan",    xp: 4205, av: "linear-gradient(135deg, #34D399, #059669)", you: false },
  { rank: 3, name: "You",        meta: "B1 · Germany",  xp: 3940, av: "linear-gradient(135deg, #818CF8, #4F46E5)", you: true  },
  { rank: 4, name: "Ahmed R.",   meta: "A2 · Egypt",    xp: 3812, av: "linear-gradient(135deg, #FBBF24, #EA580C)", you: false },
  { rank: 5, name: "Léa M.",     meta: "B2 · France",   xp: 3104, av: "linear-gradient(135deg, #22D3EE, #0891B2)", you: false },
];

function Leaderboard() {
  return (
    <section id="community" data-screen-label="Leaderboard">
      <div className="wrap">
        <div className="lb-grid">
          <div className="lb-card">
            <div className="lb-head">
              <div>
                <div className="lb-head-title">Weekly Leaderboard · Bronze League</div>
                <div className="lb-head-week" style={{ marginTop: 2 }}>Top 10 promote to Silver · 2 days left</div>
              </div>
              <span className="kbd">Live</span>
            </div>
            {LB_ROWS.map((r) => {
              const rk = r.rank === 1 ? "gold" : r.rank === 2 ? "silver" : r.rank === 3 ? "bronze" : "";
              return (
                <div key={r.rank} className={`lb-row ${r.you ? "you" : ""}`}>
                  <span className={`lb-rank ${rk}`}>{r.rank}</span>
                  <span className="lb-av" style={{ background: r.av }}></span>
                  <div>
                    <div className="lb-name">{r.name}{r.you && <span style={{ color: "var(--indigo)", marginLeft: 6, fontSize: 11, fontWeight: 700 }}>YOU</span>}</div>
                    <div className="lb-meta">{r.meta}</div>
                  </div>
                  <span className="lb-xp">{r.xp.toLocaleString()} XP</span>
                </div>
              );
            })}
          </div>

          <div>
            <div className="section-eyebrow" style={{ marginBottom: 8 }}>Community</div>
            <h2 className="section-title" style={{ fontSize: "clamp(30px, 3.8vw, 44px)", textAlign: "left" }}>
              Friendly competition, not a grind.
            </h2>
            <p style={{ fontSize: 17, color: "var(--ink-soft)", maxWidth: 460, margin: 0 }}>
              Weekly leagues group you with learners at your level, in your timezone. Promote, demote, or just enjoy the rhythm — Frankly never pings you at 11pm to "defend your spot".
            </p>
            <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <FactPill k="32,400+" l="Active weekly" />
              <FactPill k="84 countries" l="Time-zone matched" />
              <FactPill k="0" l="Late-night pings" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FactPill({ k, l }) {
  return (
    <div style={{ padding: "12px 18px", background: "#fff", border: "1px solid var(--line)", borderRadius: 14 }}>
      <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: "-0.015em" }}>{k}</div>
      <div style={{ fontSize: 12, color: "var(--ink-soft)", fontWeight: 500 }}>{l}</div>
    </div>
  );
}

// ─── Final CTA ────────────────────────────────────────────────────────────
function FinalCTA() {
  return (
    <section id="cta" data-screen-label="CTA">
      <div className="wrap">
        <div className="cta-card">
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 28 }}>
            <div style={{ width: 112, height: 112, borderRadius: "50%", background: "linear-gradient(135deg, #FEF3C7, #FDE68A)", display: "grid", placeItems: "center", border: "3px solid rgba(255,255,255,0.35)", boxShadow: "0 18px 40px -12px rgba(0,0,0,0.3)" }}>
              <Frank size={92} mood="happy" />
            </div>
          </div>
          <h2>
            Your <em>fluent self</em><br />is fifteen minutes away.
          </h2>
          <p>
            Start free. No credit card. No childish streaks shouting at you. Just a steady climb, with Frank quietly cheering you on.
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <a className="btn btn-primary btn-lg" href="/signup">
              Start free
              {Icon.arrow}
            </a>
            <a className="btn btn-lg" href="/signup" style={{ background: "rgba(255,255,255,0.1)", color: "#fff", border: "1px solid rgba(255,255,255,0.25)" }}>
              Take the 4-min placement
            </a>
          </div>
          <div className="cta-foot">Free forever for the basics · Cancel anytime on Pro</div>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ───────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="brand" style={{ marginBottom: 14 }}>
              <span className="brand-mark"><FrankMark size={26} /></span>
              Frankly English
            </div>
            <p style={{ margin: 0, maxWidth: 280 }}>The calm English app for adults. CEFR-aligned, AI-supported, made for grown-up schedules.</p>
          </div>
          <div>
            <h5>Product</h5>
            <ul>
              <li><a href="#features">Features</a></li>
              <li><a href="#how">How it works</a></li>
              <li><a href="#topics">Topics</a></li>
              <li><a href="#community">Community</a></li>
            </ul>
          </div>
          <div>
            <h5>Learn</h5>
            <ul>
              <li><a href="#">Placement test</a></li>
              <li><a href="#">CEFR explained</a></li>
              <li><a href="#">Frank's blog</a></li>
              <li><a href="#">For teachers</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="/pricing">Pricing</a></li>
              <li><a href="#">Privacy</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Frankly English. Made with patience.</div>
          <div style={{ display: "flex", gap: 14 }}>
            <a href="#">Terms</a><a href="#">Privacy</a><a href="#">Cookies</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Subjects, CEFR, Gamification, HowItWorks, AskFrank, Topics, Leaderboard, FinalCTA, Footer });