// Vecorps — TAU product page (conversion engine). Depends on window shared + Tau mockups.
const { Nav, Frame, Footer, FinalCTA, Capture, Mock, Arr } = window;

// ── Product hero ────────────────────────────────────────────────────────────
function TauHero() {
  return (
    <header className="hero" id="top">
      <div className="wrap hero-grid">
        <div>
          <img className="hero-logo" src="tau-logo.png" alt="TAU" />
          <h1 className="hero-h1">An AI that knows you.<br/><span className="soft">And stays yours.</span></h1>
          <p className="hero-sub">TAU is a private companion that lives entirely on your iPhone. It remembers your life, learns who you are, and never sends a word to the cloud.</p>
          <div className="hero-cta btn-row">
            <a href="#access" className="cta">Get early access</a>
            <a href="#how" className="btn-line">See how it works <Arr /></a>
          </div>
        </div>
        <div className="hero-mock">
          <Mock scale={0.64}><window.TauChat /></Mock>
        </div>
      </div>
    </header>
  );
}

function Manifesto() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head"><span className="num">01</span><span className="name">Positioning</span></div>
        <p className="statement lg">
          Today you get two kinds of AI. One forgets you the moment you close it.
          The other remembers everything — on someone else's servers. <b>TAU is neither.</b>
        </p>
        <p className="statement md">
          Not one more chatbot to talk at. A private companion that <b>actually knows you</b>, stays yours, and answers to no one else.
        </p>
      </div>
    </section>
  );
}

function HowItWorks() {
  const pillars = [
    { idx: '01', label: 'Private', body: 'Runs entirely on your phone. Your conversations never leave the device. Not to us. Not to anyone.' },
    { idx: '02', label: 'Remembers', body: 'TAU builds a real, lasting memory of you — your people, your work, your story — so every conversation picks up where life left off.' },
    { idx: '03', label: 'Yours', body: 'Open the Memories screen and see exactly what TAU knows. Edit it. Delete it. You hold the key.' },
  ];
  return (
    <section className="section" id="how">
      <div className="wrap">
        <div className="sec-head"><span className="num">02</span><span className="name">How it works</span></div>
        <div className="pillars">
          {pillars.map((p) => (
            <div className="pillar" key={p.idx}>
              <div className="pillar-idx">{p.idx}</div>
              <div className="pillar-label">{p.label}</div>
              <p className="pillar-body">{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function EthicalStance() {
  const denials = ['No engagement tricks.', 'No notifications designed to pull you back.', 'No data sold.'];
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head"><span className="num">03</span><span className="name">The stance</span></div>
        <p className="statement lg">Built to make you more capable — <span className="soft">not more dependent.</span></p>
        <div className="stance-list">
          {denials.map((d, i) => (
            <div className="stance-item" key={i}><span className="mk">—</span><span>{d}</span></div>
          ))}
        </div>
        <p className="statement md stance-close"><b>TAU works for you, and only you.</b></p>
      </div>
    </section>
  );
}

function ProductPeek() {
  const cells = [
    { C: window.TauChat, idx: '01', name: 'Chat', note: 'One persistent thread · memory injected invisibly' },
    { C: window.TauMemories, idx: '02', name: 'Memories', note: 'Everything it knows · editable · deletable' },
    { C: window.TauOnboardValue, idx: '03', name: 'Onboarding', note: 'On-device from the first launch' },
  ];
  return (
    <section className="section" id="product">
      <div className="wrap">
        <div className="sec-head"><span className="num">04</span><span className="name">A peek at the product</span></div>
        <div className="peek">
          {cells.map((c) => (
            <div className="peek-cell" key={c.idx}>
              <Mock scale={0.56}><c.C /></Mock>
              <div className="peek-label">
                <span className="pidx">{c.idx}</span>
                <span className="pname">{c.name}</span>
                <span className="pnote">{c.note}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <div className="sec-head"><span className="num">05</span><span className="name">Pricing</span></div>
        <div className="pricing">
          <div className="price-cell">
            <div className="price-tier">Free</div>
            <p className="price-desc">The private companion, yours from day one. On-device, offline — with a limited memory.</p>
          </div>
          <div className="price-cell">
            <div className="price-tier">Pro</div>
            <p className="price-desc">The full TAU. Unlimited memory and the deepest version of your companion, for those who live in it.</p>
          </div>
        </div>
        <div className="price-note">Pricing announced at launch.</div>
        <p className="compat">Built for iPhone 15 Pro and the iPhone 16 and 17 lineups — any iPhone with 8GB of memory.</p>
      </div>
    </section>
  );
}

function App() {
  return (
    <div>
      <Nav active="tau" />
      <Frame>TAU · our first product</Frame>
      <TauHero />
      <Manifesto />
      <HowItWorks />
      <EthicalStance />
      <ProductPeek />
      <Pricing />
      <FinalCTA heading="Be among the first to make an AI truly yours." />
      <Footer />
    </div>
  );
}

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