// Bespoke page
function BespokePage({ onNavigate }) {
  return (
    <div className="page">
      <section className="hero" style={{ paddingTop: 100, paddingBottom: 80 }}>
        <div className="aurora"><div className="blob"></div></div>
        <div className="aurora-grid"></div>
        <div className="container">
          <span className="eyebrow rise" data-d="1">Bespoke development</span>
          <h1 className="h-display rise" data-d="2" style={{ marginTop: 24, maxWidth: 1000 }}>
            You bring the idea.<br/><em style={{ fontFamily: "Instrument Serif, serif", fontWeight: 400 }}>We bring it to life.</em>
          </h1>
          <p className="lead rise" data-d="3" style={{ marginTop: 28, maxWidth: 640 }}>
            We don't write you a quote, then disappear for nine months. We build on the same platform we license — so the software is yours to extend, in-house, forever.
          </p>
          <div className="rise" data-d="4" style={{ marginTop: 40 }}>
            <button className="btn btn-primary" onClick={() => onNavigate("contact")}>Talk to us</button>
          </div>
        </div>
      </section>

      {/* Process */}
      <section style={{ paddingTop: 40 }}>
        <div className="container">
          <span className="eyebrow">How it works</span>
          <h2 className="h-large" style={{ marginTop: 16, marginBottom: 56, maxWidth: 700 }}>
            A four-step process. <span style={{ color: "var(--fg-faint)" }}>No surprises.</span>
          </h2>
          <div className="spec-list">
            {[
              ["Discovery", "We sit down (in person, if you're in the UK) and map your processes onto the platform's primitives. Free.", "Week 0–1"],
              ["Prototype", "Within two weeks you're clicking through a working version. Real datastores, real flows, real auth.", "Week 1–3"],
              ["Build & iterate", "Weekly demos. You watch the software take shape. Course-correct in days, not quarters.", "Week 3–10"],
              ["Handover", "Your team gets the keys. Full visual builder access. We're a Slack message away.", "Ongoing"],
            ].map(([k, v, when], i) => (
              <div key={k} className="row">
                <span className="num">{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <div className="h-small" style={{ marginBottom: 6 }}>{k}</div>
                  <div className="body" style={{ fontSize: 15 }}>{v}</div>
                </div>
                <span className="mono" style={{ color: "var(--fg-faint)" }}>{when}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What you get */}
      <section style={{ background: "var(--bg-sunken)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <span className="eyebrow">What you get</span>
          <h2 className="h-large" style={{ marginTop: 16, marginBottom: 48, maxWidth: 700 }}>
            Software, not a bill of materials.
          </h2>
          <div className="grid-3">
            {[
              { t: "Production-ready software", d: "Hosted on UK infrastructure with SLAs. Or hand it to your team to host." },
              { t: "Source ownership", d: "The platform is licensed, the application is yours. No lock-in." },
              { t: "Direct line to engineers", d: "Real humans on Slack. No tier-1 tickets. No outsourced support desks." },
              { t: "Visual edit access", d: "Your team can change forms, fields, reports — without involving us." },
              { t: "Continuous updates", d: "Platform features ship monthly. You inherit them automatically." },
              { t: "Compliance baked-in", d: "GDPR, audit trails, role-based access, encryption — out of the box." },
            ].map(({ t, d }) => (
              <div key={t} className="card">
                <h3 className="h-small" style={{ marginBottom: 8 }}>{t}</h3>
                <p className="body" style={{ fontSize: 14 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Engagements (no prices) */}
      <section>
        <div className="container">
          <span className="eyebrow">Engagements</span>
          <h2 className="h-large" style={{ marginTop: 16, marginBottom: 48 }}>Three ways to work together.</h2>
          <div className="grid-3">
            <Engagement
              name="Pilot"
              tag="Single application"
              bullets={["2–4 weeks", "One core flow", "Goes live as a pilot", "Includes 1 month support"]}
              onNavigate={onNavigate}
            />
            <Engagement
              name="Build"
              tag="Production app"
              accent
              bullets={["6–12 weeks", "Multi-flow application", "Full handover", "3 months support"]}
              onNavigate={onNavigate}
            />
            <Engagement
              name="Partner"
              tag="Ongoing programme"
              bullets={["Multiple apps", "Embedded engineers", "Training included", "Annual roadmap"]}
              onNavigate={onNavigate}
            />
          </div>
          <p className="body" style={{ marginTop: 32, fontSize: 14, color: "var(--fg-faint)", textAlign: "center" }}>
            We scope each engagement individually. Discovery is free; we'll come back with a fixed-price proposal you can take or leave.
          </p>
        </div>
      </section>

      {/* CTA */}
      <section className="section-dark">
        <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 48, flexWrap: "wrap" }}>
          <div>
            <h2 className="h-large" style={{ maxWidth: 600, marginBottom: 16 }}>Got a brief, an itch, or just an idea on a napkin?</h2>
            <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 17, maxWidth: 500 }}>
              We'll have a proper conversation, not a sales call. Free, no obligation.
            </p>
          </div>
          <button className="btn btn-accent" onClick={() => onNavigate("contact")}>Start a conversation →</button>
        </div>
      </section>
    </div>
  );
}

function Engagement({ name, tag, bullets, accent, onNavigate }) {
  return (
    <div style={{
      border: "1px solid var(--line)",
      background: accent ? "var(--fg)" : "var(--bg-elev)",
      color: accent ? "var(--bg)" : "var(--fg)",
      borderRadius: 16,
      padding: 32,
      position: "relative",
      display: "flex",
      flexDirection: "column",
    }}>
      {accent && <span className="chip-accent chip" style={{ position: "absolute", top: 20, right: 20 }}>Most popular</span>}
      <div className="mono" style={{ color: accent ? "color-mix(in srgb, var(--bg) 60%, transparent)" : "var(--fg-faint)", marginBottom: 8 }}>{tag}</div>
      <h3 style={{ fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 500, letterSpacing: "-0.025em", marginBottom: 28 }}>{name}</h3>
      <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10, marginBottom: 28, flex: 1 }}>
        {bullets.map(b => (
          <li key={b} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14, color: accent ? "color-mix(in srgb, var(--bg) 85%, transparent)" : "var(--fg-muted)" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ color: accent ? "var(--accent)" : "var(--fg)", flexShrink: 0 }}><path d="M5 13l4 4L19 7"/></svg>
            {b}
          </li>
        ))}
      </ul>
      <button
        className="btn"
        style={{
          background: accent ? "var(--accent)" : "var(--fg)",
          color: accent ? "var(--accent-ink)" : "var(--bg)",
          justifyContent: "center",
        }}
        onClick={() => onNavigate("contact")}
      >Get in touch</button>
    </div>
  );
}

Object.assign(window, { BespokePage });