/* global React */
const { Button, Icon, Field } = window.MissionInsurancePartnersDesignSystem_445ed5;

/* ---- Quiz definition (5 short pre-qualifier questions + contact) ---- */
const LIFE_STEPS = [
  {
    key: "reason", icon: "shield-check",
    q: "What's the main reason you're looking for coverage?",
    help: "This helps us point you toward the right kind of policy.",
    options: [
      { v: "final", label: "Cover funeral & final expenses", icon: "hand-heart" },
      { v: "income", label: "Replace my income for my family", icon: "heart-pulse" },
      { v: "debt", label: "Pay off a mortgage or debts", icon: "wallet" },
      { v: "legacy", label: "Leave money / build lifelong value", icon: "layers" },
    ],
  },
  {
    key: "age", icon: "calendar-check",
    q: "What's your age range?",
    help: "Age is the biggest factor in what you'll qualify for.",
    options: [
      { v: "u50", label: "Under 50" },
      { v: "50s", label: "50 – 59" },
      { v: "60s", label: "60 – 69" },
      { v: "70p", label: "70 or older" },
    ],
  },
  {
    key: "amount", icon: "bar-chart-3",
    q: "How much coverage are you thinking?",
    help: "A rough range is fine — we'll fine-tune it on your call.",
    options: [
      { v: "s", label: "Up to $25,000", sub: "Final expense range" },
      { v: "m", label: "$25,000 – $100,000" },
      { v: "l", label: "$100,000 – $500,000" },
      { v: "xl", label: "$500,000+", sub: "Income replacement" },
      { v: "unsure", label: "Not sure yet" },
    ],
  },
  {
    key: "tobacco", icon: "heart-pulse",
    q: "Have you used tobacco or nicotine in the last 12 months?",
    help: "Honest answers get you an accurate quote — nothing more.",
    options: [
      { v: "no", label: "No" },
      { v: "yes", label: "Yes" },
    ],
  },
  {
    key: "health", icon: "stethoscope",
    q: "How would you describe your general health?",
    help: "There are strong options at every level — including no-exam plans.",
    options: [
      { v: "great", label: "Excellent / Very good" },
      { v: "good", label: "Good — a few managed conditions" },
      { v: "fair", label: "Fair — some health issues" },
      { v: "guaranteed", label: "I've been declined before" },
    ],
  },
];

const RECS = {
  final: { name: "Final Expense Whole Life", line: "A simple, no-exam policy built to cover funeral and end-of-life costs — locked-in rates that never rise." },
  income: { name: "Term Life", line: "Affordable, high-coverage protection that replaces your income for the years your family needs it most." },
  debt: { name: "Term Life", line: "Coverage matched to your mortgage or loan term, so a debt never becomes your family's burden." },
  legacy: { name: "Whole Life", line: "Lifelong coverage that builds cash value and leaves a guaranteed legacy behind." },
};

