// Silk and Blow — Hero (3 variants: fullbleed / split / video) with parallax + glass
const HERO_EYEBROW = 'Silk & Blow · Silk Press & Blow Out Bar';
const HERO_HEAD = 'Come as you are. Leave silked out.';
const HERO_SUB = "Metro Atlanta's favorite walk-in salon for smooth, healthy silk presses and voluminous blowouts—crafted for textured hair. No appointments, no pressure, no damage.";
const HERO_TRUST = ['13 years of craft', 'Three Atlanta locations', 'Walk-in, clear pricing'];
const BENEFITS = [
  { icon: 'leaf', t: 'Healthy-hair promise', s: 'No damage, ever' },
  { icon: 'clock', t: 'Walk-in welcome', s: 'No deposits, no waiting' },
  { icon: 'pin', t: 'Three locations', s: 'Across Metro Atlanta' },
  { icon: 'sparkle', t: '13 years of craft', s: 'Consistent results' },
];

function useParallax(ref, speed) {
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = null;
        const el = ref.current;
        if (!el) return;
        const r = el.getBoundingClientRect();
        const offset = (r.top + r.height / 2 - window.innerHeight / 2) * speed;
        el.style.transform = `translate3d(0, ${offset.toFixed(1)}px, 0) scale(1.12)`;
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [ref, speed]);
}

function TrustRow({ tone }) {
  const c = tone === 'light' ? 'rgba(255,255,255,.86)' : 'var(--slate-70)';
  const dot = tone === 'light' ? 'var(--champagne-200)' : 'var(--gold)';
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '12px 22px', marginTop: 40 }}>
      {HERO_TRUST.map((t, i) => (
        <React.Fragment key={t}>
          {i > 0 && <span style={{ width: 5, height: 5, borderRadius: '50%', background: dot }} />}
          <span style={{ fontFamily: 'var(--font-ui)', fontSize: 11.5, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: c }}>{t}</span>
        </React.Fragment>
      ))}
    </div>
  );
}

function HeroCTAs({ onBook, onNav, tone }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 32 }}>
      <WalkInNote tone={tone === 'light' ? 'light' : 'dark'} />
      <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
        <button className="btn btn--lg" onClick={onBook}>Reserve your chair</button>
        <button className={'btn btn--lg ' + (tone === 'light' ? 'btn--on-dark' : 'btn--ghost')} onClick={() => onNav('services')}>Explore Services</button>
      </div>
    </div>
  );
}

