/* ============================================================
   closing.jsx — LiveDemo · Timeline · Pricing · Faq · FinalCta · Footer
   ============================================================ */
const { useState: useCState } = React;

function LiveDemoBanner() {
  const { t } = window.LU.useLang();
  const { Icon, Reveal } = window.UI;
  return (
    <section id="demo" className="py-16">
      <div className="mx-auto max-w-7xl px-6">
        <Reveal>
          <div className="relative overflow-hidden rounded-3xl bg-navy text-navy-foreground p-10 sm:p-14 shadow-card">
            <div className="absolute -right-32 -top-32 w-96 h-96 bg-brand/45 blur-3xl rounded-full drift" />
            <div className="absolute -left-32 -bottom-32 w-96 h-96 bg-teal/25 blur-3xl rounded-full drift" style={{ animationDelay: "-6s" }} />
            <div className="absolute inset-0 grid-bg opacity-[0.06]" />
            <div className="relative grid lg:grid-cols-[1.3fr_1fr] gap-10 items-center">
              <div>
                <p className="inline-flex items-center gap-2 text-sm font-semibold text-teal mb-3"><span className="h-1 w-1 rounded-full bg-teal" /> {t.demoEye}</p>
                <h2 className="text-4xl sm:text-5xl text-balance font-display font-bold">{t.demoH2}</h2>
                <p className="mt-5 text-navy-foreground/75 text-pretty leading-relaxed max-w-xl">{t.demoSub}</p>
                <div className="mt-8 flex flex-wrap gap-3">
                  <a href="tel:+12399338070" className="group inline-flex h-12 items-center gap-2 px-6 rounded-xl bg-gradient-brand text-brand-foreground font-medium hover:opacity-95 shadow-glow transition">
                    <Icon name="phone" className="w-4 h-4" /> {t.demoCall}
                    <Icon name="arrow-right" className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
                  </a>
                  <a href="#contact" className="inline-flex h-12 items-center gap-2 px-6 rounded-xl bg-white/5 border border-white/15 text-navy-foreground font-medium hover:bg-white/10 transition">{t.demoPlan}</a>
                </div>
              </div>
              <div className="glass-dark rounded-2xl border border-white/12 p-6 text-center">
                <p className="text-[10px] uppercase tracking-widest text-navy-foreground/60 mb-3 font-semibold">{t.demoNum}</p>
                <p className="font-display text-4xl tracking-tight tabular">+1 (239) 933 8070</p>
                <p className="mt-4 text-sm text-navy-foreground/70">{t.demoAvail}</p>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Timeline() {
  const { t } = window.LU.useLang();
  const { Reveal, SectionHead } = window.UI;
  return (
    <section id="werking" className="py-24 sm:py-32 bg-warm-tint border-y border-border">
      <div className="mx-auto max-w-5xl px-6">
        <SectionHead eye={t.implEye} title={t.implH2} />
        <div className="relative">
          <div className="absolute left-[27px] top-2 bottom-2 w-px bg-gradient-to-b from-brand/40 via-border to-teal/40" />
          <ol className="space-y-5">
            {t.impl.map(([title, desc], i) => (
              <Reveal key={i} delay={i * 80}>
                <li className="relative bg-card border border-border rounded-2xl p-6 sm:p-7 pl-20 sm:pl-24 shadow-soft">
                  <div className="absolute left-4 sm:left-5 top-6 w-12 h-12 rounded-2xl bg-gradient-brand text-brand-foreground grid place-items-center font-display font-bold shadow-glow tabular">0{i + 1}</div>
                  <h3 className="font-display font-semibold text-navy text-xl">{title}</h3>
                  <p className="mt-1.5 text-slate leading-relaxed">{desc}</p>
                </li>
              </Reveal>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const { t } = window.LU.useLang();
  const { Icon, Reveal, SectionHead } = window.UI;
  return (
    <section id="tarieven" className="py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6">
        <SectionHead eye={t.priceEye} title={t.priceH2} sub={t.priceSub} />
        <div className="grid lg:grid-cols-3 gap-5 items-start">
          {t.plans.map((p, i) => {
            const hi = i === 1;
            const isCustom = p.price === t.custom;
            return (
              <Reveal key={p.name} delay={i * 100}>
                <div className={`relative rounded-3xl p-8 flex flex-col h-full ${hi ? "bg-navy text-navy-foreground border border-navy shadow-card overflow-hidden" : "bg-card border border-border"}`}>
                  {hi && <div className="absolute -right-20 -top-20 w-60 h-60 bg-brand/35 blur-3xl rounded-full" />}
                  {hi && <span className="absolute -top-3 left-8 px-3 py-1 rounded-full bg-gradient-brand text-brand-foreground text-xs font-medium shadow-glow">{t.mostChosen}</span>}
                  <div className="relative">
                    <h3 className={`font-display font-semibold text-2xl ${hi ? "text-navy-foreground" : "text-navy"}`}>{p.name}</h3>
                    <p className={`mt-1 text-sm ${hi ? "text-navy-foreground/70" : "text-slate"}`}>{p.who}</p>
                  </div>
                  <div className={`relative mt-6 pb-6 border-b ${hi ? "border-white/10" : "border-border"}`}>
                    <div className="flex items-baseline gap-2">
                      <span className="font-display text-4xl font-semibold">{p.price}</span>
                      {!isCustom && <span className={`text-sm ${hi ? "text-navy-foreground/60" : "text-slate"}`}>{t.perMonth}</span>}
                    </div>
                    <p className={`mt-2 text-sm ${hi ? "text-navy-foreground/60" : "text-slate"}`}>{t.setup} {p.setup}</p>
                  </div>
                  <ul className="relative mt-6 space-y-3 flex-1">
                    {p.f.map((f) => (
                      <li key={f} className="flex items-start gap-3 text-sm">
                        <Icon name="check" className={`w-4 h-4 mt-1 shrink-0 ${hi ? "text-teal" : "text-brand"}`} />
                        <span className={hi ? "text-navy-foreground/90" : "text-navy"}>{f}</span>
                      </li>
                    ))}
                  </ul>
                  <a href={isCustom ? "#contact" : "#demo"}
                    className={`relative mt-8 inline-flex h-12 items-center justify-center gap-2 px-5 rounded-xl font-medium transition ${
                      hi ? "bg-gradient-brand text-brand-foreground hover:opacity-95 shadow-glow"
                         : "bg-warm-tint border border-border text-navy hover:bg-secondary"
                    }`}>
                    {!isCustom && <Icon name="phone" className="w-4 h-4" />}
                    {isCustom ? t.quote : t.callDemo}
                  </a>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Faq() {
  const { t } = window.LU.useLang();
  const { Icon, SectionHead } = window.UI;
  const [open, setOpen] = useCState(0);
  return (
    <section id="faq" className="py-24 sm:py-32 bg-warm-tint border-t border-border">
      <div className="mx-auto max-w-3xl px-6">
        <SectionHead eye={t.faqEye} title={t.faqH2} center />
        <div className="space-y-2.5">
          {t.faqs.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={i} className="bg-card rounded-2xl border border-border overflow-hidden transition">
                <button onClick={() => setOpen(isOpen ? null : i)} className="w-full flex items-center justify-between gap-6 px-6 py-5 text-left hover:bg-secondary/40 transition">
                  <span className="font-medium text-navy">{q}</span>
                  <Icon name="chevron-down" className={`w-5 h-5 text-slate transition-transform shrink-0 ${isOpen ? "rotate-180 text-brand" : ""}`} />
                </button>
                <div className={`grid transition-all duration-300 ${isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`}>
                  <div className="overflow-hidden"><p className="px-6 pb-6 text-slate text-pretty leading-relaxed">{a}</p></div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Field({ label, name, type = "text", required, placeholder }) {
  return (
    <div className="space-y-1.5">
      <label htmlFor={name} className="text-xs font-medium text-slate uppercase tracking-wider">{label}</label>
      <input id={name} name={name} type={type} required={required} placeholder={placeholder}
        className="w-full h-11 px-4 rounded-xl border border-border bg-warm text-navy placeholder:text-slate/60 focus:outline-none focus:ring-2 focus:ring-ring focus:bg-card transition" />
    </div>
  );
}
function SelectField({ label, options }) {
  return (
    <div className="space-y-1.5">
      <label className="text-xs font-medium text-slate uppercase tracking-wider">{label}</label>
      <select className="w-full h-11 px-4 rounded-xl border border-border bg-warm text-navy focus:outline-none focus:ring-2 focus:ring-ring focus:bg-card transition">
        {options.map((s) => <option key={s}>{s}</option>)}
      </select>
    </div>
  );
}

function ContactForm() {
  const { t } = window.LU.useLang();
  const { Icon } = window.UI;
  const [submitted, setSubmitted] = useCState(false);
  if (submitted) {
    return (
      <div className="bg-card rounded-3xl border border-border shadow-card p-10 text-center">
        <div className="w-14 h-14 mx-auto rounded-full bg-teal-soft grid place-items-center mb-5"><Icon name="check" className="w-7 h-7 text-teal" /></div>
        <h3 className="text-3xl text-navy mb-2 font-display font-bold">{t.thanksH}</h3>
        <p className="text-slate">{t.thanksP}</p>
      </div>
    );
  }
  return (
    <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} className="bg-card rounded-3xl border border-border shadow-card p-6 sm:p-8 space-y-4">
      <div className="grid sm:grid-cols-2 gap-4">
        <Field label={t.formName} name="name" required />
        <Field label={t.formCompany} name="company" required />
      </div>
      <div className="grid sm:grid-cols-2 gap-4">
        <SelectField label={t.formSector} options={t.formSectors} />
        <Field label={t.formPhone} name="phone" type="tel" required />
      </div>
      <Field label={t.formEmail} name="email" type="email" required />
      <div className="grid sm:grid-cols-2 gap-4">
        <Field label={t.formMissed} name="missed" placeholder={t.formMissedPh} />
        <Field label={t.formReason} name="reason" placeholder={t.formReasonPh} />
      </div>
      <SelectField label={t.formIntent} options={t.formIntents} />
      <button type="submit" className="w-full h-12 rounded-xl bg-gradient-brand text-brand-foreground font-medium hover:opacity-95 shadow-glow transition inline-flex items-center justify-center gap-2">
        <Icon name="phone-call" className="w-4 h-4" /> {t.formSubmit}
      </button>
      <p className="text-xs text-slate text-center">{t.formNote}</p>
    </form>
  );
}

function FinalCta() {
  const { t } = window.LU.useLang();
  const { Icon, Reveal } = window.UI;
  return (
    <section id="contact" className="py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 grid lg:grid-cols-[1fr_1.1fr] gap-12 items-start">
        <div className="lg:sticky lg:top-24">
          <Reveal>
            <p className="inline-flex items-center gap-2 text-sm font-semibold text-brand mb-3"><span className="h-1 w-1 rounded-full bg-brand" /> {t.finalEye}</p>
            <h2 className="text-4xl sm:text-5xl text-navy text-balance font-display font-bold">{t.finalH2}</h2>
            <p className="mt-5 text-lg text-slate text-pretty">{t.finalSub}</p>
            <div className="mt-8 flex flex-wrap gap-3">
              <a href="#demo" className="inline-flex h-12 items-center gap-2 px-6 rounded-xl bg-navy text-navy-foreground font-medium hover:opacity-90 transition shadow-soft">
                <Icon name="phone" className="w-4 h-4" /> {t.callDemo}
              </a>
            </div>
            <div className="mt-10 grid sm:grid-cols-3 gap-3">
              {t.finalStats.map(([v, l]) => (
                <div key={l} className="bg-card border border-border rounded-2xl p-5">
                  <p className="font-display text-3xl text-navy font-semibold tabular">{v}</p>
                  <p className="text-sm text-slate mt-1">{l}</p>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
        <Reveal delay={120}><ContactForm /></Reveal>
      </div>
    </section>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <p className="text-sm font-medium mb-3">{title}</p>
      <ul className="space-y-2 text-sm text-navy-foreground/70">
        {links.map(([href, label]) => (<li key={label}><a href={href} className="hover:text-navy-foreground transition">{label}</a></li>))}
      </ul>
    </div>
  );
}

function Footer() {
  const { t } = window.LU.useLang();
  const { Icon } = window.UI;
  return (
    <footer className="bg-navy text-navy-foreground">
      <div className="mx-auto max-w-7xl px-6 py-16 grid sm:grid-cols-2 lg:grid-cols-4 gap-10">
        <div className="lg:col-span-2">
          <div className="flex items-center gap-3">
            <img src="assets/legion-logo.png" alt="LEGION UNITED" className="w-11 h-11 object-contain shrink-0" />
            <div className="leading-none">
              <p className="font-display font-bold text-[15px]">LEGION UNITED</p>
              <p className="text-[10px] uppercase tracking-[0.16em] text-navy-foreground/60 mt-0.5">{t.brandSub}</p>
            </div>
          </div>
          <p className="mt-5 text-sm text-navy-foreground/70 max-w-md leading-relaxed">{t.footTag}</p>
        </div>
        <FooterCol title={t.footProduct} links={t.footProductLinks} />
        <FooterCol title={t.footContact} links={t.footContactLinks} />
      </div>
      <div className="border-t border-white/10">
        <div className="mx-auto max-w-7xl px-6 py-6 flex flex-wrap justify-between gap-3 text-xs text-navy-foreground/60">
          <p>© {new Date().getFullYear()} LEGION UNITED. {t.rights}</p>
          <p>{t.footMade}</p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { LiveDemoBanner, Timeline, Pricing, Faq, FinalCta, Footer });