function Hero() {
  return (
    <section className="hero-section" style={{
      position:"relative", height: "100vh", minHeight: 620,
      background:"var(--paper)",
      color:"var(--navy)", overflow:"hidden",
    }}>
      {/* Karl-Heine-Kanal photo */}
      <PhotoScene />
      {/* Cream scrim for headline legibility */}
      <div style={{
        position:"absolute", inset:0, zIndex:1, pointerEvents:"none",
        background:"linear-gradient(95deg, rgba(251,248,242,0.92) 0%, rgba(251,248,242,0.78) 30%, rgba(251,248,242,0.35) 55%, rgba(251,248,242,0.05) 75%, transparent 100%)",
      }}/>
      <div style={{
        position:"absolute", left:0, right:0, bottom:0, height:"30%", zIndex:1, pointerEvents:"none",
        background:"linear-gradient(180deg, transparent, rgba(251,248,242,0.55))",
      }}/>

      <div style={{maxWidth:1320, margin:"0 auto", padding:"clamp(96px, 13vh, 140px) 40px clamp(64px, 9vh, 96px)", position:"relative", zIndex:2, height:"100%", display:"flex", flexDirection:"column", justifyContent:"center"}}>
        
        {/* Left: Headline */}
        <div>
          <h2 className="serif" style={{
            fontSize: "clamp(40px, 5.4vw, 78px)", lineHeight: 0.98, fontWeight: 500,
            letterSpacing:"-0.022em", marginBottom: "clamp(14px, 2vh, 24px)", color:"var(--navy)",
          }}>
            <span style={{color:"var(--gold)"}}>Ihre</span> <span style={{fontStyle:"italic", color:"var(--navy)"}}>Bootsversicherung</span>.
          </h2>

          <h1 className="serif" style={{
            fontSize: "clamp(28px, 3.4vw, 48px)", lineHeight: 1.05, fontWeight: 400,
            letterSpacing:"-0.01em", marginBottom: "clamp(16px, 2.4vh, 26px)", color:"var(--navy)",
          }}>
            Harmonie <span style={{fontStyle:"italic", color:"var(--gold)"}}>auf dem Wasser.</span><br/>
            Sicherheit <span style={{fontStyle:"italic", color:"var(--gold)"}}>im Hafen.</span>
          </h1>

          <p className="serif" style={{
            fontSize: 18, lineHeight: 1.5, color:"rgba(26,38,56,0.72)", maxWidth: 520, marginBottom: "clamp(20px, 3vh, 32px)",
            fontWeight: 400,
          }}>
            Ihr spezialisierter Versicherungsmakler am Stadthafen Leipzig.
            Maßgeschneiderter Schutz für Segel‑ und Motorboote — beraten mit
            der Sorgfalt, die Ihr Schiff verdient.
          </p>

          <div className="hero-buttons" style={{display:"flex", gap:14, alignItems:"center", flexWrap:"wrap"}}>
            <a href="#rechner" className="sans" style={{
              padding:"14px 28px", background:"var(--navy)", color:"var(--paper)",
              fontSize: 12.5, letterSpacing:"0.16em", textTransform:"uppercase", fontWeight: 600,
              display:"inline-flex", alignItems:"center", gap:10,
            }}>
              Direkt online berechnen
              <span style={{fontSize:18}}>→</span>
            </a>
            <a href="#leistungen" className="sans" style={{
              padding:"8px 22px", border:"1px solid var(--navy)", color:"var(--navy)",
              fontSize: 11.5, letterSpacing:"0.14em", textTransform:"uppercase", fontWeight: 500,
              background:"transparent",
              display:"inline-flex", flexDirection:"column", alignItems:"center", justifyContent:"center",
              lineHeight: 1.25, textAlign:"center",
            }}>
              <span>Unsere Leistungen</span>
              <span style={{fontSize: 9.5, letterSpacing:"0.18em", color:"var(--gold)", marginTop: 2, fontWeight: 600}}>Premiumschutz weltweit</span>
            </a>
          </div>

          <div className="hero-stats" style={{marginTop: "clamp(28px, 4.5vh, 56px)", display:"flex", gap: 44, alignItems:"flex-start"}}>
            <Stat number="35+" label="Jahre Erfahrung" />
            <Stat number="✓" label="Bestandsverträge prüfen" />
            <Stat number="1·1" label="Persönliche Beratung" />
          </div>
        </div>
      </div>

        {/* Scroll indicator */}
      <div style={{position:"absolute", bottom:20, left:"50%", transform:"translateX(-50%)", textAlign:"center", zIndex:2}}>
        <div className="sans" style={{fontSize:10, letterSpacing:"0.4em", color:"var(--gold)", marginBottom:8, textTransform:"uppercase", fontWeight:600}}>Scroll</div>
        <div style={{width:1, height:28, background:"linear-gradient(180deg, var(--gold), transparent)", margin:"0 auto"}}></div>
      </div>
    </section>
  );
}

