/* ABOUT view — calmer, editorial */
function About({ go }){
  const S = window.SITE;
  return (
    <main className="page" key="about">
      {/* intro */}
      <section className="about-hero section">
        <div className="wrap about-hero-grid">
          <div className="about-intro">
            <Reveal as="div" className="kicker">About — 02</Reveal>
            <Reveal as="h1" d={1} className="about-name display">Sharayu<br/>Maknikar</Reveal>
            <Reveal as="div" d={2} className="about-roleline mono">
              SPACE POLICY · MISSION OPERATIONS · GOVERNANCE
            </Reveal>
          </div>
          <div className="about-bio">
            {S.bio.map((p,i) => (
              <Reveal as="p" key={i} d={i+1} className="about-p">{p}</Reveal>
            ))}
          </div>
        </div>
      </section>

      <div className="wrap"><hr className="hr"/></div>

      {/* experience timeline */}
      <section className="section exp">
        <div className="wrap">
          <div className="sec-head">
            <Reveal as="h2" className="sec-title display">Experience</Reveal>
            <Reveal as="div" d={1} className="sec-sub">Operations, regulation, and outreach — a record of structured work in high-stakes systems.</Reveal>
          </div>
          <div className="timeline">
            {S.experience.map((e,i) => (
              <Reveal as="article" key={i} d={(i%3)+1} className="tl-item">
                <div className="tl-left">
                  <div className="tl-dot" data-current={e.current?'1':'0'}></div>
                  <div className="tl-period mono">{e.period}</div>
                  <div className="tl-place mono">{e.place}</div>
                </div>
                <div className="tl-body">
                  <h3 className="tl-role">{e.role}{e.current && <span className="live"><i></i>Active</span>}</h3>
                  <div className="tl-org">{e.org}</div>
                  <ul className="tl-points">
                    {e.points.map((pt,j) => <li key={j}>{pt}</li>)}
                  </ul>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <div className="wrap"><hr className="hr"/></div>

      {/* education + skills */}
      <section className="section edu-skills">
        <div className="wrap es-grid">
          <div className="edu-col">
            <Reveal as="h2" className="sec-title display sm">Education</Reveal>
            <div className="edu-list">
              {S.education.map((ed,i) => (
                <Reveal as="div" key={i} d={i+1} className="edu-item">
                  <h3 className="edu-school">{ed.school}</h3>
                  <div className="edu-detail mono">{ed.detail}</div>
                  <ul className="edu-points">{ed.points.map((p,j)=><li key={j}>{p}</li>)}</ul>
                </Reveal>
              ))}
            </div>
          </div>
          <div className="skills-col">
            <Reveal as="h2" className="sec-title display sm">Capabilities</Reveal>
            <Reveal as="div" d={1} className="skills-cloud">
              {S.skills.map(s => <span className="tag" key={s}>{s}</span>)}
            </Reveal>
            <Reveal as="div" d={2} className="interests">
              <div className="kicker">Currently exploring</div>
              <ul className="interest-list">
                {S.interests.map(it => <li key={it}><span className="accent">→</span> {it}</li>)}
              </ul>
            </Reveal>
          </div>
        </div>
      </section>

      <Footer go={go}/>
    </main>
  );
}
window.About = About;