// Footer CTA + site footer
function Footer({ tweaks }) {
  return (
    <>
      <section style={{ padding: "160px 0 80px", position: "relative" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto", padding: "0 32px" }}>
          <Reveal>
            <div style={{
              position: "relative", overflow: "hidden",
              padding: "120px 80px",
              borderRadius: 24,
              background: "var(--bg-2)",
              border: "1px solid var(--line)",
              textAlign: "center",
            }}>
              <div style={{
                position: "absolute", inset: 0, pointerEvents: "none",
                background: `
                  radial-gradient(circle at 20% 30%, var(--amber) 0%, transparent 40%),
                  radial-gradient(circle at 80% 70%, var(--indigo) 0%, transparent 40%)
                `,
                opacity: 0.12, filter: "blur(20px)",
              }} />
              <div style={{ position: "relative" }}>
                <Eyebrow>Start a conversation</Eyebrow>
                <h2 className="serif" style={{
                  fontSize: "clamp(56px, 8vw, 120px)",
                  lineHeight: 0.95, marginTop: 20, marginBottom: 32,
                  maxWidth: "14ch", marginLeft: "auto", marginRight: "auto",
                }}>
                  Institutions don't<br/>
                  <span style={{ fontStyle: "italic", color: "var(--ink-dim)" }}>buy software.</span><br/>
                  They <span style={{ fontStyle: "italic" }}>partner.</span>
                </h2>
                <p style={{
                  fontSize: 18, color: "var(--ink-dim)", maxWidth: 560,
                  margin: "0 auto 40px", lineHeight: 1.5,
                }}>
                  Book a working session with our product and implementation team.
                  We'll scope a pilot in 30 minutes.
                </p>
                <div style={{ display: "inline-flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
                  <CTA size="lg">Book a working session</CTA>
                  <GhostCTA style={{ padding: "16px 24px", fontSize: 15 }}>Download capability deck</GhostCTA>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <footer style={{ padding: "80px 32px 40px", borderTop: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <div style={{
            display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr",
            gap: 40, marginBottom: 80,
          }} className="footer-grid">
            <div>
              <Logo />
              <p style={{ marginTop: 20, fontSize: 14, color: "var(--ink-dim)", maxWidth: 320, lineHeight: 1.6 }}>
                Engineering the systems institutions and enterprises run on.
                Offices in Doha, Amman, Nairobi, and Lisbon.
              </p>
              <div style={{ display: "flex", gap: 10, marginTop: 24 }}>
                {["Soc 2 II", "ISO 27001", "GDPR", "PCI DSS"].map((c) => (
                  <span key={c} className="mono" style={{
                    fontSize: 10, padding: "4px 8px",
                    border: "1px solid var(--line-strong)", borderRadius: 4,
                    color: "var(--ink-mute)", letterSpacing: "0.08em",
                  }}>{c}</span>
                ))}
              </div>
            </div>
            {[
              { h: "Products", l: [tweaks.product1_name, tweaks.product2_name, "Platform", "Integrations"] },
              { h: "Industries", l: ["Public sector", "Utilities", "Banking", "Logistics"] },
              { h: "Resources", l: ["Documentation", "Implementation guide", "Security", "Status"] },
              { h: "Company", l: ["About", "Careers", "Press", "Contact"] },
            ].map((col) => (
              <div key={col.h}>
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.14em", marginBottom: 18 }}>
                  {col.h.toUpperCase()}
                </div>
                <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
                  {col.l.map((item) => (
                    <li key={item}>
                      <a href="#" style={{ fontSize: 14, color: "var(--ink-dim)", transition: "color 200ms" }}
                         onMouseEnter={(e) => e.currentTarget.style.color = "var(--ink)"}
                         onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink-dim)"}>
                        {item}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            paddingTop: 28, borderTop: "1px solid var(--line)", flexWrap: "wrap", gap: 20,
          }}>
            <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>
              © 2026 EPAKDIGITAL SYSTEMS · ALL RIGHTS RESERVED
            </span>
            <div style={{ display: "flex", gap: 20 }}>
              {["Privacy", "Terms", "Cookies", "Accessibility"].map((l) => (
                <a key={l} href="#" className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.08em" }}>
                  {l}
                </a>
              ))}
            </div>
          </div>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, { Footer });