// Home page

const Home = ({ setPage, openBooking }) => {
  return (
    <>
      {/* HERO */}
      <div className="hero">
        <div>
          <div className="eyebrow">AGENT-NATIVE OPERATIONS</div>
          <h1 className="display">Your Business<br/>Runs<span className="dot">.</span></h1>
          <p className="hero-sub">
            We build the websites, apps, ads, and AI agent systems that run a modern company. Shipped in weeks, priced per workflow, owned by you.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={openBooking}>See a live demo →</button>
            <a className="btn btn-ghost" href="#offerings" onClick={(e) => {
              e.preventDefault();
              document.getElementById('offerings')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }}>How we work</a>
          </div>
        </div>
        <AgentTerminal />
      </div>

      {/* NARRATIVE */}
      <div className="narrative">
        Less theater.<br/>
        <span className="em">More working software.</span>
      </div>

      {/* OFFERINGS */}
      <section id="offerings">
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">WHAT WE DO</div>
            <h2>Three buckets.<br/>Equal weight.</h2>
          </div>
          <div className="grid-3">
            {[
              { verb: 'Build', desc: 'Websites, apps, and MVPs shipped in weeks. You own the code, the accounts, the data.' },
              { verb: 'Run', desc: 'AI agent systems that operate your stack 24/7. Priced like an outcome, not a consultant.' },
              { verb: 'Grow', desc: 'Paid media and marketing automation measured on the numbers that actually move the business, on a dashboard you can read.' },
            ].map(c => (
              <div key={c.verb} className="offer-card" onClick={() => setPage('what')}>
                <div className="offer-verb">{c.verb}<span className="dot">.</span></div>
                <p className="offer-desc">{c.desc}</p>
                <span className="offer-more">LEARN MORE</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PROOF */}
      <section className="proof">
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 48 }}>RECEIPTS</div>
          <div className="proof-grid">
            <div className="stat">
              <div className="num">16</div>
              <div className="desc">agents in production for a global iGaming operator.</div>
            </div>
            <div className="stat">
              <div className="num">6<span style={{ fontSize: '0.5em', color: 'var(--fg-muted)', marginLeft: 8 }}>weeks</span></div>
              <div className="desc">from concept to App Store, start to submit.</div>
            </div>
            <div className="stat">
              <div className="num">200<span style={{ fontSize: '0.5em', color: 'var(--fg-muted)', marginLeft: 8 }}>+</span></div>
              <div className="desc">autonomous trades placed by an agent running production capital. Zero human intervention.</div>
            </div>
          </div>
          <div className="proof-clients">
            <span className="label">CLIENTS</span>
            <span>DRIZZLE</span>
            <span>STYLED AI</span>
            <span>FASSIO ROOFING</span>
            <span>TONSR</span>
            <span>SCARLETT</span>
            <span>THE COUCH</span>
          </div>
        </div>
      </section>

      {/* THE DIFFERENCE */}
      <section>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">THE DIFFERENCE</div>
            <h2>We deploy.<br/>We don't discuss.</h2>
          </div>
          <div className="diff">
            <div className="diff-col">
              <div className="diff-head">Most agencies</div>
              <div className="diff-row">Six-month implementation</div>
              <div className="diff-row">Monthly retainer, invisible output</div>
              <div className="diff-row">You rent the platform forever</div>
              <div className="diff-row">Slide decks and strategy PDFs</div>
              <div className="diff-row">Per-seat pricing built for humans</div>
            </div>
            <div className="diff-col ours">
              <div className="diff-head">Basecamp Digital</div>
              <div className="diff-row">Shipped in weeks</div>
              <div className="diff-row">Priced on the work that ships</div>
              <div className="diff-row">You own everything, day one</div>
              <div className="diff-row">You see it work before you commit</div>
              <div className="diff-row">Per-workflow pricing, not per seat</div>
            </div>
          </div>
        </div>
      </section>

      {/* HOW WE WORK */}
      <section>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">HOW WE WORK</div>
            <h2>Pilot.<br/>Ship. Run.</h2>
          </div>
          <div className="steps">
            <div className="step">
              <div className="step-num">01 — PILOT</div>
              <div className="step-verb">Pilot<span style={{ color: 'var(--teal)' }}>.</span></div>
              <p>A 30-day paid pilot on one real workflow, with a guarantee: if it does not hit the number by day 30, you do not pay for the next phase. Most clients keep going workflow by workflow from there.</p>
            </div>
            <div className="step">
              <div className="step-num">02 — SHIP</div>
              <div className="step-verb">Ship<span style={{ color: 'var(--teal)' }}>.</span></div>
              <p>We deploy the full build. Website, app, agent system, or all of it. In weeks.</p>
            </div>
            <div className="step">
              <div className="step-num">03 — RUN</div>
              <div className="step-verb">Run<span style={{ color: 'var(--teal)' }}>.</span></div>
              <p>We monitor and operate it, or we hand it off. You own the assets either way.</p>
            </div>
          </div>
        </div>
      </section>

      {/* WORKFLOW DIAGRAM */}
      <section style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="section-head" style={{ marginBottom: 32 }}>
            <div className="eyebrow">LIVE ACROSS YOUR STACK</div>
            <h2 style={{ fontSize: 'clamp(28px, 3.5vw, 40px)' }}>One agent. Every tool your team already uses.</h2>
          </div>
          <div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 14, padding: '40px 32px' }}>
            <WorkflowDiagram />
          </div>
        </div>
      </section>

      {/* FOUNDER */}
      <section>
        <div className="container">
          <div className="founder">
            <div className="founder-avatar"><img src="assets/founder.jpeg" alt="Jeremy Kirby" /></div>
            <div className="founder-body">
              <p>
                Basecamp Digital is built by <strong style={{ color: 'var(--teal)', fontWeight: 600 }}>Jeremy Kirby</strong>, a builder-operator. He ships across the stack: multi-agent operations for global iGaming, iOS apps from concept to App Store, autonomous trading systems that run without a human in the loop, live streaming studios where agents work on camera, and service businesses running enterprise-grade pipelines without enterprise overhead. He does not theorize about AI. He wakes up and operates inside it.
              </p>
              <div className="founder-name"><span className="n">JEREMY KIRBY</span> · FOUNDER</div>
            </div>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <div className="final-cta">
        <div className="eyebrow" style={{ justifyContent: 'center' }}>SEE IT WORK</div>
        <h2>See what an agent can do<br/>for <span className="t">your</span> business.</h2>
        <button className="btn btn-primary btn-big" onClick={openBooking}>Book a 30-minute demo →</button>
        <div className="tiny">NO DECK. JUST THE WORK.</div>
      </div>
    </>
  );
};

window.Home = Home;