// page-about.jsx — About page

const AboutCSS = `
@keyframes ab-bob{ 0%,100%{ transform:rotate(-2deg) translateY(0) } 50%{ transform:rotate(-1.2deg) translateY(-8px) } }
@keyframes ab-tape-wave{ 0%,100%{ transform:rotate(var(--rot)) translateY(0) } 50%{ transform:rotate(calc(var(--rot) + 1.4deg)) translateY(-2px) } }
@keyframes ab-pill-float{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-3px) rotate(-1deg) } }
@keyframes ab-fade-up{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:translateY(0) } }
@keyframes ab-fade-side{ from{ opacity:0; transform:translateX(-30px) } to{ opacity:1; transform:translateX(0) } }
@keyframes ab-card-tilt-in{ from{ opacity:0; transform:translateY(20px) rotate(var(--tilt-from,-2deg)) } to{ opacity:1; transform:translateY(0) rotate(var(--tilt,0deg)) } }
@keyframes ab-shimmer{ 0%{ background-position:-200% 0 } 100%{ background-position:200% 0 } }
@keyframes ab-arrow-poke{ 0%,100%{ transform:translateX(0); opacity:.5 } 50%{ transform:translateX(6px); opacity:1 } }
@keyframes ab-pulse-dot{ 0%,100%{ transform:scale(1); opacity:.7 } 50%{ transform:scale(1.4); opacity:1 } }
@keyframes ab-underline-grow{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

.page .about-hero{ display:grid; grid-template-columns: 1fr 1fr; gap:80px; padding:60px 56px 100px; align-items:center; }
.page .about-hero .col h1{ font-family:'Instrument Serif',serif; font-style:italic; font-size:96px; line-height:.95; margin:14px 0 28px; letter-spacing:-.02em; }
.page .about-hero .col h1 em{ color:var(--terra); position:relative; display:inline-block; }
.page .about-hero .col h1 em::after{ content:''; position:absolute; left:-2%; right:-2%; bottom:6px; height:4px; background:var(--terra); opacity:.35; transform-origin:left; transform:scaleX(0); animation:ab-underline-grow 1.2s .4s ease-out forwards; border-radius:2px; }
.page .about-hero .col p{ font-size:18px; max-width:480px; margin:0 0 18px; opacity:0; animation:ab-fade-up .9s ease-out forwards; }
.page .about-hero .col p:nth-of-type(1){ animation-delay:.5s; }
.page .about-hero .col p:nth-of-type(2){ animation-delay:.7s; }
.page .about-hero .col p:nth-of-type(3){ animation-delay:.9s; }
.page .about-hero .portrait{ position:relative; aspect-ratio:4/5; border-radius:8px; overflow:hidden; transform:rotate(-2deg); box-shadow:0 30px 80px -30px rgba(0,0,0,.35); animation:ab-bob 7s ease-in-out infinite; transition:box-shadow .4s, transform .4s; }
.page .about-hero .portrait:hover{ animation-play-state:paused; box-shadow:0 36px 90px -24px rgba(0,0,0,.5); }
.page .about-hero .portrait img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.page .about-hero .portrait:hover img{ transform:scale(1.04); }
.page .about-hero .tape{ position:absolute; width:120px; height:28px; background:color-mix(in srgb, var(--rose) 70%, transparent); border:1px dashed color-mix(in srgb, var(--ink) 25%, transparent); z-index:3; pointer-events:none; animation:ab-tape-wave 5s ease-in-out infinite; }
.page .about-hero .tape.t1{ top:-10px; left:30px; --rot:-6deg; }
.page .about-hero .tape.t2{ bottom:-10px; right:30px; --rot:4deg; width:90px; background:color-mix(in srgb, var(--olive) 60%, transparent); animation-duration:6.5s; animation-delay:-2s; }
.page .about-hero .pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.page .about-hero .pills > span{ padding:9px 16px; border:1.5px solid var(--ink); border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; background:var(--paper); cursor:default; transition:transform .25s, background .25s, color .25s, border-color .25s; animation:ab-pill-float 4s ease-in-out infinite; }
.page .about-hero .pills > span:nth-child(1){ animation-delay:0s; }
.page .about-hero .pills > span:nth-child(2){ animation-delay:-1.3s; }
.page .about-hero .pills > span:nth-child(3){ animation-delay:-2.6s; }
.page .about-hero .pills > span:hover{ animation-play-state:paused; transform:translateY(-4px) rotate(-2deg) scale(1.05); background:var(--ink); color:var(--bg); }

.page .ab-grid{ padding:80px 56px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; }
.page .ab-card{ background:var(--paper); padding:32px; border-radius:8px; position:relative; cursor:default; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s; opacity:0; animation:ab-card-tilt-in .8s ease-out forwards; will-change:transform; }
.page .ab-card:nth-child(1){ --tilt:-.6deg; --tilt-from:-3deg; animation-delay:.05s; }
.page .ab-card:nth-child(2){ --tilt:.4deg; --tilt-from:2deg; animation-delay:.15s; }
.page .ab-card:nth-child(3){ --tilt:-.3deg; --tilt-from:-2deg; animation-delay:.25s; }
.page .ab-card:nth-child(4){ --tilt:.5deg; --tilt-from:2deg; animation-delay:.35s; }
.page .ab-card:nth-child(5){ --tilt:-.4deg; --tilt-from:-2deg; animation-delay:.45s; }
.page .ab-card:nth-child(6){ --tilt:.3deg; --tilt-from:2deg; animation-delay:.55s; }
.page .ab-card::before{ content:''; position:absolute; top:-8px; left:18px; width:54px; height:14px; background:color-mix(in srgb, var(--olive) 50%, transparent); transform:rotate(-4deg); opacity:0; transition:opacity .3s; border:1px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.page .ab-card:hover{ transform:translateY(-6px) rotate(0deg) scale(1.02); box-shadow:0 24px 50px -28px rgba(0,0,0,.35); background:color-mix(in srgb, var(--terra) 6%, var(--paper)); z-index:2; }
.page .ab-card:hover::before{ opacity:1; }
.page .ab-card h3{ font-family:'Instrument Serif',serif; font-style:italic; font-size:32px; line-height:1; margin:0 0 14px; transition:color .3s; }
.page .ab-card:hover h3{ color:var(--terra); }
.page .ab-card p{ font-size:15px; margin:0; color:var(--ink-soft); }

.page .ab-band{ background:var(--ink); color:var(--bg); padding:120px 56px; }
.page .ab-band h2{ font-family:'Instrument Serif',serif; font-style:italic; font-size:80px; line-height:.95; margin:14px 0 48px; max-width:1000px; }
.page .ab-band h2 em{ color:var(--rose); }
.page .ab-band .row{ display:grid; grid-template-columns:120px 1fr 1fr; gap:48px; padding:24px 0; border-top:1px solid rgba(255,255,255,.16); align-items:baseline; position:relative; cursor:default; transition:padding-left .35s; opacity:0; animation:ab-fade-side .7s ease-out forwards; }
.page .ab-band .row:nth-of-type(1){ animation-delay:.1s; }
.page .ab-band .row:nth-of-type(2){ animation-delay:.2s; }
.page .ab-band .row:nth-of-type(3){ animation-delay:.3s; }
.page .ab-band .row:nth-of-type(4){ animation-delay:.4s; }
.page .ab-band .row:nth-of-type(5){ animation-delay:.5s; }
.page .ab-band .row::before{ content:'→'; position:absolute; left:-12px; top:50%; transform:translateY(-50%); color:var(--rose); opacity:0; transition:opacity .3s, transform .3s; font-family:'Instrument Serif',serif; font-size:24px; }
.page .ab-band .row:hover{ padding-left:24px; }
.page .ab-band .row:hover::before{ opacity:1; animation:ab-arrow-poke 1.4s ease-in-out infinite; }
.page .ab-band .row:last-child{ border-bottom:1px solid rgba(255,255,255,.16); }
.page .ab-band .row .yr{ font-family:'JetBrains Mono',monospace; font-size:13px; opacity:.65; transition:color .3s, opacity .3s; }
.page .ab-band .row:hover .yr{ opacity:1; color:var(--rose); }
.page .ab-band .row .what{ font-family:'Instrument Serif',serif; font-style:italic; font-size:32px; transition:transform .3s; }
.page .ab-band .row:hover .what{ transform:translateX(6px); }
.page .ab-band .row .where{ font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.06em; opacity:.7; }

.page .ab-rail{ padding:120px 56px; display:grid; grid-template-columns:1fr 1.4fr; gap:80px; }
.page .ab-rail h2{ font-family:'Instrument Serif',serif; font-style:italic; font-size:64px; line-height:1; margin:14px 0 24px; }
.page .ab-rail .list{ display:grid; gap:24px; }
.page .ab-rail .list .it{ display:grid; grid-template-columns:60px 1fr; gap:24px; padding:18px 0; border-top:1px solid var(--rule); align-items:baseline; position:relative; cursor:default; transition:padding-left .35s; }
.page .ab-rail .list .it:last-child{ border-bottom:1px solid var(--rule); }
.page .ab-rail .list .it::before{ content:''; position:absolute; left:0; top:50%; width:6px; height:6px; border-radius:50%; background:var(--terra); opacity:0; transform:translateY(-50%); transition:opacity .3s; }
.page .ab-rail .list .it:hover{ padding-left:18px; }
.page .ab-rail .list .it:hover::before{ opacity:1; animation:ab-pulse-dot 1.4s ease-in-out infinite; }
.page .ab-rail .list .it .n{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-soft); transition:color .3s; }
.page .ab-rail .list .it:hover .n{ color:var(--terra); }
.page .ab-rail .list .it .t{ font-size:17px; transition:transform .3s, color .3s; }
.page .ab-rail .list .it:hover .t{ transform:translateX(6px); font-style:italic; }

@media (prefers-reduced-motion: reduce){
  .page .about-hero .portrait, .page .about-hero .tape, .page .about-hero .pills > span, .page .ab-card, .page .ab-band .row, .page .about-hero .col p, .page .about-hero .col h1 em::after{ animation:none !important; opacity:1 !important; transform:none !important; }
}
`;

