// Pricing & fit — engagement model, ROI calculator, when-to-choose comparison
const { useState: useStateP } = React;

function PricingPage({ onNavigate }) {
  return (
    <div className="page">
      <section className="hero" style={{ paddingTop: 100, paddingBottom: 56 }}>
        <div className="aurora"><div className="blob"></div></div>
        <div className="aurora-grid"></div>
        <div className="container">
          <span className="eyebrow rise" data-d="1">Pricing &amp; fit</span>
          <h1 className="h-display rise" data-d="2" style={{ marginTop: 24, maxWidth: 1000 }}>
            No mystery pricing.<br/><em style={{ fontFamily: "Instrument Serif, serif", fontWeight: 400 }} className="grad-text">No sales theatre.</em>
          </h1>
          <p className="lead rise" data-d="3" style={{ marginTop: 28, maxWidth: 620 }}>
            You get a fixed-scope implementation and an annual platform licence. Here's how the numbers work, and how to tell whether we're the right answer for you at all.
          </p>
        </div>
      </section>

      {/* Engagement model */}
      <section style={{ paddingTop: 40 }}>
        <div className="container">
          <div style={{ maxWidth: 720, marginBottom: 44 }}>
            <span className="eyebrow">How you buy</span>
            <h2 className="h-large" style={{ marginTop: 16 }}>Four stages. Priced separately.</h2>
            <p className="lead" style={{ marginTop: 14 }}>
              You can stop after any one of them. Discovery costs you nothing, and the specification it produces is yours to take elsewhere if you'd rather.
            </p>
          </div>
          <div className="pr-stages">
            {[
              { n: "01", t: "Discovery", p: "Free", d: "We map your process, agree the scope and write it down — at no charge. You leave with a specification, a fixed implementation price and a delivery date, whether or not you continue with us.", out: ["Process map", "Written specification", "Fixed price + date"] },
              { n: "02", t: "Implementation", p: "Fixed price", d: "We build and deploy the agreed scope. No hourly billing, no change-request games — the scope was agreed in discovery and the price doesn't move unless you move the scope.", out: ["Working application", "Data migrated", "Users trained"] },
              { n: "03", t: "Platform licence", p: "Annual", d: "Your application runs on ActiveManage. The licence covers hosting on UK-sovereign infrastructure, backups, monitoring, security patching and every platform release we ship.", out: ["Hosting + backups", "All platform updates", "Uptime monitoring"] },
              { n: "04", t: "Ongoing support", p: "Annual or ad-hoc", d: "Change requests, new features and bug reports raised through the ITSM built into your app. Either a support agreement with agreed response times, or pay-as-you-go.", out: ["In-app request logging", "Agreed response times", "Direct to engineers"] },
            ].map(s => (
              <div key={s.n} className="pr-stage">
                <div className="pr-stage-head">
                  <span className="pr-num">{s.n}</span>
                  <div>
                    <h3>{s.t}</h3>
                    <span className="pr-price">{s.p}</span>
                  </div>
                </div>
                <p>{s.d}</p>
                <ul>
                  {s.out.map(o => (
                    <li key={o}>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg>
                      {o}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <p className="pr-note">
            We don't publish a rate card because scope genuinely varies — a spreadsheet replacement and a multi-tenant SaaS product aren't the same purchase. Discovery is where the number becomes real, and it's free.
          </p>
        </div>
      </section>

      <RoiCalculator onNavigate={onNavigate} />
      <FitSection onNavigate={onNavigate} />
      <DesignPartner onNavigate={onNavigate} />
    </div>
  );
}

/* ---------------------------------------------------------------------------
   ROI calculator — honest arithmetic, no inflated multipliers
   --------------------------------------------------------------------------- */

function RoiCalculator() {
  const [people, setPeople] = useStateP(8);
  const [hours, setHours] = useStateP(5);
  const [rate, setRate] = useStateP(28);
  const [saving, setSaving] = useStateP(60);

  const weeklyHours = people * hours;
  const savedHours = weeklyHours * (saving / 100);
  const weeklyCost = savedHours * rate;
  const annual = Math.round(weeklyCost * 46);          // 46 working weeks
  const annualDays = Math.round((savedHours * 46) / 7.5);

  const fmt = (n) => "£" + n.toLocaleString("en-GB");

  return (
    <section className="pr-roi">
      <div className="container">
        <div className="pr-roi-grid">
          <div>
            <span className="eyebrow">Worth doing?</span>
            <h2 className="h-large" style={{ marginTop: 16 }}>The arithmetic, before the sales call.</h2>
            <p className="lead" style={{ marginTop: 14, marginBottom: 32 }}>
              Most systems we replace waste people's time rather than money directly. Put your own numbers in — it costs nothing and you may conclude you don't need us.
            </p>

            <div className="pr-slider">
              <label>
                <span>People doing this work</span>
                <strong>{people}</strong>
              </label>
              <input type="range" min="1" max="60" value={people} onChange={(e) => setPeople(+e.target.value)} />
            </div>
            <div className="pr-slider">
              <label>
                <span>Hours each, per week</span>
                <strong>{hours}</strong>
              </label>
              <input type="range" min="1" max="30" value={hours} onChange={(e) => setHours(+e.target.value)} />
            </div>
            <div className="pr-slider">
              <label>
                <span>Average cost per hour</span>
                <strong>£{rate}</strong>
              </label>
              <input type="range" min="12" max="90" value={rate} onChange={(e) => setRate(+e.target.value)} />
            </div>
            <div className="pr-slider">
              <label>
                <span>Realistic time saved</span>
                <strong>{saving}%</strong>
              </label>
              <input type="range" min="10" max="90" step="5" value={saving} onChange={(e) => setSaving(+e.target.value)} />
            </div>
          </div>

          <div className="pr-roi-out">
            <div className="pr-roi-big">
              <span className="pr-roi-label">Recovered per year</span>
              <strong>{fmt(annual)}</strong>
              <span className="pr-roi-sub">≈ {annualDays.toLocaleString("en-GB")} working days returned to the team</span>
            </div>
            <div className="pr-roi-rows">
              {[
                ["Hours spent now", weeklyHours.toLocaleString("en-GB") + " / week"],
                ["Hours recovered", Math.round(savedHours).toLocaleString("en-GB") + " / week"],
                ["Value recovered", fmt(Math.round(weeklyCost)) + " / week"],
              ].map(([k, v]) => (
                <div key={k}>
                  <span>{k}</span>
                  <strong>{v}</strong>
                </div>
              ))}
            </div>
            <p className="pr-roi-note">
              Based on 46 working weeks and 7.5-hour days. This counts recovered time only — it ignores error reduction, faster customer response and the cost of the risk you're carrying today, because those are harder to defend in a business case.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------------------
   When to choose us — and when not to
   --------------------------------------------------------------------------- */

const FIT_ROWS = [
  ["Regulated data, audit and permissions matter", "yes", "part", "no"],
  ["Needs to be live in weeks, not quarters", "yes", "part", "no"],
  ["Complex multi-stage workflow and approvals", "yes", "part", "yes"],
  ["Must run under your own brand and domain", "yes", "part", "yes"],
  ["You want to edit it yourself afterwards", "yes", "yes", "no"],
  ["Per-user licensing gets expensive at scale", "no", "yes", "no"],
  ["Consumer-scale app with millions of users", "no", "no", "yes"],
];

function FitSection({ onNavigate }) {
  const cell = (v) => {
    if (v === "yes") return <span className="fit-y" title="Strong fit"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg></span>;
    if (v === "part") return <span className="fit-p" title="Partial">–</span>;
    return <span className="fit-n" title="Poor fit"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M6 6l12 12M18 6L6 18"/></svg></span>;
  };
  return (
    <section className="pr-fit">
      <div className="container">
        <div style={{ maxWidth: 740, marginBottom: 40 }}>
          <span className="eyebrow">Honest comparison</span>
          <h2 className="h-large" style={{ marginTop: 16 }}>When we're the right answer — and when we aren't.</h2>
          <p className="lead" style={{ marginTop: 14 }}>
            We lose deals we should lose. If we're not the right fit for what you're doing, we'll tell you on the first call rather than the third.
          </p>
        </div>
        <div className="fit-table">
          <div className="fit-row fit-head">
            <div></div>
            <div><strong>ActiveManage</strong></div>
            <div>Generic low-code</div>
            <div>Custom development</div>
          </div>
          {FIT_ROWS.map(r => (
            <div className="fit-row" key={r[0]}>
              <div className="fit-label">{r[0]}</div>
              <div className="fit-us">{cell(r[1])}</div>
              <div>{cell(r[2])}</div>
              <div>{cell(r[3])}</div>
            </div>
          ))}
        </div>
        <p className="pr-note">
          Generic low-code platforms are strong tools — they tend to bill per user, keep your application inside their runtime, and get expensive once a system becomes genuinely core. Custom development gives total freedom and takes the longest. We sit deliberately between the two.
        </p>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------------------
   Founding customer / design partner programme
   --------------------------------------------------------------------------- */

function DesignPartner({ onNavigate }) {
  return (
    <section className="pr-dp">
      <div className="container">
        <div className="pr-dp-inner">
          <div>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,0.55)" }}>Founding customers</span>
            <h2 className="h-large" style={{ marginTop: 16, color: "#fff" }}>
              We're taking five.
            </h2>
            <p style={{ color: "rgba(230,236,255,0.65)", fontSize: 17, lineHeight: 1.6, marginTop: 16, maxWidth: 520, textWrap: "pretty" }}>
              We're deliberately choosing a handful of organisations to build alongside this year — regulated UK operations replacing a process that's genuinely holding them back. Preferential pricing, direct access to the people building it, and real influence over where the platform goes next.
            </p>
            <button className="btn btn-primary" style={{ marginTop: 28 }} onClick={() => onNavigate && onNavigate("contact")}>
              Apply to be one
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
          </div>
          <div className="pr-dp-list">
            {[
              ["Founding-customer pricing", "Materially below list, held for the life of the agreement."],
              ["Direct line to the founder", "Not an account manager. The person who makes the decisions."],
              ["A defined outcome", "One agreed process, live and in use — not an open-ended project."],
              ["Influence on the roadmap", "Your edge cases become platform features."],
              ["What we ask in return", "Structured feedback, and permission to publish a case study once you're happy with it."],
            ].map(([t, d]) => (
              <div key={t} className="pr-dp-item">
                <strong>{t}</strong>
                <span>{d}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PricingPage });