// === Learn promo + Contributors + Testimonials + Pricing + Newsletter + FAQ + Footer ===

const LearnPromo = () => {
  const cards = [
    { cn: "搭子", py: "dāzi" },
    { cn: "班味", py: "bān wèi" },
    { cn: "上头", py: "shàng tóu" },
  ];
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % cards.length), 2800);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="section" id="learn" data-screen-label="learn promo" style={{ background: "var(--paper-deep)" }}>
      <div className="container-wide">
        <div className="learn-promo">
          <div className="phone-frame" aria-hidden="true">
            <div className="phone-screen">
              <div className="phone-eyebrow">Daily drill · 3 of 5</div>
              <div className="phone-progress">
                <span className="done"/><span className="done"/><span className="now"/><span/><span/>
              </div>
              <div className="flashcard">
                <div className="phone-eyebrow" style={{ marginBottom: 0 }}>Tap to reveal meaning</div>
                <div className="cn-big" key={idx} style={{ animation: "lineRise 600ms var(--easeZen)" }}>{cards[idx].cn}</div>
                <div className="py-big">{cards[idx].py}</div>
                <div className="hint">Heard on Xiaohongshu · this week</div>
                <div className="flashcard-actions">
                  <div className="b again">Again</div>
                  <div className="b got">Got it</div>
                </div>
              </div>
            </div>
          </div>

          <div>
            <div className="eyebrow-ink">Learn mode</div>
            <h2 style={{ fontFamily: "var(--serif)", fontWeight: 500, fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 1.02, letterSpacing: "-0.025em", margin: "18px 0 24px", maxWidth: "16ch" }}>
              Learn slang the way <em className="inkwash" style={{ color: "var(--cinnabar)", fontStyle: "normal" }}>natives</em> use it.
            </h2>
            <p style={{ fontFamily: "var(--serif)", fontSize: 19, color: "var(--ink-soft)", lineHeight: 1.5, maxWidth: "52ch", margin: 0 }}>
              Five minutes a day. Real Weibo screenshots. Native voice recordings. Spaced repetition that
              respects the fact you have a life.
            </p>
            <ul className="learn-features">
              <li><span className="check"><BrushCheck/></span> Daily 5-minute slang drills, tuned to your level.</li>
              <li><span className="check"><BrushCheck/></span> Audio from native Beijing & Shanghai speakers.</li>
              <li><span className="check"><BrushCheck/></span> Context examples ripped straight from real Weibo posts.</li>
              <li><span className="check"><BrushCheck/></span> Spaced repetition that actually sticks.</li>
            </ul>
            <button className="btn btn-seal" style={{ padding: "16px 28px", fontSize: 15 }}>
              <span style={{ fontFamily: "var(--cn-serif)", fontWeight: 700 }}>学</span>
              Start learning — free
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

const CONTRIBS = [
  { name: "Mei L.",   loc: "Shanghai",  count: 312, init: "M", hue: "#C8392E" },
  { name: "Jin W.",   loc: "Beijing",   count: 287, init: "J", hue: "#1A1A1A" },
  { name: "Anna H.",  loc: "Taipei",    count: 241, init: "A", hue: "#B8893A" },
  { name: "Kenzo T.", loc: "Chengdu",   count: 198, init: "K", hue: "#6B6B6B" },
  { name: "Lily X.",  loc: "Guangzhou", count: 176, init: "L", hue: "#A12C22" },
  { name: "Marcus C.",loc: "Hong Kong", count: 154, init: "M", hue: "#2a2a2a" },
];