const TIMELINE = [
  { yr:'2026', what:'Two slots open', where:'Los Angeles · taking June–July clients' },
  { yr:'2024', what:'Shopify Partner', where:'Officially nerding out about checkouts' },
  { yr:'2019', what:'Squarespace Circle member', where:'Top-tier since 2021' },
  { yr:'2017', what:'Went solo', where:'After 4 years agency-side' },
  { yr:'2015', what:'First paid site', where:'A friend’s ceramics shop. Still online.' },
];

const VALUES = [
  { t:'Slow on purpose', d:'I take fewer clients so I can give each one real attention. No farming things out, no template surgery.' },
  { t:'Boring pricing', d:'Fixed quotes, written scope, no surprise invoices. The least exciting promise on this site is also the most useful.' },
  { t:'You own everything', d:'Files, fonts, deploy keys, the lot. I hand it over and you keep it. No platforms designed to lock you in.' },
  { t:'Care without preciousness', d:'I sweat the details, but I won’t hold a button hostage for two weeks because the corner radius is 6 vs 8.' },
  { t:'Plain English', d:'No jargon. If I have to use a technical word I’ll explain it. Loom walkthroughs come standard.' },
  { t:'Local-ish', d:'Mostly LA hours, but I’ve worked happily with people in Berlin, Paris, Copenhagen, Lisbon. Async-friendly.' },
];

