// sections-end.jsx — Pricing, FAQ, FinalCTA, Footer
const { useState: useStateE } = React;

/* ---------------------------------------------------------------- PRICING */
function Pricing({ onAudit }) {
  const {t}=useLang();
  return (
    <section id="pricing" className="dark on-dark section" style={{ position: "relative",
      background: "var(--dark)", color: "var(--on-dark)", overflow: "hidden" }}>
      <div aria-hidden="true" style={{ position: "absolute", inset: 0,
        background: "radial-gradient(80% 60% at 85% 0%, rgba(242,239,231,.07), transparent 55%)" }} />
      <div className="wrap" style={{ position: "relative" }}>
        <div style={{ textAlign: "center", maxWidth: 820, margin: "0 auto" }}>
          <Reveal style={{ display: "flex", justifyContent: "center" }}><span className="eyebrow">{t("pricing.eyebrow")}</span></Reveal>
          <Reveal delay={120}><h2 className="d-lg" style={{ marginTop: 22, color: "var(--on-dark)" }}>
            {t("pricing.heading")}</h2></Reveal>
          <Reveal delay={220} style={{ marginTop: 22, fontSize: "clamp(17px,1.4vw,20px)",
            color: "var(--on-dark-muted)", maxWidth: "54ch", margin: "22px auto 0" }}>
            {t("pricing.sub")}
          </Reveal>
        </div>

        <Reveal delay={120} style={{ marginTop: 48 }}>
          <FeaturedPilot onCta={onAudit} />
        </Reveal>

        <Reveal delay={120} style={{ marginTop: 54, textAlign: "center" }}>
          <Mono style={{ fontSize: 12.5, color: "var(--on-dark-muted)", letterSpacing: ".14em", textTransform: "uppercase" }}>
            {t("pricing.classic")}
          </Mono>
        </Reveal>
        <div className="plan-grid" style={{ marginTop: 22, display: "grid",
          gridTemplateColumns: "1fr 1fr", gap: 18 }}>
          <Reveal>
            <PlanCard
              tag={t("pricing.audit.tag")}
              name={t("pricing.audit.name")}
              price={t("pricing.audit.price")}
              sub={t("pricing.audit.sub")}
              feats={[1,2,3,4,5,6].map(n=>t(`pricing.audit.f${n}`))}
              cta={t("pricing.ctaAudit")} onCta={onAudit} highlight={false} />
          </Reveal>
          <Reveal delay={120}>
            <PlanCard
              tag={t("pricing.cont.tag")}
              name={t("pricing.cont.name")}
              price={t("pricing.cont.price")}
              sub={t("pricing.cont.sub")}
              feats={[1,2,3,4,5,6].map(n=>t(`pricing.cont.f${n}`))}
              cta={t("pricing.ctaTalk")} onCta={onAudit} highlight={false} />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function FeaturedPilot({ onCta }) {
  const {t}=useLang();
  const feats = [1,2,3,4,5,6].map(n=>t(`pricing.pilot.f${n}`));

  return (
    <div style={{ position: "relative", borderRadius: 20, overflow: "hidden",
      border: "1px solid rgba(0,0,0,0)",
      background: "linear-gradient(135deg, var(--agreed-soft), var(--dark-2) 42%, var(--dark-2))",
      boxShadow: "0 30px 80px -40px rgba(0,0,0,.6)" }}>
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, borderRadius: 20, padding: 1,
        background: "linear-gradient(135deg, var(--agreed), var(--line-dark) 38%)",
        WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
        WebkitMaskComposite: "xor", maskComposite: "exclude", pointerEvents: "none" }} />
      <div aria-hidden="true" style={{ position: "absolute", top: "-30%", right: "-10%", width: "50%", height: "160%",
        background: "radial-gradient(closest-side, var(--agreed-soft), transparent 70%)", pointerEvents: "none" }} />

      <div className="pilot-grid" style={{ position: "relative", display: "grid",
        gridTemplateColumns: "1.06fr .94fr" }}>
        <div style={{ padding: "clamp(30px,3.4vw,52px)" }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 9, padding: "7px 13px", borderRadius: 100,
            border: "1px solid var(--agreed)", background: "var(--agreed-soft)" }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--agreed)",
              boxShadow: "0 0 0 4px var(--agreed-soft)" }} />
            <Mono style={{ fontSize: 11, color: "var(--agreed)", letterSpacing: ".14em" }}>{t("pricing.pilot.badge")}</Mono>
          </div>
          <h3 style={{ fontSize: "clamp(30px,3.6vw,48px)", marginTop: 22, color: "var(--on-dark)",
            letterSpacing: "-.025em", lineHeight: 1.02, textWrap: "balance" }}>
            {t("pricing.pilot.heading1")}<br />{t("pricing.pilot.heading2")}
          </h3>
          <p style={{ marginTop: 18, fontSize: "clamp(16px,1.25vw,18px)", lineHeight: 1.55,
            color: "var(--on-dark-muted)", maxWidth: "42ch" }}>
            {t("pricing.pilot.body")}
          </p>
          <div style={{ marginTop: 30, display: "flex", alignItems: "baseline", gap: 14, flexWrap: "wrap" }}>
            <span style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: "clamp(56px,7vw,96px)",
              letterSpacing: "-.04em", lineHeight: .9, color: "var(--on-dark)" }}>€0</span>
            <div style={{ lineHeight: 1.25 }}>
              <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 18, color: "var(--on-dark)" }}>{t("pricing.pilot.priceLabel")}</div>
              <Mono style={{ fontSize: 12.5, color: "var(--agreed)", letterSpacing: ".06em" }}>{t("pricing.pilot.priceSub")}</Mono>
            </div>
          </div>
          <div style={{ marginTop: 30, display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
            <Btn variant="primary" onClick={onCta}>{t("pricing.ctaPilot")}</Btn>
            <Mono style={{ fontSize: 12.5, color: "var(--on-dark-muted)" }}>{t("pricing.pilot.noCard")}</Mono>
          </div>
        </div>

        <div className="pilot-aside" style={{ padding: "clamp(30px,3.4vw,52px)",
          borderLeft: "1px solid var(--line-dark)",
          background: "linear-gradient(180deg, rgba(242,239,231,.03), transparent)" }}>
          <Mono style={{ fontSize: 11, color: "var(--on-dark-muted)", letterSpacing: ".14em" }}>{t("pricing.pilot.whatLabel")}</Mono>
          <ul style={{ listStyle: "none", margin: "20px 0 0", padding: 0, display: "grid", gap: 16 }}>
            {feats.map((f) =>
            <li key={f} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 15, lineHeight: 1.4 }}>
                <svg width="17" height="17" viewBox="0 0 16 16" style={{ marginTop: 2, flexShrink: 0 }} aria-hidden="true">
                  <circle cx="8" cy="8" r="7.5" fill="var(--agreed-soft)" />
                  <path d="M4.5 8.2L7 10.6L11.6 5.2" stroke="var(--agreed)" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                <span style={{ color: "var(--on-dark)" }}>{f}</span>
              </li>
            )}
          </ul>
        </div>
      </div>
    </div>
  );
}

