import React, { useState, useEffect, useMemo, useRef } from "react";

// ============================================================
// floy — Pricing calculator (English) · detailed, per-niche
// Setup: the person sets the price of EVERY factor of their business once
//   (base fee, price per bedroom/bathroom, each add-on, each service...).
// Quote: they answer the specific questions of the job (how many bedrooms,
//   deep clean or not, clean the oven?, distance, deadline...) and the price
//   builds itself. Every niche has its own detailed questions.
// Look: pure black, Poppins, wine #9C2E32, gold #C9A24B on the price.
// ============================================================

const WINE = "#9C2E32";
const GOLD = "#C9A24B";
const CREAM = "#F4EDE2";

// Factor types: service (pick one, has base price) · base (flat fee) ·
// count (priced per unit, ask how many) · choice (single-select multiplier) ·
// addon (toggle + qty, priced each).
const NICHES = {
  cleaning: {
    label: "Cleaning", travel: true, prep: false,
    factors: [
      { type: "base", key: "trip", label: "Base visit fee", price: 40 },
      { type: "count", key: "bed", label: "Bedrooms", unit: "bedroom", price: 25 },
      { type: "count", key: "bath", label: "Bathrooms", unit: "bathroom", price: 35 },
      { type: "count", key: "kitchen", label: "Kitchens", unit: "kitchen", price: 40 },
      { type: "count", key: "other", label: "Other rooms (living, office, hall)", unit: "room", price: 20 },
      { type: "choice", key: "type", label: "Type of cleaning", options: [
        { label: "Standard", mult: 1 }, { label: "Deep clean", mult: 1.5 }, { label: "Move-in / move-out", mult: 2 } ] },
      { type: "addon", key: "oven", label: "Inside oven / stove", price: 30 },
      { type: "addon", key: "fridge", label: "Inside fridge", price: 25 },
      { type: "addon", key: "windows", label: "Interior windows", price: 40 },
      { type: "addon", key: "cabinets", label: "Inside cabinets", price: 30 },
      { type: "addon", key: "baseboards", label: "Baseboards", price: 25 },
      { type: "addon", key: "laundry", label: "Laundry (wash & fold)", price: 20 },
    ],
  },
  organization: {
    label: "Personal organizer", travel: true, prep: false,
    factors: [
      { type: "base", key: "consult", label: "Consultation / plan fee", price: 50 },
      { type: "count", key: "closet", label: "Closets / wardrobes", unit: "closet", price: 120 },
      { type: "count", key: "room", label: "Full rooms", unit: "room", price: 150 },
      { type: "count", key: "pantry", label: "Kitchen / pantry", unit: "space", price: 200 },
      { type: "count", key: "garage", label: "Garage", unit: "garage", price: 250 },
      { type: "choice", key: "level", label: "Level of work", options: [
        { label: "Declutter only", mult: 1 }, { label: "Organize + systems", mult: 1.4 }, { label: "Full makeover", mult: 1.8 } ] },
      { type: "addon", key: "shopping", label: "Product sourcing / shopping", price: 60 },
      { type: "addon", key: "haul", label: "Donation haul-away", price: 40 },
      { type: "addon", key: "labels", label: "Labeling system", price: 30 },
      { type: "addon", key: "maint", label: "Follow-up maintenance visit", price: 50 },
    ],
  },
  photography: {
    label: "Photography", travel: true, prep: true, prepLabel: "Editing hours",
    factors: [
      { type: "service", key: "svc", label: "Session", options: [
        { key: "mini", label: "Mini session (up to 30 min)", unit: "session", price: 200 },
        { key: "std", label: "Standard session (1 hour)", unit: "session", price: 350 },
        { key: "event", label: "Event coverage (per hour)", unit: "hour", price: 200 } ] },
      { type: "count", key: "extraPhotos", label: "Extra edited photos", unit: "photo", price: 15 },
      { type: "count", key: "people", label: "Additional people", unit: "person", price: 25 },
      { type: "choice", key: "usage", label: "Usage rights", options: [
        { label: "Personal", mult: 1 }, { label: "Commercial", mult: 1.5 }, { label: "Full buyout", mult: 2 } ] },
      { type: "addon", key: "loc2", label: "Second location", price: 75 },
      { type: "addon", key: "rush", label: "Rush 48h delivery", price: 100 },
      { type: "addon", key: "hmu", label: "Hair / makeup coordination", price: 50 },
      { type: "addon", key: "prints", label: "Prints package", price: 60 },
    ],
  },
  content: {
    label: "Content & video", travel: true, prep: true, prepLabel: "Filming + editing hours",
    factors: [
      { type: "service", key: "svc", label: "What you're delivering", options: [
        { key: "reels", label: "Reels package (per month)", unit: "package", price: 850 },
        { key: "video", label: "Produced video (each)", unit: "video", price: 250 },
        { key: "day", label: "Filming day", unit: "day", price: 250 } ] },
      { type: "count", key: "extraVideos", label: "Extra edited videos", unit: "video", price: 150 },
      { type: "count", key: "extraHours", label: "Extra filming hours", unit: "hour", price: 100 },
      { type: "choice", key: "level", label: "Production level", options: [
        { label: "Simple", mult: 1 }, { label: "Standard", mult: 1.3 }, { label: "Cinematic", mult: 1.8 } ] },
      { type: "choice", key: "usage", label: "Usage", options: [
        { label: "Organic / social", mult: 1 }, { label: "Paid ads", mult: 1.3 }, { label: "Full commercial", mult: 1.6 } ] },
      { type: "addon", key: "photos", label: "Photo add-on (10 photos)", price: 250 },
      { type: "addon", key: "captions", label: "Captions / voiceover", price: 50 },
      { type: "addon", key: "revision", label: "Extra revision round", price: 75 },
    ],
  },
  beauty: {
    label: "Beauty (nails, makeup, hair)", travel: true, prep: false,
    factors: [
      { type: "service", key: "svc", label: "Service", options: [
        { key: "mani", label: "Manicure", unit: "client", price: 40 },
        { key: "nails", label: "Gel / nail design", unit: "client", price: 60 },
        { key: "makeup", label: "Makeup", unit: "client", price: 120 },
        { key: "hair", label: "Hair styling", unit: "client", price: 90 },
        { key: "bridal", label: "Bridal package", unit: "client", price: 350 } ] },
      { type: "choice", key: "complex", label: "Complexity", options: [
        { label: "Simple", mult: 1 }, { label: "Detailed", mult: 1.3 }, { label: "Elaborate", mult: 1.7 } ] },
      { type: "addon", key: "home", label: "Home visit", price: 40 },
      { type: "addon", key: "guest", label: "Extra guest", price: 60 },
      { type: "addon", key: "trial", label: "Trial session", price: 50 },
    ],
  },
  baking: {
    label: "Baking & confectionery", travel: false, prep: false,
    factors: [
      { type: "service", key: "svc", label: "What you're selling", options: [
        { key: "hundred", label: "Sweets (per hundred)", unit: "hundred", price: 120 },
        { key: "unit", label: "Individual sweets (per unit)", unit: "unit", price: 1.5 },
        { key: "cake", label: "Custom cake (each)", unit: "cake", price: 80 },
        { key: "cupcake", label: "Cupcakes (each)", unit: "cupcake", price: 3 } ] },
      { type: "count", key: "tiers", label: "Extra cake tiers", unit: "tier", price: 40 },
      { type: "choice", key: "complex", label: "Complexity", options: [
        { label: "Simple", mult: 1 }, { label: "Custom / themed", mult: 1.4 }, { label: "Sculpted / elaborate", mult: 1.9 } ] },
      { type: "addon", key: "delivery", label: "Delivery", price: 20 },
      { type: "addon", key: "topper", label: "Custom topper", price: 15 },
      { type: "addon", key: "diet", label: "Gluten-free / vegan", price: 15 },
      { type: "addon", key: "setup", label: "Venue setup", price: 50 },
    ],
  },
  other: {
    label: "Other", travel: true, prep: false, custom: true,
    factors: [
      { type: "service", key: "svc", label: "Your services", options: [{ key: "s1", label: "", unit: "", price: 0 }] },
    ],
  },
};

