// Silk and Blow — Founder (Kali Gipson)
function FounderStat({ to, suffix, l }) {
  const [ref, val] = useCountUp(to);
  return (
    <div ref={ref}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 1 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(32px,3.4vw,46px)', color: '#fff', letterSpacing: '-0.02em' }}>{val}</span>
        {suffix && <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(22px,2.4vw,30px)', color: 'var(--gold-deep)' }}>{suffix}</span>}
      </div>
      <div style={{ fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,.55)', marginTop: 6 }}>{l}</div>
    </div>
  );
}

function Founder({ onBook }) {
  const imgRef = React.useRef(null);
  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 = imgRef.current; if (!el) return;
        const r = el.getBoundingClientRect();
        const off = (r.top + r.height / 2 - window.innerHeight / 2) * 0.05;
        el.style.transform = `translate3d(0, ${off.toFixed(1)}px, 0) scale(1.1)`;
      });
    };
    onScroll(); window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const stats = [
    { to: 13, suffix: '', l: 'Years behind the chair' },
    { to: 3, suffix: '', l: 'Atlanta locations' },
    { to: 40, suffix: 'k+', l: 'Silk presses & blowouts' },
  ];

  return (
    <section id="founder" className="section bleed grain" style={{ position: 'relative', background: 'var(--slate)', color: 'var(--off-white)', overflow: 'hidden' }}>
      <div className="orb orb-gold orb-float" style={{ width: 420, height: 420, top: '-120px', right: '-80px', opacity: 0.4 }} />
      <div className="orb orb-sky" style={{ width: 320, height: 320, bottom: '-100px', left: '-60px', opacity: 0.25 }} />
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <div className="founder-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.1fr)', gap: 'clamp(32px,5vw,80px)', alignItems: 'center' }}>
          <div className="reveal tile founder-photo" style={{ aspectRatio: '4 / 5', maxHeight: 620, background: '#1a232f', borderRadius: 'var(--glass-radius)', boxShadow: 'var(--shadow-raise)' }}>
            <img ref={imgRef} src="/assets/images/kali-gipson.png" alt="Kali Gipson, founder of Silk and Blow" style={{ objectPosition: 'center 22%', willChange: 'transform' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 55%, rgba(20,28,40,.55))' }} />
            <div className="glass-dark glass-sm" style={{ position: 'absolute', left: 20, bottom: 20, right: 20, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ display: 'grid', placeItems: 'center', width: 34, height: 34, borderRadius: '50%', background: 'var(--grad-gold-text)', color: '#3a2e12' }}><Icon name="sparkle" size={17} /></span>
              <span>
                <span style={{ display: 'block', fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,.7)' }}>CEO and Founder</span>
                <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 17, color: '#fff', marginTop: 1 }}>Kali Gipson</span>
              </span>
            </div>
          </div>

          <div>
            <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
              <span className="gold-tick" /><span className="gold-eyebrow">04 — The Founder</span>
            </div>
            <h2 className="display reveal" data-d="1" style={{ color: '#fff', fontSize: 'clamp(32px,4vw,58px)' }}>Built on healthy hair and good energy</h2>
            <div className="reveal glass-dark" data-d="2" style={{ padding: 'clamp(24px,3vw,34px)', margin: '26px 0 0' }}>
              <div style={{ color: 'var(--gold-deep)', marginBottom: 14 }}><Icon name="quote" size={28} /></div>
              <p style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(17px,1.5vw,22px)', lineHeight: 1.6, color: 'rgba(255,255,255,.92)', maxWidth: 560, textWrap: 'pretty', margin: 0 }}>
                "I opened Silk and Blow because textured hair deserves a place that's fast, honest, and gentle. No damage, no judgement—just a beautiful press and a chair that feels like home."
              </p>
              <p style={{ fontFamily: 'var(--font-display)', fontSize: 15, color: 'rgba(255,255,255,.6)', marginTop: 18, marginBottom: 0 }}>— Kali Gipson, founder &amp; master stylist</p>
            </div>

            <div className="reveal" data-d="3" style={{ display: 'flex', flexWrap: 'wrap', gap: 'clamp(24px,4vw,56px)', margin: '40px 0', paddingTop: 32, borderTop: '1px solid rgba(255,255,255,.14)' }}>
              {stats.map((s) => <FounderStat key={s.l} to={s.to} suffix={s.suffix} l={s.l} />)}
            </div>

            <div className="reveal" data-d="4" style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button className="btn btn--on-dark" onClick={onBook}>Reserve your chair</button>
              <button className="btn btn--ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,.3)' }} onClick={() => window.open('https://www.kaligipson.com', '_blank')}>Meet Kali <Icon name="arrowUpRight" size={16} /></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Founder });