const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C85A3C",
  "headline": "Get a CV for FREE on WhatsApp.",
  "ctaCopy": "Chat on WhatsApp"
} /*EDITMODE-END*/;

// 11 official languages of South Africa
const LANGUAGES = [
  { code: "en",  name: "English"    },
  { code: "zu",  name: "isiZulu"    },
  { code: "xh",  name: "isiXhosa"   },
  { code: "af",  name: "Afrikaans"  },
  { code: "st",  name: "Sesotho"    },
  { code: "tn",  name: "Setswana"   },
  { code: "nso", name: "Sepedi"     },
  { code: "ts",  name: "Xitsonga"   },
  { code: "ss",  name: "siSwati"    },
  { code: "ve",  name: "Tshivenda"  },
  { code: "nr",  name: "isiNdebele" },
];

// Translations (plain language for lower-LSM users)
const T = {
  en: {
    kicker:       "Free · WhatsApp · South Africa 🇿🇦",
    headline:     "Get a CV for FREE on WhatsApp.",
    lede:         "Send a message on WhatsApp. Answer some easy questions. We make your CV and send it back to you. It takes about 10 minutes.",
    cta:          "Chat on WhatsApp",
    seeSample:    "See a sample →",
    flowChat:     "1. Chat on WhatsApp",
    flowCv:       "2. Get your CV",
    howEyebrow:   "How it works",
    howTitle:     "Three easy steps.",
    steps: [
      { n: "01", t: "Say hi on WhatsApp",    d: "Open WhatsApp and send us a message. We will say hi back." },
      { n: "02", t: "Answer easy questions", d: "We ask about your work and education." },
      { n: "03", t: "Get your CV",           d: "We make your CV and send it to you on WhatsApp. You can print it or email it to a job." },
    ],
    sampleEyebrow: "Sample CV",
    sampleTitle:   "This is the CV you will get.",
    sampleLede:    "A clean, one-page CV. Easy to read. Easy to print. It is yours to keep — and it costs nothing.",
    bullets: [
      "Sent to you as a PDF on WhatsApp",
      "Free to print at any internet café",
      "No watermark. No sign-up. No fee.",
    ],
    ctaTitle: "Ready when you are.",
    ctaSub:   "Open WhatsApp. Send \"hi\". We will help you from there.",
    ctaFoot:  "Free · No app · About 10 minutes",
  },
  zu: {
    kicker:       "Mahhala · WhatsApp · iNingizimu Afrika 🇿🇦",
    headline:     "Thola i-CV. Mahhala. Ku-WhatsApp.",
    lede:         "Thumela umlayezo ku-WhatsApp. Phendula imibuzo elula. Senza i-CV yakho bese siyikuthumela. Cishe imizuzu eyi-10.",
    cta:          "Xoxa ku-WhatsApp",
    seeSample:    "Bona isibonelo →",
    flowChat:     "1. Xoxa ku-WhatsApp",
    flowCv:       "2. Thola i-CV yakho",
    howEyebrow:   "Kusebenza kanjani",
    howTitle:     "Izinyathelo ezintathu ezilula.",
    steps: [
      { n: "01", t: "Thi sawubona ku-WhatsApp", d: "Vula i-WhatsApp uthumele umlayezo. Sizothi sawubona." },
      { n: "02", t: "Phendula imibuzo elula",   d: "Sibuza ngomsebenzi wakho nemfundo yakho." },
      { n: "03", t: "Thola i-CV yakho",         d: "Senza i-CV bese siyikuthumela ku-WhatsApp. Ungayiprinta noma uyithumele emsebenzini." },
    ],
    sampleEyebrow: "Isibonelo se-CV",
    sampleTitle:   "Lena i-CV ozoyithola.",
    sampleLede:    "I-CV elula yekhasi elilodwa. Kulula ukufunda. Kulula ukuprinta. Ngeyakho — futhi ayikho mali.",
    bullets: [
      "Ithunyelwa kuwe njenge-PDF ku-WhatsApp",
      "Mahhala ukuyiprinta nakuyiphi i-internet café",
      "Akukho watermark. Akukho sign-up. Akukho mali.",
    ],
    ctaTitle: "Sikulindele.",
    ctaSub:   "Vula i-WhatsApp. Thumela \"sawubona\". Sizokusiza.",
    ctaFoot:  "Mahhala · Akukho app · Cishe imizuzu eyi-10",
  },
  xh: {
    kicker:       "Simahla · WhatsApp · uMzantsi Afrika 🇿🇦",
    headline:     "Fumana i-CV SIMAHLA kwi-WhatsApp.",
    lede:         "Thumela umyalezo kwi-WhatsApp. Phendula imibuzo elula. Senza i-CV yakho sibuyisele kuwe. Kuthatha imizuzu elishumi.",
    cta:          "Thetha kwi-WhatsApp",
    seeSample:    "Bona umzekelo →",
    flowChat:     "1. Thetha kwi-WhatsApp",
    flowCv:       "2. Fumana i-CV yakho",
    howEyebrow:   "Indlela esebenzayo",
    howTitle:     "Amanyathelo amathathu alula.",
    steps: [
      { n: "01", t: "Bulisa kwi-WhatsApp",        d: "Vula i-WhatsApp uthumele umyalezo. Siza kuphendula." },
      { n: "02", t: "Phendula imibuzo elula",     d: "Sibuza ngomsebenzi wakho nemfundo yakho." },
      { n: "03", t: "Fumana i-CV yakho",          d: "Senza i-CV yakho siyithumele kwi-WhatsApp. Unokuyiprinta okanye uyithumele nge-imeyile kumsebenzi." },
    ],
    sampleEyebrow: "Umzekelo we-CV",
    sampleTitle:   "Le yi-CV oyifumanayo.",
    sampleLede:    "I-CV ecocekileyo, inekhasi elinye. Lula ukuyifunda. Lula ukuyiprinta. Yeyakho — kwaye ayibizi nto.",
    bullets: [
      "Ithunyelwa kuwe njenge-PDF kwi-WhatsApp",
      "Simahla ukuyiprinta kwindawo yonye ye-intanethi",
      "Akukho uphawu lamanzi. Akukho bhaliso. Akukho mali.",
    ],
    ctaTitle: "Sikulindele.",
    ctaSub:   "Vula i-WhatsApp. Thumela \"molo\". Siza kukunceda ukusuka apho.",
    ctaFoot:  "Simahla · Akukho app · Imizuzu elishumi",
  },
  af: {
    kicker:       "Gratis · WhatsApp · Suid-Afrika 🇿🇦",
    headline:     "Kry 'n CV GRATIS op WhatsApp.",
    lede:         "Stuur 'n boodskap op WhatsApp. Beantwoord 'n paar maklike vrae. Ons maak jou CV en stuur dit terug. Dit neem omtrent 10 minute.",
    cta:          "Gesels op WhatsApp",
    seeSample:    "Sien 'n voorbeeld →",
    flowChat:     "1. Gesels op WhatsApp",
    flowCv:       "2. Kry jou CV",
    howEyebrow:   "Hoe dit werk",
    howTitle:     "Drie maklike stappe.",
    steps: [
      { n: "01", t: "Sê hallo op WhatsApp",       d: "Maak WhatsApp oop en stuur vir ons 'n boodskap. Ons sal teruggroet." },
      { n: "02", t: "Beantwoord maklike vrae",    d: "Ons vra jou oor jou werk en opleiding." },
      { n: "03", t: "Kry jou CV",                 d: "Ons maak jou CV en stuur dit op WhatsApp. Jy kan dit druk of per e-pos na 'n werkgewer stuur." },
    ],
    sampleEyebrow: "Voorbeeld-CV",
    sampleTitle:   "Dit is die CV wat jy sal kry.",
    sampleLede:    "'n Netjiese, eenbladsy-CV. Maklik om te lees. Maklik om te druk. Dit is joune — en dit kos niks.",
    bullets: [
      "Gestuur as 'n PDF op WhatsApp",
      "Gratis om te druk by enige internetkafee",
      "Geen watermerk. Geen registrasie. Geen fooi.",
    ],
    ctaTitle: "Ons is gereed as jy is.",
    ctaSub:   "Maak WhatsApp oop. Stuur \"hallo\". Ons sal jou van daar af help.",
    ctaFoot:  "Gratis · Geen toepassing · Omtrent 10 minute",
  },
  st: {
    kicker:       "Mahala · WhatsApp · Afrika Borwa 🇿🇦",
    headline:     "Fumana CV MAHALA ho WhatsApp.",
    lede:         "Romela molaetsa ho WhatsApp. Araba dipotso tse bonolo. Re etsa CV ya hao mme re e busetse ho wena. E nka metsotso e leshome.",
    cta:          "Bua ho WhatsApp",
    seeSample:    "Bona sampole →",
    flowChat:     "1. Bua ho WhatsApp",
    flowCv:       "2. Fumana CV ya hao",
    howEyebrow:   "Mokgwa o sebeletsang",
    howTitle:     "Dikgato tse tharo tse bonolo.",
    steps: [
      { n: "01", t: "Dumediša ho WhatsApp",       d: "Bula WhatsApp o romele molaetsa. Re tla araba." },
      { n: "02", t: "Araba dipotso tse bonolo",   d: "Re botsa ka mosebetsi wa hao le thuto ya hao." },
      { n: "03", t: "Fumana CV ya hao",           d: "Re etsa CV ya hao mme re e rome ho wena ho WhatsApp. O ka e printa kapa o e rome ka imeile mosebetsing." },
    ],
    sampleEyebrow: "Sampole ya CV",
    sampleTitle:   "Ena ke CV eo o e fumanang.",
    sampleLede:    "CV e hloekileng ya leqephe le leng. E bonolo ho bala. E bonolo ho printa. Ke ya hao — mahala.",
    bullets: [
      "E romelwa ho wena e le PDF ho WhatsApp",
      "Mahala ho printa internet café efe kapa efe",
      "Ha ho watermark. Ha ho ho ngolisa. Ha ho tefo.",
    ],
    ctaTitle: "Re itokiselitse ha o lokile.",
    ctaSub:   "Bula WhatsApp. Romela \"dumela\". Re tla o thusa ho tswa moo.",
    ctaFoot:  "Mahala · Ha ho app · Metsotso e leshome",
  },
  tn: {
    kicker:       "Mahala · WhatsApp · Afrika Borwa 🇿🇦",
    headline:     "Bona CV YA MAHALA mo WhatsApp.",
    lede:         "Romela molaetsa mo WhatsApp. Araba dipotso tse di bonolo. Re dira CV ya gago mme re e busetse go wena. E nna metsotso e le lesome.",
    cta:          "Bua mo WhatsApp",
    seeSample:    "Bona sekao →",
    flowChat:     "1. Bua mo WhatsApp",
    flowCv:       "2. Bona CV ya gago",
    howEyebrow:   "Mokgwa o o bereko",
    howTitle:     "Dikgato tse tharo tse bonolo.",
    steps: [
      { n: "01", t: "Dumedisa mo WhatsApp",       d: "Bula WhatsApp o romele molaetsa. Re tla araba." },
      { n: "02", t: "Araba dipotso tse bonolo",   d: "Re botsa ka tiro ya gago le thuto ya gago." },
      { n: "03", t: "Bona CV ya gago",            d: "Re dira CV ya gago mme re e romele go wena mo WhatsApp. O ka e printa kgotsa o e romele ka imeile tirong." },
    ],
    sampleEyebrow: "Sekao sa CV",
    sampleTitle:   "Eno ke CV o e bonang.",
    sampleLede:    "CV e e phepa ya letlhare le le lengwe. E bonolo go buiwa. E bonolo go printwa. Ke ya gago — mahala.",
    bullets: [
      "E romelwa go wena jaaka PDF mo WhatsApp",
      "Mahala go printa kafe nngwe le nngwe ya inthanete",
      "Ga go na watermark. Ga go na ho ngolisa. Ga go na tefelo.",
    ],
    ctaTitle: "Re itlhaganetse fa o siame.",
    ctaSub:   "Bula WhatsApp. Romela \"dumela\". Re tla go thusa go tswa foo.",
    ctaFoot:  "Mahala · Ga go na app · Metsotso e le lesome",
  },
  nso: {
    kicker:       "Mahala · WhatsApp · Afrika Borwa 🇿🇦",
    headline:     "Hwetša CV YA MAHALA go WhatsApp.",
    lede:         "Romela molaetša go WhatsApp. Araba dipotšišo tše bonolo. Re dira CV ya gago mme re e busetše go wena. E tšea metsotso e lesome.",
    cta:          "Bolela go WhatsApp",
    seeSample:    "Bona sampolo →",
    flowChat:     "1. Bolela go WhatsApp",
    flowCv:       "2. Hwetša CV ya gago",
    howEyebrow:   "Tsela e šomago",
    howTitle:     "Dikgato tše tharo tše bonolo.",
    steps: [
      { n: "01", t: "Dumediša go WhatsApp",       d: "Bula WhatsApp o romele molaetša. Re tla araba." },
      { n: "02", t: "Araba dipotšišo tše bonolo", d: "Re botšiša ka mošomo wa gago le thuto ya gago." },
      { n: "03", t: "Hwetša CV ya gago",          d: "Re dira CV ya gago mme re e romele go wena go WhatsApp. O ka e printa goba o e romele ka imeile mošomong." },
    ],
    sampleEyebrow: "Sampolo ya CV",
    sampleTitle:   "Ye ke CV yeo o e hwetšago.",
    sampleLede:    "CV ye e phepa ya letlakala le tee. E bonolo go bala. E bonolo go printa. Ke ya gago — mahala.",
    bullets: [
      "E romelwa go wena bjalo ka PDF go WhatsApp",
      "Mahala go printa kafe nngwe le nngwe ya inthanete",
      "Ga go na watermark. Ga go na go ngwadiša. Ga go na tefo.",
    ],
    ctaTitle: "Re letile ha o lokile.",
    ctaSub:   "Bula WhatsApp. Romela \"dumela\". Re tla go thuša go tšwa moo.",
    ctaFoot:  "Mahala · Ga go na app · Metsotso e lesome",
  },
  ts: {
    kicker:       "Mahala · WhatsApp · Afrika Dzonga 🇿🇦",
    headline:     "Kuma CV YA MAHALA eka WhatsApp.",
    lede:         "Rhumela mbulavulo eka WhatsApp. Hlamula swivutiso leswi olekaka. Hi endla CV ya wena hi yi rhumela eka wena. Yi teka mphendlamizana wa khume.",
    cta:          "Vulavula eka WhatsApp",
    seeSample:    "Vona xikombo →",
    flowChat:     "1. Vulavula eka WhatsApp",
    flowCv:       "2. Kuma CV ya wena",
    howEyebrow:   "Ndlela yi sebelaka",
    howTitle:     "Tinyimpi tinharhu to oleka.",
    steps: [
      { n: "01", t: "Landzela eka WhatsApp",         d: "Vula WhatsApp u rhumele mbulavulo. Hi ta hlamula." },
      { n: "02", t: "Hlamula swivutiso swo oleka",   d: "Hi vutisa hi ntirho wa wena ni dyondzo ya wena." },
      { n: "03", t: "Kuma CV ya wena",               d: "Hi endla CV ya wena hi yi rhumele eka wena eka WhatsApp. U nga yi printa kumbe u yi rhumele eka ntirho hi imeyili." },
    ],
    sampleEyebrow: "Xikombo xa CV",
    sampleTitle:   "Leyi i CV leyi u nga yi kumaka.",
    sampleLede:    "CV yo hlambanyeka ya tsheetshe yin'we. Yi oleka ku hlaya. Yi oleka ku printa. I ya wena — naswona a yi lavi xin'wana.",
    bullets: [
      "Yi rhumeleriwa eka wena tanihi PDF eka WhatsApp",
      "Mahala ku printa eka inthanete café nayihi",
      "Ku hava watermark. Ku hava ku tsarisa. Ku hava mphakelo.",
    ],
    ctaTitle: "Hi lungile loko u lungile.",
    ctaSub:   "Vula WhatsApp. Rhumela \"ndza mholo\". Hi ta ku pfuna ku sukela kwalaho.",
    ctaFoot:  "Mahala · Ku hava app · Mphendlamizana wa khume",
  },
  ss: {
    kicker:       "Mahhala · WhatsApp · Ningizimu Afrika 🇿🇦",
    headline:     "Thola i-CV MAHHALA ku-WhatsApp.",
    lede:         "Thumela umyalezo ku-WhatsApp. Phendvula imibuzo leshelelako. Senta i-CV yakho siyibuyisele kuwe. Itsatsa imizuzu lelishumi.",
    cta:          "Khuluma ku-WhatsApp",
    seeSample:    "Bona sibonelo →",
    flowChat:     "1. Khuluma ku-WhatsApp",
    flowCv:       "2. Thola i-CV yakho",
    howEyebrow:   "Indlela lesebentako",
    howTitle:     "Tinyathelo letintatfu letilelako.",
    steps: [
      { n: "01", t: "Bingelela ku-WhatsApp",         d: "Vula i-WhatsApp uthumele umyalezo. Sitawubuyisa." },
      { n: "02", t: "Phendvula imibuzo leshelelako", d: "Sibutsisa ngemisebenti yakho nematfumo akho." },
      { n: "03", t: "Thola i-CV yakho",              d: "Senta i-CV yakho siyithumele kuwe ku-WhatsApp. Ungayiprinta noma uyithumele nge-imeyili emsebentini." },
    ],
    sampleEyebrow: "Sibonelo se-CV",
    sampleTitle:   "Le yi-CV lotayithola.",
    sampleLede:    "I-CV lehlobile lenekhasi linye. Kulula ukuyifundza. Kulula ukuyiprinta. Ngeyakho — futsi ayibizi lutfo.",
    bullets: [
      "Iyatfunyelwa kuwe njenge-PDF ku-WhatsApp",
      "Mahhala ukuyiprinta noma kuphi i-inthanethi café",
      "Akukho watermark. Akukho kufaka ligama. Akukho mali.",
    ],
    ctaTitle: "Sikulindze.",
    ctaSub:   "Vula i-WhatsApp. Thumela \"sawubona\". Sitakusita kusukela lapho.",
    ctaFoot:  "Mahhala · Akukho app · Imizuzu lelishumi",
  },
  ve: {
    kicker:       "Mahala · WhatsApp · Afrika Tshipembe 🇿🇦",
    headline:     "Wana CV YA MAHALA kha WhatsApp.",
    lede:         "Rumela mafhungo kha WhatsApp. Fhindula mbudziso dzo ngonanaho. Ri ita CV ya iwe ri i vhuyelele. I dzhia mphendulo ya fumi.",
    cta:          "Amba kha WhatsApp",
    seeSample:    "Vhona mutevhe →",
    flowChat:     "1. Amba kha WhatsApp",
    flowCv:       "2. Wana CV ya iwe",
    howEyebrow:   "Nḓila yo shumaho",
    howTitle:     "Nḓila tharu dzo ngonanaho.",
    steps: [
      { n: "01", t: "Ṱalutshedza kha WhatsApp",     d: "Vula WhatsApp u rumele mafhungo. Ri ḓo fhindula." },
      { n: "02", t: "Fhindula mbudziso dzo ngonanaho", d: "Ri vhudzisa nga shuma ya iwe na mafhungo a iwe." },
      { n: "03", t: "Wana CV ya iwe",               d: "Ri ita CV ya iwe ri i rumelele kha WhatsApp. U nga i printa kana u i rumele nga imeyili kha mushumo." },
    ],
    sampleEyebrow: "Mutevhe wa CV",
    sampleTitle:   "Iyi ndi CV ye u ḓo i wana.",
    sampleLede:    "CV yo khwanthaho ya tsheetshe ithihi. Yo ngonanaho u vhala. Yo ngonanaho u printa. Ndi ya iwe — a i lifi tshithu.",
    bullets: [
      "I rumelwa kha iwe sa PDF kha WhatsApp",
      "Mahala u printa kha inthanete café iṅwe na iṅwe",
      "A huna watermark. A huna u ṅwalisa. A huna teḓelo.",
    ],
    ctaTitle: "Ri lindele hone u tshi khou lugela.",
    ctaSub:   "Vula WhatsApp. Rumela \"ndaa\". Ri ḓo u thusa u bva hone.",
    ctaFoot:  "Mahala · A huna app · Mphendulo ya fumi",
  },
  nr: {
    kicker:       "Mahhala · WhatsApp · iNingizimu Afrika 🇿🇦",
    headline:     "Thola i-CV MAHHALA ku-WhatsApp.",
    lede:         "Thumela umyalezo ku-WhatsApp. Phendula imibuzo elula. Senza i-CV yakho sibuyisele kuwe. Ithatha imizuzu elishumi.",
    cta:          "Khuluma ku-WhatsApp",
    seeSample:    "Bona isibonelo →",
    flowChat:     "1. Khuluma ku-WhatsApp",
    flowCv:       "2. Thola i-CV yakho",
    howEyebrow:   "Indlela esebenzako",
    howTitle:     "Izinyathelo ezintathu ezilula.",
    steps: [
      { n: "01", t: "Bingelela ku-WhatsApp",     d: "Vula i-WhatsApp uthumele umyalezo. Sizophendula." },
      { n: "02", t: "Phendula imibuzo elula",    d: "Sibuza ngemisebenzi wakho nemfundo yakho." },
      { n: "03", t: "Thola i-CV yakho",          d: "Senza i-CV yakho siyithumele kuwe ku-WhatsApp. Ungayiprinta noma uyithumele nge-imeyili emsebenzini." },
    ],
    sampleEyebrow: "Isibonelo se-CV",
    sampleTitle:   "Le yi-CV oyitholayo.",
    sampleLede:    "I-CV ehlanzekile, inekhasi elilodwa. Kulula ukuyifunda. Kulula ukuyiprinta. Ngeyakho — ayibizi lutho.",
    bullets: [
      "Ithunyelwa kuwe njenge-PDF ku-WhatsApp",
      "Mahhala ukuyiprinta noma kuphi i-internet café",
      "Akukho watermark. Akukho ukubhalisa. Akukho imali.",
    ],
    ctaTitle: "Sikulindele.",
    ctaSub:   "Vula i-WhatsApp. Thumela \"sawubona\". Sizokusiza kusukela lapho.",
    ctaFoot:  "Mahhala · Akukho app · Imizuzu elishumi",
  },
};