const URGENCY = [
  { label: "Standard timeline", pct: 0 },
  { label: "Tight deadline", pct: 0.2 },
  { label: "Rush (ASAP)", pct: 0.4 },
];

const money = (n) => "$" + (Math.round(n * 100) / 100).toLocaleString("en-US", { maximumFractionDigits: 0 });

const STEP = { INTRO: 0, AREA: 1, PRICES: 2, EXTRAS: 3, COSTS: 4, DONE: 5, Q_SERVICE: 6, Q_SIZE: 7, Q_ADDONS: 8, Q_LOGISTICS: 9, RESULT: 10 };

export default function FloyCalculator() {
  const [step, setStep] = useState(STEP.INTRO);
  useEffect(() => {
    const l = document.createElement("link");
    l.rel = "stylesheet";
    l.href = "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";
    document.head.appendChild(l);
    return () => { try { document.head.removeChild(l); } catch (e) {} };
  }, []);

  // Profile (prices set once)
  const [nicheKey, setNicheKey] = useState(null);
  const [nicheName, setNicheName] = useState("");
  const [services, setServices] = useState([]); // [{key,label,unit,price}]
  const [bases, setBases] = useState([]);       // [{key,label,price}]
  const [counts, setCounts] = useState([]);     // [{key,label,unit,price}]
  const [addons, setAddons] = useState([]);     // [{key,label,price}]
  const [travelRate, setTravelRate] = useState(0.7);
  const [hourly, setHourly] = useState(25);
  const [tax, setTax] = useState(20);
  const [card, setCard] = useState(3);
  const [margin, setMargin] = useState(30);

  const niche = nicheKey ? NICHES[nicheKey] : null;
  const choices = niche ? niche.factors.filter((f) => f.type === "choice") : [];
  const businessName = nicheKey === "other" ? (nicheName || "Your business") : (niche?.label || "");

  const pickNiche = (k) => {
    const n = NICHES[k];
    const svc = n.factors.find((f) => f.type === "service");
    setServices(svc ? svc.options.map((o) => ({ ...o })) : []);
    setBases(n.factors.filter((f) => f.type === "base").map((f) => ({ ...f })));
    setCounts(n.factors.filter((f) => f.type === "count").map((f) => ({ ...f })));
    setAddons(n.factors.filter((f) => f.type === "addon").map((f) => ({ ...f })));
    setTravelRate(0.7);
    setNicheKey(k);
    resetQuote();
  };

  // Quote answers
  const [serviceIdx, setServiceIdx] = useState(0);
  const [mainQty, setMainQty] = useState(1);
  const [countAns, setCountAns] = useState({});
  const [choiceAns, setChoiceAns] = useState({});
  const [addonAns, setAddonAns] = useState({});
  const [visits, setVisits] = useState(1);
  const [miles, setMiles] = useState(0);
  const [urg, setUrg] = useState(0);
  const [prepH, setPrepH] = useState(0);

  const resetQuote = () => {
    setServiceIdx(0); setMainQty(1); setCountAns({}); setChoiceAns({});
    setAddonAns({}); setVisits(1); setMiles(0); setUrg(0); setPrepH(0);
  };

  const validServices = services.filter((s) => s.label.trim() !== "");
  const hasSize = counts.length > 0 || choices.length > 0;
  const service = validServices[serviceIdx] || validServices[0];

  // Dynamic quote step order (skip what the niche doesn't have)
  const quoteSteps = useMemo(() => {
    const arr = [];
    if (validServices.length) arr.push(STEP.Q_SERVICE);
    if (hasSize) arr.push(STEP.Q_SIZE);
    if (addons.length) arr.push(STEP.Q_ADDONS);
    arr.push(STEP.Q_LOGISTICS);
    arr.push(STEP.RESULT);
    return arr;
  }, [validServices.length, hasSize, addons.length]);

  const qNext = () => { const i = quoteSteps.indexOf(step); if (i >= 0 && i < quoteSteps.length - 1) setStep(quoteSteps[i + 1]); };
  const qBack = () => { const i = quoteSteps.indexOf(step); if (i > 0) setStep(quoteSteps[i - 1]); else setStep(STEP.DONE); };

  // ---------- THE MATH ----------
  const calc = useMemo(() => {
    if (!niche) return null;
    const serviceBase = service ? (Number(service.price) || 0) * mainQty : 0;
    const countsSum = counts.reduce((s, f) => s + (Number(f.price) || 0) * (countAns[f.key] || 0), 0);
    const baseSum = bases.reduce((s, f) => s + (Number(f.price) || 0), 0);
    let core = serviceBase + countsSum + baseSum;
    choices.forEach((f) => { const idx = choiceAns[f.key] ?? 0; core *= f.options[idx].mult; });
    core *= (1 + URGENCY[urg].pct);
    const addonsSum = addons.reduce((s, f) => s + (Number(f.price) || 0) * (addonAns[f.key] || 0), 0);
    const travel = niche.travel ? miles * travelRate * 2 : 0;
    const prep = niche.prep ? prepH * hourly : 0;
    const perJob = core + addonsSum + travel + prep;
    const costBase = perJob * Math.max(1, visits);
    const taxReserve = costBase * (tax / 100);
    const cardFee = costBase * (card / 100);
    const recommended = (costBase + taxReserve + cardFee) * (1 + margin / 100);
    const minimum = (costBase + taxReserve + cardFee) * 1.1;
    const premium = recommended * 1.35;
    return { core, addonsSum, travel, prep, taxReserve, cardFee, recommended, minimum, premium, visits };
  }, [niche, service, mainQty, counts, countAns, bases, choices, choiceAns, addons, addonAns, urg, miles, travelRate, prepH, hourly, visits, tax, card, margin]);

  const quoteText = useMemo(() => {
    if (!calc) return "";
    const name = service ? service.label : businessName;
    const L = [];
    L.push(`Hi! Here's the quote for your ${name.toLowerCase()}.`);
    L.push("");
    L.push(`${name}${mainQty > 1 ? ` — ${mainQty}x` : ""}${visits > 1 ? ` · ${visits} visits` : ""}`);
    L.push(`Total: ${money(calc.recommended)}`);
    L.push("");
    const inc = [];
    if (calc.addonsSum > 0) inc.push("the add-ons");
    if (calc.travel > 0) inc.push("travel");
    if (calc.prep > 0) inc.push("editing");
    if (inc.length) L.push(`This already includes ${inc.join(", ")}.`);
    L.push("To lock in your date, a 50% deposit confirms the booking.");
    L.push("Any questions, just message me here.");
    return L.join("\n");
  }, [calc, service, businessName, mainQty, visits]);

  const S = styles;
  const progress = Math.min(step / STEP.RESULT, 1);

  return (
    <div style={S.root}>
      <div style={S.progressWrap}><div style={{ ...S.progressBar, width: `${progress * 100}%` }} /></div>
      <div style={S.brand}>floy</div>
      <div style={S.stage}>

        {step === STEP.INTRO && (
          <Screen>
            <h1 style={S.h1}>Set it up once. Quote in seconds.</h1>
            <p style={S.lead}>Answer a few questions about your business — your prices, what you include, what costs extra. After that, every quote is just the job's details, and floy builds a fair price with a ready-to-send message.</p>
            <BigButton onClick={() => setStep(STEP.AREA)}>Set up my business</BigButton>
          </Screen>
        )}

        {step === STEP.AREA && (
          <Screen>
            <Eyebrow>My business</Eyebrow>
            <h2 style={S.h2}>What do you do?</h2>
            <div style={S.grid}>
              {Object.entries(NICHES).map(([k, n]) => (
                <button key={k} onClick={() => pickNiche(k)} style={{ ...S.option, ...(nicheKey === k ? S.optionOn : {}) }}
                  onMouseEnter={(e) => hover(e, true, nicheKey === k)} onMouseLeave={(e) => hover(e, false, nicheKey === k)}>
                  {n.label}
                </button>
              ))}
            </div>
            {nicheKey === "other" && (
              <Field label="What's your business?">
                <TextInput value={nicheName} onChange={setNicheName} placeholder="e.g. jewelry, personal training, tutoring…" />
              </Field>
            )}
            <Nav onBack={() => setStep(STEP.INTRO)} onNext={() => setStep(STEP.PRICES)} disabled={!nicheKey || (nicheKey === "other" && !nicheName.trim())} />
          </Screen>
        )}

        {step === STEP.PRICES && niche && (
          <Screen>
            <Eyebrow>My business</Eyebrow>
            <h2 style={S.h2}>Your prices</h2>
            <p style={S.sub}>Set what you charge for each part. You do this once.</p>

            {(validServices.length > 0 || niche.custom) && (
              <div style={{ width: "100%" }}>
                <div style={S.sectionLabel}>Your services</div>
                {services.map((s, i) => (
                  niche.custom ? (
                    <div key={i} style={S.servRow}>
                      <TextInput value={s.label} placeholder="Service name" flex onChange={(v) => setServices((a) => a.map((x, j) => j === i ? { ...x, label: v } : x))} />
                      <div style={{ width: 100 }}><PrefixInput prefix="$" value={s.price} onChange={(v) => setServices((a) => a.map((x, j) => j === i ? { ...x, price: v } : x))} /></div>
                      {services.length > 1 && <button style={S.remove} onClick={() => setServices((a) => a.filter((_, j) => j !== i))}>×</button>}
                    </div>
                  ) : (
                    <Field key={s.key} label={s.label + (s.unit ? ` (per ${s.unit})` : "")}>
                      <PrefixInput prefix="$" value={s.price} onChange={(v) => setServices((a) => a.map((x, j) => j === i ? { ...x, price: v } : x))} />
                    </Field>
                  )
                ))}
                {niche.custom && <button style={S.addBtn} onClick={() => setServices((a) => [...a, { key: "s" + Date.now(), label: "", price: 0 }])}>+ Add service</button>}
              </div>
            )}

            {bases.length > 0 && bases.map((b, i) => (
              <Field key={b.key} label={b.label}>
                <PrefixInput prefix="$" value={b.price} onChange={(v) => setBases((a) => a.map((x, j) => j === i ? { ...x, price: v } : x))} />
              </Field>
            ))}

            {counts.length > 0 && (
              <div style={{ width: "100%" }}>
                <div style={S.sectionLabel}>Priced by size — your rate for each</div>
                {counts.map((c, i) => (
                  <Field key={c.key} label={`${c.label} — price per ${c.unit || "unit"}`}>
                    <PrefixInput prefix="$" value={c.price} onChange={(v) => setCounts((a) => a.map((x, j) => j === i ? { ...x, price: v } : x))} />
                  </Field>
                ))}
              </div>
            )}

            <Nav onBack={() => setStep(STEP.AREA)} onNext={() => setStep(STEP.EXTRAS)} disabled={validServices.length === 0 && bases.length === 0 && counts.length === 0} />
          </Screen>
        )}

        {step === STEP.EXTRAS && niche && (
          <Screen>
            <Eyebrow>My business</Eyebrow>
            <h2 style={S.h2}>Add-ons & travel</h2>
            <p style={S.sub}>The extras you charge for, and what you set the price at.</p>
            {(addons.length > 0 || niche.custom) && (
              <div style={{ width: "100%" }}>
                <div style={S.sectionLabel}>Add-ons you charge extra for</div>
                {addons.map((a, i) => (
                  niche.custom ? (
                    <div key={i} style={S.servRow}>
                      <TextInput value={a.label} placeholder="Add-on name" flex onChange={(v) => setAddons((arr) => arr.map((x, j) => j === i ? { ...x, label: v } : x))} />
                      <div style={{ width: 100 }}><PrefixInput prefix="$" value={a.price} onChange={(v) => setAddons((arr) => arr.map((x, j) => j === i ? { ...x, price: v } : x))} /></div>
                      <button style={S.remove} onClick={() => setAddons((arr) => arr.filter((_, j) => j !== i))}>×</button>
                    </div>
                  ) : (
                    <Field key={a.key} label={a.label}>
                      <PrefixInput prefix="$" value={a.price} onChange={(v) => setAddons((arr) => arr.map((x, j) => j === i ? { ...x, price: v } : x))} />
                    </Field>
                  )
                ))}
                {niche.custom && <button style={S.addBtn} onClick={() => setAddons((arr) => [...arr, { key: "a" + Date.now(), label: "", price: 0 }])}>+ Add add-on</button>}
              </div>
            )}
            {niche.travel && (
              <Field label="Travel fee (per mile — round trip counted automatically)">
                <PrefixInput prefix="$" value={travelRate} onChange={setTravelRate} />
              </Field>
            )}
            <Nav onBack={() => setStep(STEP.PRICES)} onNext={() => setStep(STEP.COSTS)} />
          </Screen>
        )}

        {step === STEP.COSTS && (
          <Screen>
            <Eyebrow>My business</Eyebrow>
            <h2 style={S.h2}>Your costs & margin</h2>
            <p style={S.sub}>Applies to every quote. Set once.</p>
            <Field label="Your hourly rate (for prep / editing time)"><PrefixInput prefix="$" value={hourly} onChange={setHourly} /></Field>
            <div style={S.inlineRow}>
              <Field label="Tax set-aside"><PrefixInput value={tax} onChange={setTax} suffix="%" /></Field>
              <Field label="Card fee"><PrefixInput value={card} onChange={setCard} suffix="%" /></Field>
              <Field label="Profit margin"><PrefixInput value={margin} onChange={setMargin} suffix="%" /></Field>
            </div>
            <Nav onBack={() => setStep(STEP.EXTRAS)} onNext={() => setStep(STEP.DONE)} nextLabel="Finish" />
          </Screen>
        )}

        {step === STEP.DONE && (
          <Screen>
            <div style={S.check}>✓</div>
            <h2 style={S.h2}>{businessName} is set up</h2>
            <p style={S.lead}>Whenever you need to price a job, just create a quote. You won't set this up again.</p>
            <BigButton onClick={() => { resetQuote(); setStep(quoteSteps[0]); }}>Create quote</BigButton>
            <button style={{ ...S.ghost, marginTop: 12 }} onClick={() => setStep(STEP.AREA)}>Edit my business</button>
          </Screen>
        )}

        {step === STEP.Q_SERVICE && niche && (
          <Screen>
            <Eyebrow>New quote</Eyebrow>
            <h2 style={S.h2}>What are you quoting?</h2>
            <div style={S.grid}>
              {validServices.map((s, i) => (
                <button key={s.key + i} onClick={() => setServiceIdx(i)} style={{ ...S.option, ...(serviceIdx === i ? S.optionOn : {}) }}
                  onMouseEnter={(e) => hover(e, true, serviceIdx === i)} onMouseLeave={(e) => hover(e, false, serviceIdx === i)}>
                  {s.label}<span style={S.optBase}>{money(s.price)}{s.unit ? ` / ${s.unit}` : ""}</span>
                </button>
              ))}
            </div>
            <Field label="How many?"><PrefixInput value={mainQty} onChange={setMainQty} min={1} /></Field>
            <Nav onBack={() => setStep(STEP.DONE)} onNext={qNext} />
          </Screen>
        )}

        {step === STEP.Q_SIZE && niche && (
          <Screen>
            <Eyebrow>New quote</Eyebrow>
            <h2 style={S.h2}>The details of this job</h2>
            <p style={S.sub}>Answer for this specific client — the price adjusts as you go.</p>
            {counts.map((c) => (
              <Field key={c.key} label={c.label}>
                <PrefixInput value={countAns[c.key] || 0} onChange={(v) => setCountAns((m) => ({ ...m, [c.key]: v }))} />
              </Field>
            ))}
            {choices.map((c) => (
              <Field key={c.key} label={c.label}>
                <SegRow options={c.options.map((o) => o.label)} value={choiceAns[c.key] ?? 0} onChange={(v) => setChoiceAns((m) => ({ ...m, [c.key]: v }))} />
              </Field>
            ))}
            <Nav onBack={qBack} onNext={qNext} />
          </Screen>
        )}

        {step === STEP.Q_ADDONS && niche && (
          <Screen>
            <Eyebrow>New quote</Eyebrow>
            <h2 style={S.h2}>What's included for this client?</h2>
            <p style={S.sub}>Tap what they want. Off means it's not in the price.</p>
            <div style={{ width: "100%" }}>
              {addons.filter((a) => a.label.trim() !== "").map((a) => {
                const on = (addonAns[a.key] || 0) > 0;
                return (
                  <div key={a.key} style={{ ...S.addonRow, ...(on ? S.addonRowOn : {}) }}>
                    <button style={S.addonTap} onClick={() => setAddonAns((m) => ({ ...m, [a.key]: on ? 0 : 1 }))}>
                      <span style={{ ...S.dot, ...(on ? { background: WINE, borderColor: WINE } : {}) }} />{a.label}
                    </button>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      {on && <div style={{ width: 60 }}><PrefixInput value={addonAns[a.key]} min={1} onChange={(v) => setAddonAns((m) => ({ ...m, [a.key]: v }))} /></div>}
                      <span style={S.addonPrice}>{money(a.price)}</span>
                    </div>
                  </div>
                );
              })}
            </div>
            <Nav onBack={qBack} onNext={qNext} />
          </Screen>
        )}

        {step === STEP.Q_LOGISTICS && niche && (
          <Screen>
            <Eyebrow>New quote</Eyebrow>
            <h2 style={S.h2}>Timing & logistics</h2>
            <Field label="Deadline"><SegRow options={URGENCY.map((u) => u.label)} value={urg} onChange={setUrg} /></Field>
            <Field label="How many visits / sessions is this quote for?"><PrefixInput value={visits} onChange={setVisits} min={1} /></Field>
            {niche.travel && <Field label="Distance to the client (miles, one way)"><PrefixInput value={miles} onChange={setMiles} suffix="mi" /></Field>}
            {niche.prep && <Field label={(niche.prepLabel || "Prep hours") + " for this job"}><PrefixInput value={prepH} onChange={setPrepH} suffix="h" /></Field>}
            <Nav onBack={qBack} onNext={qNext} nextLabel="See the price" />
          </Screen>
        )}

        {step === STEP.RESULT && calc && (
          <Result calc={calc} name={service ? service.label : businessName} quoteText={quoteText}
            onAdjust={() => setStep(STEP.Q_LOGISTICS)} onNew={() => { resetQuote(); setStep(quoteSteps[0]); }} />
        )}
      </div>
    </div>
  );
}

