// What We Do, Work, About, Contact pages

const WhatWeDo = ({ openBooking }) => {
  const buckets = [
    {
      verb: 'Build',
      job: 'Custom websites, apps, and MVPs. Shipped by engineers, not ticketed to a vendor queue. Client owns repo, accounts, domain, everything.',
      rows: [
        { label: 'WEBSITES', val: 'Marketing sites, product pages, full rebuilds' },
        { label: 'APP MVPs', val: 'iOS and web. Concept to App Store' },
        { label: 'LANDING PAGES', val: 'Campaign-specific, conversion-tuned' },
        { label: 'YOU OWN', val: 'Code · Accounts · Domain · Data · Day one' },
      ],
    },
    {
      verb: 'Run',
      job: 'Production agent systems that operate your stack around the clock. Priced per workflow, not per seat. Start with one, add more as they prove out.',
      rows: [
        { label: 'SINGLE-AGENT', val: 'One workflow, deployed and monitored' },
        { label: 'MULTI-AGENT', val: 'Coordinated systems replacing full functions' },
        { label: 'PILOT', val: 'Start with one workflow · see it work first · keep going workflow by workflow' },
      ],
      agents: ['Briefing Agent', 'Meeting-to-Task Agent', 'Launch Agent', 'Affiliate Coordinator', 'Compliance Monitor'],
    },
    {
      verb: 'Grow',
      job: 'Paid media and marketing automation run inside your stack, measured on the metrics that actually move the business.',
      rows: [
        { label: 'PAID MEDIA', val: 'Google, Meta, LinkedIn · managed end-to-end' },
        { label: 'BRAND + CONTENT', val: 'Strategy, voice, assets' },
        { label: 'AUTOMATION', val: 'Built into the agent layer. No Zapier tax.' },
        { label: 'MEASUREMENT', val: 'Dashboards you can actually read' },
      ],
    },
  ];

  return (
    <>
      <div className="page-head">
        <div className="eyebrow">WHAT WE DO</div>
        <h1>Build. Run. <span className="t">Grow.</span></h1>
        <p className="lede">You see the work before you commit. You own every asset the day it ships. Projects from $5,000, retainers from $1,500 a month, exact scope quoted on the call.</p>
      </div>

      {buckets.map((b, i) => (
        <div key={b.verb} className="offer-deep">
          <div className="offer-deep-inner">
            <div className="offer-deep-left">
              <div className="eyebrow">0{i + 1} — {b.verb.toUpperCase()}</div>
              <h3>{b.verb}<span className="dot">.</span></h3>
              <p>{b.job}</p>
              <button className="btn btn-ghost" style={{ marginTop: 28 }} onClick={openBooking}>See it live →</button>
            </div>
            <div className="offer-details">
              {b.rows.map((r, j) => (
                <div className="detail-row" key={j}>
                  <div className="detail-label">{r.label}</div>
                  <div className="detail-val">{r.val}</div>
                </div>
              ))}
              {b.agents && (
                <div className="agent-menu">
                  <div className="agent-menu-label">PRODUCTIZED AGENT MENU</div>
                  <div className="agent-chips">
                    {b.agents.map(a => <span key={a} className="agent-chip">{a}</span>)}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      ))}

      <div className="container" style={{ paddingTop: 8 }}>
        <div className="section-head">
          <div className="eyebrow">HOW ENGAGEMENTS SCALE</div>
          <h2>Foothold. Ascent. <span className="t">Summit.</span></h2>
        </div>
        <div className="steps">
          <div className="step">
            <div className="step-num">01 — FOOTHOLD</div>
            <div className="step-verb">Foothold<span style={{ color: 'var(--teal)' }}>.</span></div>
            <p>One workflow, proven. A 30-day pilot with a guarantee: if it does not hit the number, you do not pay for the next phase.</p>
          </div>
          <div className="step">
            <div className="step-num">02 — ASCENT</div>
            <div className="step-verb">Ascent<span style={{ color: 'var(--teal)' }}>.</span></div>
            <p>The core of it, running. The build plus a weekly-outcome retainer. Where most clients land.</p>
          </div>
          <div className="step">
            <div className="step-num">03 — SUMMIT</div>
            <div className="step-verb">Summit<span style={{ color: 'var(--teal)' }}>.</span></div>
            <p>The whole operation runs itself. Multiple agents and a command center, monitored and optimized.</p>
          </div>
        </div>
      </div>

      <div className="closer-line">
        One vendor. Websites, apps, ads,<br/>and the <span className="t">agents that run them all.</span>
      </div>

      <div className="final-cta" style={{ paddingTop: 80 }}>
        <h2>Start with a <span className="t">30-day pilot.</span></h2>
        <button className="btn btn-primary btn-big" onClick={openBooking}>Book a 30-minute demo →</button>
      </div>
    </>
  );
};

const Work = ({ openBooking }) => {
  const cases = [
    {
      n: '01', client: 'Drizzle',
      job: '16-agent operations deployment with a custom command center. Deployed inside a live global iGaming stack.',
      meta: ['iGAMING', 'MULTI-AGENT', '16 AGENTS LIVE'],
      outcome: '"The command center replaced three roles and a seven-figure SaaS stack."',
      link: 'https://drizzle.bet/',
    },
    {
      n: '02', client: 'Styled AI',
      job: 'Concept to App Store in six weeks. iOS native, agent-backed content pipeline.',
      meta: ['iOS APP', 'MVP', '6 WEEKS'],
      outcome: 'Submitted to App Store day 41. Approved day 43.',
      link: 'https://www.getstyled.app/',
    },
    {
      n: '03', client: 'Fassio Roofing',
      job: 'Service business running enterprise-grade lead gen without the enterprise overhead. New site, paid media, and automated intake.',
      meta: ['WEB + PAID', 'SERVICE BUSINESS', 'LEAN STACK'],
      outcome: 'Replaced a retained agency. Booked pipeline grew 4.2x in 90 days.',
      link: 'https://fassioroofing.com/',
    },
    {
      n: '04', client: 'TONSR',
      job: 'MVP shipped in 20 minutes during a live session. Working product, not slideware.',
      meta: ['MVP', 'LIVE BUILD', '20 MINUTES'],
      outcome: '"They opened a terminal and built it while we watched."',
    },
    {
      n: '05', client: 'Scarlett',
      job: 'Autonomous trading bot with live agent decisioning. Scans unusual options flow, enters positions, manages risk, no human in the loop.',
      meta: ['FINTECH', 'AUTONOMOUS AGENT', '24/7 LIVE'],
      outcome: '"Ran 200+ autonomous trades in 60 days. +5.1% return with zero human intervention."',
      link: 'https://scarlett.trading',
    },
    {
      n: '06', client: 'The Couch',
      job: 'Live command center and stream studio where AI agents work on camera. Real builds, real deploys, real audience.',
      meta: ['LIVE DEMO', 'AGENTS ON CAMERA', 'STREAM STUDIO'],
      outcome: '"3,400 viewers watched agents ship a working app in 42 minutes."',
      link: 'https://thecouch.live',
    },
  ];

  return (
    <>
      <div className="page-head">
        <div className="eyebrow">WORK</div>
        <h1>Receipts, not<br/><span className="t">case study theater.</span></h1>
        <p className="lede">What we shipped. What it did for the client. What we would do again.</p>
      </div>

      <div className="work-list">
        {cases.map(c => {
          const inner = (
            <>
              <div className="num">
                {c.n} / 06
                <span className="client">{c.client}</span>
              </div>
              <div className="work-body">
                <div className="work-job">{c.job}</div>
                <div className="work-meta">
                  {c.meta.map((m, i) => <span key={i} className={i === 0 ? 'pill' : ''}>{m}</span>)}
                  {c.link && <span className="pill" style={{ color: 'var(--teal)' }}>↗ {c.link.replace(/^https?:\/\//, '').replace(/^www\./, '').replace(/\/$/, '')}</span>}
                </div>
                <div className="work-outcome">{c.outcome}</div>
              </div>
              <div className="work-arrow">→</div>
            </>
          );
          return c.link ? (
            <a key={c.n} className="work-panel" href={c.link} target="_blank" rel="noopener">{inner}</a>
          ) : (
            <div key={c.n} className="work-panel">{inner}</div>
          );
        })}
      </div>

      <div className="final-cta" style={{ paddingTop: 40 }}>
        <h2>Yours is<br/>case study <span className="t">07.</span></h2>
        <button className="btn btn-primary btn-big" onClick={openBooking}>Book a 30-minute demo →</button>
      </div>
    </>
  );
};

const About = ({ openBooking }) => (
  <>
    <div className="page-head">
      <div className="eyebrow">ABOUT</div>
      <h1>A builder-operator company.<br/><span className="t">Not an agency.</span></h1>
      <p className="lede">We ship the thing. Then we run it. Then we hand you the keys if you want them.</p>
    </div>

    <div className="bios">
      <div className="bio-card">
        <div className="bio-role">FOUNDER</div>
        <div className="bio-name">Jeremy Kirby</div>
        <p>
          Self-taught builder-operator based in Scotts Valley, California. Has deployed multi-agent operations for global iGaming, shipped iOS apps from concept to App Store, run autonomous trading systems with no human in the loop, and managed paid media spend into the seven figures.
        </p>
        <p>
          Writes the code, runs the campaigns, operates the agents. The person scoping the work is the person building it.
        </p>
      </div>
      <div className="bio-card">
        <div className="bio-role">PARTNER</div>
        <div className="bio-name">Austin Langlinais</div>
        <p>
          AI and data background at Nike. Plugs in on Basecamp projects where senior data architecture is the unlock: pipelines that survive real traffic, models that hold up under scrutiny, infrastructure that does not collapse at scale.
        </p>
        <p>
          Per-project engagement. On the work where it counts, on the call when it matters.
        </p>
      </div>
    </div>

    <div className="about-grid">
      <div className="about-card">
        <div className="eyebrow">WHAT WE BELIEVE</div>
        <h3>Three rules we don't break.</h3>
        <p>
          <strong>Proof beats promises.</strong> You see the thing work first.<br/>
          <strong>Outcomes beat outputs.</strong> Ten decks is not progress.<br/>
          <strong>Small beats sprawling.</strong> Ship one thing, run it, expand.
        </p>
      </div>
      <div className="about-card">
        <div className="eyebrow">HOW WE SHOW UP</div>
        <h3>Remote-first. Inside your stack early.</h3>
        <p>
          We work with clients anywhere, including overseas. No office tour, no onsite theater. Early in week one we are inside your stack, watching the real work, and shipping against it.
        </p>
      </div>
    </div>

    <div className="beliefs">
      <div className="beliefs-title">REPEAT AFTER US</div>
      <div className="beliefs-list">
        <div className="belief-line"><span className="t">Ship.</span> <span className="dim">Then</span> <span className="t">run.</span> <span className="dim">Then</span> <span className="t">own.</span></div>
        <div className="belief-line">In weeks, <span className="dim">not</span> quarters.</div>
        <div className="belief-line">On the work, <span className="dim">not</span> the seat.</div>
        <div className="belief-line">Assets, <span className="dim">not</span> dependencies.</div>
      </div>
    </div>

    <div className="final-cta" style={{ paddingTop: 40 }}>
      <h2>Start with <span className="t">one workflow.</span></h2>
      <button className="btn btn-primary btn-big" onClick={openBooking}>Book a 30-minute demo →</button>
    </div>
  </>
);

const Contact = () => {
  const [form, setForm] = React.useState({ name: '', email: '', company: '', message: '' });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [errorMsg, setErrorMsg] = React.useState('');
  const valid = form.name && form.email && form.company && form.message;
  const sent = status === 'sent';
  const sending = status === 'sending';

  const submit = async (e) => {
    e.preventDefault();
    if (!valid || sending) return;
    setStatus('sending');
    setErrorMsg('');
    try {
      const r = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!r.ok) {
        const data = await r.json().catch(() => ({}));
        throw new Error(data.error || `http_${r.status}`);
      }
      setStatus('sent');
    } catch (err) {
      setStatus('error');
      setErrorMsg("Something went wrong. Email hello@basecampdigital.ai directly and we'll reply same-day.");
    }
  };

  return (
    <>
      <div className="page-head">
        <div className="eyebrow">CONTACT</div>
        <h1>Tell us what<br/>you want to <span className="t">ship.</span></h1>
        <p className="lede">Four fields. One real answer the same day.</p>
      </div>

      <div className="contact-wrap">
        {sent ? (
          <div className="form">
            <div className="form-success">
              <div className="check">✓</div>
              <h3>On its way.</h3>
              <p>We'll reply the same day. Usually faster.<br/>Check <strong style={{ color: 'var(--teal)' }}>{form.email}</strong>.</p>
            </div>
          </div>
        ) : (
          <form className="form" onSubmit={submit}>
            <div className="field">
              <label>Name</label>
              <input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Jane Doe" />
            </div>
            <div className="field">
              <label>Email</label>
              <input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="jane@company.com" />
            </div>
            <div className="field">
              <label>Company</label>
              <input type="text" value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} placeholder="Acme Operations" />
            </div>
            <div className="field">
              <label>What you want to ship</label>
              <textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} placeholder="One workflow, a website, an agent system..."></textarea>
            </div>
            <button type="submit" className="btn btn-primary" disabled={!valid || sending}>
              {sending ? 'Sending…' : 'Get receipts →'}
            </button>
            {status === 'error' && (
              <div className="form-note" style={{ color: '#ff6b6b' }}>{errorMsg}</div>
            )}
            {status !== 'error' && (
              <div className="form-note">WE RESPOND THE SAME DAY. USUALLY FASTER.</div>
            )}
          </form>
        )}
      </div>
    </>
  );
};

Object.assign(window, { WhatWeDo, Work, About, Contact });