function Stat({ number, label }) {
  return (
    <div>
      <div className="serif" style={{fontSize: 36, color:"var(--navy)", fontWeight: 500, lineHeight:1, fontStyle:"italic"}}>{number}</div>
      <div className="sans" style={{fontSize: 11, letterSpacing:"0.2em", textTransform:"uppercase", color:"rgba(26,38,56,0.6)", marginTop:8, fontWeight:500}}>{label}</div>
    </div>
  );
}

function CompassRose({ size = 400 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 400 400" fill="none">
      <circle cx="200" cy="200" r="190" stroke="var(--navy)" strokeWidth="1" />
      <circle cx="200" cy="200" r="150" stroke="var(--navy)" strokeWidth="1" />
      <circle cx="200" cy="200" r="80" stroke="var(--navy)" strokeWidth="1" />
      {[...Array(16)].map((_, i) => {
        const angle = (i * 22.5) * Math.PI / 180;
        const x1 = 200 + Math.cos(angle) * 80;
        const y1 = 200 + Math.sin(angle) * 80;
        const x2 = 200 + Math.cos(angle) * 190;
        const y2 = 200 + Math.sin(angle) * 190;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--navy)" strokeWidth={i % 4 === 0 ? "1.2" : "0.5"} />;
      })}
      <path d="M200 30 L210 200 L200 220 L190 200 Z" fill="var(--gold)" opacity="0.6"/>
      <path d="M200 370 L210 200 L200 180 L190 200 Z" fill="var(--gold)" opacity="0.4"/>
      <text x="200" y="22" textAnchor="middle" style={{fontFamily:"'Cormorant Garamond',serif", fontSize:14, fill:"var(--navy)"}}>N</text>
      <text x="200" y="392" textAnchor="middle" style={{fontFamily:"'Cormorant Garamond',serif", fontSize:14, fill:"var(--navy)"}}>S</text>
      <text x="382" y="205" textAnchor="middle" style={{fontFamily:"'Cormorant Garamond',serif", fontSize:14, fill:"var(--navy)"}}>E</text>
      <text x="18" y="205" textAnchor="middle" style={{fontFamily:"'Cormorant Garamond',serif", fontSize:14, fill:"var(--navy)"}}>W</text>
    </svg>
  );
}