const CatDoodle = () => (
  <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" style={{display:'inline-block',verticalAlign:'middle',marginLeft:10,flexShrink:0}}>
    <polygon points="6,14 3,4 12,10" fill="#e8823a" stroke="#c2611e" strokeWidth="1.2" strokeLinejoin="round"/>
    <polygon points="30,14 33,4 24,10" fill="#e8823a" stroke="#c2611e" strokeWidth="1.2" strokeLinejoin="round"/>
    <polygon points="7,13 5,7 11,11" fill="#f5a87a"/>
    <polygon points="29,13 31,7 25,11" fill="#f5a87a"/>
    <ellipse cx="18" cy="20" rx="13" ry="12" fill="#e8823a" stroke="#c2611e" strokeWidth="1.4"/>
    <path d="M12 13 Q14 11 16 13" stroke="#c2611e" strokeWidth="1" strokeLinecap="round" fill="none" opacity=".7"/>
    <path d="M20 13 Q22 11 24 13" stroke="#c2611e" strokeWidth="1" strokeLinecap="round" fill="none" opacity=".7"/>
    <path d="M16 10 Q18 8 20 10" stroke="#c2611e" strokeWidth="1" strokeLinecap="round" fill="none" opacity=".7"/>
    <ellipse cx="13" cy="19" rx="2.5" ry="2.8" fill="#2d2d2d"/>
    <ellipse cx="23" cy="19" rx="2.5" ry="2.8" fill="#2d2d2d"/>
    <circle cx="14" cy="18" r=".8" fill="white"/>
    <circle cx="24" cy="18" r=".8" fill="white"/>
    <path d="M17 23 L18 22 L19 23 L18 24 Z" fill="#d46b8a"/>
    <path d="M18 24 Q15.5 26.5 14 25.5" stroke="#c2611e" strokeWidth="1" strokeLinecap="round" fill="none"/>
    <path d="M18 24 Q20.5 26.5 22 25.5" stroke="#c2611e" strokeWidth="1" strokeLinecap="round" fill="none"/>
    <line x1="5" y1="22" x2="13" y2="23" stroke="#c2611e" strokeWidth=".9" strokeLinecap="round" opacity=".8"/>
    <line x1="5" y1="24.5" x2="13" y2="24" stroke="#c2611e" strokeWidth=".9" strokeLinecap="round" opacity=".8"/>
    <line x1="31" y1="22" x2="23" y2="23" stroke="#c2611e" strokeWidth=".9" strokeLinecap="round" opacity=".8"/>
    <line x1="31" y1="24.5" x2="23" y2="24" stroke="#c2611e" strokeWidth=".9" strokeLinecap="round" opacity=".8"/>
  </svg>
);

