// Renewal-lift calculator + exit-intent micro-survey for itsvoco.com.
// Both POST to /api/landing/qualifier with a shared visitor_id so we can
// correlate calculator engagement with bounce signal. Decisions captured
// here drive the /api/cofounder/state/landing/qualifier ICP-mix readout.

const QUALIFIER_VISITOR_KEY = "voco_visitor_id";
const EXIT_SHOWN_KEY = "voco_exit_shown";

function readVisitorId() {
  try {
    let id = localStorage.getItem(QUALIFIER_VISITOR_KEY);
    if (!id) {
      id =
        (crypto.randomUUID && crypto.randomUUID()) ||
        Math.random().toString(36).slice(2) + Date.now().toString(36);
      localStorage.setItem(QUALIFIER_VISITOR_KEY, id);
    }
    return id;
  } catch {
    return null;
  }
}

function readUtm() {
  try {
    const p = new URLSearchParams(window.location.search);
    return {
      utm_source: p.get("utm_source") || null,
      utm_campaign: p.get("utm_campaign") || null,
      utm_medium: p.get("utm_medium") || null,
    };
  } catch {
    return { utm_source: null, utm_campaign: null, utm_medium: null };
  }
}

async function postQualifier(payload) {
  try {
    const r = await fetch("/api/landing/qualifier", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        ...payload,
        ...readUtm(),
        visitor_id: readVisitorId(),
      }),
    });
    if (!r.ok) return null;
    return await r.json();
  } catch {
    return null;
  }
}

function fmtMoney(n) {
  if (n == null || !isFinite(n)) return "—";
  if (n >= 1_000_000) return "$" + (n / 1_000_000).toFixed(2).replace(/\.?0+$/, "") + "M";
  if (n >= 1_000) return "$" + Math.round(n / 1_000).toLocaleString() + "k";
  return "$" + Math.round(n).toLocaleString();
}

// ── Calculator section ──────────────────────────────
const Calculator = () => {
  const [agencyType, setAgencyType] = React.useState("");
  const [policiesBand, setPoliciesBand] = React.useState("");
  const [premiumBand, setPremiumBand] = React.useState("");
  const [retentionBand, setRetentionBand] = React.useState("");
  const [submitting, setSubmitting] = React.useState(false);
  const [result, setResult] = React.useState(null);
  const [error, setError] = React.useState(null);

  const allFilled = agencyType && policiesBand && premiumBand && retentionBand;

  async function onSubmit(e) {
    e.preventDefault();
    if (!allFilled || submitting) return;
    setSubmitting(true);
    setError(null);
    const r = await postQualifier({
      source: "calculator",
      agency_type: agencyType,
      policies_band: policiesBand,
      avg_premium_band: premiumBand,
      retention_band: retentionBand,
    });
    setSubmitting(false);
    if (!r || !r.ok) {
      setError("Something glitched. Try again or just hit Hear Sarah.");
      return;
    }
    setResult({
      usd: r.recovered_usd,
      policies: r.recovered_policies,
      nonIcp: agencyType !== "pc_independent" && agencyType !== "pc_captive",
    });
    if (window.gtag) {
      window.gtag("event", "qualifier_calculator_submit", { agency_type: agencyType });
    }
  }

  return (
    <section className="section" id="calculator">
      <div className="container">
        <div className="section-head section-head--center">
          <div className="eyebrow" style={{ color: "var(--signal)" }}>For independent P&amp;C agencies</div>
          <h2 className="h2">See what Sarah would recover on your book.</h2>
          <p className="lede" style={{ margin: "0 auto" }}>
            Four questions. Thirty seconds. No email. We'll show you the dollar figure
            sitting in your dead-lead pile right now.
          </p>
        </div>

        <div className="qual">
          <form className="qual__form" onSubmit={onSubmit}>
            <label className="qual__field">
              <span className="qual__label">What kind of shop?</span>
              <select value={agencyType} onChange={(e) => setAgencyType(e.target.value)}>
                <option value="">Select…</option>
                <option value="pc_independent">Independent P&amp;C agency</option>
                <option value="pc_captive">Captive P&amp;C (Allstate, State Farm, Farmers, etc.)</option>
                <option value="mga">MGA / wholesaler</option>
                <option value="carrier">Carrier</option>
                <option value="life_health">Life / health only</option>
                <option value="not_insurance">Not in insurance</option>
                <option value="other">Other</option>
              </select>
            </label>

            <label className="qual__field">
              <span className="qual__label">Policies in force</span>
              <select value={policiesBand} onChange={(e) => setPoliciesBand(e.target.value)}>
                <option value="">Select…</option>
                <option value="lt500">Under 500</option>
                <option value="500_2k">500 – 2,000</option>
                <option value="2k_5k">2,000 – 5,000</option>
                <option value="5k_10k">5,000 – 10,000</option>
                <option value="gt10k">10,000+</option>
              </select>
            </label>

            <label className="qual__field">
              <span className="qual__label">Avg annual premium / policy</span>
              <select value={premiumBand} onChange={(e) => setPremiumBand(e.target.value)}>
                <option value="">Select…</option>
                <option value="500">~$500</option>
                <option value="1000">~$1,000</option>
                <option value="2000">~$2,000</option>
                <option value="5000">$5,000+</option>
              </select>
            </label>

            <label className="qual__field">
              <span className="qual__label">Current retention</span>
              <select value={retentionBand} onChange={(e) => setRetentionBand(e.target.value)}>
                <option value="">Select…</option>
                <option value="lt70">Under 70%</option>
                <option value="70_80">70 – 80%</option>
                <option value="80_90">80 – 90%</option>
                <option value="gte90">90%+</option>
              </select>
            </label>

            <div className="qual__actions">
              <button
                type="submit"
                className="btn btn--primary btn--lg btn--full"
                disabled={!allFilled || submitting}
              >
                {submitting ? "Calculating…" : "Show me the number →"}
              </button>
              <a href="#demo" className="btn btn--link">…or just Hear Sarah</a>
            </div>
            {error && <div className="qual__error">{error}</div>}
          </form>

          <aside className="qual__result" aria-live="polite">
            {!result && (
              <div className="qual__result-empty">
                <div className="eyebrow">Your number</div>
                <div className="qual__hint">
                  Fill the four fields. We'll project recovered premium based on
                  conservative resurrection rates from live pilots.
                </div>
              </div>
            )}
            {result && !result.nonIcp && (
              <div>
                <div className="eyebrow" style={{ color: "var(--signal)" }}>Projected annual recovery</div>
                <div className="qual__big">{fmtMoney(result.usd)}</div>
                <div className="qual__sub">
                  ≈ {result.policies.toLocaleString()} policies / yr resurrected from your dead-lead pile.
                </div>
                <div className="qual__cta">
                  <a href="#demo" className="btn btn--signal btn--lg btn--full">
                    See it work on your actual book →
                  </a>
                  <div className="qual__fineprint">
                    $0 setup. $75 per bound policy. Conservative model — pilot data tightens this fast.
                  </div>
                </div>
              </div>
            )}
            {result && result.nonIcp && (
              <div>
                <div className="eyebrow">Heads up</div>
                <div className="qual__big" style={{ fontSize: 28 }}>
                  Sarah's built for independent P&amp;C agencies.
                </div>
                <div className="qual__sub">
                  Captive, MGA, life/health, and non-insurance shops have different economics —
                  the dead-lead resurrection model doesn't map cleanly. We can still chat if
                  you're curious, but we won't waste your time pitching.
                </div>
                <div className="qual__cta">
                  <a href="mailto:autreyj2793@gmail.com" className="btn btn--ghost btn--lg btn--full">
                    Email AJ anyway
                  </a>
                </div>
              </div>
            )}
          </aside>
        </div>
      </div>
    </section>
  );
};

