// Silk and Blow — Social proof: count-up stats + testimonials + as-seen-in marquee
function StatCard({ to, decimals, suffix, label, d }) {
  const [ref, val] = useCountUp(to, { decimals: decimals || 0 });
  return (
    <div ref={ref} className="glass glass-strong reveal" data-d={d} style={{ padding: '30px 28px', textAlign: 'left' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 2 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(38px,4vw,56px)', color: 'var(--slate)', letterSpacing: '-0.03em', lineHeight: 1 }}>{val}</span>
        {suffix && <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(24px,2.6vw,34px)', color: 'var(--gold-deep)' }}>{suffix}</span>}
      </div>
      <div style={{ fontFamily: 'var(--font-ui)', fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--slate-45)', marginTop: 12 }}>{label}</div>
    </div>
  );
}

const TESTIMONIALS = [
  { q: 'My silk press lasted three full weeks and my hair felt healthier after, not fried. I will never go anywhere else.', n: 'Imani R.', c: 'East Point, GA' },
  { q: 'I walked in on a Saturday with no appointment and walked out silked out in under an hour. The bounce is unreal.', n: 'Destiny W.', c: 'Lawrenceville, GA' },
  { q: 'They actually understand textured hair. No heat damage, no judgement—just a beautiful, honest blowout every time.', n: 'Jasmine T.', c: 'Duluth, GA' },
];

const PRESS = ['ATLANTA MAGAZINE', 'VOYAGE ATL', 'ESSENCE', 'BYRDIE', 'REFINERY29', 'POPSUGAR BEAUTY'];

function SocialProof() {
  return (
    <section id="proof" className="section bleed" style={{ position: 'relative', background: 'var(--grad-champagne)', overflow: 'hidden' }}>
      <div className="orb orb-champ orb-float" style={{ width: 460, height: 460, top: '-140px', left: '-80px', opacity: 0.5 }} />
      <div className="orb orb-sky" style={{ width: 360, height: 360, bottom: '-120px', right: '-80px', opacity: 0.35 }} />

      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
          <span className="gold-tick" /><span className="gold-eyebrow">Client love · Real results</span>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20, marginBottom: 48 }}>
          <h2 className="display reveal" data-d="1" style={{ fontSize: 'clamp(34px,4.4vw,62px)', maxWidth: 640 }}>What "silked out" feels like</h2>
          <div className="reveal" data-d="2" style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
            <Stars n={5} size={18} />
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 17, color: 'var(--slate)' }}>4.9 average · 1,200+ reviews</span>
          </div>
        </div>

        {/* count-up stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16, marginBottom: 56 }}>
          <StatCard to={13} suffix="" label="Years behind the chair" d="1" />
          <StatCard to={3} label="Atlanta locations" d="2" />
          <StatCard to={40} suffix="k+" label="Silk presses & blowouts" d="3" />
          <StatCard to={4.9} decimals={1} label="Average guest rating" d="4" />
        </div>

        {/* testimonial glass cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 18 }}>
          {TESTIMONIALS.map((t, i) => (
            <figure key={t.n} className="glass glass-strong reveal" data-d={(i % 3) + 1} style={{ margin: 0, padding: '30px 30px 28px', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <Stars n={5} size={15} />
                <span style={{ color: 'var(--champagne-300)' }}><Icon name="quote" size={26} /></span>
              </div>
              <blockquote style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'clamp(17px,1.5vw,20px)', lineHeight: 1.55, color: 'var(--slate)', textWrap: 'pretty' }}>"{t.q}"</blockquote>
              <figcaption style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 'auto', paddingTop: 6 }}>
                <span style={{ display: 'grid', placeItems: 'center', width: 40, height: 40, borderRadius: '50%', background: 'var(--grad-gold-text)', color: '#3a2e12', fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 14 }}>{t.n[0]}</span>
                <span>
                  <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 16, color: 'var(--slate)' }}>{t.n}</span>
                  <span style={{ display: 'block', fontFamily: 'var(--font-ui)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--slate-45)', marginTop: 2 }}>{t.c}</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>

        {/* as seen in */}
        <div className="reveal" style={{ marginTop: 60 }}>
          <p style={{ textAlign: 'center', fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--slate-45)', marginBottom: 26 }}>As seen in</p>
          <div className="marquee">
            <div className="marquee-track">
              {[...PRESS, ...PRESS].map((p, i) => (
                <span key={i} className="press-name">{p}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SocialProof });