function BoatPlate() {
  return (
    <div style={{
      position:"relative", aspectRatio:"4/5", width:"100%", maxWidth: 460, marginLeft:"auto",
      border:"1px solid var(--gold)", padding: 22,
      background:"#fff",
      boxShadow:"0 30px 80px -40px rgba(26,58,92,0.3)",
    }}>
      {/* Inner frame */}
      <div style={{
        position:"relative", width:"100%", height:"100%",
        border:"1px solid var(--line)",
        background:`
          repeating-linear-gradient(135deg, rgba(26,58,92,0.025) 0px, rgba(26,58,92,0.025) 1px, transparent 1px, transparent 14px),
          linear-gradient(180deg, #f4f7fb 0%, #e9eef4 60%, #d8e1ec 100%)
        `,
        overflow:"hidden",
      }}>
        {/* Sun glow */}
        <div style={{position:"absolute", top:"22%", left:"50%", transform:"translate(-50%,-50%)", width:140, height:140, borderRadius:"50%",
          background:"radial-gradient(circle, rgba(212,178,116,0.55), rgba(212,178,116,0) 70%)"}}/>

        {/* Boat silhouette — light variant */}
        <svg viewBox="0 0 400 500" style={{position:"absolute", inset:0, width:"100%", height:"100%"}}>
          <line x1="0" y1="320" x2="400" y2="320" stroke="rgba(26,58,92,0.2)" strokeWidth="0.5" />
          <path d="M0 320 L60 314 L140 318 L220 312 L320 316 L400 314 L400 320 Z" fill="rgba(26,58,92,0.18)" />
          <g transform="translate(200, 290)">
            <line x1="0" y1="-110" x2="0" y2="20" stroke="var(--navy)" strokeWidth="1" />
            <path d="M0 -110 L 0 20 L 55 20 Z" fill="#fbf8f2" stroke="var(--navy)" strokeWidth="0.6" />
            <path d="M0 -110 L 0 5 L -45 10 Z" fill="rgba(212,178,116,0.85)" stroke="var(--navy)" strokeWidth="0.5" />
            <path d="M-70 20 Q -55 38, -30 40 L 60 40 Q 78 38, 78 20 Z" fill="var(--navy)" stroke="var(--gold)" strokeWidth="1" />
            <line x1="-70" y1="40" x2="78" y2="40" stroke="var(--gold)" strokeWidth="0.6" opacity="0.7" />
          </g>
          <path d="M120 350 L 280 350" stroke="rgba(26,58,92,0.35)" strokeWidth="0.6" />
          <path d="M100 370 L 300 370" stroke="rgba(26,58,92,0.25)" strokeWidth="0.6" />
          <path d="M140 390 L 260 390" stroke="rgba(26,58,92,0.18)" strokeWidth="0.6" />
          <path d="M80 412 L 320 412" stroke="rgba(26,58,92,0.12)" strokeWidth="0.6" />
          <path d="M160 432 L 240 432" stroke="rgba(26,58,92,0.08)" strokeWidth="0.6" />
        </svg>

        {[
          {top:8, left:8, rot:0},
          {top:8, right:8, rot:90},
          {bottom:8, right:8, rot:180},
          {bottom:8, left:8, rot:270},
        ].map((p,i) => (
          <svg key={i} width="22" height="22" viewBox="0 0 22 22" style={{position:"absolute", ...p, transform:`rotate(${p.rot}deg)`}}>
            <path d="M2 2 L10 2 M2 2 L2 10" stroke="var(--gold)" strokeWidth="1" />
          </svg>
        ))}
      </div>

      <div style={{textAlign:"center", paddingTop: 22, paddingBottom: 4}}>
        <div className="serif" style={{fontSize: 11, letterSpacing:"0.4em", color:"var(--gold)", textTransform:"uppercase", marginBottom: 8, fontStyle:"italic"}}>
          ~ Flaggschiff ~
        </div>
        <div className="script" style={{fontSize: 44, color:"var(--navy)", lineHeight:1, marginBottom: 6}}>
          Felix Mendelssohn
        </div>
        <div className="script" style={{fontSize: 30, color:"var(--navy)", lineHeight:1, marginBottom: 14}}>
          Bartholdy
        </div>
        <div className="serif" style={{fontSize: 12, letterSpacing:"0.32em", color:"rgba(26,38,56,0.55)", textTransform:"uppercase", fontStyle:"italic"}}>
          Liegeplatz · Stadthafen Leipzig
        </div>
      </div>
    </div>
  );
}

function PhotoScene() {
  return (
    <div style={{position:"absolute", inset:0, zIndex:0, overflow:"hidden"}}>
      {/* Karl-Heine-Kanal seamless video background */}
      <SeamlessVideo src={window.__resources?.heroVideo || "assets/hero-bg.mp4"} />

      {/* Subtle global drift glaze */}
      <div style={{
        position:"absolute", left:0, right:0, bottom:0, height:"55%",
        background:"radial-gradient(ellipse 80% 60% at 60% 80%, rgba(212,178,116,0.10), transparent 70%)",
        pointerEvents:"none",
      }}/>
    </div>
  );
}

window.Hero = Hero;
window.CompassRose = CompassRose;

function SeamlessVideo({ src }) {
  return (
    <video className="hero-video" src={src} autoPlay muted loop playsInline preload="auto"
      style={{
        position:"absolute", inset:0, width:"100%", height:"100%",
        objectFit:"cover", objectPosition:"center 40%",
        filter:"saturate(1.05) contrast(1.02)",
      }}/>
  );
}
window.SeamlessVideo = SeamlessVideo;