const { useState, useEffect, useRef } = React;

// ============================================================
// TWEAKABLE DEFAULTS (host rewrites this JSON on persistence)
// ============================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split",
  "accent": "#D8232A",
  "density": "comfortable",
  "showServiceIcons": true,
  "showPriceTable": true,
  "ctaStyle": "solid"
} /*EDITMODE-END*/;

// ============================================================
// LOGO
// The uploaded file's name uses *decomposed* Unicode (s + U+030C
// combining caron, not precomposed š/U+0161) — so the URL-encoded
// path uses %CC%8C for the caron rather than %C5%A1.
// ============================================================
const LOGO_SRC = "uploads/Logo%20plos%CC%8Cina%20Mojko.png";

// SVG fallback wordmark in case the bitmap fails to load (e.g. when
// the file is moved or renamed during dev handoff).
function LogoFallback({ height = 42 }) {
  return (
    <svg
      viewBox="0 0 200 120"
      height={height}
      style={{ display: "block" }}
      aria-label="Plošina Mojko">
      
      {/* simple crane arm + boom */}
      <g fill="#9FB1C1">
        <rect x="20" y="14" width="6" height="46" />
        <rect x="20" y="14" width="44" height="6" transform="rotate(-30 20 14)" />
        <rect x="58" y="2" width="20" height="14" />
      </g>
      {/* red band with wordmark */}
      <g>
        <rect x="0" y="60" width="200" height="34" fill="#D8232A" />
        <text
          x="100" y="84"
          textAnchor="middle"
          fontFamily="Manrope, sans-serif"
          fontWeight="800"
          fontSize="22"
          fill="#fff"
          letterSpacing="2">
          PLOŠINA</text>
        <text
          x="100" y="112"
          textAnchor="middle"
          fontFamily="Manrope, sans-serif"
          fontWeight="800"
          fontSize="18"
          fill="#D8232A"
          letterSpacing="3">
          MOJKO</text>
      </g>
    </svg>);

}

function LogoImg({ height = 42, alt = "Plošina Mojko" }) {
  const [failed, setFailed] = useState(false);
  if (failed) return <LogoFallback height={height} />;
  return (
    <img
      src={LOGO_SRC}
      alt={alt}
      style={{ height, width: "auto", objectFit: "contain", display: "block" }}
      onError={() => setFailed(true)} />);


}

// ============================================================
// CONTENT — Czech, real services from the brief
// ============================================================
const SERVICES = [
{
  id: "strechy",
  title: "Čištění střech a fasád",
  short: "Mech, lišejníky, prach, oxidace — i na špatně dostupných místech.",
  long: "Strojní očištění střešní krytiny a fasád. Pracujeme z plošiny, nemusíme tedy chodit po střeše a krytinu nepoškodíme. Vhodné pro rodinné domy, bytovky, průmyslové haly i historické objekty."
},
{
  id: "okna",
  title: "Mytí oken a prosklených stěn",
  short: "Showroomy, salóny, výlohy a budovy s vysokými skly.",
  long: "Specializujeme se na vysoké prosklené plochy, autosalony, showroomy, výlohy, prosklené atria. Tam, kde tyčový mop nestačí, dosáhne plošina bezpečně a rychle."
},
{
  id: "solar",
  title: "Čištění solárních panelů",
  short: "Prach, pyl, ptačí trus — vše, co snižuje výkon FVE.",
  long: "Pravidelné čištění fotovoltaických panelů obnovuje jejich výkon. Pracujeme šetrně, bez chemie. Dosáhneme i na střechy bytových domů a hal, kam se z lana ani z žebříku dostat nedá."
},
{
  id: "okapy",
  title: "Čištění okapů a svodů",
  short: "Listí, mech, hnízda. Z plošiny rychle a bez rizika.",
  long: "Kompletní pročištění žlabů a svislých svodů. Kontrola spádu, drobné opravy uchycení. Doporučujeme 1–2× ročně, ideálně po podzimu."
},
{
  id: "orez",
  title: "Ořez a kácení stromů",
  short: "Od konce větve směrem ke kmeni — bezpečně a šetrně.",
  long: "Klíčový rozdíl oproti stromolezcům: každou větev seřezáváme od konce. Strom se odlehčuje postupně, bez náhlých zlomů, bez rizika pro okolí. Vhodné na zahrady s plotem, nad chodníky, u domu.",
  highlight: true
},
{
  id: "rimsy",
  title: "Údržba říms a zábrany proti ptactvu",
  short: "Čištění, drobné opravy a instalace ochrany proti ptactvu.",
  long: "Pracujeme pro města, obce, SVJ i správce nemovitostí. Čištění říms, soch a ozdobných prvků, drobné údržbové práce. Souvisejíci instalace ochrany proti holubům — hrotové systémy, sítě, napínací dráty."
}];


