/* Hero.jsx — large hero. Variants: 'kenburns' (full-bleed slow-zoom slideshow),
   'split' (photo + big type), 'minimal' (whitespace + huge type). */

const KG_HERO_IMAGES = [
  'assets/work-drywall-ceiling.jpeg',
  'assets/work-ceiling-lights.jpeg',
  'assets/building-modern.jpeg'
];

/* crossfading Ken-Burns background */
function KenBurns({ images, scrollY = 0 }) {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % images.length), 6000);
    return () => clearInterval(t);
  }, [images.length]);
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: '-6% 0', transform: `translateY(${scrollY * 0.32}px)`, willChange: 'transform' }}>
        {images.map((src, i) => (
          <div key={src} style={{
            position: 'absolute', inset: 0, backgroundImage: `url(${src})`, backgroundSize: 'cover', backgroundPosition: 'center',
            opacity: i === idx ? 1 : 0, transition: 'opacity 1.4s var(--kg-ease)',
            animation: i === idx ? 'kgKenBurns 8s ease-out forwards' : 'none'
          }} />
        ))}
      </div>
    </div>
  );
}

function HeroContent({ onNav, light = true, compact }) {
  const [m, setM] = React.useState(false);
  React.useEffect(() => { const r = requestAnimationFrame(() => setM(true)); return () => cancelAnimationFrame(r); }, []);
  const tx = (d) => ({ opacity: m ? 1 : 0, transform: m ? 'none' : 'translateY(26px)', transition: `opacity .9s var(--kg-ease) ${d}ms, transform .9s var(--kg-ease) ${d}ms` });
  const fgMuted = light ? 'rgba(255,255,255,0.9)' : 'var(--kg-fg2)';
  return (
    <div style={{ maxWidth: 680 }}>
      <div style={tx(60)}>
        <span className="kg-eyebrow" style={{ color: light ? 'rgba(255,255,255,0.92)' : 'var(--kg-blue)' }}>Ihre Experten im Bereich</span>
      </div>
      <h1 className="kg-display" style={{
        ...tx(160), color: light ? '#fff' : 'var(--kg-fg1)', margin: '18px 0 0',
        fontSize: compact ? 'clamp(38px, 6vw, 70px)' : 'clamp(42px, 7vw, 84px)', lineHeight: 0.98
      }}>
        Gipserarbeiten,<br />Fassaden &amp;<br /><span style={{ color: light ? '#fff' : 'var(--kg-blue)' }}>Spezialarbeiten.</span>
      </h1>
      <p style={{ ...tx(300), fontSize: 'clamp(17px, 2vw, 21px)', lineHeight: 1.6, color: fgMuted, margin: '24px 0 36px', maxWidth: 540 }}>
        Präzision und Qualität vereint – für makellose Oberflächen in jedem Raum. Ihr Garant für Qualität und Perfektion.
      </p>
      <div style={{ ...tx(440), display: 'flex', gap: 14, flexWrap: 'wrap' }}>
        <Button variant={light ? 'white' : 'primary'} size="lg" icon="arrow-right" onClick={() => onNav('Offerte')}>Offerte anfragen</Button>
        <Button variant={light ? 'outline' : 'ghost'} size="lg" onClick={() => onNav('Dienstleistungen')}>Unsere Dienstleistungen</Button>
      </div>
    </div>
  );
}

function ScrollCue({ light }) {
  return (
    <div style={{ position: 'absolute', bottom: 30, left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, zIndex: 3 }}>
      <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.2em', textTransform: 'uppercase', color: light ? 'rgba(255,255,255,0.7)' : 'var(--kg-slate-500)' }}>Scroll</span>
      <span style={{ width: 1, height: 38, background: light ? 'rgba(255,255,255,0.5)' : 'var(--kg-line-strong)', position: 'relative', overflow: 'hidden' }}>
        <span style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '40%', background: 'var(--kg-blue)', animation: 'kgScrollCue 1.8s var(--kg-ease) infinite' }} />
      </span>
    </div>
  );
}

function Hero({ onNav, variant = 'kenburns', scrollY = 0 }) {
  const fade = Math.max(0, 1 - scrollY / 600);

  if (variant === 'split') {
    return (
      <section style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: '100vh' }} className="kg-hero-split">
        <div style={{ background: 'var(--kg-paper)', display: 'flex', alignItems: 'center', padding: '120px 6vw 80px' }}>
          <HeroContent onNav={onNav} light={false} compact />
        </div>
        <div style={{ position: 'relative', overflow: 'hidden' }} className="kg-hero-split-img">
          <KenBurns images={KG_HERO_IMAGES} scrollY={scrollY} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, var(--kg-paper) 0%, rgba(246,248,250,0) 18%)' }} />
        </div>
      </section>
    );
  }

  if (variant === 'minimal') {
    return (
      <section style={{ background: 'var(--kg-white)', minHeight: '100vh', display: 'flex', alignItems: 'center', paddingTop: 82 }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 28px', width: '100%' }}>
          <HeroContent onNav={onNav} light={false} />
          <div style={{ marginTop: 56, position: 'relative', height: 320, borderRadius: 'var(--kg-radius-lg)', overflow: 'hidden', boxShadow: 'var(--kg-shadow-lg)' }}>
            <KenBurns images={KG_HERO_IMAGES} scrollY={scrollY} />
          </div>
        </div>
      </section>
    );
  }

  // default: full-bleed Ken Burns
  return (
    <section style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
      <KenBurns images={KG_HERO_IMAGES} scrollY={scrollY} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(105deg, rgba(14,58,102,0.92) 0%, rgba(18,75,130,0.66) 46%, rgba(28,107,181,0.14) 100%)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(14,58,102,0.35) 0%, rgba(14,58,102,0) 22%, rgba(14,58,102,0) 60%, rgba(14,58,102,0.4) 100%)' }} />
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '0 28px', width: '100%', opacity: fade, transform: `translateY(${scrollY * 0.12}px)`, zIndex: 2 }}>
        <HeroContent onNav={onNav} light />
      </div>
      <div style={{ opacity: fade }}><ScrollCue light /></div>
    </section>
  );
}

Object.assign(window, { Hero, KenBurns });