// rest.jsx — ROI calculator, About, Contact, Footer, Nav, Stats

function Nav() {
  return (
    <nav className="nav">
      <a href="#" className="logo">
        <img src="/logo.png" alt="" className="mark" width="32" height="32" />
        <span>Axel<span style={{ color: "var(--fg-3)" }}> AI</span></span>
      </a>
      <div className="nav-links">
        <a href="#services">Services</a>
        <a href="#process">Process</a>
        <a href="#roi">Calculator</a>
        <a href="#about">About</a>
      </div>
      <div className="right">
        <a href="#contact" className="btn" style={{ height: 36, fontSize: 12 }}>
          Book call <span className="arrow">→</span>
        </a>
      </div>
    </nav>
  );
}

function StatsStrip() {
  return (
    <div className="stats">
      <div className="stat">
        <div className="v">25<sup>+</sup></div>
        <div className="l">Workflows in production</div>
      </div>
      <div className="stat">
        <div className="v">820</div>
        <div className="l">Hours saved / month</div>
      </div>
      <div className="stat">
        <div className="v">28d</div>
        <div className="l">Median time-to-deploy</div>
      </div>
      <div className="stat">
        <div className="v">100%</div>
        <div className="l">Code owned by clients</div>
      </div>
    </div>
  );
}

// ── ROI ──────────────────────────────────────────────────────────
function ROI() {
  const [hours, setHours] = React.useState(12);
  const [people, setPeople] = React.useState(4);
  const [rate, setRate] = React.useState(75);
  const [scope, setScope] = React.useState(0.7);

  const weeklySaved = hours * people * scope;
  const annualSaved = weeklySaved * 50;
  const dollarsSaved = annualSaved * rate;

  const fmt = (n) => "$" + Math.round(n).toLocaleString();
  const fmtH = (n) => Math.round(n).toLocaleString();

  return (
    <section className="section" id="roi" data-screen-label="05 Calculator">
      <div className="roi">
        <div className="roi-left">
          <h2 className="h-mono">
            See what <span className="accent">your hours</span> are worth.
          </h2>
          <p className="lede">
            Move the sliders to match your situation. Conservative automation
            rates only. We'll model your specific case in week one and write
            the assumptions down where you can argue with them.
          </p>

          <div className="roi-control">
            <div className="row">
              <span>Hours per week on the workflow</span>
              <span className="v">{hours}h</span>
            </div>
            <input type="range" min="2" max="40" value={hours} onChange={(e) => setHours(+e.target.value)} />
          </div>
          <div className="roi-control">
            <div className="row">
              <span>People doing it</span>
              <span className="v">{people}</span>
            </div>
            <input type="range" min="1" max="20" value={people} onChange={(e) => setPeople(+e.target.value)} />
          </div>
          <div className="roi-control">
            <div className="row">
              <span>Loaded hourly rate</span>
              <span className="v">${rate}/h</span>
            </div>
            <input type="range" min="35" max="200" step="5" value={rate} onChange={(e) => setRate(+e.target.value)} />
          </div>
          <div className="roi-control">
            <div className="row">
              <span>% Axel can automate</span>
              <span className="v">{Math.round(scope * 100)}%</span>
            </div>
            <input type="range" min="30" max="95" value={scope * 100} onChange={(e) => setScope(+e.target.value / 100)} />
          </div>
        </div>

        <div className="roi-right">
          <div className="roi-display">
            <div className="lbl">Annual labor reclaimed</div>
            <div className="big">
              <span className="accent">{fmt(dollarsSaved)}</span>
            </div>
            <div className="sub">
              ≈ {fmtH(annualSaved)} hours back to your team / year
            </div>
          </div>

          <div className="roi-grid">
            <div>
              <div className="v">{fmtH(weeklySaved)}<span style={{ fontSize: 14, color: "var(--fg-3)", marginLeft: 4 }}>h/wk</span></div>
              <div className="l">Hours back weekly</div>
            </div>
            <div>
              <div className="v" style={{ color: "var(--accent)" }}>{fmtH(weeklySaved * 4)}<span style={{ fontSize: 14, color: "var(--fg-3)", marginLeft: 4 }}>h/mo</span></div>
              <div className="l">Hours back monthly</div>
            </div>
          </div>

          <div style={{ fontSize: 11, color: "var(--fg-4)", lineHeight: 1.6, paddingTop: 8, borderTop: "1px dashed var(--line)" }}>
            Estimate based on conservative automation rates. Real outcomes vary.
            We'll model your specific case in week one.
          </div>
        </div>
      </div>
    </section>
  );
}

// ── About ────────────────────────────────────────────────────────
const PRINCIPLES = [
  { n: "01", t: "You talk to the engineer.", s: "No account managers, no sales layer. The person scoping the work is the person writing the code." },
  { n: "02", t: "You own everything.", s: "Code in your repo, configs on your accounts, infra you control. I'm not building a moat around you." },
  { n: "03", t: "Boring tech where it works.", s: "AI where reasoning matters, plain code where it doesn't. Your token bill should reflect that." },
  { n: "04", t: "Honest scope.", s: "If a workflow shouldn't be automated, I'll tell you. I'd rather lose the build than ship something brittle." },
  { n: "05", t: "Demo every seven days.", s: "No big reveals. You see the work as it's made, in your own slack, every week." },
];

