/* global React, Icon, COPY */
const { useState, useEffect, useRef } = React;

/* =========================================================
   useReveal — IntersectionObserver fade-up
   ========================================================= */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // If already in viewport at mount, reveal immediately (avoids invisible above-the-fold).
    const r = el.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    if (r.top < vh && r.bottom > 0) {
      el.classList.add("is-visible");
      return;
    }
    const io = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { el.classList.add("is-visible"); io.disconnect(); } },
      { threshold: 0.12, rootMargin: "0px 0px -10% 0px" }
    );
    io.observe(el);
    // Safety net: ensure visible after a short delay no matter what.
    const tm = setTimeout(() => { el.classList.add("is-visible"); }, 1200);
    return () => { io.disconnect(); clearTimeout(tm); };
  }, []);
  return ref;
}

/* =========================================================
   Nav
   ========================================================= */
function Nav({ t }) {
  return (
    <nav className="nav">
      <div className="container nav__inner">
        <a href="#top" className="nav__logo">
          <span className="nav__logo-mark">P</span>
          <span>praatbox</span>
        </a>
        <div className="nav__links">
          <a href="#features">{t.nav.features}</a>
          <a href="#pricing">{t.nav.pricing}</a>
          <a href="#developers">{t.nav.developers}</a>
          <a href="#customers">{t.nav.customers}</a>
        </div>
        <div className="nav__cta">
          <a href="Login.html" className="btn btn--ghost btn--sm">{t.nav.login}</a>
          <a href="Register.html" className="btn btn--primary btn--sm">{t.nav.signup} <Icon.Arrow /></a>
        </div>
      </div>
    </nav>
  );
}

/* =========================================================
   ChatWidget — interactive demo
   ========================================================= */
const DEMO_FLOWS = {
  en: [
    { user: "Do you ship to Belgium?", bot: "Yes — we ship to Belgium with DHL Express. Orders before 14:00 are delivered next business day. €4.95 flat rate, free over €75. Want me to track an existing order?" },
    { user: "I want to cancel my plan.", bot: "Sorry to see you go! You can cancel any time from Billing → Manage subscription. Your access stays active until the end of the current period. Want me to walk you through it, or open a ticket for our retention team?" },
    { user: "Refund policy?", bot: "30-day no-questions-back. Refunds land in your account in 5–10 business days. Need me to start one for order #?" },
  ],
  nl: [
    { user: "Versturen jullie naar België?", bot: "Ja — we versturen naar België met DHL Express. Bestellingen vóór 14:00 worden de volgende werkdag bezorgd. €4,95 vast tarief, gratis vanaf €75. Zal ik een bestelling voor je traceren?" },
    { user: "Ik wil mijn abonnement opzeggen.", bot: "Jammer dat je gaat! Je kunt op elk moment opzeggen via Facturatie → Abonnement beheren. Je toegang blijft tot het einde van de periode. Zal ik je doorlopen, of een ticket voor ons retentieteam openen?" },
    { user: "Wat is jullie retourbeleid?", bot: "30 dagen zonder vragen terug. Restituties staan binnen 5–10 werkdagen op je rekening. Zal ik er een starten voor bestelling #?" },
  ],
};

const SUGGESTED = {
  en: ["Do you ship to Belgium?", "I want to cancel my plan.", "Refund policy?"],
  nl: ["Versturen jullie naar België?", "Ik wil mijn abonnement opzeggen.", "Wat is jullie retourbeleid?"],
};