const PRICES = [
{ label: "Mytí oken / prosklených stěn", from: "od 25 Kč / m²", note: "podle výšky a stavu" },
{ label: "Čištění střechy", from: "od 80 Kč / m²", note: "obvykle s impregnací" },
{ label: "Čištění okapů", from: "od 35 Kč / bm", note: "kontrola spádu zdarma" },
{ label: "Ořez stromu", from: "individuálně", note: "po prohlídce na místě" },
{ label: "Plošina s obsluhou", from: "1 200 Kč / hod", note: "doprava účtována zvlášť" }];


const FAQ = [
{
  q: "Půjčujete plošinu i bez obsluhy?",
  a: "Ne. Plošinu zapůjčuji vždy s vlastní obsluhou — z dlouhodobé zkušenosti vím, že se stroj při samovolném půjčování poškozuje. Vy řeknete, co je potřeba, my pomůžeme."
},
{
  q: "Do jaké výšky se dostanete?",
  a: "Pracovní výška plošiny Dinolift 150-T je 15 m, stranový dosah 10,1 m. Stroj má kompaktní rozměry, jednu nápravu a elektrický pohon — dostaneme se i tam, kam se autoplošina nedostane. Do dvorů, na trávník, k boční fasádě."
},
{
  q: "Pracujete celoročně?",
  a: "Ano. V zimě omezujeme mokré práce (mytí oken při mrazu), zato je to ideální období pro ořezy stromů a kontroly okapů."
},
{
  q: "Kde působíte?",
  a: "Kolín a okolí jako základna, po domluvě dojedeme i dál po Středočeském kraji a do Prahy. Doprava se účtuje podle vzdálenosti."
},
{
  q: "Vystavujete faktury pro firmy a obce?",
  a: "Samozřejmě. Pracujeme pro SVJ, města, obce i firmy. Doklady, předávací protokoly a doložení BOZP standardně."
}];


// ============================================================
// SMALL UI PIECES
// ============================================================

function StripedPlaceholder({ label, ratio = "16/9", tone = "warm", src, alt, eager = false }) {
  const bg = tone === "warm" ? "#EAE4D8" : "#D8DDE2";
  const stripe = tone === "warm" ? "#DCD3C0" : "#C6CDD4";
  return (
    <div
      className="placeholder"
      style={{
        aspectRatio: ratio,
        backgroundImage: `repeating-linear-gradient(135deg, ${bg} 0 14px, ${stripe} 14px 28px)`
      }}>

      {src ?
      <img
        className="placeholder__img"
        src={src}
        alt={alt || label}
        loading={eager ? "eager" : "lazy"}
        decoding="async" /> :

      <span className="placeholder__label">{label}</span>
      }
    </div>);

}

function ServiceIcon({ id }) {
  // Minimal geometric icons — simple primitives only.
  const stroke = "currentColor";
  const sw = 1.6;
  switch (id) {
    case "strechy":
      return (
        <svg viewBox="0 0 40 40" width="32" height="32" fill="none" stroke={stroke} strokeWidth={sw}>
          <path d="M4 22 L20 8 L36 22" />
          <path d="M8 22 V34 H32 V22" />
          <path d="M16 34 V26 H24 V34" />
        </svg>);

    case "okna":
      return (
        <svg viewBox="0 0 40 40" width="32" height="32" fill="none" stroke={stroke} strokeWidth={sw}>
          <rect x="8" y="6" width="24" height="28" />
          <path d="M20 6 V34 M8 20 H32" />
        </svg>);

    case "solar":
      return (
        <svg viewBox="0 0 40 40" width="32" height="32" fill="none" stroke={stroke} strokeWidth={sw}>
          <rect x="6" y="10" width="28" height="20" />
          <path d="M6 17 H34 M6 24 H34 M15 10 V30 M25 10 V30" />
        </svg>);

    case "okapy":
      return (
        <svg viewBox="0 0 40 40" width="32" height="32" fill="none" stroke={stroke} strokeWidth={sw}>
          <path d="M4 14 H36" />
          <path d="M4 14 V20 H36 V14" />
          <path d="M30 20 V34" />
        </svg>);

    case "orez":
      return (
        <svg viewBox="0 0 40 40" width="32" height="32" fill="none" stroke={stroke} strokeWidth={sw}>
          <path d="M20 34 V14" />
          <path d="M20 22 L10 12 M20 18 L28 10 M20 26 L12 22 M20 16 L30 20" />
        </svg>);

    case "rimsy":
      return (
        <svg viewBox="0 0 40 40" width="32" height="32" fill="none" stroke={stroke} strokeWidth={sw}>
          <rect x="6" y="22" width="28" height="4" />
          <path d="M10 22 V14 M16 22 V10 M22 22 V12 M28 22 V14" />
          <path d="M4 30 H36" />
        </svg>);

    case "ptactvo":
      return (
        <svg viewBox="0 0 40 40" width="32" height="32" fill="none" stroke={stroke} strokeWidth={sw}>
          <path d="M6 28 H34" />
          <path d="M10 28 V16 M16 28 V12 M22 28 V14 M28 28 V18" />
        </svg>);

    default:
      return null;
  }
}

