// Story.jsx — Section 5 (About), Section 6 (Close), and the footer.
function Story() {
  const paras = [
    "Seven years ago, I hit a floor I didn’t know existed. I lost my sister in ways that reshaped my family. I lost my sense of identity and who I thought I was becoming. My career fell apart. The relationship I thought would last didn’t. My finances collapsed. My health followed.",
    "One after another, slowly enough to feel like punishment, though I know now it was preparation.",
    "What I found on the other side wasn't a revelation. It was a remembrance.",
    "The roots had been growing through all of it. I just couldn't see them.",
    "I'm Fiorella Salazar. I learned how to stay present inside the collapse and keep listening when everything got quiet. Now I sit with people standing in their own threshold moments, helping them slow down enough to hear what's still alive underneath the noise.",
    "Crossing this threshold isn't just surviving the storm. It's discovering that your worth was never tied to a title, a career, or anything the world could take.",
    "What remains, when everything else has gone, is the only foundation worth building on. And it was always there.",
  ];
  return (
    <React.Fragment>
      {/* ---------- Section 5 — About ---------- */}
      <section id="about" className="section" style={{ background:'var(--bg-raised)' }}>
        <div style={{ maxWidth:1060, margin:'0 auto' }}>
          <div className="reveal" style={{ textAlign:'center', maxWidth:680, margin:'0 auto' }}>
            <div style={{ fontFamily:'var(--sans-body)', fontWeight:400, fontSize:12, letterSpacing:'0.26em', textTransform:'uppercase', fontVariant:'all-small-caps', color:'var(--fg-faint)' }}>
              The Story
            </div>
            <h2 style={{ fontFamily:'var(--serif-display)', fontWeight:300, fontSize:'clamp(30px,4.2vw,48px)', lineHeight:1.14, color:'var(--tides-dark)', margin:'18px 0 0', textWrap:'balance' }}>
              She lost everything. And grew roots through all of it.
            </h2>
          </div>

          <div className="about-grid reveal" data-d="1" style={{
            display:'grid', gridTemplateColumns:'minmax(0,0.82fr) minmax(0,1fr)',
            gap:'clamp(36px,5vw,68px)', alignItems:'center', marginTop:'clamp(48px,6vw,72px)',
          }}>
            <figure style={{ margin:0 }}>
              <img src="assets/portrait-fiorella.jpg" alt="Fiorella Salazar, seated in warm natural light"
                style={{ width:'100%', height:'auto', display:'block', borderRadius:8,
                  border:'1px solid var(--stone-line)', boxShadow:'0 10px 50px rgba(85,57,39,0.14)' }} />
            </figure>
            <div>
              {paras.map((p,i) => (
                <p key={i} style={{
                  fontFamily:'var(--sans-body)', fontWeight:300, fontSize:18, lineHeight:1.82, color:'var(--fg-muted)',
                  margin: i === 0 ? 0 : '22px 0 0',
                }}>{p}</p>
              ))}
            </div>
          </div>

          <div className="reveal" data-d="2" style={{ textAlign:'center', marginTop:'clamp(56px,7vw,88px)', maxWidth:680, marginLeft:'auto', marginRight:'auto' }}>
            <p style={{ fontFamily:'var(--serif-display)', fontStyle:'italic', fontWeight:400, fontSize:'clamp(21px,2.6vw,28px)', lineHeight:1.34, color:'var(--fiorella-sand)', margin:0, textWrap:'balance' }}>
              Society built a thousand escape routes. Nobody built the pathway home.
            </p>
          </div>
        </div>
        <style>{`
          @media (max-width: 820px){
            .about-grid{ grid-template-columns:1fr !important; gap:clamp(32px,7vw,44px) !important; }
            .about-grid figure{ max-width:380px; margin-left:auto !important; margin-right:auto !important; }
          }
        `}</style>
      </section>

      {/* ---------- Section 6 — Close ---------- */}
      <section className="section" style={{ background:'var(--tides-dark)', paddingTop:'clamp(110px,15vw,180px)', paddingBottom:'clamp(110px,15vw,180px)' }}>
        <div className="reveal" style={{ maxWidth:680, margin:'0 auto', textAlign:'center' }}>
          <div style={{ width:64, height:1, background:'var(--fiorella-sand)', margin:'0 auto clamp(40px,5vw,56px)' }} />
          <p style={{ fontFamily:'var(--serif-display)', fontStyle:'italic', fontWeight:400, fontSize:'clamp(28px,4.4vw,52px)', lineHeight:1.24, color:'var(--on-dark)', margin:0, textWrap:'balance' }}>
            Come as you are. You are welcome. You are seen. You are supported.
          </p>
          <div style={{ height:'clamp(28px,4vw,40px)' }} />
          <div style={{ fontFamily:'var(--sans-body)', fontWeight:400, fontSize:12.5, letterSpacing:'0.28em', textTransform:'uppercase', color:'var(--fiorella-sand)' }}>
            Fiorella Salazar
          </div>
        </div>
      </section>

      {/* ---------- Footer ---------- */}
      <footer style={{ background:'var(--tides-dark)', borderTop:'1px solid rgba(196,173,143,0.18)', padding:'34px clamp(24px,6vw,72px)', textAlign:'center' }}>
        <p style={{ fontFamily:'var(--sans-body)', fontWeight:300, fontSize:13, letterSpacing:'0.06em', color:'rgba(245,240,234,0.62)', margin:0 }}>
          fiorellasalazar.com&nbsp; · &nbsp;<a href="mailto:hello@fiorellasalazar.com" style={{ color:'rgba(245,240,234,0.62)', textDecoration:'none', borderBottom:'1px solid transparent', transition:'border-color 400ms ease, color 400ms ease' }}
            onMouseEnter={(e)=>{ e.currentTarget.style.color='var(--fiorella-sand)'; e.currentTarget.style.borderBottomColor='var(--fiorella-sand)'; }}
            onMouseLeave={(e)=>{ e.currentTarget.style.color='rgba(245,240,234,0.62)'; e.currentTarget.style.borderBottomColor='transparent'; }}>hello@fiorellasalazar.com</a>
        </p>
      </footer>
    </React.Fragment>
  );
}
window.Story = Story;