// glass benefit strip — the layered Lumiera-style floating bar
function BenefitStrip({ dark }) {
  return (
    <div className="wrap benefit-wrap" style={{ position: 'relative', zIndex: 6 }}>
      <div className={'benefit-strip reveal ' + (dark ? 'glass-dark' : 'glass-tint')} style={{ overflow: 'hidden' }}>
        {BENEFITS.map((b) => (
          <div className="benefit-item" key={b.t}>
            <span className="benefit-ico" style={dark ? null : { background: 'rgba(194,163,94,0.14)', color: 'var(--gold-deep)', borderColor: 'rgba(194,163,94,0.3)' }}>
              <Icon name={b.icon} size={19} />
            </span>
            <span>
              <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 16, color: dark ? '#fff' : 'var(--slate)', lineHeight: 1.15 }}>{b.t}</span>
              <span style={{ display: 'block', fontFamily: 'var(--font-ui)', fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: dark ? 'rgba(255,255,255,.6)' : 'var(--slate-45)', marginTop: 4 }}>{b.s}</span>
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

// floating glass availability card (desktop)
function AvailCard() {
  return (
    <div className="glass glass-strong hide-mobile" style={{ position: 'absolute', right: 'var(--pad-x)', bottom: 150, zIndex: 4, width: 260, padding: '20px 22px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 14 }}>
        <span className="livedot" />
        <span style={{ fontFamily: 'var(--font-ui)', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--slate)' }}>Open now · Walk-ins welcome</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Stars n={5} size={15} />
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 15, color: 'var(--slate)' }}>4.9</span>
      </div>
      <p style={{ fontFamily: 'var(--font-display)', fontSize: 13, color: 'var(--slate-70)', margin: '8px 0 0' }}>Loved by 1,200+ Atlanta guests across three chairs.</p>
    </div>
  );
}

// ---- Variant A: full-bleed cinematic ----
function HeroFullbleed({ onBook, onNav }) {
  const imgRef = React.useRef(null);
  useParallax(imgRef, 0.12);
  return (
    <React.Fragment>
      <section id="hero" className="bleed grain" style={{ position: 'relative', minHeight: 'min(94vh, 880px)', display: 'flex', alignItems: 'flex-end', overflow: 'hidden', background: 'var(--slate)' }}>
        <img ref={imgRef} src="/assets/images/hero-main.png" alt="A silk press in progress at Silk and Blow" className="hero-bg"
             style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', willChange: 'transform' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(28,38,54,.32) 0%, rgba(28,38,54,.08) 38%, rgba(28,38,54,.58) 82%, rgba(20,28,40,.85) 100%)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(95deg, rgba(20,28,40,.72) 0%, rgba(20,28,40,.34) 36%, rgba(20,28,40,0) 62%)' }} />
        <div className="orb orb-gold orb-float" style={{ width: 360, height: 360, top: '-60px', right: '8%', opacity: 0.4 }} />
        <AvailCard />
        <div className="wrap" style={{ position: 'relative', zIndex: 2, paddingBottom: 'clamp(86px, 11vw, 150px)', paddingTop: 140 }}>
          <div style={{ maxWidth: 760 }}>
            <div className="reveal is-in" style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
              <span className="gold-tick" />
              <span className="gold-eyebrow">{HERO_EYEBROW}</span>
            </div>
            <h1 className="display reveal is-in" data-d="1" style={{ color: '#fff', fontSize: 'clamp(46px, 6.8vw, 100px)', margin: 0 }}>{HERO_HEAD}</h1>
            <p className="reveal is-in" data-d="2" style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(16px,1.4vw,20px)', lineHeight: 1.55, color: 'rgba(255,255,255,.9)', maxWidth: 560, marginTop: 26, textWrap: 'pretty' }}>{HERO_SUB}</p>
            <div className="reveal is-in" data-d="3"><HeroCTAs onBook={onBook} onNav={onNav} tone="light" /></div>
            <div className="reveal is-in" data-d="4"><TrustRow tone="light" /></div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

// ---- Variant B: split editorial ----
function HeroSplit({ onBook, onNav }) {
  const imgRef = React.useRef(null);
  useParallax(imgRef, 0.08);
  return (
    <React.Fragment>
      <section id="hero" className="bleed" style={{ position: 'relative', background: 'var(--grad-champagne-soft)', overflow: 'hidden' }}>
        <div className="orb orb-champ orb-float" style={{ width: 460, height: 460, top: '-120px', left: '30%' }} />
        <div className="orb orb-sage" style={{ width: 380, height: 380, bottom: '-140px', left: '-80px', opacity: 0.5 }} />
        <div style={{ position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,1fr)', minHeight: 'min(88vh, 820px)', alignItems: 'stretch' }} className="hero-split-grid">
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'clamp(80px,9vw,128px) clamp(24px,5vw,96px)' }}>
            <div style={{ maxWidth: 580 }}>
              <div className="reveal is-in" style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
                <span className="gold-tick" />
                <span className="gold-eyebrow">{HERO_EYEBROW}</span>
              </div>
              <h1 className="display reveal is-in" data-d="1" style={{ fontSize: 'clamp(46px, 5.4vw, 84px)', margin: 0 }}>{HERO_HEAD}</h1>
              <p className="lead reveal is-in" data-d="2" style={{ marginTop: 26, maxWidth: 520 }}>{HERO_SUB}</p>
              <div className="reveal is-in" data-d="3"><HeroCTAs onBook={onBook} onNav={onNav} tone="dark" /></div>
              <div className="reveal is-in" data-d="4"><TrustRow tone="dark" /></div>
            </div>
          </div>
          <div style={{ position: 'relative', minHeight: 360, padding: 'clamp(20px,3vw,40px)' }}>
            <div className="tile" style={{ position: 'relative', height: '100%', minHeight: 340, borderRadius: 'var(--glass-radius)', boxShadow: 'var(--shadow-raise)' }}>
              <img ref={imgRef} src="/assets/images/loc-east-point.png" alt="A silk press in progress at Silk and Blow" style={{ objectPosition: 'center 18%', willChange: 'transform' }} />
              <div className="glass glass-strong glass-sm" style={{ position: 'absolute', left: 22, bottom: 22, right: 22, padding: '16px 20px', display: 'flex', alignItems: 'center', gap: 14 }}>
                <span className="livedot" />
                <span style={{ fontFamily: 'var(--font-ui)', fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--slate)' }}>Open now · Walk-ins welcome</span>
                <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 7 }}><Stars n={5} size={13} /><span style={{ fontFamily: 'var(--font-display)', fontSize: 14, color: 'var(--slate)' }}>4.9</span></span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

// ---- Variant C: video-led, centered ----
function HeroVideo({ onBook, onNav }) {
  const [playing, setPlaying] = React.useState(false);
  return (
    <React.Fragment>
      <section id="hero" className="bleed" style={{ position: 'relative', background: 'var(--grad-champagne)', paddingTop: 'clamp(72px,8vw,116px)', paddingBottom: 'clamp(80px,9vw,120px)', overflow: 'hidden' }}>
        <div className="orb orb-champ orb-float" style={{ width: 420, height: 420, top: '-80px', right: '12%' }} />
        <div className="orb orb-sky" style={{ width: 320, height: 320, bottom: '-80px', left: '6%', opacity: 0.4 }} />
        <div className="wrap" style={{ position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <div className="reveal is-in" style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
            <span className="gold-tick" /><span className="gold-eyebrow">{HERO_EYEBROW}</span><span className="gold-tick" />
          </div>
          <h1 className="display reveal is-in" data-d="1" style={{ fontSize: 'clamp(44px, 6vw, 92px)', margin: 0, maxWidth: 14 + 'ch' }}>{HERO_HEAD}</h1>
          <p className="lead reveal is-in" data-d="2" style={{ marginTop: 24, maxWidth: 600 }}>{HERO_SUB}</p>
          <div className="reveal is-in" data-d="3"><HeroCTAs onBook={onBook} onNav={onNav} tone="dark" /></div>
          <div className="reveal is-in" data-d="4" style={{ width: '100%', maxWidth: 1040, marginTop: 56 }}>
            <div className="tile" style={{ aspectRatio: '16 / 8.6', boxShadow: 'var(--shadow-raise)', borderRadius: 'var(--glass-radius)' }}>
              <img src={playing ? '/assets/images/hero-video-frame.jpg' : '/assets/images/hero-video-poster.png'} alt="Silk press transformation" style={{ objectPosition: 'center 30%' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 60%, rgba(20,28,40,.4))' }} />
              {!playing && (
                <button onClick={() => setPlaying(true)} aria-label="Play film" className="glass-dark" style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', width: 84, height: 84, borderRadius: '50%', cursor: 'pointer', display: 'grid', placeItems: 'center', color: '#fff' }}>
                  <Icon name="play" size={28} />
                </button>
              )}
              <span className="glass-dark glass-sm" style={{ position: 'absolute', left: 18, bottom: 16, padding: '8px 14px', fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#fff' }}>The transformation · 0:48</span>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function Hero({ variant, onBook, onNav }) {
  if (variant === 'split') return <HeroSplit onBook={onBook} onNav={onNav} />;
  if (variant === 'video') return <HeroVideo onBook={onBook} onNav={onNav} />;
  return <HeroFullbleed onBook={onBook} onNav={onNav} />;
}

Object.assign(window, { Hero });