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

/* =========================================================
   ICONS — small inline SVGs
   ========================================================= */
const Icon = {
  Arrow: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>
  ),
  Send: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>
  ),
  Sparkles: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M9 3v3M9 18v3M3 9h3M15 9h3M19 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1zM7 12l1 3 3 1-3 1-1 3-1-3-3-1 3-1z"/></svg>
  ),
  Brain: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 4.44-1.04Z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-4.44-1.04Z"/></svg>
  ),
  Activity: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
  ),
  Users: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
  ),
  Globe: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></svg>
  ),
  Shield: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
  ),
  Check: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="20 6 9 17 4 12"/></svg>
  ),
  Chat: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
  ),
};

window.Icon = Icon;

/* =========================================================
   COPY (EN / NL)
   ========================================================= */
const COPY = {
  en: {
    nav: { features: "Features", pricing: "Pricing", developers: "Developers", customers: "Customers", login: "Sign in", signup: "Start free" },
    hero: {
      eyebrow: "AI customer chat — built for the inbox you wish you had",
      titleA: "The chat widget that",
      titleB: "actually answers.",
      sub: "Praatbox drops a single line of script onto your site and turns it into a tireless, on-brand support agent — trained on your docs, fluent in 30+ languages, and ready to hand off to a human the moment it matters.",
      cta1: "Start free — no card",
      cta2: "Watch 90s demo",
      meta1: "14-day free trial",
      meta2: "Setup in <3 minutes",
      meta3: "Cancel anytime",
    },
    proof: {
      label: "Trusted by teams shipping fast — from 4-person studios to fintech with 400 agents.",
    },
    how: {
      eyebrow: "How it works",
      title: "Three steps from",
      titleEm: "blank to brilliant.",
      sub: "Most teams have Praatbox live before their coffee gets cold. The longest part is choosing the accent color.",
      steps: [
        { num: "01", title: "Drop in", titleEm: "one script tag.", body: "Paste a single <script> snippet into your site, or install via Shopify, Webflow, WordPress, or Framer.", showCode: true },
        { num: "02", title: "Feed it", titleEm: "what you know.", body: "Point Praatbox at your help center, PDFs, Notion, or sitemap. It reads, indexes, and stays in sync — automatically." },
        { num: "03", title: "Watch it", titleEm: "answer.", body: "Visitors get instant, on-brand answers. You get a clean inbox with anything the AI couldn't close." },
      ],
    },
    features: {
      eyebrow: "What's inside",
      title: "An inbox, an AI, and",
      titleEm: "a brain that learns.",
      sub: "Everything you'd build if you had two more engineers and a long weekend.",
      items: {
        ai: { title: "Trained on", titleEm: "your stack.", body: "Connect docs, PDFs, Notion, Intercom articles, or a sitemap. Praatbox indexes everything in minutes and keeps it fresh on a schedule you set." },
        analytics: { title: "Analytics that earn their keep.", body: "See deflection rate, top intents, hand-off triggers, and the questions your docs don't answer yet." },
        team: { title: "Live agent handoff.", body: "When AI hits its limit, a human picks up — same thread, full context, zero friction." },
        brand: { title: "Pixel-matched to your brand.", body: "Your color, your typeface, your voice. Edit, preview, ship — all without redeploying." },
        i18n: { title: "30+ languages, out of the box.", body: "Auto-detects the visitor's language and replies in kind. No translation files, no extra config." },
        security: { title: "EU-hosted. SOC 2 in flight.", body: "Data stays in Frankfurt. PII redaction, role-based access, and a full audit trail come standard." },
      },
    },
    showcase: {
      eyebrow: "Live widget",
      title: "Click around. It's the",
      titleEm: "real thing.",
      sub: "This is the Praatbox widget running with mocked data. Try the suggested replies, type your own, watch it think.",
      items: [
        { num: "01", title: "Suggested replies", titleEm: "that anticipate.", body: "Praatbox studies the page the visitor is on and pre-loads the three questions they're most likely to ask." },
        { num: "02", title: "Streaming answers", titleEm: "with citations.", body: "Every response is grounded in your sources and links back to where the answer came from." },
        { num: "03", title: "Quiet handoff", titleEm: "when it matters.", body: "The AI knows what it doesn't know. It opens a ticket, pings the right agent, and stays in the thread." },
      ],
    },
    pricing: {
      eyebrow: "Pricing",
      title: "Pricing that scales with",
      titleEm: "your traffic.",
      sub: "Start free, upgrade when your site outgrows the Starter cap. Every plan ships with the AI chat widget — bigger plans add voice, handoff, analytics, and white-label.",
      plans: [
        {
          name: "Starter",
          price: "€29",
          unit: "/mo",
          tagline: "For a single site finding its feet.",
          features: ["1 website", "10,000 messages / mo", "AI chat widget", "Email support"],
          cta: "Start for free",
        },
        {
          name: "Professional",
          price: "€79",
          unit: "/mo",
          tagline: "For growing sites with real volume.",
          featured: true,
          badge: "Recommended",
          features: ["5 websites", "50,000 messages / mo", "Voice input", "Live agent handoff", "Analytics dashboard", "Priority email"],
          cta: "Start for free",
        },
        {
          name: "Business",
          price: "€149",
          unit: "/mo",
          tagline: "For portfolios and agencies.",
          features: ["Unlimited websites", "200,000 messages / mo", "Custom AI model", "White-label widget", "API access", "Dedicated support"],
          cta: "Start for free",
        },
      ],
      seatNote: "Prices in Euro, excluding VAT. Cancel from the dashboard at any time.",
    },
    stats: [
      { num: "67%", lbl: "Avg. tickets deflected" },
      { num: "1.4s", lbl: "Median first reply" },
      { num: "30+", lbl: "Languages" },
      { num: "9 min", lbl: "Median time to live" },
    ],
    testi: {
      eyebrow: "Customer voices",
      quote: "We replaced two SaaS tools and a part-time contractor with Praatbox in an afternoon — and our CSAT",
      quoteEm: "actually went up.",
      name: "Anouk de Vries",
      role: "Head of CX, Glodinas Finance",
      small: [
        { quote: "The setup was suspicious in how fast it was. Eight minutes from sign-up to first ticket deflected.", name: "Maarten K.", role: "Founder, Studiobloom" },
        { quote: "Our French and German visitors finally get same-day answers. Without us hiring anyone.", name: "Sara L.", role: "Ops Lead, Northtree" },
        { quote: "The handoff is the killer feature. AI does 70%, my team handles the 30% that needs them.", name: "Devon R.", role: "Support Manager, Grain Co." },
      ],
    },
    dev: {
      eyebrow: "For developers",
      title: "One script tag.",
      titleEm: "Zero dependencies.",
      sub: "No bundler config, no React peerdep, no SDK to learn. Praatbox ships as a single self-contained widget.js — load it async, configure it with data attributes, and it's live.",
      bullets: ["12kb gzipped, lazy-loaded after first paint", "TypeScript types & a JS API on `window.Praatbox`", "Webhooks for every conversation event", "Self-host the widget on your CDN if you want"],
    },
    cta: {
      title: "Ship support that doesn't",
      titleEm: "sleep.",
      sub: "Sign up in two minutes. Cancel in one. Feel the difference in your inbox by tomorrow.",
      button: "Start free — no card",
    },
    footer: {
      tagline: "AI chat that actually answers. Made in Amsterdam.",
      cols: {
        Product: ["Features", "Pricing", "Live demo", "Integrations", "Changelog"],
        Developers: ["Documentation", "API reference", "Webhooks", "Self-hosted", "Status"],
        Company: ["About", "Customers", "Careers", "Press kit", "Contact"],
        Legal: ["Privacy", "Terms", "DPA", "Security", "Cookies"],
      },
      legal: "© 2026 Praatbox B.V. — Singel 542, 1017 AZ Amsterdam — KvK 84291734",
      legalRight: "All systems operational",
    },
  },
  nl: {
    nav: { features: "Features", pricing: "Tarieven", developers: "Developers", customers: "Klanten", login: "Inloggen", signup: "Start gratis" },
    hero: {
      eyebrow: "AI klantenchat — voor het postvak dat je wilde dat je had",
      titleA: "De chatwidget die",
      titleB: "écht antwoord geeft.",
      sub: "Praatbox plaatst één regel script op je site en maakt er een onvermoeibare, on-brand supportagent van — getraind op jouw docs, vloeiend in 30+ talen, en klaar om over te dragen aan een mens zodra het ertoe doet.",
      cta1: "Start gratis — geen creditcard",
      cta2: "Bekijk demo (90s)",
      meta1: "14 dagen gratis",
      meta2: "Live in <3 minuten",
      meta3: "Maandelijks opzegbaar",
    },
    proof: { label: "Vertrouwd door teams die snel verzenden — van studio's van 4 tot fintech met 400 agents." },
    how: {
      eyebrow: "Zo werkt het",
      title: "Drie stappen van",
      titleEm: "leeg naar briljant.",
      sub: "De meeste teams hebben Praatbox live voor de koffie koud is. Het langste duurt het kiezen van de accentkleur.",
      steps: [
        { num: "01", title: "Plak", titleEm: "één scripttag.", body: "Eén <script>-snippet op je site, of installeer via Shopify, Webflow, WordPress of Framer.", showCode: true },
        { num: "02", title: "Voed het", titleEm: "met wat je weet.", body: "Wijs Praatbox naar je helpcentrum, PDF's, Notion of sitemap. Het leest, indexeert en blijft synchroon — automatisch." },
        { num: "03", title: "Kijk hoe het", titleEm: "antwoordt.", body: "Bezoekers krijgen direct on-brand antwoorden. Jij krijgt een schoon postvak met alles wat AI niet kon afsluiten." },
      ],
    },
    features: {
      eyebrow: "Wat zit erin",
      title: "Een postvak, een AI en",
      titleEm: "een brein dat leert.",
      sub: "Alles wat je zou bouwen als je twee extra engineers en een lang weekend had.",
      items: {
        ai: { title: "Getraind op", titleEm: "jouw stack.", body: "Verbind docs, PDF's, Notion, Intercom-artikelen of een sitemap. Praatbox indexeert alles in minuten en houdt het vers volgens jouw schema." },
        analytics: { title: "Analytics die hun werk doen.", body: "Zie deflectiepercentage, topintenties, overdrachttriggers en de vragen die je docs nog niet beantwoorden." },
        team: { title: "Live overdracht aan agent.", body: "Als AI zijn grens raakt, neemt een mens over — zelfde thread, volledige context, geen frictie." },
        brand: { title: "Pixelperfect bij je merk.", body: "Jouw kleur, jouw lettertype, jouw stem. Bewerk, bekijk, verzend — zonder opnieuw te deployen." },
        i18n: { title: "30+ talen, standaard.", body: "Detecteert de taal van de bezoeker automatisch en antwoordt navenant. Geen vertaalbestanden, geen extra config." },
        security: { title: "EU-gehost. SOC 2 onderweg.", body: "Data blijft in Frankfurt. PII-redactie, rolgebaseerde toegang en volledige audittrail standaard." },
      },
    },
    showcase: {
      eyebrow: "Live widget",
      title: "Klik rond. Dit is",
      titleEm: "het echte werk.",
      sub: "Dit is de Praatbox-widget met mockdata. Probeer suggesties, typ zelf, kijk hoe hij denkt.",
      items: [
        { num: "01", title: "Voorgestelde antwoorden", titleEm: "die vooruitdenken.", body: "Praatbox bestudeert de pagina van de bezoeker en laadt de drie waarschijnlijkste vragen vooraf." },
        { num: "02", title: "Streaming antwoorden", titleEm: "met bronvermelding.", body: "Elk antwoord is gebaseerd op jouw bronnen en linkt terug naar de oorsprong." },
        { num: "03", title: "Stille overdracht", titleEm: "wanneer het ertoe doet.", body: "De AI weet wat hij niet weet. Hij opent een ticket, pingt de juiste agent en blijft in de thread." },
      ],
    },
    pricing: {
      eyebrow: "Tarieven",
      title: "Tarief schaalt met",
      titleEm: "je bezoekersstroom.",
      sub: "Begin gratis, upgrade wanneer je site het Starter-plafond ontgroeit. Elk plan bevat de AI-chatwidget — grotere plannen voegen spraak, overdracht, analytics en white-label toe.",
      plans: [
        { name: "Starter", price: "€29", unit: "/mnd", tagline: "Voor één site die zijn weg vindt.", features: ["1 website", "10.000 berichten / mnd", "AI-chatwidget", "E-mailsupport"], cta: "Gratis starten" },
        { name: "Professional", price: "€79", unit: "/mnd", tagline: "Voor groeiende sites met volume.", featured: true, badge: "Aanbevolen", features: ["5 websites", "50.000 berichten / mnd", "Spraakinvoer", "Live agent-overdracht", "Analytics-dashboard", "Voorrangs-e-mail"], cta: "Gratis starten" },
        { name: "Business", price: "€149", unit: "/mnd", tagline: "Voor portfolio's en bureaus.", features: ["Onbeperkt websites", "200.000 berichten / mnd", "Custom AI-model", "White-label widget", "API-toegang", "Dedicated support"], cta: "Gratis starten" },
      ],
      seatNote: "Prijzen in euro, exclusief btw. Op elk moment opzegbaar via het dashboard.",
    },
    stats: [
      { num: "67%", lbl: "Gem. tickets afgevangen" },
      { num: "1.4s", lbl: "Mediaan eerste reactie" },
      { num: "30+", lbl: "Talen" },
      { num: "9 min", lbl: "Mediaan tijd tot live" },
    ],
    testi: {
      eyebrow: "Klantenstemmen",
      quote: "We vervingen twee SaaS-tools en een parttimer met Praatbox in een middag — en onze CSAT",
      quoteEm: "ging zelfs omhoog.",
      name: "Anouk de Vries",
      role: "Head of CX, Glodinas Finance",
      small: [
        { quote: "De setup was verdacht snel. Acht minuten van aanmelden tot eerste afgevangen ticket.", name: "Maarten K.", role: "Founder, Studiobloom" },
        { quote: "Onze Franse en Duitse bezoekers krijgen eindelijk dezelfde dag antwoord. Zonder iemand aan te nemen.", name: "Sara L.", role: "Ops Lead, Northtree" },
        { quote: "De overdracht is dé feature. AI doet 70%, mijn team de 30% die het nodig heeft.", name: "Devon R.", role: "Support Manager, Grain Co." },
      ],
    },
    dev: {
      eyebrow: "Voor developers",
      title: "Eén scripttag.",
      titleEm: "Geen dependencies.",
      sub: "Geen bundlerconfig, geen React-peerdep, geen SDK te leren. Praatbox is één self-contained widget.js — laad async, configureer met data-attributen, en hij staat live.",
      bullets: ["12kb gzipped, lazy-loaded na first paint", "TypeScript-types & JS-API op `window.Praatbox`", "Webhooks voor elke conversation-event", "Self-host de widget op je eigen CDN"],
    },
    cta: { title: "Lever support dat niet", titleEm: "slaapt.", sub: "Aanmelden in twee minuten. Opzeggen in één. Voel het verschil morgen in je postvak.", button: "Start gratis — geen creditcard" },
    footer: {
      tagline: "AI-chat die écht antwoord geeft. Gemaakt in Amsterdam.",
      cols: {
        Product: ["Features", "Tarieven", "Live demo", "Integraties", "Changelog"],
        Developers: ["Documentatie", "API-referentie", "Webhooks", "Self-hosted", "Status"],
        Bedrijf: ["Over ons", "Klanten", "Vacatures", "Press kit", "Contact"],
        Juridisch: ["Privacy", "Voorwaarden", "DPA", "Security", "Cookies"],
      },
      legal: "© 2026 Praatbox B.V. — Singel 542, 1017 AZ Amsterdam — KvK 84291734",
      legalRight: "Alle systemen operationeel",
    },
  },
};

window.COPY = COPY;