/* Marketing homepage — section components. Exposed on window. */
const { useState } = React;

function MIcon({ name, size = 24, fill, color }) {
  return <i data-lucide={name} width={size} height={size}
    style={{ width: size, height: size, display: 'inline-flex', color }} {...(fill ? { fill } : {})}></i>;
}

function Nav({ onStart }) {
  return (
    <nav className="mk-nav"><div className="mk-wrap in">
      <img className="logo" src="../../assets/coverageflow-logo.svg" alt="CoverageFlow" />
      <div className="links">
        <a href="#">Life insurance</a><a href="#">Wills &amp; trusts</a>
        <a href="#">How it works</a><a href="#">About</a>
      </div>
      <div className="mk-right">
        <a className="mk-btn ghost" href="#">Log in</a>
        <button className="mk-btn primary" onClick={onStart}>Check my price</button>
      </div>
    </div></nav>
  );
}

function Hero({ onStart }) {
  return (
    <section className="mk-hero"><div className="mk-wrap"><div className="frame">
      <image-slot id="mk-hero" shape="rect" placeholder="Drop a warm family lifestyle photo"></image-slot>
      <div className="scrim"></div>
      <div className="content">
        <span className="rating"><span className="s">{[0,0,0,0,0].map((_,i)=><MIcon key={i} name="star" size={14} fill="currentColor" />)}</span> 4.8 · 4,000+ reviews</span>
        <h1>Protect the people you love, in minutes.</h1>
        <p className="sub">Affordable term life insurance with no medical exam. 100% online, from a name you can trust.</p>
        <button className="mk-btn primary lg" onClick={onStart}>Check my price <MIcon name="arrow-right" size={20} /></button>
        <div className="badges">
          <div className="b"><div className="n">10 min</div><div className="l">to get covered</div></div>
          <div className="b"><div className="n">$3M</div><div className="l">in coverage</div></div>
          <div className="b"><div className="n">$0</div><div className="l">medical exam</div></div>
        </div>
      </div>
    </div></div></section>
  );
}

function Proof() {
  return (
    <section className="mk-proof"><div className="mk-wrap">
      <div className="lab">Backed &amp; recognized by</div>
      <div className="row"><span>Trustpilot</span><span>NerdWallet</span><span>Forbes</span><span>Business Insider</span></div>
    </div></section>
  );
}

function ValueProps() {
  const items = [
    ['shield-check', 'Get covered in 10 minutes', 'Answer a few questions and get a real-time decision — no waiting, no paperwork.'],
    ['stethoscope', 'No medical exam', 'Most applicants skip the needles and the clinic visit entirely.'],
    ['file-text', 'Free will & trust', 'Every policy includes estate-planning tools worth hundreds, at no extra cost.'],
    ['piggy-bank', 'Your best price', 'We compare rates so you lock in coverage that fits your budget.'],
  ];
  return (
    <section className="mk-vals"><div className="mk-wrap">
      <div className="mk-shead">
        <h2>The no-medical-exam, instant life insurance built for families.</h2>
        <p>Everything you need to protect your family's future — none of the friction.</p>
      </div>
      <div className="mk-grid4">
        {items.map(([ic, t, d]) => (
          <div className="mk-vcard" key={t}>
            <div className="ico"><MIcon name={ic} size={24} /></div>
            <h3>{t}</h3><p>{d}</p>
          </div>
        ))}
      </div>
    </div></section>
  );
}

function HowItWorks({ onStart }) {
  const steps = [
    ['Tell us about your needs', 'A few quick questions about your family and your goals.'],
    ['Add your basic details', 'Confirm a handful of facts — no medical exam for most.'],
    ['Get your final rate', 'See your real monthly price and get covered the same day.'],
  ];
  return (
    <section className="mk-how"><div className="mk-wrap">
      <div className="mk-shead"><h2>Covered in three simple steps</h2></div>
      <div className="mk-steps">
        {steps.map(([t, d], i) => (
          <div className="mk-step" key={t}>
            <div className="n">{i + 1}</div><h3>{t}</h3><p>{d}</p><div className="ln"></div>
          </div>
        ))}
      </div>
      <div style={{ textAlign: 'center', marginTop: 44 }}>
        <button className="mk-btn ink lg" onClick={onStart}>Check my price</button>
      </div>
    </div></section>
  );
}

