// Final CTA + footer.
const FinalCTA = () => (
  <section className="section" style={{ background: "var(--ink)", color: "#fff", borderTop: 0 }}>
    <div className="container" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "center" }}>
      <div>
        <span className="eyebrow" style={{ color: "#7bbd86" }}>Stop typing. Start scanning.</span>
        <h2 style={{ color: "#fff", marginTop: 16, marginBottom: 16 }}>Stop typing from healthcare paperwork.</h2>
        <p style={{ fontSize: 18, color: "rgba(255,255,255,0.7)", maxWidth: 520, margin: 0, lineHeight: 1.5 }}>
          Send us your messiest fax. Watch it come back as structured fields in under a minute. First 10 pages on us.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
          <a href="contact.html" className="btn btn-green arrow">Request free trial</a>
        </div>
      </div>
      <div style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 12, padding: 24 }}>
        <div style={{ fontSize: 12, letterSpacing: "0.06em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)", fontWeight: 600, marginBottom: 14 }}>What you get on day one</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {[
            "10 pages free, no card",
            "Drag & drop or POST to the API",
            "Per-field confidence in <60 seconds",
            "Export to CSV, JSON, webhook",
          ].map((t) => (
            <div key={t} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 14.5 }}>
              <span style={{ color: "var(--green)" }}><window.Icons.Check size={16} stroke={2.4}/></span>
              {t}
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer style={{ background: "#0a100d", color: "rgba(255,255,255,0.7)", padding: "48px 0 32px", borderTop: "1px solid rgba(255,255,255,0.08)" }}>
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr", gap: 32, marginBottom: 40 }}>
        <div>
          <a href="#" className="brand" style={{ color: "#fff" }} aria-label="Reqscan">
            <svg className="brand-mark" width="26" height="26" viewBox="0 0 84 84" aria-hidden="true">
              <rect x="2" y="2" width="80" height="80" rx="16" fill="#ffffff"/>
              <g fill="none" stroke="#0a1a1f" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round">
                <path d="M22 32 L22 22 L32 22"/>
                <path d="M52 22 L62 22 L62 32"/>
                <path d="M62 52 L62 62 L52 62"/>
                <path d="M32 62 L22 62 L22 52"/>
              </g>
              <path d="M28 45 Q35 36 42 42 T56 39" fill="none" stroke="#0f4c5c" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Reqscan
          </a>
          <p style={{ fontSize: 13.5, marginTop: 16, lineHeight: 1.55, maxWidth: 320 }}>
            Healthcare paper intake digitization. Built for ops teams buried in faxes, scans, and handwritten forms.
          </p>
        </div>
        {[
          { h: "Product", l: [["#examples", "Document types"], ["#how", "How it works"], ["#compare", "Compare"], ["#pricing", "Pricing"]] },
          { h: "Company", l: [["contact.html", "Contact"]] },
        ].map((g) => (
          <div key={g.h} style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <div style={{ fontSize: 12, letterSpacing: "0.06em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)", fontWeight: 600 }}>{g.h}</div>
            {g.l.map(([href, l]) => (
              <a key={l} href={href} style={{ fontSize: 13.5, color: "rgba(255,255,255,0.75)" }}>{l}</a>
            ))}
          </div>
        ))}
      </div>
      <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: 24, display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12.5, color: "rgba(255,255,255,0.5)" }}>
        <span>© 2026 Reqscan. All rights reserved.</span>
        <span>407 Lincoln Rd · Miami Beach, FL 33139</span>
      </div>
    </div>
  </footer>
);

window.FinalCTA = FinalCTA;
window.Footer = Footer;