// Vecorps — APPROACH (the thesis / intellectual gravity). Depends on window shared.
const { Nav, Frame, Footer, FinalCTA, Arr } = window;

// ── Approach hero ───────────────────────────────────────────────────────────
function ApproachHero() {
  return (
    <header className="hero" id="top">
      <div className="wrap" style={{ padding: '104px 40px 96px' }}>
        <div className="eyebrow">Approach</div>
        <h1 className="hero-h1" style={{ maxWidth: '16ch' }}>Personal AI should answer<br/><span className="soft">to one person. You.</span></h1>
        <p className="hero-sub" style={{ maxWidth: '600px' }}>
          We build on a simple conviction: the most personal technology ever made should be private,
          run on your own device, and stay yours. Here is how we think about it.
        </p>
      </div>
    </header>
  );
}

// ── Essay block · mono spec left, prose right ───────────────────────────────
function Essay({ num, name, idx, meta, children }) {
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head"><span className="num">{num}</span><span className="name">{name}</span></div>
        <div className="band">
          <div className="band-meta">
            <span className="idx">{idx}</span>
            {meta.map((m, i) => (
              <React.Fragment key={i}>{i === 0 ? <span className="b">{m}</span> : m}<br/></React.Fragment>
            ))}
          </div>
          <div>{children}</div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <div>
      <Nav active="approach" />
      <Frame>Approach · how we think about private AI</Frame>
      <ApproachHero />

      <Essay num="01" name="Why private" idx="→ The principle" meta={['Privacy is the default', 'Not a setting', 'Not a tier']}>
        <p className="statement lg">
          Your thoughts shouldn't live on <span className="soft">someone else's server.</span>
        </p>
        <p className="statement md">
          A real companion sees your messages, your habits, your relationships, your doubts.
          That kind of intimacy only earns trust if <b>you stay in control of it.</b> So TAU runs entirely
          on your device, and your memory belongs to you — nothing leaves your phone unless you explicitly
          choose to. <span className="soft">No silent sync, no profile built about you in the background, nothing sold.</span>
        </p>
      </Essay>

      <Essay num="02" name="Why on-device" idx="→ The architecture" meta={['Compute comes to you', 'The model runs local', 'Offline by nature']}>
        <p className="statement lg">
          The computation comes to you — <span className="soft">not the other way around.</span>
        </p>
        <p className="statement md">
          For a decade the deal was: send your data to a datacenter, get intelligence back.
          We invert it. TAU runs a leading open-source model <b>entirely on your phone</b>,
          so the intelligence lives where your life already is. No connection required. Nothing in transit to intercept.
        </p>
      </Essay>

      <Essay num="03" name="Why you own your memory" idx="→ The control" meta={['Transparent', 'Editable', 'Yours to delete']}>
        <p className="statement lg">
          You should be able to <b>see, edit, and delete</b> <span className="soft">everything it knows.</span>
        </p>
        <p className="statement md">
          Memory is the feature — and memory you can't inspect is surveillance with better manners.
          TAU keeps its model of you in plain view. Open the Memories screen, read it back in your own words,
          change what's wrong, remove what you'd rather it forget. <b>You hold the key.</b>
        </p>
      </Essay>

      <Essay num="04" name="Our ethical stance" idx="→ The line we hold" meta={['More capable', 'Not more dependent', 'No dark patterns']}>
        <p className="statement lg">
          Built to make you more capable — <span className="soft">not more dependent.</span>
        </p>
        <p className="statement md">
          The easy business of companion AI is engineered loneliness: streaks, nudges, manufactured longing.
          We refuse it. <b>No engagement tricks. No notifications designed to pull you back. No data sold.</b>
          {' '}TAU's only job is to leave you better off when you put the phone down.
        </p>
      </Essay>

      <FinalCTA heading="Private intelligence, built on conviction." note="Pre-launch · we'll email you once, at launch" />
      <Footer />
    </div>
  );
}

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