// ============================================================
// SECTIONS
// ============================================================

function TopBar({ tweaks }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? "nav--scrolled" : ""}`}>
      <a className="nav__brand" href="#top">
        <LogoImg height={42} />
        <span className="nav__brand-text">
          <strong>PLOŠINA</strong>
          <em>MOJKO</em>
        </span>
      </a>
      <nav className="nav__links" aria-label="Hlavní navigace">
        <a href="#sluzby">Služby</a>
        <a href="#proc-my">Proč my</a>
        <a href="#reference">Reference</a>
        <a href="#cenik">Ceník</a>
        <a href="#kontakt">Kontakt</a>
      </nav>
      <a
        className={`btn btn--${tweaks.ctaStyle} nav__cta`}
        href="tel:+420604375180">
        
        <span className="btn__dot" aria-hidden />
        +420 604 375 180
      </a>
    </header>);

}

function HeroSplit({ tweaks }) {
  return (
    <section className="hero hero--split" id="top">
      <div className="hero__copy">
        <div className="eyebrow">
          <span className="eyebrow__bar" />
          Pracovní plošina • Kolín a okolí
        </div>
        <h1>
          Dostaneme se tam,<br />
          kam se nikdo jiný<br />
          <span className="hl">nedostane.</span>
        </h1>
        <p className="lede">
          Čištění střech, mytí prosklených stěn, solárních panelů, ořezy stromů
          a údržba ve výškách — z plošiny s pracovní výškou <strong>15 m</strong>
          {" "}a stranovým dosahem <strong>10,1 m</strong>. Bezpečně, šetrně,
          vždy s vlastní obsluhou.
        </p>
        <div className="hero__cta">
          <a className={`btn btn--${tweaks.ctaStyle} btn--lg`} href="#kontakt">
            Nezávazná poptávka
            <Arrow />
          </a>
          <a className="btn btn--ghost btn--lg" href="tel:+420604375180">
            604 375 180
          </a>
        </div>
        <ul className="hero__bullets">
          <li><Check /> Zajistíme obsluhu plošiny</li>
          <li><Check /> Pojištění odpovědnosti samozřejmostí</li>
          <li><Check /> Práce i v úzkých dvorech a na trávníku</li>
        </ul>
      </div>
      <div className="hero__visual">
        <div className="hero__visual-frame">
          <StripedPlaceholder
            label="hlavní fotka — plošina v akci na fasádě"
            ratio="4/5"
            src="uploads/fotky/hero-fasada.jpg"
            alt="Pracovní plošina Mojko při práci na fasádě v Kolíně"
            eager />
          <div className="hero__badge">
            <span className="hero__badge-num">15m</span>
            <span className="hero__badge-lbl">pracovní výška</span>
          </div>
          <div className="hero__chip hero__chip--tl">
            <span>Dinolift 150-T</span>
          </div>
          <div className="hero__chip hero__chip--br">
            <span>stranový dosah 10,1 m</span>
          </div>
        </div>
      </div>
    </section>);

}

function HeroFullbleed({ tweaks }) {
  return (
    <section className="hero hero--full" id="top">
      <div className="hero__bg">
        <StripedPlaceholder
          label="celostránková fotka — plošina + obloha"
          ratio="16/7"
          tone="cool"
          src="uploads/fotky/banner-obloha.jpg"
          alt="Pracovní plošina Dinolift 150-T vysunutá proti obloze" />
      </div>
      <div className="hero__overlay">
        <div className="eyebrow eyebrow--light">
          <span className="eyebrow__bar" />
          Pracovní plošina • Kolín a okolí
        </div>
        <h1>
          Dostaneme se tam, kam se<br />
          nikdo jiný <span className="hl">nedostane.</span>
        </h1>
        <p className="lede">
          Pracovní výška 15 m, stranový dosah 10,1 m. Čištění, mytí,
          ořezy, údržba ve výškách — vždy s vlastní obsluhou.
        </p>
        <div className="hero__cta">
          <a className={`btn btn--${tweaks.ctaStyle} btn--lg`} href="#kontakt">
            Nezávazná poptávka <Arrow />
          </a>
          <a className="btn btn--ghost-light btn--lg" href="tel:+420604375180">
            604 375 180
          </a>
        </div>
      </div>
    </section>);

}

function HeroEditorial({ tweaks }) {
  return (
    <section className="hero hero--editorial" id="top">
      <div className="hero__editorial-grid">
        <div className="hero__editorial-text">
          <div className="display-no">N°01</div>
          <h1 className="hero__editorial-h1">
            Výšky,<br />
            které si&nbsp;troufnou<br />
            <span className="hl underline">na vás.</span>
          </h1>
          <p className="lede">
            Pracovní plošina Dinolift 150-T, zkušená obsluha, sedm typů prací.
            Pavel Mojko jezdí po <strong>Kolíně a okolí</strong> už přes deset let.
          </p>
          <div className="hero__cta">
            <a className={`btn btn--${tweaks.ctaStyle} btn--lg`} href="#kontakt">
              Poptávka <Arrow />
            </a>
          </div>
        </div>
        <div className="hero__editorial-stack">
          <StripedPlaceholder
            label="plošina vysunutá nad fasádou"
            ratio="3/4"
            src="uploads/fotky/proc-my.jpg"
            alt="Plošina Mojko vysunutá nad fasádou domu" />
          <div className="hero__editorial-meta">
            <div><span className="meta-k">Pracovní výška</span><span className="meta-v">15 m</span></div>
            <div><span className="meta-k">Stranový dosah</span><span className="meta-v">10,1 m</span></div>
            <div><span className="meta-k">Hmotnost</span><span className="meta-v">1 662 kg</span></div>
            <div><span className="meta-k">Transportní šířka</span><span className="meta-v">1,8 m</span></div>
          </div>
        </div>
      </div>
    </section>);

}

function Hero({ tweaks }) {
  if (tweaks.heroVariant === "fullbleed") return <HeroFullbleed tweaks={tweaks} />;
  if (tweaks.heroVariant === "editorial") return <HeroEditorial tweaks={tweaks} />;
  return <HeroSplit tweaks={tweaks} />;
}

function MarqueeRow() {
  const items = [
  "STŘECHY", "FASÁDY", "OKNA", "PROSKLENÉ STĚNY", "SOLÁRNÍ PANELY",
  "OKAPY", "OŘEZY STROMŮ", "ŘÍMSY", "OCHRANA PROTI PTACTVU",
  "PLOŠINA S OBSLUHOU"];

  return (
    <div className="marquee" aria-hidden>
      <div className="marquee__track">
        {[...items, ...items].map((t, i) =>
        <span key={i} className="marquee__item">
            {t} <em className="marquee__dot">●</em>
          </span>
        )}
      </div>
    </div>);

}

function Services({ tweaks }) {
  return (
    <section className="section" id="sluzby">
      <div className="section__head">
        <div className="eyebrow"><span className="eyebrow__bar" /> Služby</div>
        <h2>Co umím z plošiny udělat</h2>
        <p className="section__lede">Šest hlavních prací. Pokud něco z toho potřebujete vyřešit, stačí zavolat, domluvíme se na prohlídce zdarma.


        </p>
      </div>
      <div className="services">
        {SERVICES.map((s, i) =>
        <article
          key={s.id}
          className={`service ${s.highlight ? "service--highlight" : ""}`}>
          
            <div className="service__num">{String(i + 1).padStart(2, "0")}</div>
            {tweaks.showServiceIcons &&
          <div className="service__icon"><ServiceIcon id={s.id} /></div>
          }
            <h3>{s.title}</h3>
            <p className="service__short">{s.short}</p>
            <p className="service__long">{s.long}</p>
            <a className="service__link" href="#kontakt">
              Poptat tuto službu <Arrow small />
            </a>
          </article>
        )}
      </div>
    </section>);

}

function WhyUs() {
  const items = [
  {
    k: "Ořez od konce větve",
    v: "Strom odlehčujeme postupně, větve neřežeme u kmene. Bez náhlých zlomů, bez poškození plotu a zahrady pod stromem.",
    tag: "exkluzivně"
  },
  {
    k: "Kompaktní rozměry",
    v: "Dinolift 150-T má jednu nápravu a elektrický pohon pro citlivé popojíždění. Tichý chod, nepoškodí trávník ani zámkovou dlažbu. Při ustavení 3,8 × 3,8 m — pevně a stabilně."
  },
  {
    k: "Vždy s obsluhou",
    v: "Plošinu půjčujeme pouze s odbornou asistencí naší obsluhy. Přijedeme na místo a pomůžeme Vám s vyhotovením zakázky.",
    tag: "důležité"
  },
  {
    k: "Pojištění a doklady",
    v: "Pojištění odpovědnosti samozřejmostí. BOZP, předávací protokoly. Standardně pro SVJ, firmy a obce."
  }];

  return (
    <section className="section section--alt" id="proc-my">
      <div className="section__head section__head--centered">
        <div className="eyebrow"><span className="eyebrow__bar" /> Proč s námi</div>
        <h2>Čtyři důvody, proč to lidi nechávají na nás</h2>
      </div>
      <div className="why">
        {items.map((it, i) =>
        <div className="why__item" key={i}>
            <div className="why__num">{String(i + 1).padStart(2, "0")}</div>
            <div className="why__body">
              <div className="why__head">
                <h3>{it.k}</h3>
                {it.tag && <span className="why__tag">{it.tag}</span>}
              </div>
              <p>{it.v}</p>
            </div>
          </div>
        )}
      </div>
    </section>);

}

function Process() {
  const steps = [
  { n: "01", k: "Zavoláte / napíšete", v: "Krátce popíšete, co je potřeba. Stačí fotka a adresa." },
  { n: "02", k: "Domluvíme prohlídku", v: "Většinou zdarma. Změříme výšky, posoudíme přístup." },
  { n: "03", k: "Pošleme cenu", v: "Pevná cena, žádné překvapení. Termín obvykle do 14 dnů." },
  { n: "04", k: "Realizace", v: "Přijedeme, postavíme plošinu, uděláme práci. Uklidíme po sobě." }];

  return (
    <section className="section">
      <div className="section__head">
        <div className="eyebrow"><span className="eyebrow__bar" /> Jak to chodí</div>
        <h2>Od telefonátu po dokončení</h2>
      </div>
      <ol className="process">
        {steps.map((s) =>
        <li key={s.n} className="process__step">
            <div className="process__n">{s.n}</div>
            <h4>{s.k}</h4>
            <p>{s.v}</p>
          </li>
        )}
      </ol>
    </section>);

}

function Gallery() {
  const items = [
  { l: "fasáda bytového domu — před / po", r: "3/4", src: "uploads/fotky/ref-fasada-bd.jpg", alt: "Očištěná fasáda bytového domu — výsledek mytí z plošiny" },
  { l: "prosklená stěna autosalonu", r: "1/1", src: "uploads/fotky/ref-autosalon.jpg", alt: "Mytí prosklené stěny autosalonu z pracovní plošiny" },
  { l: "solární panely na střeše haly", r: "3/4", src: "uploads/fotky/ref-solar.jpg", alt: "Čištění solárních panelů na střeše haly" },
  { l: "ořez ořešáku nad chodníkem", r: "1/1", src: "uploads/fotky/ref-orech.jpg", alt: "Ořez ořešáku nad chodníkem z pracovní plošiny" },
  { l: "římsa kostela, město Kolín", r: "3/4", src: "uploads/fotky/ref-rimsa.jpg", alt: "Údržba římsy historického objektu v Kolíně" },
  { l: "instalace hrotů proti holubům", r: "1/1", src: "uploads/fotky/ref-hroty.jpg", alt: "Instalace hrotů a zábran proti holubům na římse" }];

  return (
    <section className="section section--alt" id="reference">
      <div className="section__head">
        <div className="eyebrow"><span className="eyebrow__bar" /> Reference</div>
        <h2>Odkud jsme se naposledy vrátili</h2>
        <p className="section__lede">
          Galerie z reálných zakázek. Klikněte na poptávku, pokud chcete podobnou věc vyřešit.
        </p>
      </div>
      <div className="gallery">
        {items.map((it, i) =>
        <StripedPlaceholder key={i} label={it.l} ratio={it.r} tone={i % 2 ? "cool" : "warm"} src={it.src} alt={it.alt} />
        )}
      </div>
      <div className="testimonials">
        <article className="testimonial">
          <blockquote>
            „Velice dobrá spolupráce. Domluva s panem Mojkem byla skvělá,
            plošinu přivezl přesně podle dohody. Hodnotím 5/5. Doporučuji.“
          </blockquote>
          <cite>— Patrik Š. • zdroj: Firmy.cz</cite>
        </article>
        <article className="testimonial">
          <blockquote>
            „Moc děkujeme za zajištění plošiny. Pán je ochotný, plošinu
            dovezl i odvezl. Doporučujeme.“
          </blockquote>
          <cite>— H. Raduščák • zdroj: Firmy.cz</cite>
        </article>
      </div>
    </section>);

}

function Pricing({ tweaks }) {
  if (!tweaks.showPriceTable) return null;
  return (
    <section className="section" id="cenik">
      <div className="section__head">
        <div className="eyebrow"><span className="eyebrow__bar" /> Ceník</div>
        <h2>Orientační ceny</h2>
        <p className="section__lede">
          Přesnou cenu posílám až po prohlídce nebo z fotek. Tady je rámec, aby bylo z čeho vyjít.
        </p>
      </div>
      <div className="pricing">
        {PRICES.map((p, i) =>
        <div key={i} className="pricing__row">
            <div className="pricing__label">{p.label}</div>
            <div className="pricing__dots" aria-hidden />
            <div className="pricing__from">{p.from}</div>
            <div className="pricing__note">{p.note}</div>
          </div>
        )}
      </div>
      <p className="pricing__foot">
        Ceny jsou bez DPH (nejsem plátce). Doprava se účtuje paušálem podle
        vzdálenosti od Kolína.
      </p>
    </section>);

}

function FAQList() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section section--alt" id="faq">
      <div className="section__head">
        <div className="eyebrow"><span className="eyebrow__bar" /> Časté otázky</div>
        <h2>Na&nbsp;co se ptáte nejčastěji</h2>
      </div>
      <div className="faq">
        {FAQ.map((it, i) =>
        <div className={`faq__item ${open === i ? "is-open" : ""}`} key={i}>
            <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span>{it.q}</span>
              <span className="faq__plus" aria-hidden>{open === i ? "–" : "+"}</span>
            </button>
            <div className="faq__a"><p>{it.a}</p></div>
          </div>
        )}
      </div>
    </section>);

}

function ContactForm({ tweaks }) {
  const [form, setForm] = useState({ name: "", phone: "", service: "", msg: "" });
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    // Real handover: open the user's mail client pre-filled to plosina.kolin@seznam.cz.
    // (For production, replace with a server-side POST handler.)
    const sel = SERVICES.find((s) => s.id === form.service);
    const subject = `Poptávka — ${sel ? sel.title : "obecný dotaz"}`;
    const body = [
    `Jméno: ${form.name}`,
    `Telefon: ${form.phone}`,
    `Služba: ${sel ? sel.title : form.service || "—"}`,
    "",
    form.msg || ""].
    join("\n");
    window.location.href =
    `mailto:plosina.kolin@seznam.cz?subject=${encodeURIComponent(subject)}` +
    `&body=${encodeURIComponent(body)}`;
    setSent(true);
  };
  return (
    <section className="section section--contact" id="kontakt">
      <div className="contact">
        <div className="contact__copy">
          <div className="eyebrow eyebrow--light"><span className="eyebrow__bar" /> Kontakt</div>
          <h2>Zavolejte, nebo pošlete poptávku.</h2>
          <p className="lede">Pokud jsme zrovna na plošině, ozveme se do hodiny. Můžete také napsat — stačí fotka místa a stručný popis.


          </p>
          <div className="contact__channels">
            <a className="contact__channel" href="tel:+420604375180">
              <span className="contact__channel-k">Telefon</span>
              <span className="contact__channel-v">+420 604 375 180</span>
            </a>
            <a className="contact__channel" href="mailto:plosina.kolin@seznam.cz">
              <span className="contact__channel-k">E-mail</span>
              <span className="contact__channel-v">plosina.kolin@seznam.cz</span>
            </a>
            <div className="contact__channel">
              <span className="contact__channel-k">Adresa</span>
              <span className="contact__channel-v">Na Františku 327<br />280 02 Ovčáry</span>
            </div>
            <div className="contact__channel">
              <span className="contact__channel-k">IČ</span>
              <span className="contact__channel-v">05508916</span>
            </div>
          </div>
        </div>
        <form className="contact__form" onSubmit={submit}>
          {sent ?
          <div className="contact__sent">
              <h3>Děkujeme, ozveme se.</h3>
              <p>Vaše poptávka se otevřela v poštovním klientu. Pokud ne, napište přímo na plosina.kolin@seznam.cz.</p>
            </div> :

          <>
              <h3>Nezávazná poptávka</h3>
              <label>
                <span>Jméno</span>
                <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
              </label>
              <label>
                <span>Telefon</span>
                <input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} required />
              </label>
              <label>
                <span>O co jde</span>
                <select value={form.service} onChange={(e) => setForm({ ...form, service: e.target.value })}>
                  <option value="">— vyberte —</option>
                  {SERVICES.map((s) => <option key={s.id} value={s.id}>{s.title}</option>)}
                  <option value="jine">Něco jiného</option>
                </select>
              </label>
              <label>
                <span>Stručný popis</span>
                <textarea
                rows={4}
                placeholder="Adresa, výška, co je potřeba. Klidně i fotku přiložíte po telefonu."
                value={form.msg}
                onChange={(e) => setForm({ ...form, msg: e.target.value })} />
              
              </label>
              <button type="submit" className={`btn btn--${tweaks.ctaStyle} btn--lg`}>
                Odeslat poptávku <Arrow />
              </button>
              <p className="contact__legal">
                Odesláním souhlasíte se{" "}
                <a href="#gdpr" onClick={(e) => {e.preventDefault();window.dispatchEvent(new CustomEvent("open-gdpr"));}}>
                  zpracováním kontaktu pro vyřízení poptávky
                </a>.
              </p>
            </>
          }
        </form>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer__cols">
        <div className="footer__brand">
          <LogoImg height={56} />
          <p>Plošina Mojko — práce ve výškách z pracovní plošiny.<br />Kolín a okolí, ČR.</p>
        </div>
        <div>
          <h5>Služby</h5>
          <ul>
            {SERVICES.slice(0, 6).map((s) => <li key={s.id}><a href={`#${s.id}`}>{s.title}</a></li>)}
          </ul>
        </div>
        <div>
          <h5>Kontakt</h5>
          <ul>
            <li>Pavel Mojko</li>
            <li>Na Františku 327, 280 02 Ovčáry</li>
            <li><a href="tel:+420604375180">+420 604 375 180</a></li>
            <li><a href="mailto:plosina.kolin@seznam.cz">plosina.kolin@seznam.cz</a></li>
            <li>IČ: 05508916</li>
          </ul>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© {new Date().getFullYear()} Plošina Mojko • Design &amp; vývoj: <a href="https://janstehlik.com" target="_blank" rel="noopener">Jan Stehlík</a></span>
        <span className="footer__legal-links">
          <a href="#gdpr" onClick={(e) => {e.preventDefault();window.dispatchEvent(new CustomEvent("open-gdpr"));}}>GDPR &amp; Cookies</a>
          <span>IČ 05508916 • Nejsem plátce DPH</span>
        </span>
      </div>
    </footer>);

}

