/* eslint-disable */
// Service Finder, rebuilt for the two-door structure.
// Retired with the Services overview page; kept here per decision D01 as a
// "not sure which door?" module on Contact. Two questions, one recommendation.

const FINDER_Q = [
  {
    id: "where",
    q: "Where are you up to with AI?",
    options: [
      { label: "We haven't really started", value: "start" },
      { label: "People are using it, but informally", value: "informal" },
      { label: "We're using it deliberately in places", value: "deliberate" },
    ],
  },
  {
    id: "need",
    q: "What would help most right now?",
    options: [
      { label: "Working out where AI is actually worth using", value: "value", door: "ai-foundations" },
      { label: "Getting controls and a policy in place", value: "controls", door: "ai-foundations" },
      { label: "Bringing our team up to speed", value: "literacy", door: "ai-foundations" },
      { label: "Building something specific we have in mind", value: "build", door: "accelerators" },
    ],
  },
];

const FINDER_RESULT = {
  "ai-foundations": {
    name: "AI Foundations",
    tone: "enable",
    body: "One engagement covering the three essentials: where AI adds value, the controls to keep it safe, and the literacy to make it stick. We start wherever suits your organisation.",
    route: "ai-foundations",
  },
  "accelerators": {
    name: "AI Accelerators",
    tone: "build",
    body: "Agents and AI tools designed and built for your organisation, looked after by us. We start by properly understanding the process, then scope it with a clear fixed price.",
    route: "accelerators",
  },
};

// Someone at the very beginning who wants something built still benefits from
// the groundwork, so the answer names both rather than pretending it is one.
function resolve(where, need) {
  if (need.door === "accelerators" && where === "start") return "both";
  return need.door;
}

function ServiceFinderV2({ go }) {
  const [step, setStep] = React.useState(0);
  const [where, setWhere] = React.useState(null);
  const [result, setResult] = React.useState(null);

  const reset = () => { setStep(0); setWhere(null); setResult(null); };
  const pick = (opt) => {
    if (step === 0) { setWhere(opt.value); setStep(1); return; }
    setResult(resolve(where, opt)); setStep(2);
  };

  const both = result === "both";
  const rec = both ? null : FINDER_RESULT[result];

  return (
    <div className="finder">
      <div className="finder-head">
        <Eyebrow>Not sure which door is yours?</Eyebrow>
        <p className="finder-lede">Two questions, and we'll point you at the one that fits.</p>
        <div className="finder-steps">
          {[0, 1, 2].map((i) => (
            <span key={i} className={`finder-pip${step >= i ? " is-on" : ""}`} />
          ))}
          {step > 0 && <button className="finder-reset" onClick={reset}>Start over</button>}
        </div>
      </div>

      {step < 2 && (
        <div className="finder-q">
          <p className="finder-qt">{FINDER_Q[step].q}</p>
          <div className="finder-opts">
            {FINDER_Q[step].options.map((o) => (
              <button key={o.value} className="finder-opt" onClick={() => pick(o)}>
                <span>{o.label}</span>
                <Icon name="arrow-right" size={14} className="arrow" />
              </button>
            ))}
          </div>
        </div>
      )}

      {step === 2 && (
        <div className="finder-res">
          {both ? (
            <React.Fragment>
              <span className="finder-res-k">Start with</span>
              <h3 className="finder-res-n" style={{ color: "var(--pl-enable-fg)" }}>AI Foundations</h3>
              <p className="finder-res-b">
                What you have in mind sounds like an accelerator, and it will be a better build with the
                groundwork done first. Most organisations find their accelerators through Foundations.
              </p>
              <div className="finder-res-cta">
                <Button variant="primary" onClick={() => go("ai-foundations")}>
                  AI Foundations <Icon name="arrow-right" size={14} className="arrow" />
                </Button>
                <LinkOut onClick={() => go("accelerators")}>Or see AI Accelerators</LinkOut>
              </div>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <span className="finder-res-k">Sounds like</span>
              <h3 className="finder-res-n" style={{ color: `var(--pl-${rec.tone}-fg)` }}>{rec.name}</h3>
              <p className="finder-res-b">{rec.body}</p>
              <div className="finder-res-cta">
                <Button variant="primary" onClick={() => go(rec.route)}>
                  {rec.name} <Icon name="arrow-right" size={14} className="arrow" />
                </Button>
                <LinkOut onClick={reset}>Start over</LinkOut>
              </div>
            </React.Fragment>
          )}
          <p className="finder-res-note">
            Not what you expected? That's a good thing to talk through, and the form below is the place
            to do it.
          </p>
        </div>
      )}
    </div>
  );
}

window.ServiceFinderV2 = ServiceFinderV2;