// Vecorps — HOME (corporate presence, ~60% Vecorps / 40% TAU).
const { Nav, Footer, FinalCTA, Mock, Arr } = window;

// ── Corporate hero ──────────────────────────────────────────────────────────
function HomeHero() {
  return (
    <header className="hero-corp" id="top">
      <div className="wrap hero-corp-inner">
        <div className="eyebrow">Vecorps Technologies</div>
        <h1>Private intelligence<br/><span className="soft">for personal AI.</span></h1>
        <p className="hero-corp-sub">Vecorps builds personal AI that knows you — and never leaves your device. Our first product is TAU.</p>
        <div className="btn-row">
          <a href="TAU.html" className="btn-line">Meet TAU <Arr /></a>
          <a href="#access" className="cta">Get early access</a>
        </div>
      </div>
    </header>
  );
}

// ── Why now / the shift ─────────────────────────────────────────────────────
function WhyNow() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head"><span className="num">01</span><span className="name">Why now</span></div>
        <p className="statement lg">
          Today, AI comes in two shapes. One <span className="soft">forgets you</span> the moment you close it.
          The other <span className="soft">remembers everything</span> — on someone else's servers.
        </p>
        <p className="statement md">
          Vecorps is building the third: <b>a personal AI that knows you and stays yours.</b>
          {' '}It runs where your life already is — on your own device — and answers to no one else.
        </p>
      </div>
    </section>
  );
}

// ── What we believe — four principles ───────────────────────────────────────
function Believe() {
  const creed = [
    { idx: '01', label: 'Private by default', body: 'Not a setting you find, not a tier you pay for. Privacy is the starting point.' },
    { idx: '02', label: 'Runs on your device', body: 'The intelligence comes to you. The model runs locally — offline by nature.' },
    { idx: '03', label: 'You own your memory', body: 'Everything it knows is transparent, editable, and yours to delete.' },
    { idx: '04', label: 'Capable, not dependent', body: 'Built to leave you better off — never to manufacture a habit.' },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head"><span className="num">02</span><span className="name">What we believe</span></div>
        <div className="creed">
          {creed.map((c) => (
            <div className="creed-item" key={c.idx}>
              <span className="creed-idx">{c.idx}</span>
              <div>
                <p className="creed-label">{c.label}</p>
                <p className="creed-body">{c.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Our first product: TAU ──────────────────────────────────────────────────
function FirstProduct() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head"><span className="num">03</span><span className="name">Our first product</span></div>
        <div className="prod">
          <div>
            <img className="prod-logo" src="tau-logo.png" alt="TAU" />
            <p className="statement md" style={{ marginBottom: '34px' }}>
              A private companion that lives entirely on your iPhone. It <b>remembers your life</b>,
              learns who you are, and never sends a word to the cloud.
            </p>
            <div className="btn-row">
              <a href="TAU.html" className="btn-line">Explore TAU <Arr /></a>
              <a href="#access" className="cta">Get early access</a>
            </div>
          </div>
          <div className="hero-mock">
            <Mock scale={0.58}><window.TauChat /></Mock>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── The vision ──────────────────────────────────────────────────────────────
function Vision() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head"><span className="num">04</span><span className="name">The vision</span></div>
        <div className="band">
          <div className="band-meta">
            <span className="idx">→ Where this goes</span>
            <div className="b">Private personal AI</div>
            On every device you own<br/>
            iPhone → Android → beyond<br/>
            Across platforms, past Apple<br/>
            TAU is the first of many
          </div>
          <div>
            <p className="statement lg">
              Private personal AI, <span className="soft">on every device you own.</span>
            </p>
            <p className="statement md">
              TAU is the first of a line. The aim never changes — intelligence that comes to you,
              learns you, and stays yours. From iPhone to Android and beyond,
              <span className="soft"> Vecorps is building the private layer that personal AI runs on, everywhere.</span>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Our approach (teaser → Approach page) ───────────────────────────────────
function ApproachTeaser() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head"><span className="num">05</span><span className="name">Our approach</span></div>
        <div className="teaser">
          <p className="statement md" style={{ maxWidth: '24ch', flex: '1 1 360px' }}>
            Why private. Why on-device. Why you should <b>own your memory.</b>
          </p>
          <a href="Approach.html" className="btn-line">Read our approach <Arr /></a>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <div>
      <Nav active="home" />
      <HomeHero />
      <WhyNow />
      <Believe />
      <FirstProduct />
      <Vision />
      <ApproachTeaser />
      <FinalCTA heading="Be among the first to make an AI truly yours." />
      <Footer />
    </div>
  );
}

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