function ChatWidget({ language, accent }) {
  const flows = DEMO_FLOWS[language] || DEMO_FLOWS.en;
  const suggested = SUGGESTED[language] || SUGGESTED.en;

  const [messages, setMessages] = useState([
    { role: "bot", text: language === "nl"
      ? "Hoi! Ik ben Praatbox — getraind op de docs van Glodinas. Stel me iets."
      : "Hi! I'm Praatbox — trained on the Glodinas docs. Ask me anything." },
  ]);
  const [typing, setTyping] = useState(false);
  const [draft, setDraft] = useState("");
  const bodyRef = useRef(null);

  const send = (text) => {
    const t = text.trim();
    if (!t) return;
    setMessages((m) => [...m, { role: "user", text: t }]);
    setDraft("");
    setTyping(true);

    const flow = flows.find((f) => f.user.toLowerCase() === t.toLowerCase());
    const botText = flow ? flow.bot : (language === "nl"
      ? "Goede vraag — ik kijk in de documentatie en kom er zo op terug. Ondertussen kun je een vraag stellen aan een mens."
      : "Good question — let me check the docs and circle back. In the meantime you can route this to a human.");

    setTimeout(() => {
      setTyping(false);
      setMessages((m) => [...m, { role: "bot", text: botText }]);
    }, 1100);
  };

  useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [messages, typing]);

  return (
    <div className="widget" style={{ "--accent": accent }}>
      <div className="widget__header">
        <div className="widget__brand">
          <span className="widget__avatar">P</span>
          <span>Praatbox · Glodinas</span>
        </div>
        <div className="widget__greet">
          {language === "nl" ? <>Hoi 👋 — <em>waar kunnen we mee helpen?</em></> : <>Hey there — <em>what can we help with?</em></>}
        </div>
        <div className="widget__status">{language === "nl" ? "Reageert in seconden" : "Replies in seconds"}</div>
      </div>

      <div className="widget__body" ref={bodyRef}>
        {messages.map((m, i) => (
          <div key={i} className={`bubble bubble--${m.role}`}>{m.text}</div>
        ))}
        {typing && (
          <div className="bubble--typing"><span></span><span></span><span></span></div>
        )}
      </div>

      <div className="widget__suggested">
        {suggested.map((s) => (
          <button key={s} onClick={() => send(s)}>{s}</button>
        ))}
      </div>

      <div className="widget__input">
        <input
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter") send(draft); }}
          placeholder={language === "nl" ? "Typ een bericht…" : "Type a message…"}
        />
        <button className="widget__send" onClick={() => send(draft)} aria-label="Send">
          <Icon.Send />
        </button>
      </div>
      <div className="widget__footer-mini">{language === "nl" ? "Aangedreven door " : "Powered by "}praatbox</div>
    </div>
  );
}

/* =========================================================
   Hero
   ========================================================= */