function Comparison() {
  const rows = [
    ['Instant decision', true, false],
    ['No medical exam', true, false],
    ['Same-day coverage', true, false],
    ['Free will & trust', true, false],
    ['Trusted carriers', true, true],
  ];
  return (
    <section className="mk-compare"><div className="mk-wrap">
      <div className="mk-shead"><h2>Life insurance, made easy</h2><p>See how CoverageFlow compares to the traditional way.</p></div>
      <div className="mk-table">
        <div className="mk-trow head">
          <div className="feat"></div>
          <div className="c mk-col-us">CoverageFlow</div>
          <div className="c">Traditional</div>
        </div>
        {rows.map(([f, a, b]) => (
          <div className="mk-trow" key={f}>
            <div className="feat">{f}</div>
            <div className="c mk-col-us">{a ? <span className="mk-yes"><MIcon name="check" size={22} /></span> : <span className="mk-no"><MIcon name="minus" size={22} /></span>}</div>
            <div className="c">{b ? <span className="mk-yes"><MIcon name="check" size={22} /></span> : <span className="mk-no"><MIcon name="minus" size={22} /></span>}</div>
          </div>
        ))}
      </div>
    </div></section>
  );
}

function Feature({ onStart }) {
  return (
    <section className="mk-feature"><div className="mk-wrap"><div className="in">
      <div>
        <span className="cv-eyebrow eye">Included free</span>
        <h2 style={{ marginTop: 12 }}>Free wills &amp; trusts, right from your phone.</h2>
        <p>We've simplified estate planning so you can take care of it in one sitting. Estate plans are free with your policy — or available on their own.</p>
        <button className="mk-btn primary" onClick={onStart}>Learn more <MIcon name="arrow-right" size={18} /></button>
      </div>
      <image-slot id="mk-feature" shape="rounded" radius="16" placeholder="Drop a phone / hands lifestyle photo"></image-slot>
    </div></div></section>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  const qs = [
    ['What does life insurance cover?', 'A term life policy pays your beneficiaries a lump sum if you pass away during the policy term — money they can use for living expenses, a mortgage, tuition, or final costs.'],
    ['Do I need a medical exam?', 'Most applicants are approved with no medical exam at all. We use a few health questions and instant data to make a decision in minutes.'],
    ['How much coverage do I need?', 'A common rule of thumb is 10–15× your annual income, plus any debts like a mortgage. Our quote flow gives you a personalized estimate.'],
    ['Can I speak with a real person?', 'Absolutely. Licensed CoverageFlow agents are a phone call away at every step — no pressure, no commission games.'],
  ];
  return (
    <section className="mk-faq"><div className="mk-wrap">
      <div className="mk-shead"><h2>Questions, answered</h2></div>
      <div className="mk-faqlist">
        {qs.map(([q, a], i) => (
          <div className={'mk-faqitem' + (open === i ? ' open' : '')} key={q}>
            <button className="mk-faqq" onClick={() => setOpen(open === i ? -1 : i)}>
              {q}<span className="pm"><MIcon name="plus" size={22} /></span>
            </button>
            <div className="mk-faqa">{a}</div>
          </div>
        ))}
      </div>
    </div></section>
  );
}

function FinalCTA({ onStart }) {
  return (
    <section className="mk-final"><div className="mk-wrap"><div className="band">
      <h2>Lock in your best price today.</h2>
      <p>Rates rise as you get older — the best time to get covered is now. It only takes a few minutes.</p>
      <button className="mk-btn ink lg" onClick={onStart} style={{ background: '#fff', color: 'var(--ink)' }}>Check my price <MIcon name="arrow-right" size={20} /></button>
    </div></div></section>
  );
}

function Footer() {
  const cols = [
    ['Product', ['Life insurance', 'Wills & trusts', 'How it works', 'Pricing']],
    ['Company', ['About us', 'Careers', 'Reviews', 'Press']],
    ['Legal', ['Terms of service', 'Privacy policy', 'Licenses', 'Accessibility']],
  ];
  return (
    <footer className="mk-footer"><div className="mk-wrap">
      <div className="cols">
        <div>
          <img className="logo" src="../../assets/coverageflow-logo.svg" alt="CoverageFlow" />
          <p style={{ fontSize: 14, lineHeight: 1.6, maxWidth: 260, margin: 0 }}>Coverage, made human. Affordable life insurance and estate planning, 100% online.</p>
        </div>
        {cols.map(([h, links]) => (
          <div key={h}><h4>{h}</h4>{links.map((l) => <a href="#" key={l}>{l}</a>)}</div>
        ))}
      </div>
      <div className="fine">
        CoverageFlow is a demonstration brand created for the CoverageFlow Funnel Design System — not a real
        insurance company. Sample copy and figures are illustrative. Insurance products described
        here are fictional and not offered for sale.
      </div>
    </div></footer>
  );
}

Object.assign(window, { Nav, Hero, Proof, ValueProps, HowItWorks, Comparison, Feature, FAQ, FinalCTA, Footer, MIcon });