// about.jsx — About page for Herely.

const BELIEFS = [
  { over:"Presence",  under:<>The room you're standing in matters more than the feed you're scrolling. We design for <em>here</em>, not everywhere.</>, c:"var(--m-blue)" },
  { over:"Consent",   under:<>Identity is the reward, never the entry fee. Names and faces appear only when both sides say <em>yes</em>.</>, c:"var(--m-amber)" },
  { over:"Quiet",     under:<>No streaks, no badges, no dopamine loops. A signal should cost nothing and demand <em>nothing</em>.</>, c:"var(--m-teal)" },
  { over:"Intent",    under:<>What you're open to says more than what you've posted. We surface the <em>why</em>, not the highlight reel.</>, c:"var(--m-coral)" },
  { over:"Restraint", under:<>The best feature is often the one we don't build. We measure success in conversations started, then <em>get out of the way</em>.</>, c:"var(--m-grey)" },
];



const AboutArrow = () => (
  <svg className="arrow" viewBox="0 0 16 16" fill="none" width="14" height="14">
    <path d="M3 8h9M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

function AboutPage({ onNavigate }) {
  React.useEffect(() => {
    const els = document.querySelectorAll(".about-rv");
    if(window.matchMedia("(prefers-reduced-motion: reduce)").matches){
      els.forEach(e=>e.classList.add("in")); return;
    }
    const io = new IntersectionObserver((ents)=>{
      ents.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add("in"); io.unobserve(e.target);} });
    }, {threshold:0.14, rootMargin:"0px 0px -8% 0px"});
    els.forEach(e=>io.observe(e));
    return () => io.disconnect();
  }, []);

  const styles = `
    .about-rv{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
    .about-rv.in{opacity:1;transform:none}
    .about-rv.d1{transition-delay:.08s} .about-rv.d2{transition-delay:.16s} .about-rv.d3{transition-delay:.24s}

    .about-hero{position:relative;padding:calc(64px + clamp(80px,16vh,160px)) 0 clamp(60px,10vh,120px);overflow:hidden}
    .about-hero h1{font-size:clamp(38px,6.4vw,84px);line-height:1.0;letter-spacing:-0.035em;max-width:17ch;margin:0;font-weight:400;color:var(--ink)}
    .about-hero .lede{margin-top:30px;max-width:52ch;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--mute);font-weight:400}
    .about-hero-foot{margin-top:48px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
    .hero-sig{font-family:var(--mono);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--mute-2)}

    .about-section{padding:clamp(72px,12vh,150px) 0;border-top:1px solid var(--line-2)}
    .sec-head{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:clamp(40px,6vw,72px);max-width:760px}
    .sec-head h2{font-size:clamp(28px,3.6vw,46px);line-height:1.08;letter-spacing:-0.025em;margin:0;font-weight:400;color:var(--ink)}

    .origin{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(32px,6vw,80px);align-items:start}
    .origin .side{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
    .origin .side .num{font-family:var(--serif);font-style:italic;font-size:64px;line-height:.9;color:var(--mute-2)}
    .origin .body{display:flex;flex-direction:column;gap:28px}
    .origin .body p{margin:0;font-size:clamp(18px,1.7vw,23px);line-height:1.55;color:var(--ink-2);letter-spacing:-0.01em;max-width:40ch}
    .origin .body p .hi{color:var(--ink)}
    .pull{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(26px,3.2vw,40px);line-height:1.15;letter-spacing:-0.015em;color:var(--ink);max-width:20ch}
    @media(max-width:760px){
      .origin{grid-template-columns:1fr;gap:32px}
      .origin .side{position:static}
      .origin .side .num{font-size:46px}
    }

    .ledger{border-top:1px solid var(--line)}
    .led-row{
      display:grid;grid-template-columns:64px 1fr 1fr;align-items:center;gap:24px;
      padding:26px 4px;border-bottom:1px solid var(--line-2);
      transition:background .3s ease, padding-left .3s ease;
    }
    .led-row:hover{background:color-mix(in oklab, var(--ink) 3%, transparent);padding-left:14px}
    .led-row .idx{font-family:var(--mono);font-size:11px;letter-spacing:.10em;color:var(--mute-2)}
    .led-row .over{font-size:clamp(24px,3vw,38px);letter-spacing:-0.02em;color:var(--ink);display:inline-flex;align-items:center;gap:14px}
    .led-row .over .sw{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in oklab, var(--c) 18%, transparent)}
    .led-row .under{font-size:14px;color:var(--mute);line-height:1.55;max-width:42ch}
    .led-row .under em{font-family:var(--serif);font-style:italic;color:var(--mute-2)}
    @media(max-width:680px){
      .led-row{grid-template-columns:1fr;gap:10px;padding:22px 4px}
      .led-row .idx{order:-1}
    }



    .place{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,72px);align-items:end}
    .place .big{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-0.025em;max-width:18ch;margin:0;font-weight:400;color:var(--ink)}
    .place .big .ed{display:inline;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-0.01em}
    .stat-col{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
    .stat-col .s{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 2px;border-bottom:1px solid var(--line-2)}
    .stat-col .s .v{font-family:var(--serif);font-style:italic;font-size:clamp(28px,3.4vw,40px);color:var(--ink);line-height:1}
    .stat-col .s .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--mute);text-align:right;max-width:18ch}
    @media(max-width:760px){.place{grid-template-columns:1fr;gap:36px}}

    .cta{padding:clamp(80px,12vh,150px) 0;border-top:1px solid var(--line-2);text-align:center}
    .cta h2{font-size:clamp(30px,4.4vw,58px);line-height:1.05;letter-spacing:-0.03em;max-width:18ch;margin:0 auto;font-weight:400;color:var(--ink)}
    .cta .row{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
    .cta .small{margin-top:22px;font-size:13.5px;color:var(--mute);line-height:1.6}
  `;

  return (
    <>
      <style>{styles}</style>
      <header className="about-hero">
        <div className="hero-vignette"></div>
        <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
          <div className="eyebrow about-rv">About · Herely</div>
          <h1 className="about-rv d1" style={{marginTop:24}}>
            We're building the <span className="ed">quiet layer</span> between people and the rooms they're already in.
          </h1>
          <p className="lede about-rv d2">
            Herely is a real-time presence layer for physical spaces. Not another feed,
            not another profile — a way to feel who's around and what they're open to,
            before anyone has to introduce themselves.
          </p>
          <div className="about-hero-foot about-rv d3">
            <button className="btn btn-primary" onClick={() => onNavigate("/request-access")}>Request access <AboutArrow/></button>
            <span className="hero-sig">Berlin · NYC · Est. 2026</span>
          </div>
        </div>
      </header>

      <section className="about-section">
        <div className="wrap">
          <div className="origin">
            <div className="side">
              <div className="eyebrow about-rv">Why we started</div>
              <div className="num about-rv d1">01</div>
              <p className="pull about-rv d2">It started with a room full of people who never met.</p>
            </div>
            <div className="body">
              <p className="about-rv">
                A studio opening. Forty people in one space — designers, founders, a visiting critic,
                two writers working on the same idea from opposite ends of the room. <span className="hi">Nobody knew.</span>
                Everyone left having spoken to the person they already came with.
              </p>
              <p className="about-rv d1">
                The tools we had for that moment were the same tools built for an audience of millions:
                profiles to perform, feeds to scroll, follower counts to compare. <span className="hi">None of them
                could tell you who was simply <em className="ed">there</em>, right then, beside you.</span>
              </p>
              <p className="about-rv d2">
                So we started Herely on a stubborn belief — that the richest network in the world is the
                one already standing in the room with you, and it deserves an interface that's quiet enough
                to actually hear.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="about-section">
        <div className="wrap">
          <div className="sec-head">
            <div className="eyebrow about-rv">What we believe</div>
            <h2 className="about-rv d1">Five things we hold over <span className="ed">everything else.</span></h2>
          </div>
          <div className="ledger">
            {BELIEFS.map((b,i)=>(
              <div className="led-row about-rv" key={i} style={{"--c":b.c}}>
                <span className="idx">{String(i+1).padStart(2,"0")}</span>
                <span className="over"><span className="sw"></span>{b.over}</span>
                <span className="under">{b.under}</span>
              </div>
            ))}
          </div>
        </div>
      </section>



      <section className="about-section">
        <div className="wrap">
          <div className="place">
            <h2 className="big about-rv">A quieter layer of reality, built deliberately <span className="ed">slowly.</span></h2>
            <div className="stat-col about-rv d1">
              <div className="s"><span className="v">200</span><span className="l">Founding rooms in 2026</span></div>
              <div className="s"><span className="v">14</span><span className="l">Cities & studios live today</span></div>
              <div className="s"><span className="v">2</span><span className="l">Home bases · Berlin & NYC</span></div>
              <div className="s"><span className="v">0</span><span className="l">Ads, ever</span></div>
            </div>
          </div>
        </div>
      </section>

      <section className="cta">
        <div className="wrap">
          <div className="eyebrow about-rv" style={{justifyContent:"center"}}>Join the room</div>
          <h2 className="about-rv d1" style={{marginTop:20}}>Presence <span className="ed">before</span> profile.</h2>
          <div className="row about-rv d2">
            <button className="btn btn-primary" onClick={() => onNavigate("/request-access")}>Request access <AboutArrow/></button>
            <button className="btn btn-ghost" onClick={() => onNavigate("/scanqr")}>See how it works</button>
          </div>
          <p className="small about-rv d3">Limited to 200 founding rooms · One short form, one quiet reply.</p>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { AboutPage });