function hover(e, on, selected) {
  if (selected) return;
  e.currentTarget.style.borderColor = on ? WINE : "#2a2a2a";
  e.currentTarget.style.background = on ? "rgba(156,46,50,0.12)" : "transparent";
}
function Screen({ children }) { return <div style={styles.screen}>{children}</div>; }
function Eyebrow({ children }) { return <div style={styles.eyebrow}>{children}</div>; }

function Result({ calc, name, quoteText, onAdjust, onNew }) {
  const [copied, setCopied] = useState(false);
  const taRef = useRef(null);
  const S = styles;
  const copy = () => {
    try { navigator.clipboard.writeText(quoteText); }
    catch (e) { if (taRef.current) { taRef.current.select(); document.execCommand("copy"); } }
    setCopied(true); setTimeout(() => setCopied(false), 1800);
  };
  return (
    <div style={{ ...styles.screen, maxWidth: 620 }}>
      <p style={S.sub}>For {name.toLowerCase()}</p>
      <div style={S.priceHero}>{money(calc.recommended)}</div>
      <p style={S.priceLabel}>recommended price</p>
      <div style={S.tiers}>
        <Tier label="Minimum" value={money(calc.minimum)} note="covers costs, thin margin" />
        <Tier label="Recommended" value={money(calc.recommended)} note="fair and healthy" highlight />
        <Tier label="Premium" value={money(calc.premium)} note="high demand / positioning" />
      </div>
      <details style={S.details}>
        <summary style={S.summary}>How this price is built</summary>
        <div style={S.breakdown}>
          <Row k="Work (rate × size × deadline)" v={money(calc.core * calc.visits)} />
          {calc.addonsSum > 0 && <Row k="Add-ons" v={money(calc.addonsSum * calc.visits)} />}
          {calc.travel > 0 && <Row k="Travel" v={money(calc.travel * calc.visits)} />}
          {calc.prep > 0 && <Row k="Prep / editing" v={money(calc.prep * calc.visits)} />}
          <Row k="Tax set-aside" v={money(calc.taxReserve)} />
          <Row k="Card fee" v={money(calc.cardFee)} />
          <div style={S.divider} />
          <Row k="Recommended" v={money(calc.recommended)} bold />
        </div>
      </details>
      <div style={S.quoteBox}>
        <div style={S.quoteHead}>Quote ready to send</div>
        <textarea ref={taRef} readOnly value={quoteText} style={S.textarea} rows={7} />
        <BigButton onClick={copy}>{copied ? "Copied ✓" : "Copy quote"}</BigButton>
      </div>
      <div style={{ display: "flex", gap: 12, marginTop: 18 }}>
        <button style={S.ghost} onClick={onAdjust}>Adjust</button>
        <button style={S.ghost} onClick={onNew}>New quote</button>
      </div>
    </div>
  );
}

