// sections-bottom.jsx — services, story, references, faq, cta, contact, footer

// ProcessedCarImage — loads image, pixelates sensitive regions (plates, stickers), renders as <img>
const ProcessedCarImage = ({ src, masks = [], alt = "" }) => {
  const [imgSrc, setImgSrc] = React.useState(null);

  React.useEffect(() => {
    setImgSrc(null);
    const canvas = document.createElement('canvas');
    const img = new window.Image();
    img.onload = () => {
      const MAX = 1400;
      const scale = Math.min(1, MAX / Math.max(img.naturalWidth, img.naturalHeight));
      const cw = Math.round(img.naturalWidth * scale);
      const ch = Math.round(img.naturalHeight * scale);
      canvas.width = cw;
      canvas.height = ch;
      const ctx = canvas.getContext('2d', { willReadFrequently: true });
      ctx.drawImage(img, 0, 0, cw, ch);
      masks.forEach(({ x, y, w, h }) => {
        const rx = Math.round(x * cw),ry = Math.round(y * ch);
        const rw = Math.round(w * cw),rh = Math.round(h * ch);
        const step = Math.max(16, Math.round(Math.min(rw, rh) / 4));
        for (let row = 0; row < rh; row += step) {
          for (let col = 0; col < rw; col += step) {
            const px = rx + col,py = ry + row;
            const pw = Math.min(step, rw - col),ph = Math.min(step, rh - row);
            try {
              const d = ctx.getImageData(px + (pw >> 1), py + (ph >> 1), 1, 1).data;
              ctx.fillStyle = `rgb(${d[0]},${d[1]},${d[2]})`;
              ctx.fillRect(px, py, pw, ph);
            } catch (_) {}
          }
        }
      });
      setImgSrc(canvas.toDataURL('image/jpeg', 0.84));
    };
    img.onerror = () => setImgSrc('__err__');
    img.src = src;
  }, [src]);

  if (!imgSrc) return (
    <div style={{ width: '100%', height: '100%', background: 'var(--bg-soft)' }} />);

  if (imgSrc === '__err__') return (
    <div style={{ width: '100%', height: '100%', background: 'var(--bg-soft)',
      display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <span style={{ color: 'var(--ink-4)', fontSize: 12, fontFamily: 'monospace' }}>foto</span>
    </div>);

  return (
    <img src={imgSrc} alt={alt}
    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />);

};

const SERVICES = [
{
  icon: "search",
  title: "Konzultace ohledně výběru vozidla",
  bullets: [
  "Probereme model, výbavu, rozpočet a využití",
  "Doporučím konkrétní inzeráty s vlastním komentářem",
  "Online (videohovor) nebo telefonicky, whatsapp, email"],

  price: "Zdarma",
  unit: ""
},
{
  icon: "ship",
  title: "Prohlídka vozidla v ČR",
  bullets: [
  "Osobně přijedu na místo a vystupuji v roli nezávislého inspektora",
  "Důkladná kontrola mechanických dílů, elektroniky, výbavy a stavu baterie (SOH)",
  "Měření tloušťky laku, jízdní zkouška a diagnostika chybových hlášení",
  "Získáš: přehledná PDF zpráva s fotografiemi i videem - máš jasno, do čeho jdeš"],

  price: "od 5 490",
  unit: "Kč"
},
{
  icon: "doc",
  title: "Prohlídka vozidla v EU",
  bullets: [
  "Osobně přijedu na místo a vystupuji v roli nezávislého inspektora",
  "Důkladná kontrola mechanických dílů, elektroniky, výbavy a stavu baterie (SOH)",
  "Měření tloušťky laku, jízdní zkouška a diagnostika chybových hlášení",
  "Získáš: přehledná PDF zpráva s fotografiemi i videem - máš jasno, do čeho jdeš"],

  price: "od 12 490",
  unit: "Kč"
},
{
  icon: "wrench",
  title: "Kompletní dovoz na klíč",
  bullets: [
  "Výběr vozidla podle tvých požadavků a rozpočtu",
  "Prověření historie, výbavy a stavu (Cebia, Tesla VIN, SOH baterie)",
  "Osobní prohlídka v EU a samotný dovoz do ČR",
  "Vyřízení všech formalit - COC, dovozová technická kontrola, SPZ, pojištění",
  "Předání vozidla připraveného k jízdě - jen sednout a jezdit"],

  price: "od 19 900",
  unit: "Kč"
}];


const Services = () =>
<section className="sect alt" id="sluzby">
    <div className="container">
      <div className="sect-head">
        <Reveal as="span" className="eyebrow">Služby &amp; ceny</Reveal>
        <Reveal delay={60}><h2>Co všechno za tebe zařídím</h2></Reveal>
        <Reveal delay={120}>
          <p className="lead" style={{ width: "816.648px" }}>
            Ceny mám zveřejněné, protože transparentnost = důvěra.<br />
            Všechno řešíš se mnou osobně - od první otázky až po klíčky v ruce.
          </p>
        </Reveal>
      </div>

      <div className="svc-grid">
        {SERVICES.map((s, i) =>
      <Reveal key={s.title} delay={i * 70} style={{ display: "flex" }}>
            <article className="svc-card" style={{ width: "100%" }}>
              <div className="svc-icon"><Icon name={s.icon} size={22} /></div>
              <h3>{s.title}</h3>
              <ul>
                {s.bullets.map((b) => <li key={b}>{b}</li>)}
              </ul>
              <div className="price">
                <div>
                  <span className="from">od</span>
                  <span className="amt">{s.price} <span style={{ fontSize: 14, color: "var(--ink-3)", fontWeight: 400 }}>{s.unit}</span></span>
                </div>
                <a href="#kontakt" className="more"
            onClick={(e) => {e.preventDefault();scrollToId("kontakt");}}>
                  Více <Icon name="arrow-right" size={14} />
                </a>
              </div>
            </article>
          </Reveal>
      )}
      </div>
    </div>
  </section>;


const Story = () =>
<section className="sect" id="o-mne">
    <div className="container story-grid">
      <Reveal>
        <div className="car-frame tall has-photo">
          <img src="images/jakub-cybertruck.png" alt="Jakub Šurman u Tesly Cybertruck s polepem Nordcars.cz"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center" }} />
          <div className="label"><span className="dot"></span>Jakub Šurman · Cybertruck</div>
        </div>
      </Reveal>
      <Reveal delay={120} className="story-copy">
        <span className="eyebrow">O mně</span>
        <h2 style={{ marginTop: 14 }}>Ahoj, jsem Jakub.</h2>
        <p>Elektromobily mě začaly bavit ve chvíli, kdy jsem zjistil, jak moc se realita kolem Tesly liší od toho, co člověk vidí na YouTube nebo v inzerci. První Teslu jsem si koupil pro sebe a velmi rychle pochopil, že dovoz, kontrola stavu, baterie, registrace nebo servis v Česku nejsou věci, které chceš řešit metodou pokus - omyl. Právě z toho vznikl projekt Nordcars.cz.






      </p>
        <p>Poslední roky se specializuji téměř výhradně na vozy Tesla - hlavně Model X a Model S. Zaměřuji se především na kvalitní vozy z Evropy a Skandinávie, kde dávají elektromobily dlouhodobě největší smysl. Nehledám nejlevnější kusy na internetu. Hledám auta, která bych byl ochotný koupit sám sobě nebo rodině.





      </p>
        <p>Neprodávám desítky značek. Nesnažím se být největší dovozce. Raději jdu víc do hloubky v jedné oblasti - protože právě u Tesly rozhodují detaily. Stav baterie, typ MCU, historie nabíjení, původ vozu nebo správná konfigurace umí udělat rozdíl mezi skvělým autem a drahým problémem.





      </p>
        <p>Nordcars stavím na férovosti, transparentnosti a osobním přístupu. Bez přehnaných slibů. Bez nátlaku.


      </p>
        <div className="quote">
          „Nikdy bych klientovi neprodal auto, které bych si sám nekoupil.“
        </div>
        <div className="stat-strip">
          <div className="cell"><div className="num"><em>30+</em></div><div className="lab">dovezených Tesel</div></div>
          <div className="cell"><div className="num"><em>3+</em></div><div className="lab">roky specializace</div></div>
          <div className="cell"><div className="num"><em>100 %</em></div><div className="lab">transparentnost</div></div>
        </div>
      </Reveal>
    </div>
  </section>;


const REFS = [
{
  photo: "uploads/IMG_2030c.jpeg",
  masks: [],
  meta: ["Cybertruck", "2025"], title: "Dovoz · ČR",
  desc: "Jeden z prvních Cybertracků na českých silnicích. Kompletní dovoz, přihlášení a STK - od první otázky až po klíče v ruce.",
  code: "NC-032"
},
{
  photo: "uploads/IMG_3443f.jpeg",
  masks: [],
  meta: ["Model X", "2020"], title: "Holandsko → Břeclav",
  desc: "Long Range Plus 2020, 5 míst. Prohlídka u prodejce, diagnostika bez chyby. Kompletní převod a registrace v ČR.",
  code: "NC-019"
},
{
  photo: "uploads/IMG_7294a-ec3ccf29.jpeg",
  masks: [],
  meta: ["Model X", "2018"], title: "Německo → Bruntál",
  desc: "Osobní prohlídka v místě prodeje, diagnostika bez chyby. Klient nemusel udělat ani krok - vše jsem zařídil za něj.",
  code: "NC-020"
},
{
  photo: "uploads/IMG_6266b-48dda00a.jpeg",
  masks: [],
  meta: ["Model S", "2019"], title: "Rakousko → Šternberk",
  desc: "Standart Range. Prohlídka odhalila zvýšené opotřebení ramen přední nápravy - klientovi jsme vyjednali slevu 500 EUR. Auto dorazilo v perfektním stavu.",
  code: "NC-021"
},
{
  photo: "uploads/IMG_2131d.jpeg",
  masks: [],
  meta: ["Model 3", "2020"], title: "Holandsko → Litovel",
  desc: "Long Range černá. Prohlídka v Holandsku - pěkný čistý vůz, bez nehod, výborný stav baterie. Dovoz a registrace za 1 týden.",
  code: "NC-022"
},
{
  photo: "uploads/IMG_2323S.jpeg",
  masks: [],
  meta: ["Model 3", "2019"], title: "Holandsko → Uničov",
  desc: "Pearl White - nádherná barva, nízký nájezd, jeden majitel. Jeden z nejpečlivěji udržovaných kusů, jaké jsem loni prověřil.",
  code: "NC-023"
},
{
  photo: "uploads/IMG_4093e-2ab05026.jpeg",
  masks: [],
  meta: ["Model S", "2015"], title: "Norsko → Olomouc",
  desc: "Vozidlo s doživotním nabíjením zdarma na Tesla Superchargrech. SOH baterie pouze 92%. Moc pěkný vůz s winter packetem.",
  code: "NC-025"
},
{
  photo: "uploads/IMG_2020a.jpeg",
  masks: [],
  meta: ["Model 3", "2019"], title: "Holandsko → Praha",
  desc: "Stealth Grey Long Range. Vozidlo se podařilo zakoupit v zahraniční aukci, čistý lak, bez nehody. Dovoz a přihlášení za 4 týdny.",
  code: "NC-033"
},
{
  photo: "uploads/IMG_1506f.jpeg",
  masks: [],
  meta: ["Model X", "2017"], title: "Norsko → Plzeň",
  desc: "90D s doživotním nabíjením zdarma na Tesla Superchargrech, vzduchový podvozek, tažné. 7-míst - kompletní dovoz z Norska za 3 týdny.",
  code: "NC-034"
}];



const References = () =>
<section className="sect alt" id="reference">
    <div className="container">
      <div className="sect-head">
        <Reveal as="span" className="eyebrow">Reference</Reveal>
        <Reveal delay={60}><h2>Auta, která už jezdí v Česku</h2></Reveal>
        <Reveal delay={120}>
          <p className="lead">Každý vůz má svůj příběh - odkud přijel, pro koho a jak rychle. Tady je posledních devět.

        </p>
        </Reveal>
      </div>

      <div className="ref-grid">
        {REFS.map((r, i) =>
      <Reveal key={r.code} delay={i % 3 * 80}>
            <article className="ref-card">
              <div className="img" style={{ overflow: 'hidden' }}>
                {r.photo ?
            <img src={r.photo} alt={`${r.meta[0]} · ${r.meta[1]}`}
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /> :
            <CarPlaceholder label={`${r.meta[0]} · ${r.meta[1]}`} code={r.code} tone={i} aspect="tall" />
            }
              </div>
              <div className="body">
                <div className="meta">
                  <em>{r.meta[0]}</em>
                  <span>·</span>
                  <span>{r.meta[1]}</span>
                </div>
                <h3>{r.title}</h3>
                <p>{r.desc}</p>
              </div>
            </article>
          </Reveal>
      )}
      </div>
    </div>
  </section>;


const FAQS = [
{ q: "A co když se Tesla rozbije? Kdo to bude opravovat?",
  a: "Tesla má v ČR oficiální servisní centra v Praze a Brně, kam se dovezený vůz dá normálně objednat. Mimo to mám partnerský servis se zkušeností s EV - Vždy najdeme řešení, ať bydlíš kdekoliv." },
{ q: "Jaké jsou skutečné celkové náklady na dovoz?",
  a: "Záleží na konkrétním vozidle, vzdálenosti a umístění vozidla. Ke každé poptávce ti pošlu kompletní rozpočet ještě před tím, než cokoliv koupíš. Žádné skryté položky." },
{ q: "Jak dlouho celý proces trvá?",
  a: "Od podpisu rezervační smlouvy průměrně 2–4 týdny, většinu času zabere vyhledání vozidla, naplánování přepravy a příprava na předání. Když potřebuješ rychleji, hledáme auto blíž k Českým hranicím - uspoříš zhruba 1 týden." },
{ q: "Mám platnou záruku v Česku?",
  a: "Ano. Tesla nabízí celosvětovou záruku 4 roky / 80 000 km na vůz a 8 let / 192 000 km na baterii a pohon. Záruka platí i v ČR. Doplňkově ti můžu sjednat \u201eprodlouženou\u201c záruku přes nezávislého poskytovatele." },
{ q: "Co když auto nebude odpovídat fotkám?",
  a: "Proto u každého vozu doporučuji fyzickou prohlídku v ČR nebo zahraničí - buď ji udělám přes prodejce na místě, nebo doletím / zajedu na prohlídku osobně. Pokud auto neodpovídá inzerátu, nekupujeme. Tvoje záloha je vratná." },
{ q: "Můžu si auto vybrat sám, nebo mi pomůžeš?",
  a: "Obojí. Někteří klienti vědí přesně, co chtějí — pošlou mi link a já ho prověřím. Jiní mi dají rozpočet a požadavky a já vybírám. Většina je někde mezi. Konzultace zdarma a v klidu probereme, co dává pro tebe smysl." },
{ q: "Jaké pojištění je nejlepší pro Teslu?",
  a: "U EV se vyplatí HAV s nižší spoluúčastí kvůli ceně baterie. Mám smlouvy s pojišťovnami, které umí oceňovat dovezené Tesly férově (ne všechny to umí). Pošlu ti porovnání 3 nabídek, vybereš si." },
{ q: "Jak probíhá celý proces dovozu Tesly?",
  a: "Začneme konzultací zdarma — zjistím, co hledáš a jaký máš rozpočet. Pak vyhledám vhodné vozy, zajistím prohlídku a diagnostiku, připravím kompletní kalkulaci. Po odsouhlasení zajistím přepravu, celní odbavení, technickou přejímku (STK, emise) a přihlášení v ČR. Předám ti auto s klíči v ruce — ty nemusíš řešit nic." }];


const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="sect" id="faq">
      <div className="container">
        <div className="sect-head">
          <Reveal as="span" className="eyebrow">FAQ</Reveal>
          <Reveal delay={60}><h2>Co tě nejvíc zajímá</h2></Reveal>
          <Reveal delay={120}>
            <p className="lead">
              Otázky, které slýchám nejčastěji. Něco jsem vynechal? Napiš — odpovím ti osobně.
            </p>
          </Reveal>
        </div>

        <div className="faq-grid">
          {[FAQS.slice(0, 4), FAQS.slice(4)].map((col, ci) =>
          <div className="faq-list" key={ci}>
              {col.map((f, i) => {
              const idx = ci * 4 + i;
              const isOpen = open === idx;
              return (
                <div key={f.q} className={`faq-item ${isOpen ? "open" : ""}`}>
                    <button className="faq-q" aria-expanded={isOpen}
                  onClick={() => setOpen(isOpen ? -1 : idx)}>
                      <span>{f.q}</span>
                      <span className="ico"><Icon name="plus" size={14} /></span>
                    </button>
                    <div className="faq-a"><div><p>{f.a}</p></div></div>
                  </div>);

            })}
            </div>
          )}
        </div>
      </div>
    </section>);

};

