function Hero({ tweaks }) {
  const t = tweaks || {};
  const slogan = t.slogan || 'Use GenZ, redefine productivity.';
  const subhead = t.subhead || "An AI agent that takes on the work you'd rather not — drafting replies, summarizing threads, closing loops. It learns your patterns and stays out of your way.";
  const eyebrow = t.eyebrow || 'Now in private beta';
  const accent = t.accent || 'var(--brand)';
  const ctaPrimary = t.ctaPrimary || 'Get started';
  const ctaSecondary = t.ctaSecondary || 'See how it works';

  const emphasisWords = (t.emphasis || 'GenZ,redefine,productivity').split(',').map(s => s.trim()).filter(Boolean);
  const renderSlogan = () => {
    if (!emphasisWords.length) return slogan;
    const parts = [];
    let cursor = 0;
    const re = new RegExp(`(${emphasisWords.map(w => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})`, 'gi');
    let m;
    while ((m = re.exec(slogan)) !== null) {
      if (m.index > cursor) parts.push(slogan.slice(cursor, m.index));
      parts.push(<em key={m.index} style={{ color: accent, fontStyle: 'italic' }}>{m[0]}</em>);
      cursor = m.index + m[0].length;
    }
    if (cursor < slogan.length) parts.push(slogan.slice(cursor));
    return parts;
  };

  return (
    <section style={{ position: 'relative', overflow: 'hidden', isolation: 'isolate', minHeight: 720 }}>
      <video
        autoPlay
        loop
        muted
        playsInline
        poster="hero-bg-poster.png"
        style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover',
          objectPosition: 'center 28%',
          zIndex: -2,
        }}
      >
        <source src="hero-bg.mp4" type="video/mp4" />
      </video>
      <div
        aria-hidden="true"
        style={{
          position: 'absolute', inset: 0, zIndex: -1,
          background: 'linear-gradient(90deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 78%, transparent) 45%, color-mix(in oklab, var(--bg) 30%, transparent) 100%)',
        }}
      ></div>

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '128px 32px 96px' }}>
        <div style={{
          fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: 'var(--fg-subtle)', marginBottom: 32,
        }}>
          <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: accent, marginRight: 10, verticalAlign: 'middle' }}></span>
          {eyebrow}
        </div>
        <h1 style={{
          fontFamily: 'var(--font-serif)', fontWeight: 400,
          fontSize: 'clamp(56px, 8vw, 96px)', lineHeight: 1.02,
          letterSpacing: '-0.025em', color: 'var(--fg)',
          margin: 0, maxWidth: 1080,
        }}>
          {renderSlogan()}
        </h1>
        <p style={{
          fontFamily: 'var(--font-sans)', fontSize: 22, lineHeight: 1.55,
          color: 'var(--fg-muted)', maxWidth: 620, marginTop: 40, fontWeight: 400,
        }}>{subhead}</p>
        <div style={{ display: 'flex', gap: 14, marginTop: 48, alignItems: 'center', flexWrap: 'wrap' }}>
          <button style={{
            fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 500,
            background: accent, color: 'var(--fg-on-dark)',
            border: 'none', padding: '14px 26px', borderRadius: 8, cursor: 'pointer',
          }}>{ctaPrimary}</button>
          <button style={{
            fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 500,
            background: 'var(--bg)', color: 'var(--fg)',
            border: '1px solid var(--line-strong)', padding: '14px 22px', borderRadius: 8, cursor: 'pointer',
          }}>{ctaSecondary}</button>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;