// ── Exit-intent micro-survey ────────────────────────
const ExitIntent = () => {
  const [open, setOpen] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const armedRef = React.useRef(false);

  React.useEffect(() => {
    let alreadyShown = false;
    try {
      alreadyShown = sessionStorage.getItem(EXIT_SHOWN_KEY) === "1";
    } catch {}
    if (alreadyShown) return;

    // Arm only after 8s on page so we don't ambush bounce-on-arrival.
    const armTimer = setTimeout(() => {
      armedRef.current = true;
    }, 8_000);

    function onLeave(e) {
      if (!armedRef.current) return;
      if (e.clientY > 8) return; // only top-edge mouseout
      try { sessionStorage.setItem(EXIT_SHOWN_KEY, "1"); } catch {}
      setOpen(true);
      document.removeEventListener("mouseout", onLeave);
    }
    document.addEventListener("mouseout", onLeave);
    return () => {
      clearTimeout(armTimer);
      document.removeEventListener("mouseout", onLeave);
    };
  }, []);

  async function pick(agencyType) {
    setSubmitted(true);
    await postQualifier({ source: "exit_survey", agency_type: agencyType });
    if (window.gtag) {
      window.gtag("event", "qualifier_exit_survey", { agency_type: agencyType });
    }
    setTimeout(() => setOpen(false), 1200);
  }

  if (!open) return null;
  return (
    <div className="exitmodal" role="dialog" aria-modal="true" aria-labelledby="exitmodal-title">
      <div className="exitmodal__backdrop" onClick={() => setOpen(false)}/>
      <div className="exitmodal__card">
        <button className="exitmodal__close" aria-label="Close" onClick={() => setOpen(false)}>×</button>
        {!submitted ? (
          <>
            <div className="eyebrow">Quick — one click, then you're out</div>
            <h3 id="exitmodal-title" className="exitmodal__title">What brought you here?</h3>
            <div className="exitmodal__choices">
              <button onClick={() => pick("pc_independent")}>I run a P&amp;C agency</button>
              <button onClick={() => pick("pc_captive")}>I'm at a captive (Allstate / State Farm / etc.)</button>
              <button onClick={() => pick("mga")}>Carrier, MGA, or wholesaler</button>
              <button onClick={() => pick("life_health")}>Life / health insurance</button>
              <button onClick={() => pick("not_insurance")}>Just exploring AI tools</button>
              <button onClick={() => pick("other")}>Something else</button>
            </div>
          </>
        ) : (
          <div className="exitmodal__thanks">
            <div className="eyebrow" style={{ color: "var(--signal)" }}>Thanks</div>
            <div className="exitmodal__title">Useful — that's how we figure out who to build for next.</div>
          </div>
        )}
      </div>
    </div>
  );
};

window.Calculator = Calculator;
window.ExitIntent = ExitIntent;