function GDPRModal() {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onOpen = () => setOpen(true);
    const onKey = (e) => {if (e.key === "Escape") setOpen(false);};
    window.addEventListener("open-gdpr", onOpen);
    window.addEventListener("keydown", onKey);
    return () => {
      window.removeEventListener("open-gdpr", onOpen);
      window.removeEventListener("keydown", onKey);
    };
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => {document.body.style.overflow = "";};
  }, [open]);
  if (!open) return null;
  return (
    <div className="modal-overlay" onClick={() => setOpen(false)} role="dialog" aria-modal="true">
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal__close" onClick={() => setOpen(false)} aria-label="Zavřít">×</button>
        <div className="modal__body">
          <h2>GDPR a Cookies</h2>

          <h3>Zásady ochrany osobních údajů</h3>
          <p><strong>Provozovatel webu:</strong><br />
            Pavel Mojko<br />
            Na Františku 327, 280 02 Ovčáry<br />
            IČ: 05508916<br />
            Telefon: +420 604 375 180<br />
            E-mail: plosina.kolin@seznam.cz
          </p>

          <h4>Jaké údaje shromažďujeme</h4>
          <ul>
            <li>Jméno a příjmení</li>
            <li>E-mailová adresa</li>
            <li>Telefonní číslo</li>
            <li>IP adresa</li>
          </ul>

          <h4>Za jakým účelem údaje shromažďujeme</h4>
          <ul>
            <li>Zpracování poptávek a dotazů z kontaktního formuláře</li>
            <li>Správa zakázek a smluv</li>
            <li>Marketingové účely (zasílání nabídek)</li>
          </ul>

          <h4>Jak dlouho údaje uchováváme</h4>
          <p>Vaše osobní údaje uchováváme po dobu nezbytně nutnou k naplnění výše uvedených účelů nebo dle požadavků platných právních předpisů.</p>

          <h4>Vaše práva</h4>
          <ul>
            <li>Právo na přístup k údajům</li>
            <li>Právo na opravu či vymazání</li>
            <li>Právo na omezení zpracování</li>
            <li>Právo na přenositelnost údajů</li>
          </ul>
          <p>Pro uplatnění práv nás kontaktujte na <a href="mailto:plosina.kolin@seznam.cz">plosina.kolin@seznam.cz</a>.</p>

          <h3>Zásady používání cookies</h3>
          <h4>Co jsou cookies</h4>
          <p>Cookies jsou malé textové soubory ukládané do vašeho zařízení, které pomáhají webové stránce zapamatovat si informace o vaší návštěvě.</p>

          <h4>Jaké cookies používáme</h4>
          <ul>
            <li><strong>Nezbytné cookies:</strong> zajišťují funkčnost webu.</li>
            <li><strong>Analytické cookies:</strong> slouží k analýze návštěvnosti (např. Google Analytics).</li>
            <li><strong>Marketingové cookies:</strong> používají se k personalizaci reklamy.</li>
          </ul>

          <h4>Jak spravovat cookies</h4>
          <p>Uživatelé mohou cookies odmítnout nebo upravit jejich nastavení přímo v prohlížeči.</p>

          <p className="modal__updated">Poslední aktualizace: 18. února 2025</p>
        </div>
      </div>
    </div>);

}

