// All five Zynflow pages — Polish v1.0
const { useState: zUseState, useEffect: zUseEffect, useMemo: zUseMemo, useRef: zUseRef } = React;

// ===================== HOME =====================
function HomePage({ setRoute }) {
  const { t, lang } = useLang();
  const h = t.home;

  return (
    <main>
      {/* HERO */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 dotgrid opacity-60 pointer-events-none" />
        <div className="absolute -top-40 -right-40 w-[640px] h-[640px] rounded-full pointer-events-none"
             style={{ background: "radial-gradient(closest-side, rgba(46,117,182,0.10), transparent 70%)" }} />
        <div className="relative max-w-[1240px] mx-auto px-6 md:px-10 pt-16 md:pt-24 pb-20 md:pb-32">
          <Reveal>
            <Eyebrow>{h.eyebrow}</Eyebrow>
          </Reveal>
          <Reveal delay={80} as="h1" className="mt-6 text-[44px] sm:text-6xl md:text-[88px] leading-[0.98] tracking-tightest font-semibold text-ink max-w-[14ch]">
            {h.h1Pre} <span className="text-accent">{h.h1Hl}</span>
          </Reveal>
          <Reveal delay={140} as="p" className="mt-7 text-[18px] md:text-[22px] text-ink-muted leading-relaxed max-w-[58ch]">
            {h.sub}
          </Reveal>
          <Reveal delay={220} className="mt-10 flex flex-col sm:flex-row gap-3">
            <PrimaryBtn href={CAL_URL} target="_blank">{h.ctaPrimary}</PrimaryBtn>
            <GhostBtn href={TEL_URL}>{h.ctaSecondary}</GhostBtn>
          </Reveal>
          <Reveal delay={280} as="p" className="mt-4 text-[13px] text-ink-faint max-w-md">
            {h.ctaSecondaryHelp}
          </Reveal>

          <Reveal delay={360} className="mt-16 md:mt-24 grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-8 border-t border-line pt-10">
            {[
              [h.heroMetricA, h.heroMetricALabel],
              [h.heroMetricB, h.heroMetricBLabel],
              [h.heroMetricC, h.heroMetricCLabel],
              [h.heroMetricD, h.heroMetricDLabel]
            ].map(([k, v], i) => (
              <div key={i}>
                <div className="text-3xl md:text-[40px] tracking-tightest font-semibold text-ink">{k}</div>
                <div className="mt-2 text-[13px] font-mono uppercase tracking-[0.12em] text-ink-faint">{v}</div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* LIVE PROOF */}
      <section className="relative bg-ink text-white">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-24 md:py-36">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
            <div className="lg:col-span-5">
              <Reveal>
                <div className="text-[11px] font-mono uppercase tracking-[0.18em] text-white/50">{h.proofKicker}</div>
              </Reveal>
              <Reveal delay={80} as="h2" className="mt-5 text-4xl md:text-6xl leading-[1.02] tracking-tightest font-semibold">
                {h.proofH}
              </Reveal>
              <Reveal delay={140} as="p" className="mt-6 text-[17px] md:text-[19px] text-white/70 leading-relaxed max-w-md">
                {h.proofBody}
              </Reveal>
              <Reveal delay={180} as="p" className="mt-5 text-[17px] md:text-[19px] text-white leading-relaxed max-w-md">
                {h.proofBody2}
              </Reveal>
            </div>

            <Reveal delay={180} className="lg:col-span-7">
              <div className="rounded-3xl bg-white/[0.04] border border-white/10 p-6 md:p-10">
                <div className="flex items-center gap-3 text-white/60 text-[12px] font-mono">
                  <span className="inline-block w-2 h-2 rounded-full bg-emerald-400 live-dot" />
                  LIVE · TWILIO · MTL-QC
                </div>
                <a href={TEL_URL} className="group block mt-6">
                  <div className="flex items-end gap-4 flex-wrap">
                    <span className="font-semibold tracking-tightest text-[64px] md:text-[104px] leading-[0.9] text-white">+1 (438)</span>
                    <span className="font-semibold tracking-tightest text-[64px] md:text-[104px] leading-[0.9] text-accent">817-3485</span>
                  </div>
                </a>
                <a href={TEL_URL} className="mt-8 inline-flex items-center justify-center gap-2 px-6 h-14 rounded-full bg-accent text-white text-[16px] font-medium tracking-tighter2 transition-all duration-200 hover:bg-accent-dark hover:-translate-y-0.5">
                  <PhoneIcon className="w-5 h-5" />
                  {h.proofBtn}
                </a>
                <p className="mt-5 text-[13px] text-white/50 max-w-md">{h.proofHint}</p>

                <div className="mt-10 grid grid-cols-1 md:grid-cols-2 gap-3 font-mono text-[12px]">
                  <div className="rounded-xl bg-white/[0.04] border border-white/10 p-4">
                    <div className="text-white/40 mb-1">21:47 · INBOUND</div>
                    <div className="text-white/85">Bonjour, je cherche une visite pour un condo sur Saint-Denis.</div>
                  </div>
                  <div className="rounded-xl bg-accent/15 border border-accent/30 p-4">
                    <div className="text-accent mb-1">21:47 · ZYNFLOW</div>
                    <div className="text-white/90">Avec plaisir. Quel est votre budget approximatif ?<span className="caret ml-0.5">▍</span></div>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* WHY ZYNFLOW — differentiation */}
      <WhyZynflowSection />

      {/* FOR WHO */}
      <section className="bg-bg">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-24 md:py-36">
          <Reveal>
            <SectionHeader kicker={h.forKicker} title={h.forH} />
          </Reveal>

          <div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-line rounded-3xl overflow-hidden border border-line">
            {h.niches.map((n, i) => {
              const Icon = [HouseIcon, PercentIcon, ToothIcon, ScalesIcon][i];
              return (
                <Reveal key={i} delay={i * 60}>
                  <button onClick={() => setRoute("services")} className="group text-left bg-white p-7 md:p-9 h-full w-full hover:bg-line2/40 transition-colors">
                    <div className="flex items-start justify-between">
                      <div className="w-11 h-11 rounded-full border border-line text-ink grid place-items-center group-hover:border-accent group-hover:text-accent transition-colors">
                        <Icon className="w-[22px] h-[22px]" />
                      </div>
                      <span className="text-[10px] font-mono uppercase tracking-[0.18em] text-ink-faint">0{i+1}</span>
                    </div>
                    <div className="mt-8 text-[11px] font-mono uppercase tracking-[0.18em] text-ink-faint">{n.tag}</div>
                    <h3 className="mt-2 text-[22px] tracking-tighter2 font-semibold text-ink">{n.title}</h3>
                    <p className="mt-3 text-[14.5px] text-ink-muted leading-relaxed">{n.pain}</p>
                    <span className="mt-7 inline-flex items-center gap-1.5 text-[13px] font-medium text-ink group-hover:text-accent transition-colors">
                      {t.common.learnMore}
                      <ArrowIcon className="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
                    </span>
                  </button>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section id="how-it-works" className="bg-white border-y border-line scroll-mt-24">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-24 md:py-36">
          <Reveal>
            <SectionHeader kicker={h.howKicker} title={h.howH} />
          </Reveal>
          <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-px bg-line border border-line rounded-3xl overflow-hidden">
            {h.steps.map((s, i) => (
              <Reveal key={i} delay={i * 80}>
                <div className="bg-white p-9 md:p-12 h-full">
                  <div className="font-mono text-[12px] uppercase tracking-[0.18em] text-accent">STEP {s.n}</div>
                  <h3 className="mt-6 text-[26px] md:text-[30px] tracking-tightest font-semibold leading-tight text-ink">{s.t}</h3>
                  <p className="mt-4 text-[15.5px] text-ink-muted leading-relaxed">{s.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={240} className="mt-10 max-w-3xl">
            <div className="border-l-2 border-accent pl-5 py-1">
              <p className="text-[15px] text-ink-muted leading-relaxed">{h.howNote}</p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* AI AUDIT */}
      <AuditSection />

      {/* ROI CALCULATOR */}
      <RoiSection />

      {/* ABOUT US */}
      <section className="bg-bg border-t border-line">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-24 md:py-36">
          <Reveal>
            <SectionHeader kicker={h.aboutKicker} title={h.aboutH} />
          </Reveal>
          <div className="mt-12 max-w-3xl">
            <Reveal delay={80} className="space-y-6 text-[17px] md:text-[18px] text-ink-muted leading-relaxed">
              <p>{h.aboutP1}</p>
              <p>{h.aboutP2}</p>
              <p className="text-ink">{h.aboutP3}</p>
            </Reveal>
          </div>

          <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-px bg-line border border-line rounded-3xl overflow-hidden">
            {h.aboutCols.map((c, i) => (
              <Reveal key={i} delay={i * 80}>
                <div className="bg-white p-8 md:p-10 h-full">
                  <div className="font-mono text-[12px] uppercase tracking-[0.18em] text-accent">0{i+1}</div>
                  <h3 className="mt-5 text-[22px] tracking-tighter2 font-semibold text-ink">{c.t}</h3>
                  <p className="mt-3 text-[15px] text-ink-muted leading-relaxed">{c.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* NO TESTIMONIALS + TECH STACK */}
      <section className="bg-white border-t border-line">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-24 md:py-36">
          <Reveal>
            <Eyebrow>{h.noTestiKicker}</Eyebrow>
            <h2 className="mt-5 text-4xl md:text-[56px] leading-[1.02] tracking-tightest font-semibold text-ink max-w-[22ch] text-balance">
              {h.noTestiH}
            </h2>
          </Reveal>
          <div className="mt-10 grid grid-cols-1 lg:grid-cols-12 gap-10">
            <Reveal delay={80} className="lg:col-span-7 space-y-5 text-[17px] text-ink-muted leading-relaxed">
              <p className="text-ink font-medium">{h.noTestiP1}</p>
              <p>{h.noTestiP2}</p>
              <p>
                {h.noTestiP3a}
                <a href={TEL_URL} className="font-semibold text-ink ulink hover:text-accent transition-colors">{TEL_DISPLAY}</a>
                {h.noTestiP3b}
              </p>
            </Reveal>
            <Reveal delay={140} className="lg:col-span-5">
              <div className="rounded-2xl border border-line bg-bg p-6">
                <div className="text-[11px] font-mono uppercase tracking-[0.18em] text-ink-faint">{h.stackKicker}</div>
                <div className="mt-5 grid grid-cols-2 gap-3">
                  {h.stack.map((s, i) => (
                    <div key={i} className="rounded-xl bg-white border border-line p-4">
                      <div className="text-[16px] tracking-tighter2 font-semibold text-ink">{s.name}</div>
                      <div className="mt-0.5 text-[12px] text-ink-muted">{s.role}</div>
                      <div className="mt-3 text-[10.5px] font-mono uppercase tracking-[0.14em] text-ink-faint">{s.by}</div>
                    </div>
                  ))}
                </div>
                <p className="mt-5 text-[13.5px] text-ink-muted leading-relaxed">{h.stackP}</p>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="relative bg-bg border-t border-line">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-28 md:py-40 text-center">
          <Reveal>
            <h2 className="text-[44px] sm:text-6xl md:text-[88px] leading-[0.98] tracking-tightest font-semibold text-ink mx-auto max-w-[18ch] text-balance">
              {h.finalH}
            </h2>
          </Reveal>
          <Reveal delay={80} as="p" className="mt-6 text-[17px] md:text-[19px] text-ink-muted leading-relaxed mx-auto max-w-xl text-balance">
            {h.finalSub}
          </Reveal>
          <Reveal delay={140} className="mt-10 flex flex-col sm:flex-row gap-3 justify-center items-center">
            <PrimaryBtn href={CAL_URL} target="_blank">{h.finalCtaA}</PrimaryBtn>
            <GhostBtn href={TEL_URL}>{h.finalCtaB}</GhostBtn>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

// ----- WHY ZYNFLOW (Differentiation) -----
function WhyXMark({ className = "w-3.5 h-3.5" }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" className={className} aria-hidden="true">
      <path d="M6 6l12 12M18 6L6 18" />
    </svg>
  );
}

function WhyZynflowSection() {
  const { t } = useLang();
  const w = t.home;

  const scrollToHow = (e) => {
    e.preventDefault();
    const el = document.getElementById("how-it-works");
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.pageYOffset - 24;
    window.scrollTo({ top: y, behavior: "smooth" });
  };

  const RED = "oklch(0.58 0.16 25)";    // muted brick red
  const RED_BORDER = "oklch(0.86 0.06 25)";
  const GREEN = "#10A671";               // emerald, balanced against accent blue
  const HIGHLIGHT_BG = "linear-gradient(transparent 58%, rgba(245, 196, 56, 0.42) 58%, rgba(245, 196, 56, 0.42) 92%, transparent 92%)";

  return (
    <section className="relative bg-white border-y border-line">
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-24 md:py-36">
        {/* HEADER */}
        <Reveal className="max-w-3xl">
          <Eyebrow>{w.whyKicker}</Eyebrow>
          <h2 className="mt-5 text-4xl md:text-[60px] leading-[1.02] tracking-tightest font-semibold text-ink text-balance">
            {w.whyH}
          </h2>
          <p className="mt-6 text-[17px] md:text-[19px] text-ink-muted leading-relaxed max-w-[58ch]">
            {w.whySub}
          </p>
        </Reveal>

        {/* COMPARISON */}
        <div className="mt-16 md:mt-20 grid grid-cols-1 md:grid-cols-2 gap-5 lg:gap-7 items-stretch">
          {/* LEFT — Other agencies */}
          <Reveal>
            <article className="group/card relative h-full rounded-3xl bg-[#F2F2F2] border border-line p-7 md:p-10 overflow-hidden">
              <div
                className="absolute inset-0 pointer-events-none opacity-[0.5]"
                style={{ backgroundImage: "repeating-linear-gradient(135deg, rgba(10,10,10,0.025) 0 1px, transparent 1px 16px)" }}
              />
              <div className="relative">
                <div className="flex items-center justify-between">
                  <div className="inline-flex items-center gap-2 px-2.5 h-7 rounded-full bg-white border border-line text-[10.5px] font-mono uppercase tracking-[0.16em] text-ink-faint">
                    {w.whyOthersTag}
                  </div>
                  <span className="text-[10.5px] font-mono uppercase tracking-[0.18em] text-ink-faint">{w.whyOthersIndex}</span>
                </div>
                <h3 className="mt-6 text-[22px] md:text-[26px] tracking-tighter2 font-semibold text-ink-muted leading-tight max-w-[22ch]">
                  {w.whyOthersTitle}
                </h3>

                <ul className="mt-9 space-y-7">
                  {w.whyOthers.map((item, i) => (
                    <li key={i} className="flex items-start gap-4">
                      <span
                        className="mt-0.5 shrink-0 w-7 h-7 rounded-full bg-white grid place-items-center"
                        style={{ color: RED, border: `1px solid ${RED_BORDER}` }}
                      >
                        <WhyXMark className="w-3.5 h-3.5" />
                      </span>
                      <div className="flex-1 min-w-0">
                        <div className="text-[15.5px] md:text-[16px] tracking-tighter2 font-semibold text-ink leading-snug">{item.title}</div>
                        <p className="mt-2 text-[14.5px] text-ink-muted leading-relaxed">{item.body}</p>
                        {item.emphasis && (
                          <p className="mt-2.5">
                            <span
                              className="font-semibold text-ink"
                              style={{ backgroundImage: HIGHLIGHT_BG, padding: "0 2px" }}
                            >
                              {item.emphasis}
                            </span>
                          </p>
                        )}
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            </article>
          </Reveal>

          {/* RIGHT — Zynflow */}
          <Reveal delay={120}>
            <article
              className="relative h-full rounded-3xl bg-white p-7 md:p-10"
              style={{
                border: "2px solid #2E75B6",
                boxShadow: "0 28px 70px -32px rgba(46,117,182,0.45), 0 8px 24px -16px rgba(46,117,182,0.18)"
              }}
            >
              <div className="absolute -top-3 left-7 inline-flex items-center gap-1.5 px-2.5 h-6 rounded-full bg-accent text-white text-[11px] font-mono uppercase tracking-[0.14em]">
                <span className="w-1 h-1 rounded-full bg-white" /> {w.whyZynBadge}
              </div>
              <div className="flex items-center justify-between">
                <div className="inline-flex items-center gap-2 px-2.5 h-7 rounded-full bg-accent-tint border border-accent/20 text-[10.5px] font-mono uppercase tracking-[0.16em] text-accent">
                  {w.whyZynTag}
                </div>
                <span className="text-[10.5px] font-mono uppercase tracking-[0.18em] text-ink-faint">{w.whyZynIndex}</span>
              </div>
              <h3 className="mt-6 text-[22px] md:text-[26px] tracking-tighter2 font-semibold text-ink leading-tight">
                {w.whyZynTitle}
              </h3>

              <ul className="mt-9 space-y-7">
                {w.whyZyn.map((item, i) => (
                  <Reveal key={i} delay={200 + i * 250} as="li" className="flex items-start gap-4">
                    <span
                      className="mt-0.5 shrink-0 w-7 h-7 rounded-full grid place-items-center text-white"
                      style={{ background: GREEN, boxShadow: "0 4px 12px -4px rgba(16,166,113,0.45)" }}
                    >
                      <CheckIcon className="w-3.5 h-3.5" />
                    </span>
                    <div className="flex-1 min-w-0">
                      <div className="text-[15.5px] md:text-[16px] tracking-tighter2 font-semibold text-ink leading-snug">{item.title}</div>
                      <p className="mt-2 text-[14.5px] text-ink-muted leading-relaxed">{item.body}</p>
                    </div>
                  </Reveal>
                ))}
              </ul>
            </article>
          </Reveal>
        </div>

        {/* CTA */}
        <Reveal delay={200} className="mt-14 md:mt-16 flex flex-col items-center text-center">
          <a
            href="#how-it-works"
            onClick={scrollToHow}
            className="group inline-flex items-center justify-center gap-2 h-14 px-7 rounded-full bg-accent text-white text-[15.5px] font-medium tracking-tighter2 transition-all duration-200 hover:bg-accent-dark hover:-translate-y-0.5"
            style={{ boxShadow: "0 14px 36px -14px rgba(46,117,182,0.55)" }}
          >
            {w.whyCtaPrimary}
            <ArrowIcon className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
          </a>
          <p className="mt-4 text-[13.5px] text-ink-faint">
            {w.whyCtaSecondaryPre}
            <a href={TEL_URL} className="text-ink font-medium ulink hover:text-accent transition-colors">{TEL_DISPLAY}</a>
            {w.whyCtaSecondaryPost}
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ----- AUDIT FORM -----
function AuditSection() {
  const { t, lang } = useLang();
  const h = t.home;
  const [state, setState] = zUseState({ name: "", url: "", email: "", sent: false, busy: false });

  const submit = (e) => {
    e.preventDefault();
    if (!state.url || !state.email || !state.name) return;
    setState((s) => ({ ...s, busy: true }));
    setTimeout(() => setState((s) => ({ ...s, busy: false, sent: true })), 900);
  };

  return (
    <section id="ai-audit" className="bg-bg border-t border-line scroll-mt-24">
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-24 md:py-36">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
          <Reveal className="lg:col-span-5">
            <Eyebrow>{h.auditKicker}</Eyebrow>
            <h2 className="mt-5 text-4xl md:text-[56px] leading-[1.02] tracking-tightest font-semibold text-ink">{h.auditH}</h2>
            <p className="mt-6 text-[17px] md:text-[19px] text-ink-muted leading-relaxed max-w-md">{h.auditSub}</p>
            <ul className="mt-10 space-y-3">
              {h.auditChecks.map((c, i) => (
                <li key={i} className="flex items-start gap-3">
                  <span className="mt-0.5 w-5 h-5 rounded-full bg-accent text-white grid place-items-center shrink-0">
                    <CheckIcon className="w-3 h-3" />
                  </span>
                  <span className="text-[15.5px] text-ink">{c}</span>
                </li>
              ))}
            </ul>
          </Reveal>

          <Reveal delay={120} className="lg:col-span-7">
            <div className="rounded-3xl bg-white border border-line p-7 md:p-10">
              {!state.sent ? (
                <form onSubmit={submit} className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="text-[11px] font-mono uppercase tracking-[0.18em] text-ink-faint">Audit · 10 min</div>
                    <div className="text-[11px] font-mono text-accent">100% gratuit</div>
                  </div>
                  <TextInput label={t.common.name} required placeholder={h.auditName}
                    value={state.name} onChange={(e) => setState((s) => ({ ...s, name: e.target.value }))} />
                  <TextInput label={t.common.email} type="email" required placeholder={h.auditEmail}
                    value={state.email} onChange={(e) => setState((s) => ({ ...s, email: e.target.value }))} />
                  <TextInput label={t.common.website} type="url" required placeholder={h.auditUrl}
                    value={state.url} onChange={(e) => setState((s) => ({ ...s, url: e.target.value }))} />
                  <button type="submit" disabled={state.busy}
                    className="group w-full inline-flex items-center justify-center gap-2 h-14 rounded-xl bg-ink text-white text-[16px] font-medium tracking-tighter2 hover:bg-[#1a1a1a] transition-all disabled:opacity-60">
                    {state.busy ? (lang === "fr" ? "Envoi…" : "Sending…") : h.auditBtn}
                    {!state.busy && <ArrowIcon className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />}
                  </button>
                  <p className="text-[12.5px] text-ink-faint">{h.auditFine}</p>
                </form>
              ) : (
                <div className="py-10 text-center">
                  <div className="w-12 h-12 rounded-full bg-accent text-white grid place-items-center mx-auto"><CheckIcon className="w-6 h-6" /></div>
                  <h3 className="mt-5 text-2xl tracking-tighter2 font-semibold text-ink">{lang === "fr" ? "Audit en route." : "Audit on the way."}</h3>
                  <p className="mt-2 text-ink-muted text-[15px]">{t.common.auditThanks}</p>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ----- ROI CALCULATOR -----
function RoiSection() {
  const { t, lang } = useLang();
  const h = t.home;
  const [leads, setLeads] = zUseState(45);
  const [value, setValue] = zUseState(8500);
  const [responseIdx, setResponseIdx] = zUseState(2);
  const [emailSent, setEmailSent] = zUseState(false);
  const [email, setEmail] = zUseState("");

  const lossPct = [0.0, 0.25, 0.45, 0.65][responseIdx];
  const loss = Math.round(leads * value * lossPct * 0.02);
  const recovered = Math.round(loss * 0.6);
  const net = Math.max(recovered - 300, 0);
  const roiMultiple = loss > 0 ? (recovered / 300) : 0;

  const fmt = (n) => {
    if (lang === "fr") return n.toLocaleString("fr-CA").replace(/\u00a0/g, " ") + " $";
    return "$" + n.toLocaleString("en-CA");
  };
  const fmtUnit = (n, unit) => (lang === "fr" ? `${n.toLocaleString("fr-CA")} ${unit}` : `${n.toLocaleString("en-CA")} ${unit}`);
  const fmtVal = (n) => (lang === "fr" ? `${n.toLocaleString("fr-CA")} $` : `$${n.toLocaleString("en-CA")}`);

  return (
    <section id="roi-calculator" className="bg-white border-y border-line scroll-mt-24">
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-24 md:py-36">
        <Reveal>
          <SectionHeader kicker={h.roiKicker} title={h.roiH} />
        </Reveal>

        <div className="mt-16 grid grid-cols-1 lg:grid-cols-12 gap-10">
          <Reveal className="lg:col-span-7">
            <div className="rounded-3xl border border-line bg-bg p-7 md:p-10 space-y-12">
              <div>
                <div className="flex items-center justify-between gap-4">
                  <label className="text-[14px] text-ink-muted">{h.roiQ1}</label>
                  <span className="font-mono text-[14px] text-ink">{fmtUnit(leads, h.roiLeadsUnit)}</span>
                </div>
                <input type="range" min="10" max="500" step="5" value={leads} onChange={(e) => setLeads(+e.target.value)} className="mt-3" />
                <div className="mt-1.5 flex justify-between text-[11px] font-mono text-ink-faint">
                  <span>10</span><span>500</span>
                </div>
              </div>
              <div>
                <div className="flex items-center justify-between gap-4">
                  <label className="text-[14px] text-ink-muted">{h.roiQ2}</label>
                  <span className="font-mono text-[14px] text-ink">{fmtVal(value)}</span>
                </div>
                <input type="range" min="100" max="50000" step="100" value={value} onChange={(e) => setValue(+e.target.value)} className="mt-3" />
                <div className="mt-1.5 flex justify-between text-[11px] font-mono text-ink-faint">
                  <span>{lang === "fr" ? "100 $" : "$100"}</span><span>{lang === "fr" ? "50 000 $" : "$50,000"}</span>
                </div>
              </div>
              <div>
                <label className="text-[14px] text-ink-muted block mb-3">{h.roiQ3}</label>
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                  {h.roiOpts.map((o, i) => (
                    <button key={i} onClick={() => setResponseIdx(i)}
                      className={`h-12 rounded-xl border text-[13.5px] font-medium tracking-tighter2 transition-all ${
                        responseIdx === i
                          ? "bg-ink text-white border-ink"
                          : "bg-white text-ink border-line hover:border-ink/40"
                      }`}>
                      {o}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={120} className="lg:col-span-5">
            <div className="sticky top-24 rounded-3xl bg-ink text-white p-7 md:p-10">
              <div className="text-[11px] font-mono uppercase tracking-[0.18em] text-white/50">{lang === "fr" ? "Estimation live" : "Live estimate"}</div>
              <p className="mt-6 text-white/70 text-[15px]">{h.roiOutPre}</p>
              <div className="mt-2 text-5xl md:text-7xl tracking-tightest font-semibold">{fmt(loss)}</div>
              <p className="text-white/50 text-[14px] mt-1">{h.roiOutPost}</p>

              <div className="mt-8 rounded-2xl border border-white/10 bg-white/[0.04] p-5">
                <p className="text-white/70 text-[14px] leading-relaxed">{h.roiOutZyn.replace("{amount}", fmt(recovered))}</p>
                <div className="mt-4 flex items-baseline gap-3">
                  <span className="text-[11px] font-mono uppercase tracking-[0.18em] text-accent">{h.roiOutRoi}</span>
                  <span className="text-3xl tracking-tighter2 font-semibold">{roiMultiple.toFixed(1)}x</span>
                </div>
                <div className="mt-3 text-[13px] text-white/60">
                  {h.roiNet} · <span className="text-white">{fmt(net)}</span> {h.roiPerMonth}
                </div>
              </div>

              {!emailSent ? (
                <form onSubmit={(e) => { e.preventDefault(); if (email) setEmailSent(true); }} className="mt-6 flex gap-2">
                  <input type="email" required placeholder={lang === "fr" ? "vous@cabinet.ca" : "you@firm.ca"}
                    value={email} onChange={(e) => setEmail(e.target.value)}
                    className="flex-1 h-12 px-4 rounded-xl bg-white/[0.06] border border-white/10 text-white placeholder:text-white/30 text-[14.5px] focus:border-accent focus:outline-none focus:ring-4 focus:ring-accent/20 transition" />
                  <button type="submit" className="shrink-0 h-12 px-5 rounded-xl bg-accent text-white text-[14px] font-medium hover:bg-accent-dark transition-colors">
                    <ArrowIcon className="w-4 h-4" />
                  </button>
                </form>
              ) : (
                <div className="mt-6 rounded-xl bg-emerald-500/10 border border-emerald-500/30 p-4 text-[13.5px] text-emerald-300">
                  <CheckIcon className="w-4 h-4 inline mr-1.5 -mt-0.5" />
                  {t.common.roiThanks}
                </div>
              )}
              <p className="mt-3 text-[12px] text-white/40">{h.roiCta}</p>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ===================== SERVICES =====================
function ServicesPage() {
  const { t, lang } = useLang();
  const s = t.services;

  return (
    <main>
      <section className="relative">
        <div className="absolute inset-0 dotgrid opacity-50 pointer-events-none" />
        <div className="relative max-w-[1240px] mx-auto px-6 md:px-10 pt-20 md:pt-32 pb-12">
          <Reveal><Eyebrow>{s.eyebrow}</Eyebrow></Reveal>
          <Reveal delay={60} as="h1" className="mt-6 text-[44px] sm:text-6xl md:text-[88px] leading-[0.98] tracking-tightest font-semibold text-ink max-w-[18ch]">
            {s.h}
          </Reveal>
          <Reveal delay={120} as="p" className="mt-7 text-[18px] md:text-[22px] text-ink-muted leading-relaxed max-w-[60ch]">
            {s.sub}
          </Reveal>
        </div>
      </section>

      <section className="pb-24 md:pb-36">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
            {s.tiers.map((tier, i) => (
              <Reveal key={i} delay={i * 60}>
                <article className={`relative h-full rounded-3xl p-7 md:p-9 flex flex-col transition-all ${
                  tier.featured ? "bg-ink text-white border border-ink shadow-[0_20px_60px_-20px_rgba(46,117,182,0.45)]" :
                  "bg-white border border-line hover:-translate-y-0.5 hover:shadow-[0_20px_50px_-30px_rgba(0,0,0,0.25)] duration-300"
                }`}>
                  {tier.featured && (
                    <div className="absolute -top-3 left-7 inline-flex items-center gap-1.5 px-2.5 h-6 rounded-full bg-accent text-white text-[11px] font-mono uppercase tracking-[0.14em]">
                      <span className="w-1 h-1 rounded-full bg-white" /> {s.mostPopular}
                    </div>
                  )}

                  <div>
                    <div className={`text-[11px] font-mono uppercase tracking-[0.18em] ${tier.featured ? "text-white/50" : "text-ink-faint"}`}>0{i+1}</div>
                    <h3 className="mt-3 text-[28px] md:text-[32px] tracking-tightest font-semibold leading-tight">{tier.name}</h3>
                    <p className={`mt-1 text-[14px] ${tier.featured ? "text-white/70" : "text-ink-muted"}`}>{tier.tagline}</p>
                  </div>

                  <div className="mt-7 grid grid-cols-2 gap-3">
                    <div className={`rounded-xl p-3 ${tier.featured ? "bg-white/[0.06]" : "bg-bg"}`}>
                      <div className={`text-[10.5px] font-mono uppercase tracking-[0.16em] ${tier.featured ? "text-white/40" : "text-ink-faint"}`}>{s.tierSetup}</div>
                      <div className="mt-1 text-[20px] tracking-tighter2 font-semibold">{tier.setup}</div>
                    </div>
                    <div className={`rounded-xl p-3 ${tier.featured ? "bg-white/[0.06]" : "bg-bg"}`}>
                      <div className={`text-[10.5px] font-mono uppercase tracking-[0.16em] ${tier.featured ? "text-white/40" : "text-ink-faint"}`}>{s.tierMonthly}</div>
                      <div className="mt-1 text-[20px] tracking-tighter2 font-semibold">{tier.monthly}</div>
                    </div>
                  </div>

                  <div className="mt-7">
                    <div className={`text-[10.5px] font-mono uppercase tracking-[0.16em] ${tier.featured ? "text-white/40" : "text-ink-faint"}`}>{s.tierTarget}</div>
                    <p className={`mt-2 text-[14.5px] ${tier.featured ? "text-white/80" : "text-ink-muted"}`}>{tier.who}</p>
                  </div>

                  <div className="mt-7 flex-1">
                    <div className={`text-[10.5px] font-mono uppercase tracking-[0.16em] ${tier.featured ? "text-white/40" : "text-ink-faint"}`}>{s.tierIncludes}</div>
                    <ul className="mt-3 space-y-2.5">
                      {tier.features.map((f, j) => (
                        <li key={j} className="flex items-start gap-2.5">
                          <span className={`mt-1 w-3.5 h-3.5 rounded-full grid place-items-center shrink-0 ${tier.featured ? "bg-accent text-white" : "bg-accent-tint text-accent"}`}>
                            <CheckIcon className="w-2.5 h-2.5" />
                          </span>
                          <span className={`text-[14.5px] leading-relaxed ${tier.featured ? "text-white/90" : "text-ink"}`}>{f}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <a href={CAL_URL} target="_blank" rel="noopener noreferrer"
                    className={`mt-9 inline-flex items-center justify-center gap-2 h-12 rounded-full text-[14.5px] font-medium tracking-tighter2 transition-all duration-200 ${
                      tier.featured ? "bg-accent text-white hover:bg-accent-dark" :
                      "bg-ink text-white hover:bg-[#1a1a1a]"
                    }`}>
                    {s.tierCta}
                    <ArrowIcon className="w-4 h-4" />
                  </a>
                </article>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ANNUAL SAVINGS */}
      <section className="border-t border-line bg-bg">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-24 md:py-32">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
            <Reveal className="lg:col-span-5">
              <Eyebrow>{s.annualKicker}</Eyebrow>
              <h2 className="mt-5 text-4xl md:text-[56px] leading-[1.02] tracking-tightest font-semibold text-ink">{s.annualH}</h2>
              <p className="mt-6 text-[17px] text-ink-muted leading-relaxed max-w-md">{s.annualSub}</p>
            </Reveal>
            <Reveal delay={100} className="lg:col-span-7">
              <div className="rounded-3xl bg-white border border-line overflow-hidden">
                {s.annualRows.map((row, i) => (
                  <div key={i} className={`flex items-baseline gap-4 px-6 md:px-8 py-5 ${i !== s.annualRows.length - 1 ? "border-b border-line" : ""}`}>
                    <div className="font-mono text-[11px] uppercase tracking-[0.16em] text-ink-faint w-6">0{i+1}</div>
                    <div className="flex-1 text-[16px] md:text-[17px] tracking-tighter2 font-medium text-ink">{row[0]}</div>
                    <div className="text-[18px] md:text-[20px] tracking-tighter2 font-semibold text-ink">{row[1]}</div>
                    <div className="hidden md:block text-[12.5px] text-ink-faint w-44 text-right">{row[2]}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="border-t border-line bg-white">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-20 md:py-28 text-center">
          <Reveal>
            <h2 className="text-3xl md:text-5xl tracking-tightest font-semibold text-ink max-w-[24ch] mx-auto text-balance">
              {s.finalH}
            </h2>
            <p className="mt-5 text-[16px] md:text-[18px] text-ink-muted max-w-xl mx-auto leading-relaxed">{s.finalSub}</p>
            <div className="mt-9">
              <PrimaryBtn href={CAL_URL} target="_blank">{s.finalCta}</PrimaryBtn>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

// ===================== CASES =====================
function CasesPage() {
  const { t, lang } = useLang();
  const c = t.cases;

  return (
    <main>
      <section className="relative">
        <div className="absolute inset-0 dotgrid opacity-50 pointer-events-none" />
        <div className="relative max-w-[1240px] mx-auto px-6 md:px-10 pt-20 md:pt-32 pb-16">
          <Reveal><Eyebrow>{c.eyebrow}</Eyebrow></Reveal>
          <Reveal delay={60} as="h1" className="mt-6 text-[44px] sm:text-6xl md:text-[88px] leading-[0.98] tracking-tightest font-semibold text-ink max-w-[18ch]">
            {c.h}
          </Reveal>
          <Reveal delay={120} as="p" className="mt-7 text-[18px] md:text-[22px] text-ink-muted leading-relaxed max-w-[60ch]">
            {c.sub}
          </Reveal>

          <Reveal delay={180} className="mt-10 inline-flex items-center gap-3 px-4 h-10 rounded-full bg-accent-tint text-accent border border-accent/20">
            <span className="font-mono text-[12px] uppercase tracking-[0.14em]">{c.slot}</span>
          </Reveal>
        </div>
      </section>

      <section>
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 pb-24 md:pb-32">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            {c.industries.map((ind, i) => (
              <Reveal key={i} delay={i * 50}>
                <div className="group relative rounded-2xl bg-white border border-line p-6 h-72 flex flex-col justify-between overflow-hidden">
                  <div className="absolute inset-0" style={{ backgroundImage: "repeating-linear-gradient(45deg, rgba(10,10,10,0.035) 0 2px, transparent 2px 14px)" }} />
                  <div className="relative">
                    <div className="text-[11px] font-mono uppercase tracking-[0.18em] text-ink-faint">{c.placeholderTitle} · 0{i+1}</div>
                    <h3 className="mt-3 text-[20px] tracking-tighter2 font-semibold text-ink">{ind}</h3>
                  </div>
                  <div className="relative">
                    <div className="font-mono text-[11px] uppercase tracking-[0.18em] text-accent">{c.placeholderSub}</div>
                    <div className="mt-3 h-1 w-full rounded-full bg-line2 overflow-hidden">
                      <div className="h-full bg-accent/60" style={{ width: `${30 + i * 10}%` }} />
                    </div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="border-y border-line bg-white">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-24 md:py-32">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
            <Reveal className="lg:col-span-6">
              <Eyebrow>{c.becomeKicker}</Eyebrow>
              <h2 className="mt-5 text-4xl md:text-[56px] leading-[1.02] tracking-tightest font-semibold text-ink">{c.becomeH}</h2>
              <p className="mt-6 text-[17px] text-ink-muted leading-relaxed max-w-md">{c.becomeP}</p>
              <ul className="mt-8 space-y-3">
                {c.becomeReqs.map((r, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <span className="mt-0.5 w-5 h-5 rounded-full bg-ink text-white grid place-items-center shrink-0">
                      <CheckIcon className="w-3 h-3" />
                    </span>
                    <span className="text-[15.5px] text-ink">{r}</span>
                  </li>
                ))}
              </ul>
              <div className="mt-10">
                <PrimaryBtn href={CAL_URL} target="_blank">{c.cta}</PrimaryBtn>
              </div>
            </Reveal>
            <Reveal delay={100} className="lg:col-span-6">
              <div className="rounded-3xl bg-ink text-white p-8 md:p-10">
                <div className="text-[11px] font-mono uppercase tracking-[0.18em] text-accent">{c.benefitsH}</div>
                <ul className="mt-6 space-y-4">
                  {c.benefits.map((b, i) => (
                    <li key={i} className="flex items-start gap-4 pb-4 border-b border-white/10 last:border-0">
                      <span className="font-mono text-[11px] uppercase tracking-[0.18em] text-white/40 mt-1">0{i+1}</span>
                      <span className="text-[16px] md:text-[17px] tracking-tighter2 text-white">{b}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

// ===================== BLOG =====================
function BlogPage() {
  const { t, lang } = useLang();
  const b = t.blog;
  const [email, setEmail] = zUseState("");
  const [sent, setSent] = zUseState(false);

  return (
    <main>
      <section className="relative">
        <div className="absolute inset-0 dotgrid opacity-50 pointer-events-none" />
        <div className="relative max-w-[1240px] mx-auto px-6 md:px-10 pt-20 md:pt-32 pb-12">
          <Reveal><Eyebrow>{b.eyebrow}</Eyebrow></Reveal>
          <Reveal delay={60} as="h1" className="mt-6 text-[44px] sm:text-6xl md:text-[88px] leading-[0.98] tracking-tightest font-semibold text-ink max-w-[18ch]">
            {b.h}
          </Reveal>
          <Reveal delay={120} as="p" className="mt-7 text-[18px] md:text-[22px] text-ink-muted leading-relaxed max-w-[60ch]">
            {b.sub}
          </Reveal>
        </div>
      </section>

      <section className="border-t border-line">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-20 md:py-28">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
            <Reveal className="lg:col-span-5">
              <Eyebrow>{lang === "fr" ? "Le programme" : "The plan"}</Eyebrow>
              <h2 className="mt-5 text-3xl md:text-5xl tracking-tightest font-semibold leading-tight text-ink max-w-[14ch]">{b.firstH}</h2>
              <p className="mt-6 text-[17px] text-ink-muted leading-relaxed max-w-md">{b.firstP}</p>
            </Reveal>
            <Reveal delay={100} className="lg:col-span-7">
              <div className="rounded-3xl bg-white border border-line overflow-hidden">
                <div className="px-6 md:px-8 py-4 border-b border-line text-[11px] font-mono uppercase tracking-[0.18em] text-ink-faint">{b.upcomingH}</div>
                {b.upcoming.map((u, i) => (
                  <div key={i} className={`px-6 md:px-8 py-5 ${i !== b.upcoming.length - 1 ? "border-b border-line" : ""}`}>
                    <div className="font-mono text-[11px] uppercase tracking-[0.16em] text-accent">{u.d}</div>
                    <h3 className="mt-2 text-[17px] md:text-[18.5px] tracking-tighter2 text-ink leading-snug">{u.t}</h3>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <section id="newsletter" className="border-t border-line bg-bg scroll-mt-24">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-20 md:py-28">
          <div className="rounded-3xl bg-ink text-white p-8 md:p-14 max-w-4xl mx-auto">
            <div className="text-[11px] font-mono uppercase tracking-[0.18em] text-white/50">{lang === "fr" ? "Newsletter mensuelle" : "Monthly newsletter"}</div>
            <h2 className="mt-4 text-3xl md:text-5xl tracking-tightest font-semibold leading-tight max-w-[22ch]">{b.formH}</h2>
            <p className="mt-4 text-white/60 text-[15px]">{b.formSub}</p>
            {!sent ? (
              <form onSubmit={(e) => { e.preventDefault(); if (email) setSent(true); }} className="mt-8 flex flex-col sm:flex-row gap-3">
                <input type="email" required placeholder={b.placeholder}
                  value={email} onChange={(e) => setEmail(e.target.value)}
                  className="flex-1 h-14 px-5 rounded-xl bg-white/[0.06] border border-white/10 text-white placeholder:text-white/30 text-[15.5px] focus:border-accent focus:outline-none focus:ring-4 focus:ring-accent/20 transition" />
                <button type="submit" className="shrink-0 h-14 px-6 rounded-xl bg-accent text-white text-[15px] font-medium hover:bg-accent-dark transition-colors inline-flex items-center justify-center gap-2">
                  {b.submit} <ArrowIcon className="w-4 h-4" />
                </button>
              </form>
            ) : (
              <div className="mt-8 rounded-xl bg-emerald-500/10 border border-emerald-500/30 p-5 text-emerald-300 text-[14.5px]">
                <CheckIcon className="w-4 h-4 inline mr-1.5 -mt-0.5" />
                {t.common.newsletterThanks}
              </div>
            )}
            <p className="mt-5 text-white/40 text-[12.5px]">{b.fine}</p>
          </div>
        </div>
      </section>
    </main>
  );
}

// ===================== CONTACT =====================
function ContactPage() {
  const { t, lang } = useLang();
  const c = t.contact;
  const [form, setForm] = zUseState({ name: "", email: "", phone: "", industry: c.industries[0], message: "" });
  const [sent, setSent] = zUseState(false);

  zUseEffect(() => {
    setForm((f) => ({ ...f, industry: c.industries[0] }));
  }, [lang]);

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setSent(true);
  };

  const blocks = [
    { ...c.blockA, href: CAL_URL, target: "_blank", icon: <CalIcon className="w-5 h-5" />, accent: true },
    { ...c.blockB, href: TEL_URL, icon: <PhoneIcon className="w-5 h-5" /> },
    { ...c.blockC, href: `mailto:${EMAIL}`, icon: <MailIcon className="w-5 h-5" /> }
  ];

  return (
    <main>
      <section className="relative">
        <div className="absolute inset-0 dotgrid opacity-50 pointer-events-none" />
        <div className="relative max-w-[1240px] mx-auto px-6 md:px-10 pt-20 md:pt-32 pb-12">
          <Reveal><Eyebrow>{c.eyebrow}</Eyebrow></Reveal>
          <Reveal delay={60} as="h1" className="mt-6 text-[44px] sm:text-6xl md:text-[88px] leading-[0.98] tracking-tightest font-semibold text-ink max-w-[18ch]">
            {c.h}
          </Reveal>
          <Reveal delay={120} as="p" className="mt-7 text-[18px] md:text-[22px] text-ink-muted leading-relaxed max-w-[60ch]">
            {c.sub}
          </Reveal>
        </div>
      </section>

      <section>
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 pb-16">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
            {blocks.map((bl, i) => (
              <Reveal key={i} delay={i * 60}>
                <a href={bl.href} target={bl.target} rel={bl.target ? "noopener noreferrer" : undefined}
                  className={`group block rounded-3xl p-7 md:p-9 h-full transition-all duration-300 hover:-translate-y-0.5 ${
                    bl.accent ? "bg-ink text-white" : "bg-white border border-line hover:border-ink/30"
                  }`}>
                  <div className="flex items-center justify-between">
                    <div className={`w-11 h-11 rounded-full grid place-items-center ${bl.accent ? "bg-white/10 text-white" : "bg-accent-tint text-accent"}`}>
                      {bl.icon}
                    </div>
                    <span className={`font-mono text-[11px] uppercase tracking-[0.18em] ${bl.accent ? "text-white/40" : "text-ink-faint"}`}>{bl.tag}</span>
                  </div>
                  <div className={`mt-8 inline-flex items-center gap-2 px-2.5 h-6 rounded-full text-[10.5px] font-mono uppercase tracking-[0.14em] ${
                    bl.accent ? "bg-white/10 text-white" : "bg-accent-tint text-accent"
                  }`}>{bl.flag}</div>
                  <h3 className="mt-4 text-[26px] tracking-tightest font-semibold">{bl.t}</h3>
                  <p className={`mt-3 text-[14.5px] leading-relaxed ${bl.accent ? "text-white/70" : "text-ink-muted"}`}>{bl.d}</p>
                  <div className={`mt-7 inline-flex items-center gap-1.5 text-[14px] font-medium ${bl.accent ? "text-white" : "text-ink group-hover:text-accent"} transition-colors`}>
                    {bl.btn} <ArrowIcon className="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-white border-t border-line">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-24 md:py-32">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
            <Reveal className="lg:col-span-5">
              <Eyebrow>{lang === "fr" ? "Formulaire" : "Form"}</Eyebrow>
              <h2 className="mt-5 text-4xl md:text-[56px] leading-[1.02] tracking-tightest font-semibold text-ink max-w-[14ch]">{c.formH}</h2>
              <p className="mt-5 text-[17px] text-ink-muted leading-relaxed max-w-md">{c.formSub}</p>
              <div className="mt-10 space-y-3 text-[14.5px] text-ink-muted">
                <div className="flex items-center gap-3"><PhoneIcon className="w-4 h-4 text-ink-faint" /> {TEL_DISPLAY}</div>
                <div className="flex items-center gap-3"><MailIcon className="w-4 h-4 text-ink-faint" /> {EMAIL}</div>
                <div className="flex items-center gap-3"><CalIcon className="w-4 h-4 text-ink-faint" /> cal.com/zynflow</div>
              </div>
            </Reveal>

            <Reveal delay={120} className="lg:col-span-7">
              <div className="rounded-3xl bg-bg border border-line p-7 md:p-10">
                {!sent ? (
                  <form onSubmit={submit} className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <TextInput label={t.common.name} required value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} placeholder={lang === "fr" ? "Camille Tremblay" : "Avery Lee"} />
                    <TextInput label={t.common.email} type="email" required value={form.email} onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))} placeholder={lang === "fr" ? "vous@cabinet.ca" : "you@firm.ca"} />
                    <TextInput label={t.common.phone} type="tel" value={form.phone} onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))} placeholder="(514) 555-0123" />
                    <label className="block">
                      <span className="block text-[12px] font-medium text-ink-muted mb-2">{c.industryLabel}</span>
                      <select
                        value={form.industry}
                        onChange={(e) => setForm((f) => ({ ...f, industry: e.target.value }))}
                        className="w-full h-12 px-4 rounded-xl border border-line bg-white text-ink text-[15px] focus:border-accent focus:outline-none focus:ring-4 focus:ring-accent/15 transition-shadow appearance-none"
                        style={{ backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238A8A8A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>\")", backgroundRepeat: "no-repeat", backgroundPosition: "right 14px center" }}
                      >
                        {c.industries.map((i) => <option key={i} value={i}>{i}</option>)}
                      </select>
                    </label>
                    <div className="md:col-span-2">
                      <Textarea label={t.common.message} required value={form.message} onChange={(e) => setForm((f) => ({ ...f, message: e.target.value }))} placeholder={lang === "fr" ? "Une phrase ou trois suffisent." : "A sentence or three is plenty."} />
                    </div>
                    <div className="md:col-span-2 flex items-center justify-between gap-4 pt-2 flex-wrap">
                      <p className="text-[12.5px] text-ink-faint max-w-xs">{lang === "fr" ? "En envoyant, vous acceptez la politique Loi 25." : "By sending, you accept the Law 25 policy."}</p>
                      <button type="submit" className="group inline-flex items-center justify-center gap-2 h-12 px-6 rounded-full bg-ink text-white text-[15px] font-medium hover:bg-[#1a1a1a] transition-colors">
                        {t.common.send} <ArrowIcon className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
                      </button>
                    </div>
                  </form>
                ) : (
                  <div className="py-12 text-center">
                    <div className="w-12 h-12 rounded-full bg-accent text-white grid place-items-center mx-auto"><CheckIcon className="w-6 h-6" /></div>
                    <h3 className="mt-5 text-3xl tracking-tighter2 font-semibold text-ink">{c.sentH}</h3>
                    <p className="mt-2 text-ink-muted text-[16px]">{c.sentSub}</p>
                  </div>
                )}
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

// ===================== LEGAL PAGES =====================
function LegalPage({ docKey, setRoute }) {
  const { t } = useLang();
  const lp = t.legalPages;
  const doc = lp[docKey];

  return (
    <main>
      <section className="relative">
        <div className="absolute inset-0 dotgrid opacity-40 pointer-events-none" />
        <div className="relative max-w-[860px] mx-auto px-6 md:px-10 pt-20 md:pt-32 pb-10">
          <Reveal>
            <button
              onClick={() => setRoute("home")}
              className="inline-flex items-center gap-1.5 text-[13px] font-medium text-ink-muted hover:text-ink hover:underline underline-offset-4 transition-all duration-200"
            >
              <ArrowIcon className="w-3.5 h-3.5 rotate-180" />
              {lp.backHome}
            </button>
          </Reveal>
          <Reveal delay={60}>
            <div className="mt-8"><Eyebrow>{doc.eyebrow}</Eyebrow></div>
          </Reveal>
          <Reveal delay={120} as="h1" className="mt-5 text-[40px] sm:text-5xl md:text-[68px] leading-[1.02] tracking-tightest font-semibold text-ink max-w-[18ch]">
            {doc.title}
          </Reveal>
          <Reveal delay={180} as="p" className="mt-3 text-[12px] font-mono uppercase tracking-[0.16em] text-ink-faint">
            {lp.updated} · {lp.updatedDate}
          </Reveal>
        </div>
      </section>

      <section>
        <div className="max-w-[860px] mx-auto px-6 md:px-10 pb-20 md:pb-28">
          <Reveal delay={160}>
            <p className="text-[17px] md:text-[19px] text-ink-muted leading-relaxed">{doc.intro}</p>
          </Reveal>

          <div className="mt-12 space-y-10">
            {doc.sections.map((s, i) => (
              <Reveal key={i} delay={80 + i * 60}>
                <div className="border-t border-line pt-8">
                  <div className="font-mono text-[11px] uppercase tracking-[0.16em] text-accent">{String(i + 1).padStart(2, "0")}</div>
                  <h2 className="mt-3 text-[22px] md:text-[26px] tracking-tighter2 font-semibold text-ink leading-snug">{s.h}</h2>
                  <p className="mt-4 text-[16px] text-ink-muted leading-relaxed">{s.p}</p>
                </div>
              </Reveal>
            ))}
          </div>

          <Reveal delay={240}>
            <div className="mt-14 rounded-2xl border border-line bg-white p-6 md:p-7 flex items-start gap-4">
              <div className="shrink-0 w-9 h-9 rounded-full bg-accent-tint text-accent grid place-items-center">
                <MailIcon className="w-4 h-4" />
              </div>
              <p className="text-[14.5px] text-ink-muted leading-relaxed">
                {lp.placeholder}
                <a href={`mailto:${EMAIL}`} className="text-ink font-medium ulink hover:text-accent transition-colors">{lp.placeholderEmail}</a>
                .
              </p>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

function PrivacyPage(props) { return <LegalPage docKey="privacy" {...props} />; }
function TermsPage(props) { return <LegalPage docKey="terms" {...props} />; }
function Law25Page(props) { return <LegalPage docKey="law25" {...props} />; }

Object.assign(window, { HomePage, ServicesPage, CasesPage, BlogPage, ContactPage, PrivacyPage, TermsPage, Law25Page });