const FAVES = [
  { n:'01', t:'At least three beverages on my desk at all times. Hydration strategy or controlled chaos — honestly, both.' },
  { n:'02', t:'Reading three books simultaneously and finishing none of them. It\'s called a system.' },
  { n:'03', t:'Actively grieving every plant I\'ve ever owned. They were loved. Briefly.' },
  { n:'04', t:<span style={{display:'flex',alignItems:'center',gap:6}}>Just adopted a ginger cat who stares at my screen with visible disappointment.<CatDoodle/></span> },
  { n:'05', t:'Making a new playlist for every mood, season, and minor inconvenience.' },
  { n:'06', t:'Rewatching the same comfort shows on a loop since 2019 and calling it self-care.' },
];

function AboutPage(){
  return (
    <PageShell active="about">
      <style>{AboutCSS}</style>
      <header className="pghdr">
        <div className="eyebrow">About · Hi, I’m Maia</div>
        <h1>One human, <em>two hats</em>,<br/>twenty-three plants.</h1>
        <p className="lede">A short biography for the curious. Mostly true.</p>
        <Note at={{ bottom: 44, right: 70 }} rot={-6}>all 23 still alive <span className="arr">↘</span></Note>
        <Squiggle at={{ bottom: 22, left: 56 }} rot={4} color="terra" w={120} />
        <StarDoodle at={{ top: 18, left: 300 }} rot={-15} size={20} color="olive" />
        <Tape at={{ bottom: 8, right: 200 }} rot={3} color="rose" />
      </header>

      <section className="about-hero">
        <div className="portrait">
          <div className="tape t1"/>
          <div className="tape t2"/>
          <img src="img/maia-portrait-headshot.jpg" alt="Maia Hariton"/>
        </div>
        <div className="col">
          <div className="eyebrow">Designer / Developer / Friend</div>
          <h1>The <em>long</em> version.</h1>
          <p>I’m a one-human web studio working out of a sunny corner of Los Angeles. I do the design <em>and</em> the code, which is rarer than it should be — most studios split that work between two people who don’t actually talk to each other.</p>
          <p>Doing both means I can promise things other studios can’t: pixel-perfect handoffs (because there is no handoff), realistic timelines (because I’m the one writing the CSS), and finished sites that look like the mockup. Imagine.</p>
          <p>I’ve been doing this since 2015. Eleven years, roughly 140 sites, four platforms, zero retainers I regret. Mostly small businesses, studios, and the kind of solo founders who care about their thing in the same particular way I care about mine.</p>
          <div className="pills">
            <span>Squarespace Circle since 2019</span>
            <span>Shopify Partner</span>
            <span>Speaks 🇫🇷 / 🇬🇧 / 🇷🇺</span>
          </div>
        </div>
      </section>

      <section className="ab-grid">
        {VALUES.map(v => (
          <div key={v.t} className="ab-card">
            <h3>{v.t}</h3>
            <p>{v.d}</p>
          </div>
        ))}
      </section>

      <section className="ab-band">
        <div className="eyebrow" style={{color:'rgba(255,255,255,.6)'}}>Career, abridged</div>
        <h2>A short <em>chronology</em>.</h2>
        {TIMELINE.map(r => (
          <div key={r.yr} className="row">
            <div className="yr">{r.yr}</div>
            <div className="what">{r.what}</div>
            <div className="where">{r.where}</div>
          </div>
        ))}
      </section>

      <section className="ab-rail">
        <div>
          <div className="eyebrow">Off the clock</div>
          <h2>Things I love<br/>that aren’t websites.</h2>
          <p style={{color:'var(--ink-soft)'}}>If we end up working together, you’ll probably hear about at least three of these.</p>
        </div>
        <div className="list">
          {FAVES.map(f => (
            <div key={f.n} className="it">
              <div className="n">{f.n}</div>
              <div className="t">{f.t}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="cta-strip">
        <h2>Want to <em>say hi</em>?</h2>
        <p>I love a good intro email. Tell me what you’re building, where you’re stuck, and how soon.</p>
        <a className="btn" href="contact.html">Get in touch ↗</a>
      </section>
    </PageShell>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<AboutPage/>);