function CookieBanner() {
  const KEY = "pm-cookies-ack";
  const [show, setShow] = useState(false);
  useEffect(() => {
    try {if (!localStorage.getItem(KEY)) setShow(true);} catch (e) {setShow(true);}
  }, []);
  if (!show) return null;
  const accept = () => {
    try {localStorage.setItem(KEY, "1");} catch (e) {}
    setShow(false);
  };
  return (
    <div className="cookie-banner" role="region" aria-label="Cookies">
      <p>
        Tento web používá cookies pro zajištění funkčnosti a analýzu návštěvnosti.{" "}
        <a href="#gdpr" onClick={(e) => {e.preventDefault();window.dispatchEvent(new CustomEvent("open-gdpr"));}}>
          Více informací
        </a>.
      </p>
      <button className="btn btn--solid" onClick={accept}>Rozumím</button>
    </div>);

}

function StickyCall() {
  return (
    <a className="sticky-call" href="tel:+420604375180" aria-label="Zavolat 604 375 180">
      <PhoneIcon />
      <span>604 375 180</span>
    </a>);

}

function Arrow({ small }) {
  const s = small ? 14 : 16;
  return (
    <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M3 8 H13" />
      <path d="M9 4 L13 8 L9 12" />
    </svg>);

}
function Check() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M3 9 L7 13 L15 4" />
    </svg>);

}
function PhoneIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M3 4 C3 3 4 2 5 2 L7 2 L8 6 L6 7 C7 9 9 11 11 12 L12 10 L16 11 L16 13 C16 14 15 15 14 15 C8 15 3 10 3 4 Z" />
    </svg>);

}

