/* Contact section + site Footer (light, responsive). */
const { Button, Input, Icon, Logo, Badge } = window.HudsonPayDesignSystem_198a48;

function Contact({ onPage }) {
  const { Container, Eyebrow, DashIcon, useIsMobile } = window.HPSite;
  const mobile = useIsMobile();
  const [topic, setTopic] = React.useState("Partnership");
  const topics = ["Partnership", "Sales", "Support"];
  return (
    <section id="contact" style={{ background: "var(--grad-page-soft)", padding: mobile ? "72px 0" : "112px 0", position: "relative", overflow: "hidden" }}>
      <Container style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: mobile ? 36 : 56, alignItems: "center" }}>
          <div className="hp-reveal" style={{ textAlign: mobile ? "center" : "left", minWidth: 0 }}>
            <Eyebrow center={mobile}>Contact</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: mobile ? "clamp(30px,8vw,42px)" : "clamp(38px,4.5vw,60px)", marginTop: 18, color: "var(--indigo-800)", letterSpacing: "-0.02em", lineHeight: 1.05, textTransform: "uppercase", overflowWrap: "break-word" }}>
              Build without borders
            </h2>
            <p style={{ marginTop: 18, fontSize: "var(--text-lg)", color: "var(--text-muted)", lineHeight: 1.6, maxWidth: 440, marginInline: mobile ? "auto" : 0 }}>
              Talk to our team about partnerships, enterprise onboarding, or a tailored infrastructure plan.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 36, alignItems: mobile ? "center" : "stretch" }}>
              {[["mail", "Sales", "compliance@hudsonpay.io"], ["building", "Partnerships", "compliance@hudsonpay.io"], ["shield", "Support", "compliance@hudsonpay.io"]].map(([ic, l, e]) => (
                <a key={l} href={`mailto:${e}`} className="hp-tap hp-mailrow" style={{ display: "inline-flex", alignItems: "center", gap: 14, textDecoration: "none", borderRadius: "var(--radius-lg)", padding: "6px 10px", margin: "-6px -10px", textAlign: "left" }}>
                  <DashIcon name={ic} size={44} />
                  <div>
                    <div style={{ fontSize: 12, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>{l}</div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--indigo-800)" }}>{e}</div>
                  </div>
                </a>
              ))}
            </div>
          </div>
          <div className="hp-reveal" style={{ background: "var(--paper)", borderRadius: "var(--radius-2xl)", padding: mobile ? 24 : 32, boxShadow: "var(--shadow-xl)", border: "1px solid var(--blue-100)", minWidth: 0 }}>
            <form action="/send.php" method="post" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ display: "flex", gap: 8 }}>
                {topics.map(t => (
                  <button type="button" key={t} className="hp-tap" onClick={() => setTopic(t)} style={{
                    flex: 1, minWidth: 0, padding: "9px 4px", borderRadius: "var(--radius-pill)", cursor: "pointer",
                    fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", fontWeight: 600, whiteSpace: "nowrap",
                    border: `1.5px solid ${topic === t ? "var(--violet-400)" : "var(--border-default)"}`,
                    background: topic === t ? "var(--violet-50)" : "var(--paper)",
                    color: topic === t ? "var(--indigo-700)" : "var(--text-muted)",
                  }}>{t}</button>
                ))}
              </div>
              <input type="hidden" name="topic" value={topic} />
              <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: 12 }}>
                <Input label="First name" name="first_name" placeholder="Ada" required style={{ minWidth: 0 }} />
                <Input label="Last name" name="last_name" placeholder="Hudson" required style={{ minWidth: 0 }} />
              </div>
              <Input label="Work email" name="email" iconLeft="mail" placeholder="ada@company.com" type="email" required />
              <Input label="Company" name="company" iconLeft="building" placeholder="Hudson Capital" />
              <Button variant="primary" block type="submit" iconRight={<Icon name="arrow-right" size={18} />}>Get Started Today</Button>
              <p style={{ fontSize: 12, color: "var(--text-faint)", textAlign: "center", margin: 0 }}>By submitting you agree to our <a onClick={() => onPage("privacy")} style={{ cursor: "pointer" }}>Privacy Policy</a>.</p>
            </form>
          </div>
        </div>
      </Container>
    </section>
  );
}

function Footer({ onPage, onNav }) {
  const { Container, DashIcon, useIsMobile } = window.HPSite;
  const mobile = useIsMobile();
  const links = ["Company", "About Us", "Contact", "Privacy Policy"];
  return (
    <footer style={{ background: "var(--paper)", padding: "88px 0 0", overflow: "hidden" }}>
      <Container>
        <h2 className="hp-reveal" style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--text-4xl)", textAlign: "center", color: "var(--indigo-800)", textTransform: "uppercase", letterSpacing: "-0.02em", lineHeight: 1.05 }}>
          Move capital<br />globally
        </h2>
        <nav style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12, margin: "40px 0" }}>
          {links.map(l => (
            <button key={l} className="hp-link2" onClick={() => l === "Privacy Policy" ? onPage("privacy") : onNav("contact")} style={{ border: "none", background: "none", cursor: "pointer", color: "var(--ink-700)", fontSize: "var(--text-md)", fontFamily: "var(--font-sans)", fontWeight: 500 }}>{l}</button>
          ))}
        </nav>
        <div style={{ display: "flex", justifyContent: "center", gap: mobile ? 18 : 40, flexWrap: "wrap", marginBottom: 28 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
            <DashIcon name="map-pin" size={40} />
            <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.06em", color: "var(--indigo-800)", textTransform: "uppercase" }}>New Jersey, Geneva, Dubai</span>
          </div>
          <a href="mailto:compliance@hudsonpay.io" className="hp-tap hp-mailbtn" style={{ display: "inline-flex", alignItems: "center", gap: 10, textDecoration: "none", padding: "10px 18px", borderRadius: "var(--radius-pill)", border: "1px solid var(--blue-100)", background: "var(--paper)", boxShadow: "var(--shadow-sm)" }}>
            <DashIcon name="mail" size={40} />
            <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.06em", color: "var(--indigo-800)", textTransform: "uppercase" }}>compliance@hudsonpay.io</span>
          </a>
        </div>
        <p style={{ textAlign: "center", fontSize: 13, color: "var(--text-muted)", maxWidth: 560, margin: "0 auto 8px", lineHeight: 1.5 }}>
          Hudson Pay, LLC is registered as a dealer in foreign exchange and money transmitter with FinCEN in the State of New Jersey.
        </p>
        <p style={{ textAlign: "center", fontSize: 13, color: "var(--text-faint)" }}>© 2026 Hudson Pay, Inc. All rights reserved.</p>
      </Container>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "2vw", marginTop: 32, paddingBottom: 12 }}>
        <img src={window.HP_LOGO} alt="" style={{ height: "clamp(64px,13vw,180px)", objectFit: "contain" }} />
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(56px,13vw,190px)", lineHeight: 1, letterSpacing: "-0.03em" }}>
          <span style={{ color: "var(--indigo-800)", fontWeight: 500 }}>Hudson</span><span style={{ backgroundImage: "var(--grad-wordmark)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent", fontStyle: "italic" }}>Pay</span>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { HPParts: Object.assign(window.HPParts || {}, { Contact, Footer }) });