// Footer

function Footer() {
  return (
    <footer style={{ background: "var(--ink)", color: "var(--paper)", paddingTop: 96, paddingBottom: 40, position: "relative", overflow: "hidden" }}>
      <div className="container">
        {/* Giant wordmark */}
        <Reveal>
          <div style={{
            fontSize: "clamp(64px, 14vw, 220px)",
            lineHeight: 0.9,
            letterSpacing: "-0.05em",
            fontWeight: 500,
            color: "var(--paper)",
            marginBottom: 64,
          }}>
            Young Dev Group<span style={{ color: "var(--accent)" }}>.</span>
          </div>
        </Reveal>

        <div className="footer-grid" style={{
          display: "grid",
          gridTemplateColumns: "1.6fr 1fr 1fr 1fr",
          gap: 48,
          paddingTop: 56,
          borderTop: "1px solid rgba(255,255,255,0.12)",
        }}>
          <div>
            <Logo mono />
            <p style={{ margin: "24px 0 0", fontSize: 15, color: "rgba(255,255,255,0.55)", maxWidth: "32ch", lineHeight: 1.55 }}>
              Marketing. Systems. Growth.<br/>
              Built around relationships. Designed for growth.
            </p>
            <div className="row gap-2" style={{ marginTop: 32, gap: 10 }}>
              {[
                { l: "IG", h: "#" },
                { l: "LI", h: "#" },
                { l: "X", h: "#" },
                { l: "YT", h: "#" },
              ].map((s) => (
                <a key={s.l} href={s.h} aria-label={s.l} style={{
                  width: 40, height: 40,
                  borderRadius: "50%",
                  border: "1px solid rgba(255,255,255,0.15)",
                  display: "inline-flex",
                  alignItems: "center",
                  justifyContent: "center",
                  fontFamily: "var(--mono)",
                  fontSize: 10.5,
                  letterSpacing: "0.1em",
                  color: "rgba(255,255,255,0.8)",
                  transition: "background 0.3s, border-color 0.3s, transform 0.3s",
                }}
                onMouseEnter={(e) => { e.currentTarget.style.background = "var(--accent)"; e.currentTarget.style.borderColor = "var(--accent)"; e.currentTarget.style.color = "#fff"; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.15)"; e.currentTarget.style.color = "rgba(255,255,255,0.8)"; }}
                >{s.l}</a>
              ))}
            </div>
          </div>

          <FooterCol title="Sitemap" items={[
            ["Home", "#home"],
            ["What We Build", "#build"],
            ["How We Work", "#process"],
            ["Why We're Different", "#different"],
            ["Industries", "#industries"],
            ["FAQ", "#faq"],
            ["Contact", "#contact"],
          ]}/>

          <FooterCol title="Capabilities" items={[
            ["Websites", "#build"],
            ["SEO", "#build"],
            ["Paid Ads", "#build"],
            ["CRM", "#build"],
            ["AI Automation", "#build"],
            ["Analytics", "#build"],
          ]}/>

          <FooterCol title="Contact" items={[
            ["clients@youngdgroup.com", "mailto:clients@youngdgroup.com"],
            ["Strategy Call", "#contact"],
            ["Mon — Fri · 9—6 ET", null],
          ]}/>
        </div>

        <div style={{
          marginTop: 64,
          paddingTop: 28,
          borderTop: "1px solid rgba(255,255,255,0.12)",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          flexWrap: "wrap",
          gap: 16,
          fontFamily: "var(--mono)",
          fontSize: 11,
          letterSpacing: "0.14em",
          textTransform: "uppercase",
          color: "rgba(255,255,255,0.45)",
        }}>
          <span>© {new Date().getFullYear()} Young Dev Group, LLC</span>
          <span className="row gap-3" style={{ gap: 24 }}>
            <a href="#" style={{ color: "inherit" }}>Privacy</a>
            <a href="#" style={{ color: "inherit" }}>Terms</a>
            <span className="row gap-2" style={{ alignItems: "center", color: "rgba(255,255,255,0.75)" }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", display: "inline-block" }}></span>
              Accepting clients · 2026
            </span>
          </span>
        </div>
      </div>

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

function FooterCol({ title, items }) {
  return (
    <div>
      <div className="idx" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 18 }}>{title}</div>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map(([l, h], i) => (
          <li key={i}>
            {h ? (
              <a href={h} style={{
                fontSize: 14.5,
                color: "rgba(255,255,255,0.85)",
                transition: "color 0.3s",
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = "var(--accent)"}
              onMouseLeave={(e) => e.currentTarget.style.color = "rgba(255,255,255,0.85)"}
              >{l}</a>
            ) : (
              <span style={{ fontSize: 14.5, color: "rgba(255,255,255,0.5)" }}>{l}</span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

window.Footer = Footer;