function Hero() {
  const { SocialButton } = window.VizeProDamboIceDesignSystem_70ea19;
  const backRef = React.useRef(null);
  const frontRef = React.useRef(null);
  const villageRef = React.useRef(null);
  const waveRef = React.useRef(null);
  const pathRef = React.useRef(null);

  // Scroll parallax — každá vrstva se posouvá jinou rychlostí → dojem hloubky.
  // Posun dolů (s faktorem < 1) zatímco obsah roluje nahoru = výrazná separace vrstev.
  React.useEffect(() => {
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const layers = [
      [backRef.current, 0.05],   // vzdálený kopec — nejpomaleji
      [frontRef.current, 0.11],  // přední kopec
      [villageRef.current, 0.15],// linková vesnice — drží se vodní linky (vlnky)
      [waveRef.current, 0.15],   // vodní linka
      [pathRef.current, 0.20],   // tečkovaná cesta — nejrychleji (nejblíž)
    ];
    let raf = 0;
    const update = () => {
      raf = 0;
      const y = window.scrollY || window.pageYOffset || 0;
      for (const [el, f] of layers) {
        if (el) el.setAttribute('transform', 'translate(0 ' + (y * f).toFixed(2) + ')');
      }
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    update();
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);

  return (
    <section id="top" className="vpd-hero" style={{ position: 'relative', overflow: 'hidden', minHeight: 'min(90vh, 860px)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      {/* ---- joyful tri-colour background: soft blending blobs of green / blue + warm light ---- */}
      <div aria-hidden="true" className="vpd-hero-bg" />
      <div aria-hidden="true" className="vpd-hero-blob vpd-blob-green" />
      <div aria-hidden="true" className="vpd-hero-blob vpd-blob-blue" />
      <div aria-hidden="true" className="vpd-hero-blob vpd-blob-warm" />

      {/* ---- rolling hills + drifting water motif (animated) ---- */}
      <svg aria-hidden="true" viewBox="0 0 1440 600" preserveAspectRatio="xMidYMax slice" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%', zIndex: 1,
      }}>
        {/* back hill — lighter green, sways slowly one way */}
        <g ref={backRef} style={{ willChange: 'transform' }}>
          <path className="vpd-hill vpd-hill-back"
            d="M-80,352 C300,288 560,370 900,330 C1180,298 1320,340 1520,318 L1520,760 L-80,760 Z"
            fill="#74A352" opacity="0.20" />
        </g>
        {/* front hill — primary green, sways the other way */}
        <g ref={frontRef} style={{ willChange: 'transform' }}>
          <path className="vpd-hill vpd-hill-front"
            d="M-80,400 C320,340 720,448 1080,386 C1280,352 1400,378 1520,366 L1520,760 L-80,760 Z"
            fill="#588B3D" opacity="0.26" />
        </g>
        {/* line-art village — full-width panorama sitting on the water/wave line (outline only) */}
        <g ref={villageRef} fill="none" stroke="#1B1B1B" strokeWidth="2"
          strokeLinejoin="round" strokeLinecap="round" opacity="0.30" style={{ willChange: 'transform' }}>
          {/* ---- LEVÁ část — různorodá zástavba (~y411-419) ---- */}
          {/* jehličnan */}
          <path d="M30,412 V404 M22,404 L30,388 L38,404 Z" />
          {/* kulatý strom */}
          <line x1="60" y1="411" x2="60" y2="399" />
          <circle cx="60" cy="391" r="8" />
          {/* domek s komínem */}
          <path d="M82,411 V391 L102,375 L122,391 V411" />
          <path d="M112,381 V371 H118 V385" />
          {/* vysoký úzký dům */}
          <path d="M134,412 V384 L147,372 L160,384 V412" />
          {/* široká stodola */}
          <path d="M172,413 V396 L200,384 L228,396 V413" />
          <path d="M192,413 V401 H208 V413" />
          {/* kostel s věží a křížkem */}
          <path d="M246,415 V362 L262,348 L278,362 V415" />
          <line x1="262" y1="348" x2="262" y2="335" />
          <line x1="255" y1="341" x2="269" y2="341" />
          <path d="M278,415 V380 L308,364 L338,380 V415" />
          <circle cx="308" cy="394" r="5" />
          {/* malá chalupa */}
          <path d="M352,417 V401 L370,389 L388,401 V417" />
          {/* kulatý strom */}
          <line x1="408" y1="418" x2="408" y2="406" />
          <circle cx="408" cy="398" r="9" />
          {/* domeček */}
          <path d="M424,418 V403 L438,393 L452,403 V418" />

          {/* ---- střed volný pro název + tlačítka ---- */}

          {/* ---- PRAVÁ část — různorodá zástavba (~y412-419) ---- */}
          {/* kulatý strom */}
          <line x1="965" y1="414" x2="965" y2="402" />
          <circle cx="965" cy="394" r="8" />
          {/* domek s komínem */}
          <path d="M982,413 V393 L1002,378 L1022,393 V413" />
          <path d="M1014,383 V374 H1020 V387" />
          {/* široká stodola */}
          <path d="M1034,412 V396 L1062,385 L1090,396 V412" />
          {/* vysoký dům */}
          <path d="M1102,412 V382 L1116,370 L1130,382 V412" />
          {/* jehličnan */}
          <path d="M1146,413 V405 M1138,405 L1146,388 L1154,405 Z" />
          {/* dům s dveřmi */}
          <path d="M1166,414 V395 L1186,381 L1206,395 V414" />
          <path d="M1176,414 V402 H1186 V414" />
          {/* chalupa */}
          <path d="M1220,415 V400 L1238,389 L1256,400 V415" />
          {/* kulatý strom */}
          <line x1="1276" y1="416" x2="1276" y2="404" />
          <circle cx="1276" cy="396" r="9" />
          {/* domek */}
          <path d="M1294,416 V398 L1312,386 L1330,398 V416" />
          {/* malý dům */}
          <path d="M1346,415 V400 L1362,390 L1378,400 V415" />
          {/* jehličnan */}
          <path d="M1396,414 V406 M1388,406 L1396,390 L1404,406 Z" />
        </g>

        {/* grey "water" wave line — gently undulates */}
        <g ref={waveRef} style={{ willChange: 'transform' }}>
          <path className="vpd-wave"
            d="M-80,420 C260,384 520,456 820,420 C1080,389 1280,440 1520,412"
            fill="none" stroke="#1B1B1B" strokeWidth="2.5" opacity="0.18" strokeLinecap="round" />
        </g>
        {/* blue dotted "path" — gently undulates with the water */}
        <g ref={pathRef} style={{ willChange: 'transform' }}>
          <path className="vpd-wave vpd-wave-blue"
            d="M-80,448 C300,412 600,484 900,444 C1160,410 1340,460 1520,440"
            fill="none" stroke="#3871E8" strokeWidth="3" opacity="0.30" strokeDasharray="2 14" strokeLinecap="round" />
        </g>
      </svg>

      <div className="vpd-hero-inner" style={{
        position: 'relative', zIndex: 2,
        maxWidth: 'var(--container)', margin: '0 auto',
        padding: 'clamp(8rem,5rem + 9vw,13rem) var(--gutter) clamp(10rem,6rem + 13vw,16rem)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
      }}>
        <h1 className="vpd-hero-title" style={{
          fontFamily: 'var(--font-heading)', fontWeight: 800, fontSize: 'var(--fs-display)',
          letterSpacing: 'var(--ls-tight)', lineHeight: 'var(--lh-tight)',
          margin: '0 0 var(--space-5)',
        }}>
          <span style={{ color: 'var(--blue-600)' }}>Vize</span>{' '}
          <span style={{ color: 'var(--ink-900)' }}>pro</span>{' '}
          <span style={{ color: 'var(--green-600)', letterSpacing: '0.01em' }}>DAMBOŘICE</span>
        </h1>

        <p style={{
          fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 'clamp(1.05rem,0.9rem + 0.7vw,1.4rem)',
          color: 'var(--color-accent)', margin: '0 0 var(--space-4)',
        }}>Nezávislí kandidáti pro komunální volby 2026</p>

        <p style={{
          fontFamily: 'var(--font-body)', fontSize: 'var(--fs-lead)', lineHeight: 'var(--lh-normal)',
          color: 'var(--slate-700)', margin: '0 0 var(--space-7)', maxWidth: '46ch',
        }}>
          Promyšleně, otevřeně, s vizí.<br />Pro Dambořice, kde se dobře žije dnes i&nbsp;za&nbsp;20&nbsp;let.
        </p>

        <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap', justifyContent: 'center' }}>
          <SocialButton channel="facebook" href={window.FB_URL} size="lg" label="Sledujte nás na Facebooku" />
          <SocialButton channel="instagram" href={window.IG_URL} size="lg" label="Instagram" />
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;