/* HERO with full-bleed 16:9 video bg, dark overlays for legibility, font switcher */

const FONT_OPTIONS = {
  instrument: {
    name: 'Instrument Serif',
    sub: 'Cieplejszy, bardziej kinowy',
    display: '"Instrument Serif", serif',
    body: '"Inter", system-ui, sans-serif',
    h1Weight: 400,
    italic: true,
  },
  geist: {
    name: 'Geist',
    sub: 'Nowoczesny, czysty, sans-serif',
    display: '"Geist", "Inter", sans-serif',
    body: '"Geist", "Inter", sans-serif',
    h1Weight: 500,
    italic: false,
  },
  dmserif: {
    name: 'DM Serif Display',
    sub: 'Mocny, plakatowy, kontrastowy',
    display: '"DM Serif Display", serif',
    body: '"DM Sans", sans-serif',
    h1Weight: 400,
    italic: true,
  },
};

const ACCENT_OPTIONS = {
  cream:    { name: 'Kremowy/biały', sub: 'Bez koloru — tylko biel i film', value: '#f5ece0' },
  champagne:{ name: 'Szampan/złoto', sub: 'Eleganckie, nieoczywiste', value: '#d4b87a' },
  rose:     { name: 'Pyłkowy róż',  sub: 'Stonowany, kobiecy, nie cukierkowy', value: '#d99a8a' },
  sage:     { name: 'Szałwia',       sub: 'Dojrzały, naturalny, spokojny', value: '#a8b598' },
  steel:    { name: 'Stalowy błękit',sub: 'Chłodny, filmowy, kontrastowy', value: '#7a98b5' },
  brick:    { name: 'Cegła (obecny)',sub: 'Ciepła terakota', value: '#c87a52' },
};

