// VoicesHeard.jsx — Section 3. Dark ground. Voices from people sitting with the
// same weight. The nav link anchors here.
function VoicesHeard() {
  const cards = [
    { label:'Anonymous · on building',   quote:"I've built everything I said I wanted. I've never felt more hollow.", dur: 41 },
    { label:'Anonymous · on performing', quote:"I smile at everyone who asks how I'm doing. I can't remember the last time I told the truth.", dur: 53 },
    { label:'Anonymous · on returning',  quote:"I keep showing up, creating, doing everything right. Nobody knows I cry in the car on the way home.", dur: 47 },
  ];
  return (
    <section id="your-voice-is-heard" className="section" style={{ background:'var(--tides-dark)', scrollMarginTop:'72px' }}>
      <div style={{ maxWidth:1080, margin:'0 auto' }}>
        <div className="reveal" style={{ textAlign:'center', maxWidth:600, margin:'0 auto' }}>
          <div style={{ fontFamily:'var(--sans-body)', fontWeight:400, fontSize:12, letterSpacing:'0.26em', textTransform:'uppercase', fontVariant:'all-small-caps', color:'var(--fiorella-sand)' }}>
            Your Voice Is Heard
          </div>
          <h2 style={{ fontFamily:'var(--serif-display)', fontStyle:'italic', fontWeight:400, fontSize:'clamp(30px,4.4vw,52px)', lineHeight:1.1, color:'var(--on-dark)', margin:'18px 0 0' }}>
            You are not alone in this.
          </h2>
          <p style={{ fontFamily:'var(--sans-body)', fontWeight:300, fontSize:16.5, lineHeight:1.65, color:'rgba(245,240,234,0.74)', margin:'22px auto 0', maxWidth:540 }}>
            These are voices from people sitting with the same weight. They shared so someone else wouldn't feel so alone. Listen when you're ready.
          </p>
        </div>

        <div className="vh-grid" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'clamp(18px,2.2vw,28px)', marginTop:'clamp(48px,6vw,76px)' }}>
          {cards.map((c,i) => <VoiceCard key={i} {...c} delay={i+1} />)}
        </div>
      </div>
      <style>{`
        @media (max-width: 820px){ .vh-grid{ grid-template-columns:1fr !important; max-width:440px; margin-left:auto; margin-right:auto; } }
      `}</style>
    </section>
  );
}

function VoiceCard({ label, quote, dur, delay }) {
  const [playing, setPlaying] = React.useState(false);
  const [pct, setPct] = React.useState(0);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!playing) return;
    const step = 100 / (dur * 20); // ~ smooth over the clip's length
    ref.current = setInterval(() => {
      setPct((p) => {
        if (p + step >= 100) { clearInterval(ref.current); setPlaying(false); return 0; }
        return p + step;
      });
    }, 50);
    return () => clearInterval(ref.current);
  }, [playing, dur]);

  const toggle = () => {
    if (playing) { clearInterval(ref.current); setPlaying(false); }
    else { if (pct >= 99) setPct(0); setPlaying(true); }
  };
  const fmt = (s) => `${Math.floor(s/60)}:${String(Math.round(s)%60).padStart(2,'0')}`;
  const remain = Math.max(0, dur * (1 - pct/100));

  return (
    <article className="reveal" data-d={delay} style={{
      background:'rgba(245,240,234,0.045)', border:'1px solid rgba(196,173,143,0.30)', borderRadius:8,
      padding:'clamp(26px,2.6vw,34px)', display:'flex', flexDirection:'column', gap:0,
    }}>
      <div style={{ fontFamily:'var(--sans-body)', fontWeight:400, fontSize:11.5, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--fiorella-sand)', opacity:0.85 }}>
        {label}
      </div>
      <p style={{ fontFamily:'var(--serif-display)', fontStyle:'italic', fontWeight:400, fontSize:'clamp(20px,1.7vw,24px)', lineHeight:1.34, color:'var(--on-dark)', margin:'20px 0 28px', flex:1, textWrap:'pretty' }}>
        “{quote}”
      </p>

      <div style={{ display:'flex', alignItems:'center', gap:14 }}>
        <button onClick={toggle} aria-label={playing ? 'Pause' : 'Listen'} style={{
          flex:'0 0 auto', display:'inline-flex', alignItems:'center', gap:9,
          background:'transparent', border:'1px solid rgba(196,173,143,0.45)', borderRadius:999,
          padding:'8px 16px 8px 14px', cursor:'pointer',
          fontFamily:'var(--sans-body)', fontWeight:400, fontSize:11.5, letterSpacing:'0.12em', textTransform:'uppercase',
          color:'var(--on-dark)', transition:'border-color 400ms ease, background 400ms ease',
        }}
          onMouseEnter={(e)=>{ e.currentTarget.style.borderColor='var(--fiorella-sand)'; e.currentTarget.style.background='rgba(196,173,143,0.08)'; }}
          onMouseLeave={(e)=>{ e.currentTarget.style.borderColor='rgba(196,173,143,0.45)'; e.currentTarget.style.background='transparent'; }}>
          {playing
            ? <svg viewBox="0 0 24 24" style={{ width:12, height:12, fill:'var(--fiorella-sand)' }}><rect x="6" y="5" width="4" height="14" rx="1.2"/><rect x="14" y="5" width="4" height="14" rx="1.2"/></svg>
            : <svg viewBox="0 0 24 24" style={{ width:12, height:12, fill:'var(--fiorella-sand)' }}><path d="M8 5.5v13a1 1 0 0 0 1.5.86l11-6.5a1 1 0 0 0 0-1.72l-11-6.5A1 1 0 0 0 8 5.5z"/></svg>}
          {playing ? 'Pause' : 'Listen'}
        </button>
        <div style={{ flex:1, height:2, background:'rgba(196,173,143,0.22)', borderRadius:2, overflow:'hidden' }}>
          <div style={{ height:'100%', width:`${pct}%`, background:'var(--fiorella-sand)', transition:'width 50ms linear' }} />
        </div>
        <span style={{ fontFamily:'var(--sans-body)', fontWeight:300, fontSize:12, color:'rgba(245,240,234,0.55)', flex:'0 0 auto', fontVariantNumeric:'tabular-nums' }}>
          {fmt(remain)}
        </span>
      </div>
    </article>
  );
}
window.VoicesHeard = VoicesHeard;