// sections-top.jsx — header, hero, timeline

const NAV_ITEMS = [
{ id: "jak-to-funguje", label: "Jak to funguje" },
{ id: "sluzby", label: "Služby" },
{ id: "reference", label: "Reference" },
{ id: "o-mne", label: "O mně" },
{ id: "faq", label: "FAQ" },
{ id: "kontakt", label: "Kontakt" }];


const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 4);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
  }, [open]);
  return (
    <>
      <header className={`hdr ${scrolled ? "scrolled" : ""} ${open ? "menu-open" : ""}`}>
        <div className="container hdr-row">
          <a href="#top" className="brand" aria-label="Nordcars.cz — domů">
            <span className="brand-mark"><Icon name="compass" size={26} stroke={1.4} /></span>
            <span className="brand-name">Nordcars<span className="brand-tld">.cz</span></span>
          </a>
          <nav className="nav" aria-label="Hlavní">
            {NAV_ITEMS.map((n) =>
            <a key={n.id} href={`#${n.id}`} onClick={(e) => {e.preventDefault();scrollToId(n.id);}}>{n.label}</a>
            )}
          </nav>
          <div className="hdr-cta">
            <button className="btn sm" onClick={() => scrollToId("kontakt")}>
              Nezávazná konzultace <Icon name="arrow-right" size={16} />
            </button>
            <button className="menu-btn" type="button" aria-expanded={open} aria-label={open ? "Zavřít menu" : "Otevřít menu"} onClick={() => setOpen((v) => !v)}>
              <Icon name={open ? "x" : "menu"} size={20} />
            </button>
          </div>
        </div>
      </header>
      <div className={`drawer ${open ? "open" : ""}`} onClick={() => setOpen(false)} aria-hidden={!open}>
        <div className="drawer-panel" role="dialog" aria-modal="true" aria-label="Hlavní menu" onClick={(e) => e.stopPropagation()}>
          <div className="drawer-head">
            <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>
            <button className="menu-btn" type="button" onClick={() => setOpen(false)} aria-label="Zavřít menu"><Icon name="x" /></button>
          </div>
          <nav className="drawer-nav" aria-label="Mobilní navigace">
            {NAV_ITEMS.map((n) =>
            <a key={n.id} href={`#${n.id}`} onClick={(e) => {e.preventDefault();setOpen(false);setTimeout(() => scrollToId(n.id), 100);}}>{n.label}</a>
            )}
          </nav>
          <button className="btn" type="button" onClick={() => {setOpen(false);setTimeout(() => scrollToId("kontakt"), 100);}}>
            Nezávazná konzultace <Icon name="arrow-right" size={16} />
          </button>
        </div>
      </div>
    </>);

};

const HERO_VARIANTS = {
  starosti: { h1a: "Tvoje první Tesla.", h1b: "Bez starostí." },
  klic: { h1a: "Tesla na klíč.", h1b: "Od první otázky po STK." }
};

const Hero = ({ variant = "starosti" }) => {
  const v = HERO_VARIANTS[variant] || HERO_VARIANTS.starosti;
  return (
    <section className="hero" id="top">
      <div className="hero-bg" aria-hidden="true" />
      <div className="container hero-grid">
        <div className="hero-copy">
          <Reveal as="span" className="eyebrow">Tesla import &amp; servis · od 2022</Reveal>
          <Reveal delay={80}>
            <h1>{v.h1a}<br /><span className="ink-soft">{v.h1b}</span></h1>
          </Reveal>
          <Reveal delay={160}>
            <p className="lead">Provedu Tě celým procesem - výběr auta v EU, Norsku nebo ČR, prohlídka, dovoz, registrace, servis, pojištění, záruka. Ty si jen přijdeš pro klíče.


            </p>
          </Reveal>
          <Reveal delay={240} className="hero-cta">
            <button className="btn" onClick={() => scrollToId("kontakt")}>
              Domluvit konzultaci zdarma <Icon name="arrow-right" size={16} />
            </button>
            <a href="#jak-to-funguje" className="tlink"
            onClick={(e) => {e.preventDefault();scrollToId("jak-to-funguje");}}>
              Jak to funguje <Icon name="arrow-down" size={14} />
            </a>
          </Reveal>
        </div>

        <Reveal delay={120} className="hero-art">
          <div className="car-frame tall has-photo">
            <img src="images/hero-model-s.jpg" alt="Tesla Model S 90D 2017"
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
            <div className="corner"></div>
            <div className="label">
              <span className="dot"></span>
              Model S 90D 2017
            </div>
          </div>
        </Reveal>
      </div>

      <div className="container">
        <div className="proof">
          <div className="proof-row">
            <Reveal className="cell">
              <div className="num"><em><CountUp to={30} suffix="+" /></em> dovezených Tesel</div>
              <div className="lab">od první do poslední — každou znám</div>
            </Reveal>
            <Reveal delay={80} className="cell">
              <div className="num"><em><CountUp to={3} suffix="+" /></em> roky specializace</div>
              <div className="lab">jediná značka — abych byl opravdu dobrý</div>
            </Reveal>
            <Reveal delay={160} className="cell">
              <div className="num"><em><CountUp to={1} /></em> partner pod jednou střechou</div>
              <div className="lab">výběr · import · registrace · servis · STK</div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>);

};