function LifeQuiz() {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const [contact, setContact] = React.useState({ name: "", phone: "" });
  const [done, setDone] = React.useState(false);
  const total = LIFE_STEPS.length + 1; // + contact step
  const onContact = step === LIFE_STEPS.length;
  const progress = Math.round(((done ? total : step) / total) * 100);

  const pick = (key, v) => {
    setAnswers((a) => ({ ...a, [key]: v }));
    setTimeout(() => setStep((s) => s + 1), 160);
  };
  const back = () => setStep((s) => Math.max(0, s - 1));
  const submit = (e) => { e.preventDefault(); setDone(true); };

  const rec = RECS[answers.reason] || RECS.income;
  const noExam = answers.age === "70p" || answers.health === "guaranteed" || answers.amount === "s" || answers.reason === "final";

  /* ---------- Success / qualified state ---------- */
  if (done) {
    return (
      <div style={cardStyle}>
        <div style={{ textAlign: "center" }}>
          <div style={{ width: 66, height: 66, borderRadius: 999, background: "var(--blue-50)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 1.1rem" }}>
            <Icon name="check" size={36} strokeWidth={3} color="var(--brand-primary)" />
          </div>
          <span style={badgeStyle}>You Pre-Qualify</span>
          <h2 style={{ fontFamily: "var(--font-display)", color: "var(--navy-900)", fontSize: "1.7rem", margin: "0.6rem 0 0.4rem", letterSpacing: "-0.02em" }}>Great news, {contact.name.split(" ")[0] || "friend"} — you have solid options.</h2>
          <p style={{ color: "var(--text-body)", fontSize: "1.05rem", lineHeight: 1.55, margin: "0 auto 1.3rem", maxWidth: "42ch" }}>Based on your answers, a good starting point is:</p>
        </div>
        <div style={{ background: "var(--surface-lavender)", border: "1.5px solid var(--brand-secondary)", borderRadius: "var(--radius-lg)", padding: "1.1rem 1.25rem", marginBottom: "1.1rem" }}>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, color: "var(--brand-primary)", fontSize: "1.2rem" }}>{rec.name}</div>
          <div style={{ color: "var(--text-body)", fontSize: "0.98rem", lineHeight: 1.5, marginTop: "0.3rem" }}>{rec.line}</div>
        </div>
        {noExam && <div style={{ display: "flex", gap: "0.6rem", alignItems: "center", background: "var(--gold-50, #FBF3E0)", borderRadius: "var(--radius-md)", padding: "0.75rem 1rem", marginBottom: "1.1rem" }}><Icon name="shield-check" size={20} color="var(--gold-500)" /><span style={{ fontSize: "0.95rem", color: "var(--navy-900)", fontWeight: 600 }}>No-medical-exam plans are available for you.</span></div>}
        <div style={{ display: "flex", alignItems: "center", gap: "0.85rem", background: "var(--surface-tint)", borderRadius: "var(--radius-lg)", padding: "0.75rem 0.9rem", marginBottom: "1.1rem" }}>
          <img src={window.ANTHONY} alt="Anthony Hendrickson" style={{ width: 50, height: 50, borderRadius: 999, objectFit: "cover", border: "2px solid var(--gold-300)" }} />
          <div style={{ fontSize: "0.95rem", lineHeight: 1.4 }}><strong style={{ color: "var(--navy-900)" }}>Anthony will call you personally</strong><div style={{ color: "var(--text-muted)" }}>Founder &amp; Licensed Advisor — usually within one business day.</div></div>
        </div>
        <Button intent="cta" fullWidth size="lg" onClick={window.goConsult}>See my exact quotes &rarr;</Button>
        <p style={{ textAlign: "center", fontSize: "var(--fs-sm)", color: "var(--text-muted)", margin: "0.75rem 0 0" }}>One call. No pressure. Just real answers.</p>
      </div>
    );
  }

  /* ---------- Contact step ---------- */
  if (onContact) {
    const valid = contact.name.trim() && contact.phone.trim();
    return (
      <div style={cardStyle}>
        <QuizProgress step={step} total={total} progress={progress} onBack={back} />
        <div style={{ textAlign: "center", marginBottom: "1.25rem" }}>
          <div style={iconTileStyle}><Icon name="phone" size={26} color="var(--brand-primary)" /></div>
          <h2 style={qTitle}>Last step — where should we send your options?</h2>
          <p style={qHelp}>No spam, ever. A licensed advisor reviews your answers and reaches out. That's it.</p>
        </div>
        <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
          <Field label="Your name" name="name" placeholder="Jane Doe" required value={contact.name} onChange={(e) => setContact({ ...contact, name: e.target.value })} />
          <Field label="Best phone number" type="tel" name="phone" placeholder="(555) 555-5555" required value={contact.phone} onChange={(e) => setContact({ ...contact, phone: e.target.value })} />
          <Button intent="cta" fullWidth size="lg" type="submit" disabled={!valid}>Get My Free Options &rarr;</Button>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", fontSize: "var(--fs-sm)", color: "var(--text-muted)" }}>
            <Icon name="shield-check" size={15} color="var(--sky-400)" /> $0 obligation &middot; No spam &middot; No sales quotas
          </div>
        </form>
      </div>
    );
  }

  /* ---------- Question step ---------- */
  const s = LIFE_STEPS[step];
  return (
    <div style={cardStyle}>
      <QuizProgress step={step} total={total} progress={progress} onBack={back} />
      <div style={{ textAlign: "center", marginBottom: "1.25rem" }}>
        <div style={iconTileStyle}><Icon name={s.icon} size={26} color="var(--brand-primary)" /></div>
        <h2 style={qTitle}>{s.q}</h2>
        <p style={qHelp}>{s.help}</p>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: "0.6rem" }}>
        {s.options.map((o) => {
          const active = answers[s.key] === o.v;
          return (
            <button key={o.v} onClick={() => pick(s.key, o.v)} style={optStyle(active)}
              onMouseEnter={(e) => { if (!active) e.currentTarget.style.borderColor = "var(--brand-secondary)"; }}
              onMouseLeave={(e) => { if (!active) e.currentTarget.style.borderColor = "var(--gray-200)"; }}>
              {o.icon && <span style={{ flexShrink: 0, width: 38, height: 38, borderRadius: "var(--radius-sm)", background: "var(--blue-50)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={o.icon} size={20} color="var(--brand-primary)" /></span>}
              <span style={{ flex: 1, textAlign: "left" }}>
                <span style={{ display: "block", fontFamily: "var(--font-display)", fontWeight: 700, color: "var(--navy-900)", fontSize: "1.05rem" }}>{o.label}</span>
                {o.sub && <span style={{ display: "block", fontSize: "0.85rem", color: "var(--text-muted)" }}>{o.sub}</span>}
              </span>
              <Icon name="arrow-right" size={18} color={active ? "var(--brand-primary)" : "var(--gray-300, #C7CBD6)"} />
            </button>
          );
        })}
      </div>
    </div>
  );
}

function QuizProgress({ step, total, progress, onBack }) {
  return (
    <div style={{ marginBottom: "1.4rem" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.5rem" }}>
        {step > 0 ? (
          <button onClick={onBack} style={{ display: "inline-flex", alignItems: "center", gap: "0.3rem", background: "none", border: "none", cursor: "pointer", color: "var(--text-muted)", fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: "0.9rem", padding: 0 }}><Icon name="arrow-left" size={16} color="var(--text-muted)" />Back</button>
        ) : <span style={{ display: "inline-flex", alignItems: "center", gap: "0.35rem", color: "var(--brand-secondary)", fontWeight: 700, fontSize: "0.85rem" }}><Icon name="clock" size={15} color="var(--brand-secondary)" />Takes 30 seconds</span>}
        <span style={{ fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: "0.85rem", color: "var(--text-muted)", letterSpacing: "0.04em" }}>STEP {step + 1} OF {total}</span>
      </div>
      <div style={{ height: 7, background: "var(--surface-tint)", borderRadius: 999, overflow: "hidden" }}>
        <div style={{ height: "100%", width: progress + "%", background: "var(--gradient-accent)", borderRadius: 999, transition: "width 320ms var(--ease-out, cubic-bezier(0.22,1,0.36,1))" }} />
      </div>
    </div>
  );
}

const cardStyle = { background: "#fff", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-lg)", padding: "clamp(1.4rem, 1rem + 1.5vw, 2.2rem)" };
const iconTileStyle = { width: 56, height: 56, borderRadius: "var(--radius-md)", background: "var(--blue-50)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 0.9rem" };
const qTitle = { fontFamily: "var(--font-display)", color: "var(--navy-900)", fontSize: "clamp(1.3rem, 1.05rem + 1vw, 1.6rem)", margin: "0 0 0.4rem", lineHeight: 1.15, letterSpacing: "-0.02em" };
const qHelp = { color: "var(--text-muted)", fontSize: "0.98rem", lineHeight: 1.45, margin: 0, maxWidth: "40ch", marginInline: "auto" };
const badgeStyle = { fontFamily: "var(--font-ui)", fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", fontSize: "0.72rem", color: "var(--sky-600, #1D6FB8)", background: "var(--blue-50)", padding: "0.3rem 0.7rem", borderRadius: 999 };
const optStyle = (active) => ({ display: "flex", alignItems: "center", gap: "0.85rem", width: "100%", padding: "0.85rem 1rem", background: active ? "var(--blue-50)" : "#fff", border: `1.5px solid ${active ? "var(--brand-secondary)" : "var(--gray-200)"}`, borderRadius: "var(--radius-md)", cursor: "pointer", transition: "border-color 140ms ease, background 140ms ease", textAlign: "left" });

/* ============================ PAGE ============================ */
function LifePage() {
  const { PageFooter, Section, FeatureCard, ProcessRow, CtaBand, Accordion } = window;
  const { Icon } = window.MissionInsurancePartnersDesignSystem_445ed5;
  return (
    <>
      {/* Hero: quiz is the primary element */}
      <section style={{ background: "linear-gradient(155deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%)", color: "#fff", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: "0 auto 0 0", width: "40%", background: "var(--gradient-accent)", clipPath: "polygon(0 0, 72% 0, 100% 100%, 0 100%)", opacity: 0.5 }} />
        <div className="mip-hero-grid" style={{ position: "relative", maxWidth: "var(--container-max)", marginInline: "auto", paddingInline: "var(--container-pad)", paddingBlock: "clamp(2.75rem, 2rem + 3vw, 4.5rem)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-8)", alignItems: "center" }}>
          <div>
            <span style={{ fontFamily: "var(--font-ui)", fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", fontSize: "var(--fs-eyebrow)", color: "var(--gold-300)" }}>Life Insurance Made Simple</span>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-display)", color: "#fff", margin: "0.75rem 0 1rem", lineHeight: 1.06, letterSpacing: "-0.02em" }}>See what you qualify for in <span style={{ color: "var(--gold-300)" }}>30 seconds.</span></h1>
            <p style={{ fontSize: "var(--fs-lead)", color: "rgba(255,255,255,0.9)", lineHeight: "var(--lh-snug)", margin: "0 0 1.75rem", maxWidth: "44ch" }}>Answer a few quick questions and a licensed advisor will show you real options — including no-exam plans. No pressure. No obligation.</p>
            <div style={{ display: "flex", flexDirection: "column", gap: "0.9rem", marginBottom: "1.75rem" }}>
              {[["shield-check", "No-medical-exam options available"], ["hand-heart", "No pressure, no sales quotas"], ["wallet", "Plans that fit your monthly budget"]].map(([ic, t]) => (
                <span key={t} style={{ display: "flex", alignItems: "center", gap: "0.75rem", fontWeight: 600 }}><Icon name={ic} size={22} color="var(--gold-300)" />{t}</span>
              ))}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: "0.6rem", flexWrap: "wrap" }}>
              <span style={{ display: "flex", gap: 2 }}>{[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="star" size={18} color="var(--gold-300)" fill="var(--gold-300)" />)}</span>
              <span style={{ fontSize: "var(--fs-sm)", color: "rgba(255,255,255,0.85)" }}>Trusted by thousands of families across the US</span>
            </div>
          </div>
          <div><LifeQuiz /></div>
        </div>
      </section>

      {/* How it works */}
      <Section bg="page">
        <div style={{ textAlign: "center", marginBottom: "var(--space-8)" }}>
          <span style={window.eyebrowStyle}>How It Works</span>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", color: "var(--navy-900)", margin: "0.75rem 0 0", letterSpacing: "-0.02em" }}>From quiz to coverage in three easy steps</h2>
        </div>
        <ProcessRow steps={[
          { title: "Take the 30-second quiz", body: "Tell us your age, coverage goal, and a little about your health. No paperwork.", result: "See what you pre-qualify for" },
          { title: "Talk to a real advisor", body: "Anthony reviews your answers and calls to walk you through your best options — plain English, no jargon.", result: "One-on-one, no pressure" },
          { title: "Get covered your way", body: "Choose the plan that fits your family and your budget. Many with no medical exam.", result: "Peace of mind, locked in" },
        ]} />
      </Section>

      {/* Products */}
      <Section bg="lavender">
        <div style={{ textAlign: "center", marginBottom: "var(--space-8)" }}>
          <span style={window.eyebrowStyle}>Coverage We Offer</span>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", color: "var(--navy-900)", margin: "0.75rem 0 0", letterSpacing: "-0.02em" }}>The right kind of life insurance for you</h2>
        </div>
        <div className="mip-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-5)" }}>
          <FeatureCard icon="heart-pulse" title="Term Life">Affordable, high-coverage protection for a set number of years. <strong>Best for:</strong> replacing income and covering a mortgage while the kids are still home.</FeatureCard>
          <FeatureCard icon="layers" title="Whole Life">Lifelong coverage that never expires and builds cash value over time. <strong>Best for:</strong> leaving a guaranteed legacy.</FeatureCard>
          <FeatureCard icon="hand-heart" title="Final Expense">Simple, no-exam whole life built to cover funeral and end-of-life costs. <strong>Best for:</strong> adults 50+ who want to spare their family the bills.</FeatureCard>
        </div>
      </Section>

      {/* Social proof */}
      <Section bg="page">
        <div style={{ maxWidth: 720, marginInline: "auto", textAlign: "center" }}>
          <span style={{ display: "inline-flex", gap: 3, marginBottom: "1rem" }}>{[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="star" size={26} color="var(--gold-500)" fill="var(--gold-500)" />)}</span>
          <p style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(1.35rem, 1.1rem + 1vw, 1.8rem)", lineHeight: 1.4, color: "var(--navy-900)", fontStyle: "italic", margin: "0 0 1.25rem" }}>&ldquo;I put off getting life insurance for years because I thought it'd be complicated and pushy. The quiz took a minute, and Anthony explained everything without a single sales pitch. I'm finally covered.&rdquo;</p>
          <div style={{ fontWeight: 700, color: "var(--navy-900)" }}>Denise R.</div>
          <div style={{ color: "var(--text-muted)", fontSize: "var(--fs-sm)" }}>Final Expense policyholder, age 64</div>
        </div>
      </Section>

      {/* FAQ */}
      <Section bg="tint">
        <div style={{ maxWidth: 820, marginInline: "auto" }}>
          <div style={{ textAlign: "center", marginBottom: "var(--space-7)" }}>
            <span style={window.eyebrowStyle}>Common Questions</span>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", color: "var(--navy-900)", margin: "0.75rem 0 0", letterSpacing: "-0.02em" }}>Answers before you even ask</h2>
          </div>
          <Accordion items={[
            { q: "Does taking the quiz obligate me to anything?", a: "Not at all. The quiz is 100% free and there's no obligation to buy. You'll simply see what you pre-qualify for and get a call from a licensed advisor if you'd like one." },
            { q: "Can I get coverage without a medical exam?", a: "Often, yes. Many of our final expense and simplified-issue whole life plans require <strong>no medical exam</strong> — just a few health questions. Your quiz answers help us find those options for you." },
            { q: "How much does life insurance cost?", a: "It depends on your age, health, and how much coverage you want — but plans start lower than most people expect. Final expense plans in particular are built to fit a fixed monthly budget." },
            { q: "Will my rates go up over time?", a: "With whole life and final expense policies, your rate is <strong>locked in for life</strong> — it never increases and your coverage never expires as long as premiums are paid." },
            { q: "What if I've been declined before?", a: "You still have options. Guaranteed-issue plans accept applicants regardless of health history. Let us know on your call and we'll find the right fit." },
          ]} />
        </div>
      </Section>

      <CtaBand title="Not sure which plan is right? That's exactly what we're here for." lead="Take the 30-second quiz or talk to a licensed advisor today. One call. No pressure. Just real answers." chips={["Term Life", "Whole Life", "Final Expense", "No-Exam Options"]} ctaLabel="Book a Free Consultation" />
      <PageFooter />
    </>
  );
}
window.LifePage = LifePage;
window.LifeQuiz = LifeQuiz;