// ============================================================
// APP + TWEAKS
// ============================================================

function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero">
        <TweakRadio
          label="Varianta"
          value={t.heroVariant}
          options={[
          { value: "split", label: "Split" },
          { value: "fullbleed", label: "Foto" },
          { value: "editorial", label: "Editorial" }]
          }
          onChange={(v) => setTweak("heroVariant", v)} />
        
      </TweakSection>
      <TweakSection label="Brand">
        <TweakColor
          label="Akcent"
          value={t.accent}
          options={["#D8232A", "#C81E3A", "#0F2A4F", "#0E1620", "#E89B3C"]}
          onChange={(v) => setTweak("accent", v)} />
        
        <TweakRadio
          label="CTA styl"
          value={t.ctaStyle}
          options={[
          { value: "solid", label: "Plný" },
          { value: "outline", label: "Obrys" }]
          }
          onChange={(v) => setTweak("ctaStyle", v)} />
        
      </TweakSection>
      <TweakSection label="Obsah">
        <TweakToggle
          label="Ikony u služeb"
          value={t.showServiceIcons}
          onChange={(v) => setTweak("showServiceIcons", v)} />
        
        <TweakToggle
          label="Zobrazit ceník"
          value={t.showPriceTable}
          onChange={(v) => setTweak("showPriceTable", v)} />
        
        <TweakRadio
          label="Hustota"
          value={t.density}
          options={[
          { value: "compact", label: "Hustá" },
          { value: "comfortable", label: "Vzdušná" }]
          }
          onChange={(v) => setTweak("density", v)} />
        
      </TweakSection>
    </TweaksPanel>);

}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

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

  return (
    <div className="page">
      <TopBar tweaks={t} />
      <main>
        <Hero tweaks={t} />
        <MarqueeRow />
        <Services tweaks={t} />
        <WhyUs />
        <Process />
        <Gallery />
        <Pricing tweaks={t} />
        <FAQList />
        <ContactForm tweaks={t} />
      </main>
      <Footer />
      <StickyCall />
      <GDPRModal />
      <CookieBanner />
      <TweaksUI t={t} setTweak={setTweak} />
    </div>);

}

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