const FinalCTA = () =>
<section className="sect" id="cta-final">
    <div className="container">
      <Reveal>
        <div className="cta-block">
          <span className="eyebrow">Dál to vyřešíme spolu</span>
          <h2>Pojďme si o tvojí Tesle popovídat.</h2>
          <p>Konzultace je zdarma a nezávazná. Probereme tvoje požadavky, rozpočet a doporučím ti správný model. Žádný tlak, žádná smlouva - jen rozhovor.


        </p>
          <div className="row">
            <button className="btn" onClick={() => scrollToId("kontakt")}>
              Domluvit konzultaci <Icon name="arrow-right" size={16} />
            </button>
            <a href="https://wa.me/420771226123" className="btn ghost" target="_blank" rel="noreferrer">
              <Icon name="wa" size={16} /> Napsat na WhatsApp
            </a>
          </div>
        </div>
      </Reveal>
    </div>
  </section>;


const ContactForm = () => {
  const [v, setV] = React.useState({ name: "", phone: "", email: "", msg: "" });
  const [err, setErr] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [submitErr, setSubmitErr] = React.useState(false);
  const validate = () => {
    const e = {};
    if (!v.name.trim() || v.name.trim().length < 2) e.name = "Napiš mi prosím své jméno.";
    if (!v.phone.trim() && !v.email.trim()) {
      e.phone = "Vyplň telefon nebo e-mail.";
      e.email = "Vyplň telefon nebo e-mail.";
    }
    if (v.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.email)) e.email = "E-mail nevypadá správně.";
    if (v.phone && v.phone.replace(/\D/g, "").length < 9) e.phone = "Telefon je krátký.";
    if (!v.msg.trim()) e.msg = "Napiš mi pár slov, ať se mám čeho chytit.";
    setErr(e);
    return Object.keys(e).length === 0;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setLoading(true);
    setSubmitErr(false);
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          name: v.name.trim(),
          phone: v.phone.trim(),
          email: v.email.trim(),
          message: v.msg.trim()
        })
      });
      if (res.ok) {
        setSent(true);
        setV({ name: "", phone: "", email: "", msg: "" });
      } else {
        setSubmitErr(true);
      }
    } catch (_) {
      setSubmitErr(true);
    } finally {
      setLoading(false);
    }
  };

  const fld = (k) => ({
    name: k === "msg" ? "message" : k,
    value: v[k],
    onChange: (e) => setV({ ...v, [k]: e.target.value }),
    onBlur: () => err[k] && validate(),
    className: err[k] ? "err" : ""
  });

  return (
    <form className="form" onSubmit={submit} noValidate>
      <div className="fld">
        <label htmlFor="f-name">Jméno</label>
        <input id="f-name" placeholder="Jak ti mám říkat" required {...fld("name")} />
        {err.name && <span className="hint err">{err.name}</span>}
      </div>
      <div className="fld">
        <label htmlFor="f-phone">Telefon</label>
        <input id="f-phone" inputMode="tel" placeholder="+420" {...fld("phone")} />
        {err.phone && <span className="hint err">{err.phone}</span>}
      </div>
      <div className="fld full">
        <label htmlFor="f-email">E-mail</label>
        <input id="f-email" type="email" placeholder="ty@firma.cz" {...fld("email")} />
        {err.email && <span className="hint err">{err.email}</span>}
      </div>
      <div className="fld full">
        <label htmlFor="f-msg">Co tě zajímá?</label>
        <textarea id="f-msg" placeholder="Třeba jaký model zvažuješ, rozpočet, kdy bys ji rád/a měl/a…" required {...fld("msg")} />
        {err.msg && <span className="hint err">{err.msg}</span>}
      </div>
      <div className="full" style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
        <button type="submit" className="btn" disabled={sent || loading}>
          {loading ? "Odesílám…" : sent ? "Odesláno" : "Odeslat poptávku"}
          {!loading && <Icon name="arrow-right" size={16} />}
        </button>
        <span style={{ fontSize: 13, color: "var(--ink-3)" }}>
          Ozvu se ti do 24 hodin. Většinou rychleji.
        </span>
      </div>
      {sent &&
      <div className="toast full">
          <Icon name="check" size={16} /> Díky! Mám tvoji poptávku — ozvu se ti zpátky.
        </div>
      }
      {submitErr &&
      <div className="toast full" style={{ background: "oklch(96% 0.015 25)", borderColor: "oklch(72% 0.12 25)", color: "oklch(38% 0.12 25)" }}>
          Něco se pokazilo. Zkus to prosím znovu nebo napiš přímo na{" "}
          <a href="mailto:info@nordcars.cz" style={{ color: "inherit", fontWeight: 600 }}>info@nordcars.cz</a>.
        </div>
      }
    </form>);

};

