/* Stack recommender — a short, honest quiz that maps a project's shape
   to the technologies catalogue. Used on technologies.html. */

const REC_QUESTIONS = [
  {
    id: "building",
    label: "What are you building?",
    options: [
      { v: "mobile", t: "A mobile app" },
      { v: "web", t: "A web app" },
      { v: "both", t: "Both — one product" },
      { v: "platform", t: "An API / platform" },
    ],
  },
  {
    id: "team",
    label: "Who's writing the code today?",
    options: [
      { v: "react", t: "A team that knows React / JS" },
      { v: "other", t: "Engineers, other stacks" },
      { v: "none", t: "No team yet — that's you" },
    ],
  },
  {
    id: "ai",
    label: "How central is AI to the product?",
    options: [
      { v: "core", t: "It is the product" },
      { v: "some", t: "A few smart features" },
      { v: "none", t: "Not yet" },
    ],
  },
  {
    id: "data",
    label: "Any rules about where data lives?",
    options: [
      { v: "free", t: "No constraints" },
      { v: "private", t: "Must stay in our infrastructure" },
      { v: "eu", t: "EU residency required" },
    ],
  },
  {
    id: "speed",
    label: "What wins: speed or scale?",
    options: [
      { v: "mvp", t: "MVP yesterday" },
      { v: "scale", t: "Built to scale from day one" },
    ],
  },
];

function recommendStack(a) {
  const picks = [];
  const add = (slug, why) => {
    if (!picks.some((p) => p.slug === slug)) picks.push({ slug, why });
  };

  // Front of the stack
  if (a.building === "mobile" || a.building === "both") {
    if (a.team === "react") add("react-native", "Your team's React carries straight into mobile — no retraining, shared logic.");
    else add("flutter", "One codebase, native polish on both platforms — the best economics for a new mobile product.");
  }
  if (a.building === "web" || a.building === "both") {
    add("nextjs", "Server-rendered React: fast first loads, SEO that works, and room to grow into a full product.");
  }

  // Back of the stack
  if (a.building === "platform") {
    add("nodejs", "TypeScript end-to-end — the API speaks the same language as every client you'll add later.");
    add("postgres", "Relational integrity plus JSON, search and vectors — one boring system instead of four.");
  } else if (a.speed === "mvp" && a.data === "free") {
    add("firebase", "Auth, sync and push in days. Ship, learn, and graduate the hot paths to Postgres when traction demands it.");
  } else {
    add("nodejs", "One TypeScript brain across client and server keeps a small team fast.");
    add("postgres", "The safe, compounding choice — correctness now, scale later.");
  }

  // AI layer
  if (a.ai !== "none") {
    if (a.data === "private") add("deepseek", "Frontier-class reasoning on your own GPUs — no token leaves your VPC.");
    else if (a.data === "eu") add("mistral", "EU jurisdiction native, with efficiency that keeps the bill honest.");
    else add("claude", "Our default for reliable reasoning and agentic features — fewest surprises per thousand requests.");
  }

  return picks;
}

function StackRecommender() {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const done = step >= REC_QUESTIONS.length;
  const q = REC_QUESTIONS[step];

  const choose = (v) => {
    setAnswers((prev) => ({ ...prev, [q.id]: v }));
    setStep((s) => s + 1);
  };
  const restart = () => { setAnswers({}); setStep(0); };

  const picks = done ? recommendStack(answers) : [];
  const techs = (window.TECHS || []);

  return (
    <div className="stack-rec" data-comment-anchor="stack-recommender">
      {!done ? (
        <>
          <div className="stack-rec__meta">
            <span className="stack-rec__count">{`Question ${step + 1} of ${REC_QUESTIONS.length}`}</span>
            <span className="stack-rec__dots" aria-hidden="true">
              {REC_QUESTIONS.map((_, i) => (
                <span key={i} className={`stack-rec__dot ${i < step ? "is-done" : ""} ${i === step ? "is-now" : ""}`}></span>
              ))}
            </span>
          </div>
          <h3 className="stack-rec__q">{q.label}</h3>
          <div className="stack-rec__options">
            {q.options.map((o) => (
              <button key={o.v} className="stack-rec__option" onClick={() => choose(o.v)}>
                {o.t}
              </button>
            ))}
          </div>
          {step > 0 && (
            <button className="stack-rec__back" onClick={() => setStep((s) => s - 1)}>
              ← Back
            </button>
          )}
        </>
      ) : (
        <>
          <div className="stack-rec__meta">
            <span className="stack-rec__count">Our sketch</span>
          </div>
          <h3 className="stack-rec__q">We'd start the conversation here.</h3>
          <div className="stack-rec__result">
            {picks.map((p) => {
              const t = techs.find((x) => x.slug === p.slug);
              if (!t) return null;
              return (
                <a key={p.slug} href={`technology.html?slug=${p.slug}`} className="stack-rec__pick" data-cursor="Why?">
                  <TechTile tech={t} size={52} />
                  <div>
                    <div className="stack-rec__pick-name">{t.name}</div>
                    <p className="stack-rec__pick-why">{p.why}</p>
                  </div>
                </a>
              );
            })}
          </div>
          <p className="stack-rec__caveat">
            A real recommendation takes a conversation — this is the honest sketch, not the contract.
          </p>
          <div className="stack-rec__ctas">
            <a href="contact.html" className="btn btn--primary">Pressure-test it with us <Arrow /></a>
            <button className="btn btn--secondary" onClick={restart}>Start over</button>
          </div>
        </>
      )}
    </div>
  );
}

window.StackRecommender = StackRecommender;