function Tier({ label, value, note, highlight }) {
  return (
    <div style={{ ...styles.tier, ...(highlight ? styles.tierOn : {}) }}>
      <div style={styles.tierLabel}>{label}</div>
      <div style={{ ...styles.tierValue, color: highlight ? GOLD : "#fff" }}>{value}</div>
      <div style={styles.tierNote}>{note}</div>
    </div>
  );
}
function Row({ k, v, bold }) {
  return (<div style={{ display: "flex", justifyContent: "space-between", padding: "7px 0", fontWeight: bold ? 600 : 400 }}>
    <span style={{ color: bold ? "#fff" : "#9a9a9a" }}>{k}</span><span style={{ color: bold ? GOLD : "#ddd" }}>{v}</span></div>);
}
function Field({ label, children }) {
  return (<div style={{ marginBottom: 20, width: "100%" }}><div style={styles.fieldLabel}>{label}</div>{children}</div>);
}
function SegRow({ options, value, onChange }) {
  return (<div style={styles.segRow}>{options.map((o, i) => (
    <button key={o} onClick={() => onChange(i)} style={{ ...styles.seg, ...(value === i ? styles.segOn : {}) }}>{o}</button>))}</div>);
}
function TextInput({ value, onChange, placeholder, flex }) {
  return (<div style={{ ...styles.inputWrap, ...(flex ? { flex: 1 } : { width: "100%" }) }}>
    <input value={value} placeholder={placeholder} onChange={(e) => onChange(e.target.value)} style={styles.input} /></div>);
}
function PrefixInput({ prefix, suffix, value, onChange, min = 0 }) {
  return (<div style={styles.inputWrap}>
    {prefix && <span style={styles.affix}>{prefix}</span>}
    <input type="number" value={value} min={min} onChange={(e) => { const v = e.target.value === "" ? 0 : Math.max(min, Number(e.target.value)); onChange(v); }} style={styles.input} />
    {suffix && <span style={styles.affix}>{suffix}</span>}</div>);
}
function BigButton({ children, onClick, disabled }) {
  return (<button onClick={onClick} disabled={disabled} style={{ ...styles.bigBtn, ...(disabled ? styles.bigBtnOff : {}) }}
    onMouseEnter={(e) => { if (!disabled) e.currentTarget.style.background = "#b5383c"; }}
    onMouseLeave={(e) => { if (!disabled) e.currentTarget.style.background = WINE; }}>{children}</button>);
}
function Nav({ onBack, onNext, nextLabel = "Continue", disabled }) {
  return (<div style={{ display: "flex", gap: 12, marginTop: 14, width: "100%" }}>
    <button style={styles.ghost} onClick={onBack}>Back</button>
    <BigButton onClick={onNext} disabled={disabled}>{nextLabel}</BigButton></div>);
}