function About() {
  return (
    <section className="section" id="about" data-screen-label="06 About">
      <div className="about">
        <div className="about-left">
          <h2 className="h-display" style={{ fontSize: "clamp(40px, 5.2vw, 72px)" }}>
            One engineer.<br /><em>Direct line.</em><br />No middle layer.
          </h2>
          <p className="lede">
            Axel is a one-person studio. You'll work directly with the founder —
            the same person who writes the code, owns the deadlines, and replies
            to your slack at 9pm if something is on fire. I take a small handful
            of clients at a time. That's it.
          </p>

          <div className="principles">
            {PRINCIPLES.map(p => (
              <div className="principle" key={p.n}>
                <div className="n">{p.n}</div>
                <div className="t">
                  <b>{p.t}</b>
                  <span>{p.s}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="about-right">
          <div className="card" style={{ padding: 24 }}>
            <div className="tag">Engagement model</div>
            <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 14 }}>
              <Row k="Discovery" v="1 week · low commitment" />
              <Row k="First build" v="4 weeks · fixed scope" />
              <Row k="Retainer (optional)" v="Monthly · cancel anytime" />
            </div>
          </div>

          <div className="card" style={{ padding: 24 }}>
            <div className="tag">Stack we're fluent in</div>
            <div style={{ marginTop: 14, display: "flex", gap: 6, flexWrap: "wrap" }}>
              {["Python", "TypeScript", "Postgres", "Snowflake", "Modal", "Temporal", "Slack", "Linear", "Notion", "Zendesk", "Salesforce", "Hubspot", "Quickbooks", "Stripe"].map(s => (
                <span key={s} className="chip">{s}</span>
              ))}
            </div>
          </div>

          <div className="card" style={{ padding: 24 }}>
            <div className="tag">Currently shipping</div>
            <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 10, fontSize: 13 }}>
              <ShipLine status="live" t="Vendor risk pipeline — fintech" />
              <ShipLine status="build" t="Underwriting copilot — insurance broker" />
              <ShipLine status="design" t="Inventory forecaster — e-commerce" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Row({ k, v }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16, paddingBottom: 12, borderBottom: "1px dashed var(--line)" }}>
      <span style={{ color: "var(--fg-3)", fontSize: 12 }}>{k}</span>
      <span style={{ color: "var(--fg)", fontSize: 13 }}>{v}</span>
    </div>
  );
}

function ShipLine({ status, t }) {
  const colors = { live: "var(--accent)", build: "var(--warn)", design: "var(--fg-3)" };
  const labels = { live: "live", build: "build", design: "design" };
  return (
    <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
      <span style={{
        fontSize: 10, padding: "2px 6px",
        border: "1px solid", borderColor: colors[status],
        color: colors[status], textTransform: "uppercase", letterSpacing: "0.06em",
        fontWeight: 500, minWidth: 52, textAlign: "center",
      }}>
        {labels[status]}
      </span>
      <span style={{ color: "var(--fg-2)" }}>{t}</span>
    </div>
  );
}

// ── Contact ──────────────────────────────────────────────────────
function Contact() {
  const [submitted, setSubmitted] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSubmitted(true); };

  return (
    <section className="section" id="contact" data-screen-label="07 Contact">
      <div className="contact">
        <div className="contact-left">
          <div>
            <h2 className="h-display" style={{ fontSize: "clamp(40px, 5vw, 72px)" }}>
              Tell me about<br />the work you'd<br />rather not be doing.
            </h2>
            <p className="lede" style={{ marginTop: 28 }}>
              A short message is enough. I'll reply within a day with a calendar
              link and a couple of questions. You'll be talking to me directly —
              no sales call, no qualification gauntlet.
            </p>
          </div>

          <div className="contact-meta">
            <div>
              <div className="dim">Email</div>
              <div>hello@axel.ai</div>
            </div>
            <div>
              <div className="dim">Calendar</div>
              <div>cal.com/axel-ai/discovery</div>
            </div>
            <div>
              <div className="dim">Reply window</div>
              <div>Within 24h, M–F</div>
            </div>
          </div>
        </div>

        {!submitted ? (
          <form className="contact-form" onSubmit={submit}>
            <div className="field-row">
              <div className="field">
                <label>Your name</label>
                <input type="text" placeholder="Sam" required />
              </div>
              <div className="field">
                <label>Company</label>
                <input type="text" placeholder="Acme Co" />
              </div>
            </div>

            <div className="field">
              <label>Email</label>
              <input type="email" placeholder="sam@acme.co" required />
            </div>

            <div className="field">
              <label>What's the situation?</label>
              <textarea
                rows="6"
                placeholder="A few sentences is plenty. The workflow that's eating the most hours, what you've tried, what an ideal outcome looks like."
                required
              />
            </div>

            <div className="contact-submit">
              <button type="submit" className="btn btn-primary">
                Send message <span className="arrow">→</span>
              </button>
              <span className="contact-fineprint">
                Replies in 24h. No automated drip. No sales person.
              </span>
            </div>
          </form>
        ) : (
          <div className="contact-form contact-thanks">
            <div className="thanks-mark">✓</div>
            <h3 className="h-mono" style={{ fontSize: 28 }}>Got it.</h3>
            <p className="lede" style={{ marginTop: 16, textAlign: "center", maxWidth: 420 }}>
              I'll be in touch within 24 hours with a calendar link and a couple
              of follow-up questions.
            </p>
          </div>
        )}
      </div>
    </section>
  );
}

// ── Footer ───────────────────────────────────────────────────────
function Footer() {
  return (
    <div className="footer">
      <div className="left">
        <span>© 2026 Axel AI Studio</span>
      </div>
      <div className="right">
        <a href="#">Privacy</a>
        <a href="#">Security</a>
        <a href="#">careers@axel.ai</a>
      </div>
    </div>
  );
}

window.Nav = Nav;
window.StatsStrip = StatsStrip;
window.ROI = ROI;
window.About = About;
window.Contact = Contact;
window.Footer = Footer;