const Contributors = () => (
  <section className="section section-with-decor" data-screen-label="contributors">
    <div style={{ position: "absolute", left: 24, top: 40, zIndex: 0, opacity: 0.5 }} aria-hidden="true">
      <DotGrid rows={10} cols={4} style={{ width: 60, height: 150 }}/>
    </div>
    <div style={{ position: "absolute", right: 24, top: 40, zIndex: 0, opacity: 0.5 }} aria-hidden="true">
      <DotGrid rows={10} cols={4} style={{ width: 60, height: 150 }}/>
    </div>
    <div className="container-wide" id="about">
      <div className="section-head" style={{ maxWidth: 820 }}>
        <div className="eyebrow-ink">The byline</div>
        <h2 style={{ fontFamily: "var(--serif)", fontWeight: 500, fontSize: "clamp(40px, 5.5vw, 76px)", lineHeight: 1.02, letterSpacing: "-0.025em", margin: "18px 0 0" }}>
          Built by people who actually <em className="inkwash" style={{ color: "var(--cinnabar)", fontStyle: "normal" }}>speak the language</em>.
        </h2>
      </div>
      <div className="contrib-row">
        {CONTRIBS.map((c, i) => (
          <div className="contrib-card" key={i}>
            <div className="contrib-avatar">
              <AvatarRing/>
              <div className="photo" style={{ background: c.hue }}>{c.init}</div>
            </div>
            <div className="contrib-name">{c.name}</div>
            <div className="contrib-loc">{c.loc.toUpperCase()}</div>
            <div className="contrib-count">{c.count} entries</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const TESTI = [
  { q: "Finally a dictionary that gets why 'yyds' isn't just 'GOAT' — it's GOAT with affection.", who: "@langnerd_", sub: "Twitter", stamp: "好" },
  { q: "I used to feel old reading Xiaohongshu comments. Now I sound like I belong there.",      who: "Sarah K.",   sub: "HSK 5 learner", stamp: "赞" },
  { q: "The example sentences alone are worth the subscription.",                                 who: "Featured in", sub: "The Mandarin Companion newsletter", stamp: "推" },
];

const Testimonials = () => (
  <section className="section" data-screen-label="testimonials" style={{ background: "var(--paper-deep)", paddingTop: 110, paddingBottom: 110 }}>
    <div className="container-wide">
      <div className="section-head" style={{ maxWidth: "100%", textAlign: "center", margin: "0 auto 64px" }}>
        <div className="eyebrow-ink" style={{ justifyContent: "center", display: "inline-flex" }}>What readers say</div>
      </div>
      <div className="testi-grid">
        {TESTI.map((t, i) => (
          <div className="testi-card" key={i}>
            <div className="testi-mark">"</div>
            <p className="testi-quote">{t.q}</p>
            <div className="testi-author">— <strong>{t.who}</strong>, {t.sub}</div>
            <div className="testi-stamp">{t.stamp}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const PLANS = [
  { tier: "Free",    amt: "$0",      per: "",       desc: "Browse the dictionary. 50 lookups/day. Daily entry email.",
    feats: ["Browse all 8,420 entries", "50 lookups per day", "Daily entry email", "Basic search & filters"], cta: "Get started" },
  { tier: "Pro",     amt: "$4.99",   per: "/ month", desc: "Unlimited lookups. Audio. Learn mode. Save lists. Most popular.",
    feats: ["Everything in Free", "Unlimited lookups", "Native audio for every entry", "Learn mode + flashcards", "Personal saved lists"], cta: "Start free trial", popular: true },
  { tier: "Scholar", amt: "$9.99",   per: "/ month", desc: "Everything in Pro plus downloadable decks, API access, Anki export.",
    feats: ["Everything in Pro", "Downloadable HSK decks", "REST API access", "Anki & Quizlet export", "Priority new-entry alerts"], cta: "Go scholarly", scholar: true },
];

const Pricing = () => (
  <section className="section section-with-decor" id="pricing" data-screen-label="pricing">
    <HangingSeal char="¥" style={{ position: "absolute", top: 60, right: 80, zIndex: 2 }}/>
    <div style={{ position: "absolute", left: 0, top: 0, width: 280, height: 180, opacity: 0.45, zIndex: 0 }} aria-hidden="true">
      <DiagonalSweep color="#1A1A1A" style={{ width: "100%", height: "100%" }}/>
    </div>
    <div className="container-wide">
      <div className="section-head" style={{ maxWidth: 720, position: "relative" }}>
        <div className="big-num" aria-hidden="true">06</div>
        <div className="eyebrow-ink">Plans</div>
        <h2 style={{ fontFamily: "var(--serif)", fontWeight: 500, fontSize: "clamp(40px, 5vw, 64px)", lineHeight: 1.02, letterSpacing: "-0.025em", margin: "18px 0 0" }}>
          Pay for the curation, not the words.
        </h2>
        <div className="section-ribbon"><BrushRibbon color="#C8392E"/></div>
      </div>
      <div className="price-row">
        {PLANS.map((p, i) => (
          <div key={i} className={`price-card ${p.popular ? "popular" : ""} ${p.scholar ? "scholar" : ""}`}>
            {p.popular && <div className="price-popular-stamp"><span style={{ fontFamily: "var(--cn-serif)" }}>荐</span> MOST POPULAR</div>}
            <div className="price-tier">{p.tier}</div>
            <div className="price-amt">{p.amt}<span className="per">{p.per}</span></div>
            <p className="price-desc">{p.desc}</p>
            <ul className="price-feats">
              {p.feats.map((f, j) => (
                <li key={j} className="price-feat">
                  <span style={{ color: p.scholar ? "var(--gold)" : "var(--cinnabar)" }}><BrushCheck size={20}/></span>
                  {f}
                </li>
              ))}
            </ul>
            <button className={p.popular ? "btn btn-seal" : "btn btn-outline"}>{p.cta}</button>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Newsletter = () => {
  const [email, setEmail] = React.useState("");
  return (
    <section className="newsletter" id="submit" data-screen-label="newsletter">
      <div className="newsletter-bg-char" aria-hidden="true">信</div>
      <div style={{ position: "absolute", right: 40, top: 60, width: 180, height: 180, opacity: 0.18 }} aria-hidden="true">
        <InkSplash color="#C8392E" style={{ width: "100%", height: "100%" }}/>
      </div>
      <div style={{ position: "absolute", left: 60, bottom: 60, opacity: 0.6 }} aria-hidden="true">
        <DotGrid rows={6} cols={6} style={{ width: 90, height: 90 }}/>
      </div>
      <div className="newsletter-inner">
        <div className="eyebrow">Morning slang</div>
        <h2>One <span className="inkwash">slang</span> phrase.<br/>Every morning. <span className="inkwash">Free.</span></h2>
        <div style={{ width: 200, height: 24, margin: "0 auto 24px" }} aria-hidden="true">
          <BrushRibbon color="#1A1A1A"/>
        </div>
        <p>Join 42,300+ readers who learn the phrase China is talking about today —
          before it hits TikTok.</p>
        <form className="newsletter-form" onSubmit={(e) => { e.preventDefault(); }}>
          <input className="brush-input" placeholder="your@email.com" value={email} onChange={(e) => setEmail(e.target.value)} type="email" aria-label="Email" />
          <button className="btn btn-seal" type="submit" style={{ padding: "14px 26px" }}>
            <span style={{ fontFamily: "var(--cn-serif)", fontWeight: 700 }}>订</span>
            Subscribe
          </button>
        </form>
        <div className="newsletter-fine">NO SPAM · UNSUBSCRIBE IN ONE TAP</div>
      </div>
    </section>
  );
};

const FAQS = [
  { q: "Where do new slang entries come from?", a: "Our team of 142 native-speaker contributors spend their days on Weibo, Xiaohongshu, Bilibili and Douyin — anything that hits the front page or trends on the WeChat moments of their group chats becomes a candidate. Editors fact-check, source, and write." },
  { q: "How often is the dictionary updated?", a: "Daily. The editorial team commits new entries every morning around 9am Shanghai time. Trending phrases are flagged in real time so you can see what's hot before the wider internet does." },
  { q: "Is this for HSK / formal Chinese learning?", a: "No — and that's the point. HSK and most apps will teach you the Chinese of a 1995 textbook. We teach the Chinese of a 2026 group chat. Use us alongside HSK study, not instead of it." },
  { q: "Can I submit my own slang?", a: "Yes. Free users can submit; Pro and Scholar tiers get priority review. We credit every accepted submission with a contributor byline." },
  { q: "Do you cover Taiwanese / Cantonese / Singaporean Chinese slang?", a: "Yes. The Regional & Dialect category covers Taiwanese Mandarin, Cantonese (粤语), Singaporean Mandarin, and major regional dialects. Every regional entry is tagged so you can filter by origin." },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section section-with-decor" data-screen-label="faq">
      <div style={{ position: "absolute", right: -80, top: 60, width: 280, height: 280, opacity: 0.1, zIndex: 0, pointerEvents: "none" }} aria-hidden="true">
        <InkSplash style={{ width: "100%", height: "100%", transform: "rotate(40deg)" }}/>
      </div>
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div className="section-head" style={{ maxWidth: 720, position: "relative" }}>
          <div className="big-num" aria-hidden="true">07</div>
          <div className="eyebrow-ink">Common questions</div>
          <h2 style={{ fontFamily: "var(--serif)", fontWeight: 500, fontSize: "clamp(40px, 5vw, 64px)", lineHeight: 1.02, letterSpacing: "-0.025em", margin: "18px 0 0" }}>
            Answers, briefly.
          </h2>
          <div className="section-ribbon"><BrushRibbon color="#1A1A1A"/></div>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{f.q}</span>
                <span className="faq-icon" aria-hidden="true"/>
              </button>
              <div className="faq-a"><div style={{ paddingTop: 8, paddingRight: 80 }}>{f.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="container-wide">
      <div className="footer-top">
        <div className="footer-brand">
          <div className="zh">中俚</div>
          <div className="wm">chineseslangmeaning</div>
          <div className="footer-tag">Decoding 中文 internet,<br/>one phrase at a time.</div>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 chineseslangmeaning.com</div>
        <div className="footer-lang">
          <span className="active">EN</span>
        </div>
      </div>
    </div>

    <div className="footer-stamp" aria-label="seal">印</div>
  </footer>
);

Object.assign(window, { LearnPromo, Contributors, Testimonials, Pricing, Newsletter, FAQ, Footer });