const Contact = () =>
<section className="sect alt" id="kontakt">
    <div className="container">
      <div className="sect-head">
        <Reveal as="span" className="eyebrow">Kontakt</Reveal>
        <Reveal delay={60}><h2>Napiš si o nezávaznou konzultaci</h2></Reveal>
        <Reveal delay={120}>
          <p className="lead">
            Vyplň pár polí, nebo mi rovnou zavolej. Volba je na tobě — ať to máš co nejjednodušší.
          </p>
        </Reveal>
      </div>

      <div className="contact-grid">
        <Reveal><ContactForm /></Reveal>
        <Reveal delay={120}>
          <aside className="contact-aside">
            <div className="ci">
              <div className="ico"><Icon name="phone" size={18} /></div>
              <div>
                <div className="lab">Telefon</div>
                <a className="val" href="tel:+420771226123">+420 771 226 123</a>
                <div className="sub">Po–Pá · 8:00–19:00</div>
              </div>
            </div>
            <div className="ci">
              <div className="ico"><Icon name="mail" size={18} /></div>
              <div>
                <div className="lab">E-mail</div>
                <a className="val" href="mailto:info@nordcars.cz">info@nordcars.cz</a>
                <div className="sub">Odpovídám do 24 h, často dřív</div>
              </div>
            </div>
            <div className="ci">
              <div className="ico"><Icon name="wa" size={18} /></div>
              <div>
                <div className="lab">WhatsApp</div>
                <a className="val" href="https://wa.me/420771226123" target="_blank" rel="noreferrer">+420 771 226 123</a>
                <div className="sub">Nejrychlejší způsob, jak se mě zeptat na cokoliv</div>
              </div>
            </div>
            <div className="ci">
              <div className="ico"><Icon name="compass" size={18} /></div>
              <div>
                <div className="lab">Sídlo</div>
                <div className="val">Šternberk · ČR</div>
                <div className="sub">Setkáváme se osobně po dohodě</div>
              </div>
            </div>
          </aside>
        </Reveal>
      </div>
    </div>
  </section>;