function PlanCard({ tag, name, price, sub, feats, cta, onCta, highlight }) {
  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column",
      padding: "clamp(24px,3vw,38px)", borderRadius: 16,
      border: highlight ? "1px solid rgba(242,239,231,.34)" : "1px solid var(--line-dark)",
      background: highlight ? "linear-gradient(180deg,rgba(242,239,231,.06),transparent)" : "transparent" }}>
      <Mono style={{ fontSize: 11, color: highlight ? "var(--agreed)" : "var(--on-dark-muted)", letterSpacing: ".1em" }}>{tag}</Mono>
      <h3 style={{ fontSize: "clamp(26px,3vw,36px)", marginTop: 14, color: "var(--on-dark)", letterSpacing: "-.02em" }}>{name}</h3>
      <div style={{ marginTop: 10, display: "flex", alignItems: "baseline", gap: 8 }}>
        <span style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 26, color: "var(--on-dark)" }}>{price}</span>
        <Mono style={{ fontSize: 12, color: "var(--on-dark-muted)" }}>{sub}</Mono>
      </div>
      <div className="hairline" style={{ background: "var(--line-dark)", margin: "22px 0" }} />
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 13, flex: 1 }}>
        {feats.map((f) =>
        <li key={f} style={{ display: "flex", gap: 11, alignItems: "flex-start", fontSize: 14.5, color: "var(--on-dark)" }}>
            <svg width="16" height="16" viewBox="0 0 16 16" style={{ marginTop: 3, flexShrink: 0 }} aria-hidden="true">
              <path d="M3 8.5L6.2 11.5L13 4.5" stroke={highlight ? "var(--agreed)" : "var(--on-dark-muted)"} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            <span style={{ color: "var(--on-dark-muted)" }}>{f}</span>
          </li>
        )}
      </ul>
      <div style={{ marginTop: 26 }}>
        <Btn variant={highlight ? "primary" : "ghost"} onClick={onCta}>{cta}</Btn>
      </div>
    </div>
  );
}