const STEPS = [
{
  n: 1,
  icon: "search",
  t: "Výběr",
  d: "Probereme tvé požadavky - model, výbavu, rozpočet  a hledám správnou Teslu na ověřených inzertních webech a aukcích (autoscout, mobile.de, finn.no, openlane)\nPosílám ti kandidáty s vlastním komentářem.",
  dur: "1–3 dny"
},
{
  n: 2,
  icon: "ship",
  t: "Dovoz do ČR",
  d: "Zařídím osobní prohlídku, přepravu, celní odbavení v EU (plati pro dovoz z Norska), COC dokument a dovozovou technickou kontrolu v ČR.\nDostáváš denní update s informacemi jak se dovoz vyvíjí.",
  dur: "1–3 týdny"
},
{
  n: 3,
  icon: "doc",
  t: "Registrace",
  d: "Veškeré vyřizování na Českých úřadech nech na nás.\nSPZ na míru, výběr nejvhodnějšího pojištění a možnost sjednání \"rozšířené záruky\"\nu Fortegry.\nTy podepíšeš, já vyřídím všechno co je potřeba.",
  dur: "3–5 dní"
},
{
  n: 4,
  icon: "wrench",
  t: "Servis",
  d: "Předprodejní a poprodejní servis je u nás samozřejmostí.\nVeškeré mechanické opravy, geometrie, klimatizace, brzdy, přezouvání pneumatik. Spolupracujeme také s odborníky na HW a SW poruchy včetně baterií. ",
  dur: "navždy"
},
{
  n: 5,
  icon: "key",
  t: "Předání",
  d: "V den D ti vůz předávám vyčištěný, detailingově ošetřený a voňavý.\nNa českých SPZ, s vyřízeným pojištěním a plnou nádrží elektřiny.\nProjdeme společně všechny funkce - autopilot, nabíjení, aplikaci - abys mohl jen sednout a jezdit.",
  dur: "den D"
}];


const Timeline = () => {
  const [seen, setSeen] = React.useState(0);
  const refs = React.useRef([]);

  React.useEffect(() => {
    const ios = refs.current.map((el, i) => {
      if (!el) return null;
      const io = new IntersectionObserver((es) => {
        es.forEach((e) => {
          if (e.isIntersecting) {
            setSeen((prev) => Math.max(prev, i + 1));
          }
        });
      }, { threshold: 0.4, rootMargin: "0px 0px -10% 0px" });
      io.observe(el);
      return io;
    });
    return () => ios.forEach((io) => io && io.disconnect());
  }, []);

  return (
    <section className="sect" id="jak-to-funguje">
      <div className="container">
        <div className="sect-head">
          <Reveal as="span" className="eyebrow">Proces</Reveal>
          <Reveal delay={60}><h2>Od poptávky po klíčky<br />Krok za krokem</h2></Reveal>
          <Reveal delay={120}>
            <p className="lead">Pevná cena dohodnutá předem, vratná záloha a smluvní záruka kvality v každém kroku. Když auto neodpovídá inzerátu, nekupujeme - bez výmluv. Komunikace na prvním místě ať víš, kde stojíš.


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

        <div className="tl-wrap">
          <div className="tl-progress" aria-hidden="true">
            <div className="bar" style={{ width: `${Math.max(0, (seen - 0.5) / STEPS.length) * 100}%` }} />
          </div>
          <div className="tl-grid">
            {STEPS.map((s, i) =>
            <div
              key={s.n}
              ref={(el) => refs.current[i] = el}
              className={`tl-step ${seen > i ? "in" : ""}`}
              style={{ transitionDelay: `${i * 80}ms` }}>
                <div className="num">Krok <em>{String(s.n).padStart(2, "0")}</em></div>
                <div className="node"><Icon name={s.icon} size={22} stroke={1.6} /></div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
                <span className="dur"><span className="pulse"></span>{s.dur}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

};

Object.assign(window, { Header, Hero, Timeline });