function Hero({ t, variant, language, accent, showDemo }) {
  const ref = useReveal();
  const cls = `hero ${variant === "center" ? "hero--center" : ""} ${variant === "demo" ? "hero--demo" : ""}`;

  const Copy = (
    <div className="hero__copy reveal" ref={ref}>
      <span className="eyebrow">{t.hero.eyebrow}</span>
      <h1 className="display display--xxl">
        {t.hero.titleA} <em className="italic" style={{ color: "var(--accent)" }}>{t.hero.titleB}</em>
      </h1>
      <p className="lead hero__sub">{t.hero.sub}</p>
      <div className="hero__cta">
        <a href="Register.html" className="btn btn--primary">{t.hero.cta1} <Icon.Arrow /></a>
        <a href="Live Demo.html" className="btn btn--ghost">▸ {t.hero.cta2}</a>
      </div>
      <div className="hero__meta">
        <span className="hero__meta-item"><span className="hero__meta-dot"></span>{t.hero.meta1}</span>
        <span className="hero__meta-item"><span className="hero__meta-dot"></span>{t.hero.meta2}</span>
        <span className="hero__meta-item"><span className="hero__meta-dot"></span>{t.hero.meta3}</span>
      </div>
    </div>
  );

  const Visual = showDemo ? (
    <div className="hero__visual">
      <div className="widget-stage">
        <div className="widget-stage__site">
          <div className="widget-stage__chrome"><span></span><span></span><span></span></div>
          <div className="widget-stage__placeholder">
            <div className="widget-stage__bar w-40"></div>
            <div className="widget-stage__bar w-80"></div>
            <div className="widget-stage__bar w-60"></div>
            <div className="widget-stage__bar w-80"></div>
            <div className="widget-stage__bar w-40"></div>
            <div className="widget-stage__bar w-60"></div>
          </div>
        </div>
        <ChatWidget language={language} accent={accent} />
      </div>
    </div>
  ) : null;

  return (
    <section id="top" className={cls}>
      <div className="container">
        <div className="hero__grid">
          {Copy}
          {Visual}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   Logo strip
   ========================================================= */
function LogoStrip({ t }) {
  return (
    <section className="logo-strip">
      <div className="container logo-strip__inner">
        <span className="mono logo-strip__label">{t.proof.label}</span>
        <div className="logo-strip__row">
          <span className="logo-strip__logo italic">Glodinas</span>
          <span className="logo-strip__logo--mono">STUDIOBLOOM</span>
          <span className="logo-strip__logo">Northtree</span>
          <span className="logo-strip__logo--mono">GRAIN/CO</span>
          <span className="logo-strip__logo italic">Marbles</span>
          <span className="logo-strip__logo--mono">HALCYON</span>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   How it works
   ========================================================= */
function HowItWorks({ t }) {
  const ref = useReveal();
  const codeSnippet = (
    <pre className="code"><span className="tk-cm">{`<!-- Add to <head> -->`}</span>{"\n"}<span className="tk-tag">&lt;script</span>{"\n  "}<span className="tk-attr">src</span>=<span className="tk-str">"https://praatbox.com/widget.js"</span>{"\n  "}<span className="tk-attr">data-partner</span>=<span className="tk-str">"px_4f9..."</span>{"\n  "}<span className="tk-attr">async</span><span className="tk-tag">&gt;&lt;/script&gt;</span></pre>
  );
  return (
    <section id="features" className="how section">
      <div className="container reveal" ref={ref}>
        <div className="how__head">
          <div>
            <span className="eyebrow">{t.how.eyebrow}</span>
            <h2 className="display display--lg" style={{ marginTop: 18 }}>
              {t.how.title} <em className="italic" style={{ color: "var(--accent)" }}>{t.how.titleEm}</em>
            </h2>
          </div>
          <p className="lead">{t.how.sub}</p>
        </div>
        <div className="how__steps">
          {t.how.steps.map((s) => (
            <div className="step" key={s.num}>
              <div className="step__num">{s.num}</div>
              <h3 className="step__title">{s.title} <em>{s.titleEm}</em></h3>
              <p className="step__body">{s.body}</p>
              {s.showCode && <div className="step__visual">{codeSnippet}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   Features bento
   ========================================================= */
function Features({ t }) {
  const ref = useReveal();
  const f = t.features.items;
  return (
    <section className="features section">
      <div className="container reveal" ref={ref}>
        <div className="how__head">
          <div>
            <span className="eyebrow">{t.features.eyebrow}</span>
            <h2 className="display display--lg" style={{ marginTop: 18 }}>
              {t.features.title} <em className="italic" style={{ color: "var(--accent)" }}>{t.features.titleEm}</em>
            </h2>
          </div>
          <p className="lead">{t.features.sub}</p>
        </div>
        <div className="features__grid">
          {/* AI brain — wide */}
          <div className="feature feature--wide">
            <div className="feature__icon"><Icon.Brain /></div>
            <h3 className="feature__title">{f.ai.title} <em>{f.ai.titleEm}</em></h3>
            <p className="feature__body">{f.ai.body}</p>
            <div className="feature__viz tags">
              <span className="tags__t">help.glodinas.com/*</span>
              <span className="tags__t">notion.so/team</span>
              <span className="tags__t">policies.pdf</span>
              <span className="tags__t">faq.md</span>
              <span className="tags__t">+12 sources</span>
            </div>
          </div>
          {/* Analytics — narrow */}
          <div className="feature feature--narrow">
            <div className="feature__icon"><Icon.Activity /></div>
            <h3 className="feature__title">{f.analytics.title}</h3>
            <p className="feature__body">{f.analytics.body}</p>
            <div className="feature__viz viz-analytics">
              <div className="viz-analytics__row"><span>Conversations · 30d</span><span>+24%</span></div>
              <div className="viz-analytics__bars">
                {[24, 38, 30, 52, 40, 64, 48, 72, 80, 92, 70, 88].map((h, i) => (
                  <div key={i} className={`viz-analytics__bar ${i > 7 ? "is-active" : ""}`} style={{ height: `${h}%` }}></div>
                ))}
              </div>
            </div>
          </div>
          {/* Team handoff — half */}
          <div className="feature feature--half">
            <div className="feature__icon"><Icon.Users /></div>
            <h3 className="feature__title">{f.team.title}</h3>
            <p className="feature__body">{f.team.body}</p>
            <div className="avatars">
              <span className="avatars__a">AI</span>
              <span className="avatars__a avatars__a--alt">AV</span>
              <span className="avatars__a avatars__a--alt2">MK</span>
              <span className="avatars__a avatars__a--alt2">SL</span>
              <span className="avatars__a avatars__a--alt2">+3</span>
            </div>
          </div>
          {/* Brand — half */}
          <div className="feature feature--half">
            <div className="feature__icon"><Icon.Sparkles /></div>
            <h3 className="feature__title">{f.brand.title}</h3>
            <p className="feature__body">{f.brand.body}</p>
            <div className="feature__viz" style={{ display: "flex", gap: 8 }}>
              {["#1b6e3b", "#2563eb", "#dc2626", "#9333ea", "#ea580c", "#0d9488"].map((c) => (
                <div key={c} style={{ width: 28, height: 28, borderRadius: 8, background: c, border: "1px solid var(--line)" }}></div>
              ))}
            </div>
          </div>
          {/* i18n — half */}
          <div className="feature feature--half">
            <div className="feature__icon"><Icon.Globe /></div>
            <h3 className="feature__title">{f.i18n.title}</h3>
            <p className="feature__body">{f.i18n.body}</p>
            <div className="tags" style={{ marginTop: "auto" }}>
              {["NL", "EN", "DE", "FR", "ES", "IT", "PT", "PL", "+22"].map((l) => (
                <span key={l} className="tags__t">{l}</span>
              ))}
            </div>
          </div>
          {/* Security — half */}
          <div className="feature feature--half">
            <div className="feature__icon"><Icon.Shield /></div>
            <h3 className="feature__title">{f.security.title}</h3>
            <p className="feature__body">{f.security.body}</p>
            <div className="tags" style={{ marginTop: "auto" }}>
              <span className="tags__t">EU-Frankfurt</span>
              <span className="tags__t">GDPR</span>
              <span className="tags__t">SOC 2 (in flight)</span>
              <span className="tags__t">SSO/SAML</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   Showcase — interactive widget side-by-side
   ========================================================= */
function Showcase({ t, language, accent }) {
  const [active, setActive] = useState(0);
  const ref = useReveal();
  return (
    <section className="showcase section">
      <div className="container reveal" ref={ref}>
        <div className="how__head">
          <div>
            <span className="eyebrow">{t.showcase.eyebrow}</span>
            <h2 className="display display--lg" style={{ marginTop: 18 }}>
              {t.showcase.title} <em className="italic" style={{ color: "var(--accent)" }}>{t.showcase.titleEm}</em>
            </h2>
          </div>
          <p className="lead">{t.showcase.sub}</p>
        </div>
        <div className="showcase__grid">
          <div className="showcase__list">
            {t.showcase.items.map((it, i) => (
              <button
                key={it.num}
                className={`showcase__item ${active === i ? "is-active" : ""}`}
                onClick={() => setActive(i)}
              >
                <span className="showcase__num">{it.num}</span>
                <div>
                  <h3 className="showcase__title">{it.title} <em>{it.titleEm}</em></h3>
                  <p className="showcase__body">{it.body}</p>
                </div>
              </button>
            ))}
          </div>
          <div className="widget-stage" style={{ minHeight: 540 }}>
            <div className="widget-stage__site">
              <div className="widget-stage__chrome"><span></span><span></span><span></span></div>
              <div className="widget-stage__placeholder">
                <div className="widget-stage__bar w-40"></div>
                <div className="widget-stage__bar w-80"></div>
                <div className="widget-stage__bar w-60"></div>
                <div className="widget-stage__bar w-80"></div>
                <div className="widget-stage__bar w-40"></div>
              </div>
            </div>
            <ChatWidget language={language} accent={accent} />
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   Pricing
   ========================================================= */
function Pricing({ t }) {
  const ref = useReveal();
  return (
    <section id="pricing" className="pricing section">
      <div className="container reveal" ref={ref}>
        <div className="how__head">
          <div>
            <span className="eyebrow">{t.pricing.eyebrow}</span>
            <h2 className="display display--lg" style={{ marginTop: 18 }}>
              {t.pricing.title} <em className="italic" style={{ color: "var(--accent)" }}>{t.pricing.titleEm}</em>
            </h2>
          </div>
          <p className="lead">{t.pricing.sub}</p>
        </div>
        <div className="pricing__grid">
          {t.pricing.plans.map((p) => (
            <div key={p.name} className={`plan ${p.featured ? "plan--featured" : ""}`}>
              {p.badge && <span className="plan__badge">{p.badge}</span>}
              <div>
                <h3 className="plan__name">{p.name}</h3>
                <p className="plan__tagline">{p.tagline}</p>
              </div>
              <div className="plan__price">
                <span>{p.price}</span>
                <span className="plan__price-unit">{p.unit}</span>
              </div>
              <ul className="plan__list">
                {p.features.map((f) => (
                  <li key={f}><Icon.Check /> {f}</li>
                ))}
              </ul>
              <a href="Register.html" className={`btn ${p.featured ? "btn--accent" : "btn--ghost"}`} style={{ marginTop: "auto" }}>{p.cta} <Icon.Arrow /></a>
            </div>
          ))}
        </div>
        <p className="mono" style={{ marginTop: 32, textAlign: "center" }}>{t.pricing.seatNote}</p>
      </div>
    </section>
  );
}

/* =========================================================
   Stats
   ========================================================= */
function Stats({ t }) {
  return (
    <section className="stats">
      <div className="stats__grid">
        {t.stats.map((s, i) => (
          <div key={i} className="stat">
            <div className="stat__num">{i % 2 === 0 ? <em>{s.num}</em> : s.num}</div>
            <div className="stat__lbl">{s.lbl}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* =========================================================
   Testimonials
   ========================================================= */
function Testimonials({ t }) {
  const ref = useReveal();
  return (
    <section id="customers" className="testi section">
      <div className="container reveal" ref={ref}>
        <span className="eyebrow">{t.testi.eyebrow}</span>
        <p className="testi__quote" style={{ marginTop: 24 }}>
          "{t.testi.quote} <em>{t.testi.quoteEm}</em>"
        </p>
        <div className="testi__attr">
          <div className="testi__avatar">A</div>
          <div>
            <div className="testi__name">{t.testi.name}</div>
            <div className="testi__role">{t.testi.role}</div>
          </div>
        </div>
        <div className="testi__small">
          {t.testi.small.map((q, i) => (
            <div key={i} className="testi__small-card">
              <p>"{q.quote}"</p>
              <div>
                <div className="testi__name">{q.name}</div>
                <div className="testi__role">{q.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   Developer
   ========================================================= */
function Developer({ t }) {
  const [tab, setTab] = useState("html");
  const ref = useReveal();

  const TABS = {
    html: (
      <pre><span className="tk-cm">{`<!-- Add to <head> — that's it. -->`}</span>{"\n"}<span className="tk-tag">&lt;script</span>{"\n  "}<span className="tk-attr">src</span>=<span className="tk-str">"https://praatbox.com/widget.js"</span>{"\n  "}<span className="tk-attr">data-partner</span>=<span className="tk-str">"px_4f9c2a"</span>{"\n  "}<span className="tk-attr">data-color</span>=<span className="tk-str">"#1b6e3b"</span>{"\n  "}<span className="tk-attr">data-locale</span>=<span className="tk-str">"auto"</span>{"\n  "}<span className="tk-attr">async</span><span className="tk-tag">&gt;&lt;/script&gt;</span></pre>
    ),
    js: (
      <pre><span className="tk-cm">// Programmatic control on window.Praatbox</span>{"\n"}<span className="tk-fn">Praatbox</span>.<span className="tk-fn">identify</span>(<span className="tk-key">{`{`}</span>{"\n  "}<span className="tk-attr">id</span>: <span className="tk-str">"u_482"</span>,{"\n  "}<span className="tk-attr">email</span>: <span className="tk-str">"anouk@glodinas.nl"</span>,{"\n  "}<span className="tk-attr">plan</span>: <span className="tk-str">"business"</span>{"\n"}<span className="tk-key">{`}`}</span>);{"\n\n"}<span className="tk-fn">Praatbox</span>.<span className="tk-fn">on</span>(<span className="tk-str">"handoff"</span>, (<span className="tk-attr">conv</span>) =&gt; <span className="tk-key">{`{`}</span>{"\n  "}<span className="tk-fn">analytics</span>.<span className="tk-fn">track</span>(<span className="tk-str">"chat_handoff"</span>, conv);{"\n"}<span className="tk-key">{`}`}</span>);</pre>
    ),
    webhook: (
      <pre><span className="tk-cm"># POST to your endpoint on every event</span>{"\n"}<span className="tk-tag">POST</span> <span className="tk-str">/webhooks/praatbox</span>{"\n"}<span className="tk-attr">x-praatbox-signature</span>: <span className="tk-str">sha256=…</span>{"\n\n"}<span className="tk-key">{`{`}</span>{"\n  "}<span className="tk-attr">"event"</span>: <span className="tk-str">"conversation.handoff"</span>,{"\n  "}<span className="tk-attr">"conversation_id"</span>: <span className="tk-str">"c_9a3f"</span>,{"\n  "}<span className="tk-attr">"reason"</span>: <span className="tk-str">"low_confidence"</span>,{"\n  "}<span className="tk-attr">"transcript_url"</span>: <span className="tk-str">"https://…"</span>{"\n"}<span className="tk-key">{`}`}</span></pre>
    ),
  };

  return (
    <section id="developers" className="dev section">
      <div className="container reveal" ref={ref}>
        <div className="dev__grid">
          <div>
            <span className="eyebrow">{t.dev.eyebrow}</span>
            <h2 className="display display--lg" style={{ marginTop: 18 }}>
              {t.dev.title} <em>{t.dev.titleEm}</em>
            </h2>
            <p className="lead dev__lead">{t.dev.sub}</p>
            <ul className="dev__bullets">
              {t.dev.bullets.map((b) => <li key={b}>{b}</li>)}
            </ul>
          </div>
          <div className="dev__codeblock">
            <div className="dev__code-tabs">
              {[["html","Embed"],["js","JS API"],["webhook","Webhooks"]].map(([k, l]) => (
                <button key={k} className={`dev__code-tab ${tab===k?"is-active":""}`} onClick={() => setTab(k)}>{l}</button>
              ))}
            </div>
            <div className="dev__code-body">{TABS[tab]}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   Big CTA + Footer
   ========================================================= */
function BigCTA({ t }) {
  const ref = useReveal();
  return (
    <section className="cta">
      <div className="container reveal" ref={ref}>
        <div className="cta__inner">
          <span className="eyebrow">{t.nav.signup}</span>
          <h2 className="display display--xl">
            {t.cta.title} <em className="italic" style={{ color: "var(--accent)" }}>{t.cta.titleEm}</em>
          </h2>
          <p className="lead cta__sub">{t.cta.sub}</p>
          <a href="Register.html" className="btn btn--primary">{t.cta.button} <Icon.Arrow /></a>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div>
            <a href="#top" className="nav__logo" style={{ marginBottom: 16 }}>
              <span className="nav__logo-mark">P</span>
              <span>praatbox</span>
            </a>
            <p className="mono" style={{ maxWidth: "26ch", marginTop: 12 }}>{t.footer.tagline}</p>
          </div>
          {Object.entries(t.footer.cols).map(([h, items]) => {
            const linkMap = {
              "Features": "Praatbox Marketing.html#features", "Functies": "Praatbox Marketing.html#features",
              "Pricing": "Pricing.html", "Tarieven": "Pricing.html",
              "Live demo": "Live Demo.html", "Live-demo": "Live Demo.html",
              "Integrations": "Integrations.html", "Integraties": "Integrations.html",
              "Changelog": "Changelog.html", "Wijzigingen": "Changelog.html",
              "Documentation": "Documentation.html", "Documentatie": "Documentation.html",
              "API reference": "API Reference.html", "API-referentie": "API Reference.html",
              "Webhooks": "Webhooks.html",
              "Self-hosted": "Self-hosted.html", "Zelf gehost": "Self-hosted.html",
              "Status": "Status.html",
              "About": "About.html", "Over ons": "About.html",
              "Customers": "Customers.html", "Klanten": "Customers.html",
              "Careers": "Careers.html", "Vacatures": "Careers.html",
              "Press kit": "Press Kit.html", "Perskit": "Press Kit.html",
              "Contact": "Contact.html",
              "Privacy": "Privacy.html",
              "Terms": "Terms.html", "Voorwaarden": "Terms.html",
              "DPA": "DPA.html",
              "Security": "Security.html", "Beveiliging": "Security.html",
              "Cookies": "Cookies.html",
            };
            return (
              <div key={h} className="footer__col">
                <h5>{h}</h5>
                <ul>
                  {items.map((i) => <li key={i}><a href={linkMap[i] || "#"} className="ulink">{i}</a></li>)}
                </ul>
              </div>
            );
          })}
        </div>
        <div className="footer__lockup">praat<em>box</em>.</div>
        <div className="footer__legal">
          <span>{t.footer.legal}</span>
          <span>● {t.footer.legalRight}</span>
        </div>
      </div>
    </footer>
  );
}

window.Sections = { Nav, Hero, LogoStrip, HowItWorks, Features, Showcase, Pricing, Stats, Testimonials, Developer, BigCTA, Footer };