function HeroVideo({ videoSrc = 'assets/hero-1.mp4', altSrc = 'assets/hero-2.mp4' }) {
  const [activeIdx, setActiveIdx] = React.useState(0);
  const [blobs, setBlobs] = React.useState({});
  const [fontKey, setFontKey] = React.useState('instrument');
  const [accentKey, setAccentKey] = React.useState('brick');
  const accent = ACCENT_OPTIONS[accentKey].value;
  const videoRef = React.useRef(null);
  const sources = [videoSrc, altSrc];
  const currentRaw = sources[activeIdx];
  const src = blobs[currentRaw] || currentRaw;
  const f = FONT_OPTIONS[fontKey];

  React.useEffect(() => {
    let cancelled = false;
    sources.forEach(async (url) => {
      if (blobs[url]) return;
      try {
        const r = await fetch(url);
        const b = await r.blob();
        if (cancelled) return;
        setBlobs(prev => ({ ...prev, [url]: URL.createObjectURL(b) }));
      } catch (e) { console.warn('video load failed', url, e); }
    });
    return () => { cancelled = true; };
  }, []);

  React.useEffect(() => {
    const v = videoRef.current;
    if (v) { v.muted = true; v.play().catch(() => {}); }
  }, [src]);

  return (
    <div style={{
      position: 'relative', width: '100%', minHeight: '100vh',
      overflow: 'hidden', background: '#1a120c',
      fontFamily: f.body, color: '#f5ece0',
    }}>
      <video
        ref={videoRef}
        key={src}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0 }}
        src={src} autoPlay muted loop playsInline
      />

      {/* OVERLAYS */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none', background: 'radial-gradient(ellipse at center, transparent 35%, rgba(15,10,6,0.55) 100%)' }} />
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none', background: 'linear-gradient(90deg, rgba(15,10,6,0.85) 0%, rgba(15,10,6,0.55) 35%, rgba(15,10,6,0.05) 60%, transparent 100%)' }} />
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none', background: 'linear-gradient(180deg, transparent 50%, rgba(15,10,6,0.4) 80%, rgba(15,10,6,0.85) 100%)' }} />
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none', background: 'linear-gradient(180deg, rgba(15,10,6,0.5) 0%, transparent 18%)' }} />

      {/* NAV */}
      <div style={{ position: 'relative', zIndex: 5, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '24px 56px' }}>
        <div style={{ fontFamily: f.display, fontSize: 22, fontWeight: f.h1Weight, letterSpacing: -0.3, color: '#f5ece0', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: accent }} />
          Ożywione Wspomnienia
        </div>
        <div style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
          {['Jak to działa', 'Pakiety', 'Opinie', 'FAQ'].map(l => (
            <span key={l} style={{ fontSize: 14, color: 'rgba(245,236,224,0.75)', fontWeight: 500, cursor: 'pointer' }}>{l}</span>
          ))}
          <span style={{ fontSize: 13, fontWeight: 600, background: '#f5ece0', color: '#1a120c', padding: '11px 22px', borderRadius: 6, cursor: 'pointer' }}>Zamów film</span>
        </div>
      </div>

      {/* CONTENT */}
      <div style={{ position: 'relative', zIndex: 5, padding: '40px 56px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center', minHeight: 'calc(100vh - 280px)' }}>
        <div style={{ maxWidth: 580 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(12px)',
            border: '1px solid rgba(245,236,224,0.15)',
            padding: '7px 14px', borderRadius: 999,
            fontSize: 12, fontWeight: 500, color: 'rgba(245,236,224,0.9)',
            marginBottom: 28, letterSpacing: 0.3,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent }} />
            Prezent dla rodziców i dziadków
          </div>
          <h1 style={{
            fontFamily: f.display,
            fontSize: 'clamp(54px, 6.2vw, 92px)',
            lineHeight: 0.98, fontWeight: f.h1Weight,
            letterSpacing: f.italic ? -1.5 : -2.5,
            marginBottom: 24, color: '#f5ece0',
            textShadow: '0 2px 24px rgba(0,0,0,0.3)',
          }}>
            Stare zdjęcia.<br />
            <span style={{ fontStyle: f.italic ? 'italic' : 'normal', color: accent, fontWeight: f.italic ? f.h1Weight : 600 }}>
              Nowe wzruszenie.
            </span>
          </h1>
          <p style={{ fontSize: 18, color: 'rgba(245,236,224,0.85)', lineHeight: 1.6, maxWidth: 480, marginBottom: 32, textShadow: '0 1px 12px rgba(0,0,0,0.4)' }}>
            Animujemy rodzinne fotografie i tworzymy z nich krótki film z muzyką.
            Wystarczy wgrać zdjęcia — całą resztą zajmujemy się my.
          </p>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 32, flexWrap: 'wrap' }}>
            <button style={{ background: '#f5ece0', color: '#1a120c', border: 'none', padding: '17px 32px', borderRadius: 8, fontSize: 15, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit', boxShadow: '0 12px 32px rgba(0,0,0,0.3)' }}>
              Stwórz film →
            </button>
            <button style={{ background: 'rgba(255,255,255,0.1)', color: '#f5ece0', border: '1px solid rgba(245,236,224,0.3)', backdropFilter: 'blur(12px)', padding: '17px 26px', borderRadius: 8, fontSize: 15, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              ▷ Zobacz przykłady
            </button>
          </div>
          <div style={{ display: 'flex', gap: 22, alignItems: 'center', fontSize: 13, color: 'rgba(245,236,224,0.7)', flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ color: accent, fontWeight: 700 }}>✓</span> 48h realizacji</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ color: accent, fontWeight: 700 }}>✓</span> Muzyka w cenie</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ color: accent, fontWeight: 700 }}>✓</span> Od 179 zł</span>
          </div>
        </div>
        <div />
      </div>

      {/* TRUST + SWITCHERS */}
      <div style={{ position: 'relative', zIndex: 5, padding: '24px 56px 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16, fontSize: 13, color: 'rgba(245,236,224,0.85)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ color: accent, fontSize: 16 }}>★★★★★</span>
          <span><strong style={{ color: '#f5ece0' }}>4.9/5</strong> · 800+ rodzin</span>
        </div>
        <div>🔒 Zdjęcia chronione · RODO</div>
        <div>BLIK · Karta · Przelewy24</div>

        {/* video dots */}
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          {sources.map((s, i) => (
            <button key={s} onClick={() => setActiveIdx(i)} style={{
              width: activeIdx === i ? 28 : 8, height: 8, borderRadius: 999,
              border: 'none', cursor: 'pointer',
              background: activeIdx === i ? accent : 'rgba(245,236,224,0.35)',
              transition: 'width .25s', padding: 0,
            }} aria-label={`Film ${i + 1}`} />
          ))}
        </div>
      </div>

      {/* TWEAKS PANEL */}
      <div style={{
        position: 'fixed', bottom: 20, right: 20, zIndex: 10,
        background: 'rgba(15,10,6,0.88)', backdropFilter: 'blur(16px)',
        border: '1px solid rgba(245,236,224,0.18)',
        borderRadius: 12, padding: 14, minWidth: 260, maxHeight: '88vh', overflowY: 'auto',
      }}>
        <div style={{ fontSize: 11, color: 'rgba(245,236,224,0.6)', letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 8 }}>
          Akcent — wybierz
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6, marginBottom: 14 }}>
          {Object.entries(ACCENT_OPTIONS).map(([key, opt]) => (
            <button key={key} onClick={() => setAccentKey(key)} style={{
              textAlign: 'left', cursor: 'pointer',
              background: accentKey === key ? 'rgba(245,236,224,0.08)' : 'transparent',
              border: accentKey === key ? `1px solid ${opt.value}` : '1px solid rgba(245,236,224,0.1)',
              borderRadius: 6, padding: '8px 10px',
              color: '#f5ece0', fontFamily: '"Inter", sans-serif',
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ width: 14, height: 14, borderRadius: '50%', background: opt.value, flexShrink: 0, border: '1px solid rgba(0,0,0,0.2)' }} />
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 12, fontWeight: 600 }}>{opt.name}</div>
                <div style={{ fontSize: 10, color: 'rgba(245,236,224,0.55)', marginTop: 1, lineHeight: 1.3 }}>{opt.sub}</div>
              </div>
            </button>
          ))}
        </div>

        <div style={{ fontSize: 11, color: 'rgba(245,236,224,0.6)', letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 8 }}>
          Typografia
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {Object.entries(FONT_OPTIONS).map(([key, opt]) => (
            <button key={key} onClick={() => setFontKey(key)} style={{
              textAlign: 'left', cursor: 'pointer',
              background: fontKey === key ? 'rgba(245,236,224,0.08)' : 'transparent',
              border: fontKey === key ? `1px solid ${accent}` : '1px solid rgba(245,236,224,0.1)',
              borderRadius: 6, padding: '8px 12px',
              color: '#f5ece0', fontFamily: opt.display,
            }}>
              <div style={{ fontSize: 15, fontWeight: opt.h1Weight, fontStyle: opt.italic ? 'italic' : 'normal' }}>{opt.name}</div>
              <div style={{ fontSize: 10, color: 'rgba(245,236,224,0.55)', fontFamily: '"Inter", sans-serif', fontStyle: 'normal', marginTop: 2 }}>{opt.sub}</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

window.HeroVideo = HeroVideo;