/* ---------------------------------------------------------------- FAQ */
function FAQ() {
  const {t}=useLang();
  const qs = [1,2,3,4,5,6,7].map(n=>[t(`faq.q${n}`), t(`faq.a${n}`)]);
  const [open, setOpen] = useStateE(0);
  return (
    <section id="faq" className="section">
      <div className="wrap">
        <div className="faq-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0,.5fr) minmax(0,1fr)",
          gap: "clamp(28px,5vw,72px)", alignItems: "start" }}>
          <div>
            <Reveal><span className="eyebrow">{t("faq.eyebrow")}</span></Reveal>
            <Reveal delay={120}><h2 className="d-lg" style={{ marginTop: 20 }}>{t("faq.heading")}</h2></Reveal>
            <Reveal delay={220} style={{ marginTop: 18, color: "var(--ink-2)", fontSize: 16, maxWidth: "30ch" }}>
              {t("faq.subhead")}
            </Reveal>
          </div>
          <div>
            {qs.map(([q, a], i) => {
              const isOpen = open === i;
              return (
                <Reveal key={i} delay={i * 50} as="div" style={{ borderTop: "1px solid var(--line)" }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    aria-expanded={isOpen ? "true" : "false"}
                    aria-controls={`faq-panel-${i}`}
                    style={{ width: "100%", textAlign: "left",
                      background: "none", border: 0, cursor: "pointer", padding: "22px 0", display: "flex",
                      gap: 18, alignItems: "flex-start", justifyContent: "space-between", font: "inherit" }}
                  >
                    <span id={`faq-question-${i}`} style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: "clamp(18px,1.6vw,22px)",
                      letterSpacing: "-.02em", color: "var(--ink)" }}>{q}</span>
                    <span style={{ flexShrink: 0, width: 26, height: 26, position: "relative", marginTop: 3 }}>
                      <i style={{ position: "absolute", top: "50%", left: 0, right: 0, height: 1.6, background: "var(--ink)" }} />
                      <i style={{ position: "absolute", left: "50%", top: 0, bottom: 0, width: 1.6, background: "var(--ink)",
                        transform: isOpen ? "scaleY(0)" : "scaleY(1)", transition: "transform .35s ease" }} />
                    </span>
                  </button>
                  <div
                    id={`faq-panel-${i}`}
                    role="region"
                    aria-labelledby={`faq-question-${i}`}
                    style={{ display: "grid", gridTemplateRows: isOpen ? "1fr" : "0fr",
                      transition: "grid-template-rows .4s cubic-bezier(.2,.8,.2,1)" }}
                  >
                    <div style={{ overflow: "hidden" }}>
                      <p style={{ paddingBottom: 24, fontSize: 16, color: "var(--ink-2)", lineHeight: 1.6, maxWidth: "60ch" }}>
                        {a}
                      </p>
                    </div>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------- FINAL CTA + FOOTER */
function FinalCTA({ onAudit }) {
  const big = useParallax(0.05);
  const {t}=useLang();
  return (
    <section className="dark on-dark" style={{ background: "var(--dark)", color: "var(--on-dark)",
      position: "relative", overflow: "hidden", paddingTop: "clamp(90px,12vw,150px)" }}>
      <div aria-hidden="true" style={{ position: "absolute", inset: 0,
        background: "radial-gradient(70% 70% at 50% 120%, rgba(242,239,231,.08), transparent 60%)" }} />
      <div className="wrap" style={{ position: "relative", textAlign: "center" }}>
        <Reveal style={{ display: "flex", justifyContent: "center" }}>
          <img src="assets/sopisafe-mark.svg" alt="" style={{ filter: "invert(1)", opacity: .92, width: 52, height: 80 }} />
        </Reveal>
        <h2 className="d-xl" style={{ marginTop: 30, color: "var(--on-dark)" }} ref={big}>
          <ClipLines lines={[t("cta.l1"), t("cta.l2"), t("cta.l3")]} step={95} />
        </h2>
        <Reveal delay={360} style={{ marginTop: 26, color: "var(--on-dark-muted)", fontSize: "clamp(17px,1.4vw,20px)",
          maxWidth: "48ch", margin: "26px auto 0" }}>
          {t("cta.sub")}
        </Reveal>
        <Reveal delay={480} style={{ marginTop: 36, display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
          <Btn variant="primary" onClick={onAudit}>{t("cta.ctaPrimary")}</Btn>
          <Btn variant="ghost" href="#how">{t("cta.ctaSecondary")}</Btn>
        </Reveal>
      </div>

      <Footer />
    </section>
  );
}

function Footer() {
  const {t}=useLang();
  const cols = [
    [t("footer.col1"), [
      [t("footer.l.howItWorks"),"how-it-works.html"],
      [t("footer.l.leakage"),"what-we-catch.html"],
      [t("footer.l.integrations"),"integrations.html"],
      [t("footer.l.pricing"),"#pricing"],
      [t("footer.l.security"),"security.html"],
    ]],
    [t("footer.col2"), [
      [t("footer.l.about"),"about.html"],
      [t("footer.l.careers"),"careers.html"],
      [t("footer.l.contact"),"contact.html"],
      [t("footer.l.finlandFirst"),"finland-first.html"],
    ]],
    [t("footer.col3"), [
      [t("footer.l.auditOverview"),"audit-overview.html"],
      [t("footer.l.faq"),"#faq"],
      [t("footer.l.casePackets"),"case-packets.html"],
      [t("footer.l.privacy"),"privacy.html"],
      [t("footer.l.terms"),"terms.html"],
    ]],
  ];

  return (
    <footer style={{ position: "relative", marginTop: "clamp(80px,11vw,140px)",
      borderTop: "1px solid var(--line-dark)" }}>
      <div className="wrap" style={{ paddingTop: 56, paddingBottom: 40 }}>
        <div className="foot-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(3,1fr)",
          gap: "clamp(24px,4vw,56px)" }}>
          <div>
            <Logo on="dark" size={30} />
            <p style={{ marginTop: 18, color: "var(--on-dark-muted)", fontSize: 14.5, maxWidth: "30ch", lineHeight: 1.55 }}>
              {t("footer.tagline")}
            </p>
          </div>
          {cols.map(([h, items]) =>
            <nav key={h} aria-label={`${h} links`}>
              <h4 style={{ margin: 0 }}>
                <Mono style={{ fontSize: 11, color: "var(--on-dark-muted)", letterSpacing: ".12em" }}>{h.toUpperCase()}</Mono>
              </h4>
              <ul style={{ listStyle: "none", margin: "16px 0 0", padding: 0, display: "grid", gap: 11 }}>
                {items.map(([it, href]) =>
                  <li key={it}><a href={href} style={{ fontSize: 14.5, color: "var(--on-dark)", opacity: .82 }}>{it}</a></li>
                )}
              </ul>
            </nav>
          )}
        </div>
        <div className="hairline" style={{ background: "var(--line-dark)", margin: "40px 0 22px" }} />
        <div style={{ display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
          <Mono style={{ fontSize: 12, color: "var(--on-dark-muted)" }}>{t("footer.copyright")}</Mono>
          <Mono style={{ fontSize: 12, color: "var(--on-dark-muted)" }}>{t("footer.motto")}</Mono>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Pricing, FeaturedPilot, PlanCard, FAQ, FinalCTA, Footer });