const styles = {
  root: { minHeight: "100vh", background: "#000", color: "#fff", fontFamily: "'Poppins', sans-serif", display: "flex", flexDirection: "column", alignItems: "center", padding: "0 20px 60px", position: "relative" },
  progressWrap: { position: "fixed", top: 0, left: 0, right: 0, height: 2, background: "#161616", zIndex: 10 },
  progressBar: { height: "100%", background: WINE, transition: "width .4s ease" },
  brand: { letterSpacing: 6, fontWeight: 600, fontSize: 15, marginTop: 34, color: "#fff" },
  stage: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", width: "100%", minHeight: "80vh", padding: "40px 0" },
  screen: { width: "100%", maxWidth: 560, display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center" },
  eyebrow: { fontSize: 12, color: WINE, fontWeight: 500, marginBottom: 10, letterSpacing: 0.5 },
  h1: { fontSize: 34, fontWeight: 600, lineHeight: 1.2, margin: "0 0 18px", letterSpacing: -0.5 },
  h2: { fontSize: 27, fontWeight: 600, lineHeight: 1.25, margin: "0 0 8px", letterSpacing: -0.3 },
  lead: { fontSize: 16, fontWeight: 300, color: "#b5b5b5", lineHeight: 1.6, maxWidth: 460, margin: "0 0 34px" },
  sub: { fontSize: 14, fontWeight: 300, color: "#8f8f8f", margin: "0 0 26px", maxWidth: 460 },
  sectionLabel: { fontSize: 12, color: WINE, fontWeight: 500, textAlign: "left", margin: "6px 0 14px" },
  check: { width: 60, height: 60, borderRadius: "50%", border: `2px solid ${WINE}`, color: WINE, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 30, marginBottom: 22 },
  grid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, width: "100%", marginBottom: 22 },
  option: { display: "flex", flexDirection: "column", gap: 4, background: "transparent", color: "#eaeaea", border: "1px solid #2a2a2a", borderRadius: 14, padding: "18px 16px", fontSize: 14, fontWeight: 400, fontFamily: "inherit", cursor: "pointer", transition: "all .2s ease", textAlign: "left" },
  optionOn: { borderColor: WINE, background: "rgba(156,46,50,0.16)", color: "#fff" },
  optBase: { fontSize: 11, color: "#7d7d7d", fontWeight: 300 },
  inlineRow: { display: "flex", gap: 14, width: "100%", flexWrap: "wrap" },
  servRow: { display: "flex", gap: 10, alignItems: "center", marginBottom: 10, width: "100%" },
  remove: { background: "transparent", border: "1px solid #2a2a2a", color: "#8f8f8f", borderRadius: 8, width: 38, height: 44, fontSize: 20, cursor: "pointer", flexShrink: 0 },
  addBtn: { background: "transparent", border: "1px dashed #333", color: "#b5b5b5", borderRadius: 10, padding: "12px", width: "100%", fontFamily: "inherit", fontSize: 13, cursor: "pointer", marginTop: 4, marginBottom: 18 },
  addonRow: { display: "flex", alignItems: "center", justifyContent: "space-between", border: "1px solid #242424", borderRadius: 12, padding: "6px 14px 6px 6px", marginBottom: 10 },
  addonRowOn: { borderColor: WINE, background: "rgba(156,46,50,0.08)" },
  addonTap: { display: "flex", alignItems: "center", gap: 12, background: "transparent", border: "none", color: "#eaeaea", fontFamily: "inherit", fontSize: 14, cursor: "pointer", padding: "12px 8px", flex: 1, textAlign: "left" },
  dot: { width: 18, height: 18, borderRadius: "50%", border: "2px solid #444", flexShrink: 0, transition: "all .15s ease" },
  addonPrice: { color: "#9a9a9a", fontSize: 13, fontWeight: 300 },
  fieldLabel: { fontSize: 13, fontWeight: 400, color: "#9a9a9a", marginBottom: 9, textAlign: "left" },
  segRow: { display: "flex", gap: 8, flexWrap: "wrap" },
  seg: { flex: "1 1 auto", background: "transparent", color: "#cfcfcf", border: "1px solid #2a2a2a", borderRadius: 10, padding: "12px 10px", fontSize: 13, fontFamily: "inherit", cursor: "pointer", transition: "all .18s ease", minWidth: 90 },
  segOn: { borderColor: WINE, background: "rgba(156,46,50,0.2)", color: "#fff", fontWeight: 500 },
  inputWrap: { display: "flex", alignItems: "center", background: "#0d0d0d", border: "1px solid #2a2a2a", borderRadius: 10, padding: "0 14px" },
  affix: { color: "#7d7d7d", fontSize: 15, fontWeight: 300 },
  input: { flex: 1, background: "transparent", border: "none", outline: "none", color: "#fff", fontSize: 16, fontFamily: "inherit", padding: "13px 8px", width: "100%" },
  bigBtn: { flex: 1, background: WINE, color: "#fff", border: "none", borderRadius: 12, padding: "15px 30px", fontSize: 15, fontWeight: 500, fontFamily: "inherit", cursor: "pointer", transition: "background .2s ease", minWidth: 160 },
  bigBtnOff: { background: "#241416", color: "#6a5254", cursor: "not-allowed" },
  ghost: { background: "transparent", color: "#9a9a9a", border: "1px solid #2a2a2a", borderRadius: 12, padding: "15px 24px", fontSize: 14, fontFamily: "inherit", cursor: "pointer" },
  priceHero: { fontSize: 64, fontWeight: 700, color: GOLD, lineHeight: 1, letterSpacing: -1.5, margin: "6px 0 4px" },
  priceLabel: { fontSize: 13, color: "#8f8f8f", fontWeight: 300, marginBottom: 30 },
  tiers: { display: "flex", gap: 10, width: "100%", marginBottom: 26 },
  tier: { flex: 1, border: "1px solid #242424", borderRadius: 14, padding: "16px 10px" },
  tierOn: { borderColor: WINE, background: "rgba(156,46,50,0.1)" },
  tierLabel: { fontSize: 11, color: "#9a9a9a", marginBottom: 8, fontWeight: 400 },
  tierValue: { fontSize: 22, fontWeight: 600, marginBottom: 6 },
  tierNote: { fontSize: 10.5, color: "#777", fontWeight: 300, lineHeight: 1.4 },
  details: { width: "100%", marginBottom: 26, textAlign: "left" },
  summary: { cursor: "pointer", color: "#b5b5b5", fontSize: 13, padding: "6px 0" },
  breakdown: { fontSize: 13.5, marginTop: 10, borderTop: "1px solid #1c1c1c", paddingTop: 6 },
  divider: { height: 1, background: "#1c1c1c", margin: "8px 0" },
  quoteBox: { width: "100%", background: "#0b0b0b", border: "1px solid #242424", borderRadius: 16, padding: 20, textAlign: "left" },
  quoteHead: { fontSize: 13, color: "#9a9a9a", marginBottom: 12, fontWeight: 400 },
  textarea: { width: "100%", background: "#000", color: CREAM, border: "1px solid #242424", borderRadius: 10, padding: 14, fontSize: 14, fontFamily: "inherit", lineHeight: 1.6, resize: "vertical", marginBottom: 14, boxSizing: "border-box" },
};