// EzClaim — marketing landing page (root). CTA → /lookup (the app).
// Built entirely from the existing design system (styles.css tokens + ui.jsx
// primitives), so it stays visually identical to the rest of the product.

function LandingScreen({ nav }) {
  const goLookup = () => nav("/lookup");
  const seeHow = () => {
    const el = document.getElementById("how");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <div className="fade-in" style={{ display: "flex", flexDirection: "column", gap: "clamp(40px, 7vw, 72px)" }}>

      {/* Hero */}
      <section className="hero" style={{ paddingBottom: 0 }}>
        <div className="eyebrow"><span className="pulse-dot" /> Maryland Homestead Tax Credit · 2026 filing window</div>
        <h1 className="h-display">Lock in the Homestead cap on your Maryland home.</h1>
        <p className="lead">
          If the Homestead Credit isn't on file, SDAT can raise your home's <strong>taxable</strong> assessment with
          no cap — and you pay the difference. Look up your address to see your status, then file in about four minutes.
        </p>
        <div className="cta-bar" style={{ marginTop: 0, maxWidth: 460, flexWrap: "wrap" }}>
          <Button kind="primary" size="lg" iconRight={<I.ArrowRight size={16} />} onClick={goLookup}>Check my property</Button>
          <Button kind="secondary" size="lg" onClick={seeHow}>See how it works</Button>
        </div>
        <div className="lookup-hint" style={{ marginTop: 14 }}>
          <I.Lock size={13} /> Free to check · No account needed · You see the price before you pay
        </div>
      </section>

      {/* Why it matters */}
      <section>
        <div className="fp-decision">
          <div className="fp-decision-ico"><I.Alert size={20} /></div>
          <div>
            <div className="h-section">Why this matters</div>
            <p className="subtle" style={{ margin: 0, maxWidth: "64ch" }}>
              The Homestead Credit caps how much your <em>taxable</em> assessment can rise each year — 10% statewide,
              and often lower in your county. Without it on file, a reassessment can push your bill up with nothing
              holding it back. Filing is a one-time application to SDAT.
            </p>
          </div>
        </div>
      </section>

      {/* How it works */}
      <section id="how">
        <div className="text-center mb-6">
          <div className="eyebrow">How it works</div>
          <h2 className="h-page" style={{ marginTop: 6 }}>Three steps, about four minutes.</h2>
        </div>
        <div className="trust" style={{ marginTop: 0 }}>
          <StepCard n="1" icon={<I.Search size={20} />} title="Look up your address"
            body="We pull your property's public SDAT record and show whether the Homestead Credit is already on file." />
          <StepCard n="2" icon={<I.Doc size={20} />} title="We prepare your filing"
            body="We complete the official SDAT Homestead application from your details — you review before anything is sent." />
          <StepCard n="3" icon={<I.Receipt size={20} />} title="We submit & track it"
            body="We send it to SDAT and follow it to confirmation. You get a status link the whole way." />
        </div>
      </section>

      {/* Two ways to file */}
      <section>
        <div className="text-center mb-6">
          <div className="eyebrow">Two ways to file</div>
          <h2 className="h-page" style={{ marginTop: 6 }}>File free yourself, or let us handle it.</h2>
        </div>
        <div className="choice-grid">
          <div className="choice">
            <div className="row between"><div className="choice-title">File free with SDAT</div><Tag>Free</Tag></div>
            <div className="choice-price"><strong>$0</strong> · paper or online</div>
            <ul>
              <li><span className="ck"><I.Check size={15} /></span> The official state route, always free</li>
              <li><span className="ck"><I.Check size={15} /></span> You fill out and submit the form yourself</li>
              <li><span className="ck"><I.Check size={15} /></span> You track it with SDAT directly</li>
            </ul>
            <Button kind="secondary" iconRight={<I.ExternalLink size={14} />} onClick={() => nav("/sdat")}>How to file free</Button>
          </div>
          <div className="choice recommended">
            <span className="rec-tag">Most popular</span>
            <div className="row between"><div className="choice-title">EzClaim files for you</div><Tag kind="info">$39.99</Tag></div>
            <div className="choice-price"><strong>$39.99</strong> · one-time, no subscription</div>
            <ul>
              <li><span className="ck"><I.Check size={15} /></span> We prepare the official SDAT application</li>
              <li><span className="ck"><I.Check size={15} /></span> We submit it and confirm receipt</li>
              <li><span className="ck"><I.Check size={15} /></span> Tracked to SDAT confirmation with a status link</li>
              <li><span className="ck"><I.Check size={15} /></span> Sensitive details encrypted for internal review</li>
            </ul>
            <Button kind="primary" iconRight={<I.ArrowRight size={14} />} onClick={goLookup}>Start with my address</Button>
          </div>
        </div>
      </section>

      {/* Trust strip */}
      <section>
        <div className="trust" style={{ marginTop: 0 }}>
          <TrustItem icon={<I.Shield size={18} />} t="Not a government agency"
            d="We're an independent service. The credit is administered by Maryland SDAT — you can always file free." />
          <TrustItem icon={<I.Lock size={18} />} t="Your data stays protected"
            d="Used only to prepare your filing. Sensitive materials are encrypted for internal review." />
          <TrustItem icon={<I.DollarSign size={18} />} t="Flat $39.99, shown upfront"
            d="One-time fee, no subscription. You see the price before you pay anything." />
          <TrustItem icon={<I.Refresh size={18} />} t="Tracked to confirmation"
            d="We follow your filing through to SDAT confirmation and keep you posted." />
        </div>
      </section>

      {/* Final CTA */}
      <section className="savings" style={{ textAlign: "center", padding: "clamp(28px, 5vw, 44px) 22px" }}>
        <h2 style={{ color: "#fff", fontSize: "clamp(22px, 3vw, 30px)", fontWeight: 700, margin: "0 0 8px", letterSpacing: "-0.015em" }}>
          See your Homestead status in seconds.
        </h2>
        <p className="s-sub" style={{ maxWidth: "52ch", margin: "0 auto 20px" }}>
          Enter your Maryland address and we'll show whether the credit is on file and what filing protects. Free to check.
        </p>
        <Button kind="secondary" size="lg" iconRight={<I.ArrowRight size={16} />} onClick={goLookup}>Check my property</Button>
        <div className="s-fine" style={{ borderTop: 0, marginTop: 14, paddingTop: 0 }}>
          EzClaim is not a government agency. Approval is determined by SDAT. You can file free at sdathtc.dat.maryland.gov.
        </div>
      </section>

    </div>
  );
}

function StepCard({ n, icon, title, body }) {
  return (
    <div className="trust-item" style={{ flexDirection: "column", gap: 10 }}>
      <div className="row gap-3" style={{ alignItems: "center" }}>
        <span style={{ width: 38, height: 38, borderRadius: 10, background: "var(--brand-50)", color: "var(--brand-700)", border: "1px solid var(--brand-100)", display: "grid", placeItems: "center", flexShrink: 0 }}>{icon}</span>
        <span className="eyebrow">Step {n}</span>
      </div>
      <div>
        <div className="ti-t" style={{ fontSize: 15 }}>{title}</div>
        <div className="ti-d">{body}</div>
      </div>
    </div>
  );
}

function TrustItem({ icon, t, d }) {
  return (
    <div className="trust-item">
      <span className="ti-ico">{icon}</span>
      <div>
        <div className="ti-t">{t}</div>
        <div className="ti-d">{d}</div>
      </div>
    </div>
  );
}

window.LandingScreen = LandingScreen;