function Footer() {
  const [search, setSearch] = React.useState("");
  return (
    <footer style={{ background: "var(--cream)", paddingTop: 80, paddingBottom: 40 }}>
      <div className="shell">
        {/* Top: brand + columns */}
        <div className="footer-cols" style={{
          display: "grid",
          gridTemplateColumns: "1.5fr 1fr 1fr 1.4fr",
          gap: 48,
          paddingTop: 32,
          paddingBottom: 56,
          borderTop: "1px solid var(--accent)",
        }}>
          <div>
            <Logo />
            <p className="body" style={{ marginTop: 20, marginBottom: 24, maxWidth: 320, color: "var(--ink-60)" }}>
              Support that frees you to do your best work.
            </p>
            <div className="body-sm" style={{ lineHeight: 1.7 }}>
              <div>Sophie Kazandjian</div>
              <div>Saint Quentin La Poterie, 30700</div>
              <div>France</div>
              <div style={{ marginTop: 8 }}>+33 671 27 34 00</div>
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Info</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12, fontSize: 14 }}>
              <li><a href="#faq" style={footerLink}>FAQs</a></li>
              <li><a href="#newsletter" style={footerLink}>Newsletter</a></li>
              <li><a href="#waitlist" style={footerLink}>Join the Waitlist</a></li>
              <li><a href="articles.html" style={footerLink}>Journal</a></li>
            </ul>
          </div>

          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Legal</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12, fontSize: 14 }}>
              <li><a href="#fr" style={footerLink}>Français</a></li>
              <li><a href="#privacy" style={footerLink}>Privacy Notice</a></li>
              <li><a href="#terms" style={footerLink}>Website Terms</a></li>
              <li><a href="#cookies" style={footerLink}>No cookies, ever</a></li>
            </ul>
          </div>

          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Search</div>
            <div style={{
              display: "flex",
              alignItems: "center",
              borderBottom: "1px solid var(--accent)",
              paddingBottom: 8,
              marginBottom: 24,
            }}>
              <input
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Find an article, package, or topic"
                style={{
                  flex: 1,
                  border: 0,
                  outline: 0,
                  background: "transparent",
                  fontFamily: "var(--sans)",
                  fontSize: 14,
                  color: "var(--charcoal)",
                  padding: 0,
                }}/>
              <button style={{
                border: 0,
                background: "transparent",
                color: "var(--charcoal)",
                cursor: "pointer",
                padding: 0,
              }}>
                <ArrowRight size={14}/>
              </button>
            </div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Connect</div>
            <div style={{ display: "flex", gap: 10 }}>
              {[
                { label: "Bluesky", short: "BS", href: "https://bsky.app/profile/sophiekaz.bsky.social" },
                { label: "Mastodon", short: "MA", href: "https://mastodon.social/@sophiekaz" },
                { label: "Pixelfed", short: "PX", href: "https://pixelfed.social/sophiekaz" },
                { label: "RSS feed", short: "RSS", href: "#rss" },
              ].map(s => (
                <a key={s.short} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label} title={s.label} style={{
                  width: 36, height: 36,
                  border: "1px solid var(--ink-15)",
                  display: "inline-flex",
                  alignItems: "center",
                  justifyContent: "center",
                  fontFamily: "var(--mono)",
                  fontSize: 11,
                  letterSpacing: ".05em",
                  borderRadius: 2,
                  color: "var(--charcoal)",
                  textDecoration: "none",
                }}>{s.short}</a>
              ))}
            </div>
          </div>
        </div>

        {/* Accreditation logos */}
        <div style={{
          paddingTop: 32,
          paddingBottom: 32,
          borderTop: "1px solid var(--ink-15)",
          borderBottom: "1px solid var(--ink-15)",
        }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Accreditations & partnerships</div>
          <div className="footer-accred" style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 32,
          }}>
            {[
              ["Circle", "Gold Partner"],
              ["ClickUp", "Verified Consultant"],
              ["Simple Analytics", "100% Privacy-Friendly"],
              ["exali", "Liability Insured"],
            ].map(([n, sub]) => (
              <div key={n} style={{
                padding: "16px 20px",
                border: "1px solid var(--ink-15)",
                borderRadius: 2,
                display: "flex",
                flexDirection: "column",
                gap: 4,
              }}>
                <div className="serif" style={{ fontSize: 18, fontWeight: 500 }}>{n}</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: ".1em", color: "var(--ink-60)", textTransform: "uppercase" }}>
                  {sub}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Colophon */}
        <div className="footer-colophon" style={{
          paddingTop: 24,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          fontSize: 12,
          color: "var(--ink-60)",
          fontFamily: "var(--mono)",
          letterSpacing: ".06em",
        }}>
          <div>© 2026 Sophie's Bureau · Saint Quentin La Poterie</div>
          <div>No cookies. No tracking. No nonsense.</div>
        </div>
      </div>
    </footer>
  );
}

const footerLink = {
  color: "var(--charcoal)",
  borderBottom: "1px solid transparent",
  transition: "border-color .15s ease",
  paddingBottom: 1,
};

window.Footer = Footer;