const Footer = () => {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);

  return (
    <>
      {/* Consult CTA — deep green (no gold bg) with contact card */}
      <section id="consult" style={{ background: "var(--green-900)", color: "var(--cream)", padding: "120px 0", position: "relative", overflow: "hidden" }}>
        <div className="container" style={{ position: "relative", zIndex: 2 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 80, alignItems: "start" }} className="cta-grid">
            {/* Left — pitch + form */}
            <div>
              <span className="eyebrow on-dark">Let's talk</span>
              <h2 className="display" style={{ fontSize: "clamp(39px, 5.3vw, 67px)", lineHeight: 0.98, marginTop: 20, color: "var(--cream)" }}>
                The first conversation is <span style={{ color: "var(--gold-400)" }}>on us</span>.
              </h2>
              <p style={{ fontSize: 18, lineHeight: 1.55, marginTop: 28, maxWidth: 480, color: "rgba(250,246,236,0.78)" }}>
                60 minutes. No sales pitch. You leave with a one-page summary of what we'd actually do — yours to keep, advisor or not.
              </p>

              {!submitted ?
              <form onSubmit={(e) => {e.preventDefault();if (email) setSubmitted(true);}}
              style={{ marginTop: 36, display: "flex", alignItems: "stretch", border: "1px solid var(--hairline-light)", borderRadius: 8, overflow: "hidden", maxWidth: 540 }}>
                  <input type="email" required placeholder="your@email.in" value={email} onChange={(e) => setEmail(e.target.value)}
                style={{ flex: 1, border: 0, background: "transparent", padding: "16px 18px", fontSize: 16, fontFamily: "Poppins", color: "var(--cream)", outline: "none" }} />
                  <button type="submit" className="btn btn-cream" style={{ borderRadius: 0, padding: "0 22px" }}>
                    Request a call <ArrowIcon />
                  </button>
                </form> :

              <div style={{ marginTop: 36, padding: "18px 22px", border: "1px solid var(--gold-500)", borderRadius: 8, display: "flex", gap: 14, alignItems: "center", maxWidth: 540, background: "rgba(232,179,33,0.08)" }}>
                  <span style={{ fontSize: 22, color: "var(--gold-400)" }}>✓</span>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 15 }}>We've got it.</div>
                    <div style={{ fontSize: 14, color: "rgba(250,246,236,0.7)" }}>A planner will reach out within one working day.</div>
                  </div>
                </div>
              }

              <div style={{ display: "flex", gap: 22, marginTop: 24, flexWrap: "wrap" }}>
                {["No obligation", "No product pitch", "Your data, never sold"].map((x) =>
                <span key={x} className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "rgba(250,246,236,0.65)", display: "inline-flex", alignItems: "center", gap: 8 }}>
                    <span style={{ width: 6, height: 6, background: "var(--gold-500)", borderRadius: "50%" }} /> {x.toUpperCase()}
                  </span>
                )}
              </div>
            </div>

            {/* Right — contact card */}
            <div style={{
              background: "var(--green-800)",
              border: "1px solid var(--hairline-light)",
              borderRadius: 8,
              padding: "40px 36px"
            }}>
              <span className="eyebrow on-dark">Reach us</span>
              <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 28 }}>
                <ContactRow icon="pin" label="Visit our office">
                  B-412, Bestech Business Tower<br />
                  Sector 68, Mohali<br />
                  Punjab, India
                </ContactRow>
                <ContactRow icon="phone" label="Call us">
                  <a href="tel:+919779270009" style={{ fontWeight: 600 }}>+91 97792 70009</a>
                  <span style={{ display: "block", fontSize: 12, color: "rgba(250,246,236,0.6)", marginTop: 4 }}>Mon–Sat · 10:00–19:00 IST</span>
                </ContactRow>
                <ContactRow icon="mail" label="Email">
                  <a href="mailto:maxwealthfin@gmail.com" style={{ fontWeight: 600, borderBottom: "1px solid var(--hairline-light)" }}>maxwealthfin@gmail.com</a>
                </ContactRow>
              </div>
            </div>
          </div>
        </div>

        {/* Decorative mark */}
        <div aria-hidden style={{ position: "absolute", right: -100, bottom: -100, opacity: 0.06, pointerEvents: "none", transform: "rotate(-8deg)" }}>
          <Logo height={400} variant="mark" />
        </div>

        <style>{`@media (max-width: 900px){ .cta-grid{ grid-template-columns: 1fr !important; gap: 40px !important } }`}</style>
      </section>

      {/* Compliance marquee */}
      <Marquee dark={false} items={[
      "AMFI Registered Mutual Fund Distributor",
      "Certified Financial Planner — FPSB",
      "MSME Registered",
      "20+ Years in Financial Services & Banking"]
      } />

      {/* Footer */}
      <footer style={{ background: "var(--green-900)", color: "var(--cream)", padding: "96px 0 32px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: 48, marginBottom: 72 }} className="foot-grid">
            <div>
              <Logo height={48} />
              <p style={{ fontSize: 15, color: "rgba(250,246,236,0.7)", maxWidth: 380, marginTop: 24, lineHeight: 1.6 }}>
                <strong style={{ color: "var(--cream)", fontWeight: 600, display: "block", marginBottom: 6, letterSpacing: "0.01em" }}>MaxWealth Investments</strong>
                A one-stop wealth practice for Indian families, NRIs and businesses. Headquartered in Mohali, Punjab. Serving across 14 cities and 9 countries.
              </p>
              <div style={{ marginTop: 28, display: "flex", gap: 12 }}>
                {["in", "x", "yt", "ig"].map((s) =>
                <a key={s} href="#" style={{ width: 38, height: 38, borderRadius: "50%", border: "1px solid var(--hairline-light)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 11, color: "var(--cream)", letterSpacing: "0.05em" }}>{s}</a>
                )}
              </div>
            </div>
            {[
            { h: "Services", l: [
              { t: "Bespoke Wealth Architecture", h: `${window.__BASE || ""}services/bespoke-wealth-architecture.html` },
              { t: "Treasury Management", h: `${window.__BASE || ""}services/treasury-management.html` },
              { t: "NRI Services", h: `${window.__BASE || ""}services/nri-services.html` },
              { t: "Alternative Investment Vehicles", h: `${window.__BASE || ""}services/alternative-investment-vehicles.html` },
              { t: "External Asset Tracking", h: `${window.__BASE || ""}services/external-asset-tracking.html` },
              { t: "Nomination & Estate Readiness", h: `${window.__BASE || ""}services/nomination-estate-audits.html` }]
            },
            { h: "Practice", l: [
              { t: "About", h: `${window.__BASE || ""}about.html` },
              { t: "Career", h: `${window.__BASE || ""}careers.html` },
              { t: "Contact", h: `${window.__BASE || ""}contact.html` },
              { t: "Client Login", h: window.CLIENT_PORTAL || "https://maxwealthinvestments.my-portfolio.co.in" }]
            },
            { h: "Contact", l: [
              { t: "maxwealthfin@gmail.com", h: "mailto:maxwealthfin@gmail.com" },
              { t: "+91 97792 70009", h: "tel:+919779270009" },
              { t: "B-412, Bestech Tower", h: "https://maps.google.com/?q=Bestech+Business+Tower+Sector+68+Mohali" },
              { t: "Sector 68, Mohali", h: "https://maps.google.com/?q=Bestech+Business+Tower+Sector+68+Mohali" }]
            }].
            map((col, i) =>
            <div key={i}>
                <div className="eyebrow on-dark" style={{ marginBottom: 22 }}>{col.h}</div>
                <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
                  {col.l.map((x) =>
                <li key={x.t}>
                      <a href={x.h} style={{ fontSize: 14, color: "rgba(250,246,236,0.82)", transition: "color .2s" }}
                  onMouseEnter={(e) => e.currentTarget.style.color = "var(--gold-400)"}
                  onMouseLeave={(e) => e.currentTarget.style.color = "rgba(250,246,236,0.82)"}>
                        {x.t}
                      </a>
                    </li>
                )}
                </ul>
              </div>
            )}
          </div>

          {/* Giant wordmark outline — two lines */}
          <div className="display" style={{
            fontSize: "clamp(49px, 9.8vw, 128px)", lineHeight: 0.88, letterSpacing: "-0.04em",
            color: "transparent", WebkitTextStroke: "1px rgba(250,246,236,0.32)",
            paddingBottom: 28, borderBottom: "1px solid var(--hairline-light)",
            overflow: "hidden", fontWeight: 700
          }}>
            <div>MaxWealth<span style={{ color: "var(--gold-500)", WebkitTextStroke: "0", opacity: "0" }}>.</span></div>
            <div>Investments<span style={{ color: "var(--gold-500)", WebkitTextStroke: "0" }}>.</span></div>
          </div>

          {/* Disclaimer */}
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 40, marginTop: 36 }} className="legal-grid">
            <p style={{ fontSize: 11, lineHeight: 1.7, color: "rgba(250,246,236,0.55)", maxWidth: "80ch" }}>
              <strong style={{ color: "rgba(250,246,236,0.82)" }}>Risk disclosure.</strong> Mutual fund investments are subject to market risks. Read all scheme-related documents carefully before investing. Past performance is not indicative of future returns. MaxWealth Investments is an AMFI Registered Mutual Fund Distributor. Investment values can go up as well as down; registration does not imply any assurance of returns.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-end", justifyContent: "flex-end" }} className="legal-right">
              <div className="mono" style={{ fontSize: 10, color: "rgba(250,246,236,0.4)", letterSpacing: "0.14em" }}>© 2026 MAXWEALTH INVESTMENTS PVT. LTD.</div>
              <div style={{ display: "flex", gap: 18 }}>
                {["Privacy", "Terms", "Disclosures", "Grievance"].map((x) =>
                <a key={x} href="#" className="mono" style={{ fontSize: 10, color: "rgba(250,246,236,0.55)", letterSpacing: "0.12em" }}>{x.toUpperCase()}</a>
                )}
              </div>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px){
            .foot-grid{ grid-template-columns: 1fr 1fr !important }
            .legal-grid{ grid-template-columns: 1fr !important }
            .legal-right{ align-items: flex-start !important }
          }
        `}</style>
      </footer>
    </>);

};

// Tiny icon row for contact card
const ContactRow = ({ icon, label, children }) => {
  const icons = {
    pin: <path d="M12 22 C 12 22 4 14 4 9 a 8 8 0 1 1 16 0 c 0 5 -8 13 -8 13 Z M 12 11 a 2 2 0 1 1 0 -4 a 2 2 0 0 1 0 4 Z" fill="none" stroke="currentColor" strokeWidth="1.4" />,
    phone: <path d="M4 4 Q 4 18 18 20 L 20 18 L 16 14 L 13 16 Q 8 14 8 9 L 10 6 L 6 2 L 4 4 Z" fill="none" stroke="currentColor" strokeWidth="1.4" />,
    mail: <g fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="3" y="5" width="18" height="14" /><path d="M3 7 L 12 13 L 21 7" /></g>
  };
  return (
    <div style={{ display: "flex", gap: 16 }}>
      <span style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--gold-500)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--green-900)", flexShrink: 0 }}>
        <svg width="20" height="20" viewBox="0 0 24 24">{icons[icon]}</svg>
      </span>
      <div>
        <div className="mono" style={{ fontSize: 10, color: "var(--gold-300)", letterSpacing: "0.14em", marginBottom: 6, textTransform: "uppercase" }}>{label}</div>
        <div style={{ fontSize: 15, lineHeight: 1.55, color: "var(--cream)" }}>{children}</div>
      </div>
    </div>);

};

window.Footer = Footer;