// Fallback to English for languages not yet translated
const getTranslation = (code) => T[code] || T.en;

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(() => localStorage.getItem("smcv_lang") || "en");
  const t = getTranslation(lang);
  const accent = tweaks.accent;

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", accent);
  }, [accent]);

  useEffect(() => {
    localStorage.setItem("smcv_lang", lang);
  }, [lang]);

  return (
    <>
      <SiteHeader t={t} lang={lang} setLang={setLang} />
      <main>
        <Hero t={t} accent={accent} />
        <HowItWorks t={t} />
        <SamplePDF t={t} />
        <CTA t={t} />
      </main>
      <SiteFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor label="Accent" value={tweaks.accent} onChange={(v) => setTweak("accent", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

/* ── HEADER ──────────────────────────────────────────────── */

const SiteHeader = ({ t, lang, setLang }) => {
  const [open, setOpen] = useState(false);
  const current = LANGUAGES.find((l) => l.code === lang) || LANGUAGES[0];
  return (
    <header className="hdr">
      <div className="hdr-inner">
        <a href="#top" className="logo">
          <span className="logo-mark">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M5 4h14v16H5z" stroke="white" strokeWidth="2" strokeLinejoin="round" />
              <path d="M9 9h6M9 13h6M9 17h3" stroke="white" strokeWidth="2" strokeLinecap="round" />
            </svg>
          </span>
          <span className="logo-word">Send My CV</span>
        </a>
        <nav className="hdr-nav">
          <a href="#how">{t.howEyebrow}</a>
          <a href="#sample">{t.sampleEyebrow}</a>
        </nav>
        <div className="lang-switcher">
          <button className="lang-btn" onClick={() => setOpen(!open)} aria-haspopup="true" aria-expanded={open}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <circle cx="12" cy="12" r="9" />
              <path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18" />
            </svg>
            <span>{current.name}</span>
            <span className="lang-caret">▾</span>
          </button>
          {open && (
            <div className="lang-menu" onMouseLeave={() => setOpen(false)}>
              {LANGUAGES.map((l) => (
                <button
                  key={l.code}
                  className={`lang-item ${l.code === lang ? "active" : ""}`}
                  onClick={() => { setLang(l.code); setOpen(false); }}
                >
                  {l.name}
                </button>
              ))}
            </div>
          )}
        </div>
        <a href="/go/wa" className="btn btn-primary btn-sm">
          <WALeaf /> {t.cta}
        </a>
      </div>
    </header>
  );
};

/* ── HERO ────────────────────────────────────────────────── */

const Hero = ({ t, accent }) => (
  <section className="hero" id="top">
    <div className="hero-glow" aria-hidden="true"></div>
    <div className="hero-inner">
      <div className="hero-copy">
        <span className="kicker">
          <span className="kicker-dot"></span>
          {t.kicker}
        </span>
        <h1 className="h1">{t.headline}</h1>
        <p className="lede">{t.lede}</p>
        <div className="hero-ctas">
          <a href="/go/wa" className="btn btn-primary btn-lg">
            <WALeaf /> {t.cta}
          </a>
          <a href="#sample" className="btn btn-ghost btn-lg">{t.seeSample}</a>
        </div>
      </div>

      <div className="hero-visual">
        <div className="hero-flow">
          <div className="flow-col">
            <div className="flow-label">{t.flowChat}</div>
            <Phone>
              <ChatMockup />
            </Phone>
          </div>
          <FlowArrow />
          <div className="flow-col">
            <div className="flow-label">{t.flowCv}</div>
            <div className="cv-tilt">
              <CvPreview />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Phone = ({ children }) => (
  <div className="phone phone-android">
    <div className="phone-punch"></div>
    <div className="phone-screen">{children}</div>
    <div className="phone-gesture"></div>
  </div>
);

const FlowArrow = () => (
  <div className="flow-arrow" aria-hidden="true">
    <div className="flow-arrow-circle">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
        <path
          d="M9 5 L17 12 L9 19"
          stroke="var(--accent)"
          strokeWidth="4"
          fill="none"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </div>
  </div>
);

/* ── HOW IT WORKS ────────────────────────────────────────── */

const HowItWorks = ({ t }) => (
  <section id="how" className="section how">
    <div className="section-inner">
      <div className="section-head">
        <span className="eyebrow">{t.howEyebrow}</span>
        <h2 className="h2">{t.howTitle}</h2>
      </div>
      <div className="steps">
        {t.steps.map((s, i) => (
          <div key={i} className="step">
            <div className="step-num">{s.n}</div>
            <h3 className="step-t">{s.t}</h3>
            <p className="step-d">{s.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ── SAMPLE CV ───────────────────────────────────────────── */

const SamplePDF = ({ t }) => (
  <section id="sample" className="section sample">
    <div className="section-inner sample-grid">
      <div>
        <span className="eyebrow">{t.sampleEyebrow}</span>
        <h2 className="h2">{t.sampleTitle}</h2>
        <p className="lede2">{t.sampleLede}</p>
        <ul className="ticks">
          {t.bullets.map((b, i) => (
            <li key={i}><span className="tick">✓</span> {b}</li>
          ))}
        </ul>
      </div>
      <div className="sample-card">
        <div className="sample-tab">CV — Sipho Dlamini.pdf</div>
        <div className="sample-frame">
          <CvPreview />
        </div>
      </div>
    </div>
  </section>
);

/* ── BIG CTA ─────────────────────────────────────────────── */

const CTA = ({ t }) => (
  <section id="start" className="cta-block">
    <div className="cta-card">
      <div className="cta-bg" aria-hidden="true">
        <svg viewBox="0 0 600 300" preserveAspectRatio="none" width="100%" height="100%">
          <circle cx="80" cy="60" r="120" fill="rgba(255,255,255,.08)" />
          <circle cx="540" cy="240" r="160" fill="rgba(255,255,255,.07)" />
        </svg>
      </div>
      <div className="cta-inner">
        <h2 className="cta-h">{t.ctaTitle}</h2>
        <p className="cta-p">{t.ctaSub}</p>
        <a href="/go/wa" className="btn btn-white btn-xl">
          <WALeaf dark /> {t.cta}
        </a>
        <div className="cta-foot">{t.ctaFoot}</div>
      </div>
    </div>
  </section>
);

/* ── FOOTER ──────────────────────────────────────────────── */

const SiteFooter = () => (
  <footer className="ftr">
    <div className="ftr-inner">
      <div className="ftr-brand">
        <span className="logo-mark logo-mark-sm">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <path d="M5 4h14v16H5z" stroke="white" strokeWidth="2" />
            <path d="M9 9h6M9 13h6M9 17h3" stroke="white" strokeWidth="2" strokeLinecap="round" />
          </svg>
        </span>
        <span>Send My CV</span>
      </div>
      <nav className="ftr-links">
        <a href="privacy.html">Privacy Policy</a>
        <a href="paia.html">PAIA Manual</a>
        <a href="terms.html">Terms &amp; Conditions</a>
        <a href="contact.html">Contact us</a>
      </nav>
      <div className="ftr-meta">© 2026 Msizi Omkhulu (Pty) Ltd. All rights reserved.</div>
    </div>
  </footer>
);

/* ── ICONS ───────────────────────────────────────────────── */

const WALeaf = ({ dark }) => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path
      d="M12 2.5a9.5 9.5 0 00-8.2 14.3L2.5 21.5l4.9-1.3A9.5 9.5 0 1012 2.5zm5.4 13.4c-.2.7-1.4 1.3-2 1.4-.5.1-1.1.1-1.8-.1-.4-.1-1-.3-1.7-.6-3-1.3-5-4.4-5.2-4.6-.2-.2-1.3-1.7-1.3-3.2s.8-2.3 1.1-2.6c.3-.3.6-.4.8-.4h.6c.2 0 .5 0 .7.5l1 2.4c.1.2.1.4 0 .6l-.4.6c-.1.2-.3.3-.1.6.2.3.8 1.2 1.6 1.9 1.1 1 2 1.3 2.3 1.4.2.1.4.1.6-.1l.7-.9c.2-.2.4-.2.6-.1l2.3 1.1c.2.1.4.2.4.4.1.1.1.8-.2 1.5z"
      fill={dark ? "#1A1A1A" : "white"}
    />
  </svg>
);

ReactDOM.createRoot(document.getElementById("root")).render(<App />);