const Footer = () =>
<footer className="ftr">
    <div className="container">
      <div className="ftr-grid">

        <div>
          <span className="brand">
            <span className="brand-mark"><Icon name="compass" size={22} /></span>
            <span className="brand-name">Nordcars<span className="brand-tld">.cz</span></span>
          </span>
          <p className="ftr-claim">Jeden partner od první otázky až po STK. Tesla import &amp; servis se severskou pečlivostí.</p>
        </div>
        <div>
          <h4>Služby</h4>
          <ul>
            <li><a href="#sluzby" onClick={(e) => {e.preventDefault();scrollToId("sluzby");}}>Prohlídka v ČR a zahraničí</a></li>
            <li><a href="#sluzby" onClick={(e) => {e.preventDefault();scrollToId("sluzby");}}>Import na míru</a></li>
            <li><a href="#sluzby" onClick={(e) => {e.preventDefault();scrollToId("sluzby");}}>Registrace + pojištění</a></li>
            <li><a href="#sluzby" onClick={(e) => {e.preventDefault();scrollToId("sluzby");}}>Servis &amp; STK</a></li>
          </ul>
        </div>
        <div>
          <h4>O firmě</h4>
          <ul>
            <li><a href="#o-mne" onClick={(e) => {e.preventDefault();scrollToId("o-mne");}}>O mně</a></li>
            <li><a href="#jak-to-funguje" onClick={(e) => {e.preventDefault();scrollToId("jak-to-funguje");}}>Jak to funguje</a></li>
            <li><a href="#reference" onClick={(e) => {e.preventDefault();scrollToId("reference");}}>Reference</a></li>
            <li><a href="#faq" onClick={(e) => {e.preventDefault();scrollToId("faq");}}>FAQ</a></li>
          </ul>
        </div>
        <div>
          <h4>Kontakt</h4>
          <ul>
            <li><a href="tel:+420771226123">+420 771 226 123</a></li>
            <li><a href="mailto:info@nordcars.cz">info@nordcars.cz</a></li>
            <li><a href="https://wa.me/420771226123" target="_blank" rel="noreferrer">WhatsApp</a></li>
            <li><a href="#kontakt" onClick={(e) => {e.preventDefault();scrollToId("kontakt");}}>Formulář</a></li>
          </ul>
        </div>
      </div>
      <div className="ftr-bot">
        <span>NordCars · IČO 88 50 75 13 · © 2022–2026</span>
        <div className="ftr-soc">
          <a href="#" aria-label="Instagram"><Icon name="ig" size={16} /></a>
          <a href="#" aria-label="YouTube"><Icon name="yt" size={16} /></a>
          <a href="#" aria-label="LinkedIn"><Icon name="linkedin" size={16} /></a>
        </div>
      </div>
    </div>
  </footer>;


const WhatsAppFab = () =>
<a className="wa" href="https://wa.me/420771226123?text=Ahoj%20Jakube%2C%20zaj%C3%ADm%C3%A1%20m%C4%9B%20Tesla."
target="_blank" rel="noreferrer" aria-label="Napsat na WhatsApp">
    <Icon name="wa" size={26} />
    <span className="wa-tip">Napiš mi na WhatsApp</span>
  </a>;


Object.assign(window, { Services, Story, References, FAQ, FinalCTA, Contact, Footer, WhatsAppFab });