// =====================================================================
// LiveSpark LP — Sections (Pricing / FAQ / FinalCTA / Footer)
// =====================================================================

// ------------------------------------------------ Pricing
const Pricing = () => {
  const { C } = useLang();
  return (
  <section className="section" id="pricing">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Pricing</span>
        <h2 className="section-title">{C.pricing.title}</h2>
      </div>
      <div className="pricing-grid">
        {C.pricing.plans.map((p) => (
          <article key={p.id} className={`plan ${p.featured ? "plan-featured" : ""}`}>
            {p.featured && p.badge && <span className="plan-badge">{p.badge}</span>}
            <h3 className="plan-name">{p.name}</h3>
            <p className="plan-sub">{p.sub}</p>
            <div className="plan-price">
              <span className="plan-price-main">{p.price}</span>
              {p.period && <span className="plan-price-period">{p.period}</span>}
            </div>
            <ul className="plan-features">
              {p.features.map((f) => (
                <li key={f.label} className={`plan-feature ${f.ok ? "" : "no"}`}>
                  <span className="label">{f.label}</span>
                  <span className={`feature-mark ${f.ok ? "ok" : "no"}`}>
                    {f.ok ? <Icon name="check" size={13} /> : <Icon name="dash" size={13} />}
                  </span>
                </li>
              ))}
            </ul>
            <a href={p.ctaHref} className={`btn ${p.featured ? "btn-primary" : "btn-secondary"} plan-cta`}>
              {p.cta}<Icon name="arrow-right" size={14} />
            </a>
          </article>
        ))}
      </div>
      {C.pricing.note && <p className="pricing-note">{C.pricing.note}</p>}
    </div>
  </section>
  );
};

// ------------------------------------------------ FAQ
const FAQ = () => {
  const { C } = useLang();
  return (
  <section className="section" id="faq">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">FAQ</span>
        <h2 className="section-title">{C.faq.title}</h2>
      </div>
      <div className="faq-list">
        {C.faq.items.map((item, i) => (
          <details key={i} className="faq-item" {...(i === 0 ? { open: true } : {})}>
            <summary className="faq-summary">
              <span className="faq-q">{item.q}</span>
              <span className="faq-chevron"><Icon name="chevron-down" size={18} /></span>
            </summary>
            <div className="faq-body">{item.a}</div>
          </details>
        ))}
      </div>
    </div>
  </section>
  );
};

// ------------------------------------------------ Legal
const Legal = () => {
  const { C } = useLang();
  return (
  <section className="container section-tight legal" aria-labelledby="legal-title">
    <div className="section-head">
      <span className="eyebrow">Legal</span>
      <h2 className="section-title" id="legal-title">{C.legal.title}</h2>
    </div>
    <div className="legal-grid">
      {C.legal.items.map((item) => (
        <article key={item.id} id={item.id} className="legal-card">
          <h3 className="legal-title">{item.title}</h3>
          <p className="legal-body">{item.body}</p>
        </article>
      ))}
    </div>
  </section>
  );
};

// ------------------------------------------------ Final CTA
const FinalCTA = () => {
  const { C } = useLang();
  return (
  <section className="container section-tight">
    <div className="final-cta">
      <div>
        <h2 className="final-cta-title">{C.finalCta.title}</h2>
        <p className="final-cta-sub">{C.finalCta.subtitle}</p>
      </div>
      <div className="final-cta-btns">
        <a href={C.links.signup} className="btn btn-primary btn-lg">
          {C.finalCta.primary}<Icon name="arrow-right" size={16} />
        </a>
        <a href={C.links.custom} className="btn btn-secondary btn-lg">
          {C.finalCta.secondary}<Icon name="arrow-right" size={16} />
        </a>
      </div>
    </div>
  </section>
  );
};

// ------------------------------------------------ Footer
const Footer = () => {
  const { C } = useLang();
  return (
  <footer className="footer">
    <div className="container footer-inner">
      <Logo />
      <nav className="footer-links" aria-label="footer">
        {C.footer.links.map((l) => (
          <a key={l.href} href={l.href}>{l.label}</a>
        ))}
      </nav>
      <p className="footer-copy">{C.footer.copyright}</p>
    </div>
  </footer>
  );
};

// ------------------------------------------------ App
const App = () => {
  const { lang } = useLang();
  const punch = lang === "ja"
    ? {
        sub: "ギフト・コメント・カウンター。あなたの配信に、もう一段の演出を。",
        lines: [
          { kind: "stroke", text: "STREAM SCREEN" },
          { kind: "holo",   text: "もっと光る。" },
        ],
      }
    : {
        sub: "Gifts, comments, counters — turn up the stream.",
        lines: [
          { kind: "stroke", text: "Your stream," },
          { kind: "holo",   text: "but louder." },
        ],
      };
  const m1 = lang === "ja"
    ? ["Light up your TikTok LIVE", "URLを貼るだけ", "Make Your Stream Shine", "23+ Overlays"]
    : ["Light up your TikTok LIVE", "Just paste a URL", "Make Your Stream Shine", "23+ Overlays"];
  const m2 = lang === "ja"
    ? ["Custom Overlay", "あなただけの世界観", "Designed for Creators", "9:16 Ready"]
    : ["Custom Overlay", "Built for your world", "Designed for Creators", "9:16 Ready"];
  return (
    <>
      <Header />
      <main>
        <Hero />
        <Stats />
        <Marquee items={m1} />
        <Features />
        <SEOIntro />
        <Punchline
          eyebrow="WHY LIVESPARK"
          lines={punch.lines}
          sub={punch.sub}
        />
        <PopularOverlays />
        <Marquee reverse items={m2} />
        <CustomOverlay />
        <HowTo />
        <Pricing />
        <FAQ />
        <Legal />
        <FinalCTA />
      </main>
      <Footer />
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);