// Footer.jsx — coordonnées + lockup (post-Contact)
const Footer = () => {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  return (
    <footer id="footer-bottom" style={{
      background: "#0A0A0A", color: "#fff", padding: "120px 56px 56px",
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>

        {/* Journal subscription — small band */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, marginBottom: 100, alignItems: "center", paddingBottom: 48, borderBottom: "1px solid rgba(255,255,255,.18)" }}>
          <div>
            <div style={{ fontSize: 12, letterSpacing: ".22em", opacity: .55, fontWeight: 700, marginBottom: 14, textTransform: "uppercase" }}>
              Le Journal — édition mensuelle
            </div>
            <div style={{ fontSize: 24, lineHeight: 1.35, fontWeight: 400, maxWidth: 460 }}>
              Une analyse culturelle par mois. Pas de spam, pas de bruit — <i>uniquement le fond.</i>
            </div>
          </div>
          <form
            onSubmit={(e) => { e.preventDefault(); if (email) { setSent(true); setEmail(""); setTimeout(() => setSent(false), 2400); } }}
            style={{ display: "flex", borderBottom: "1px solid rgba(255,255,255,.4)", paddingBottom: 14 }}
          >
            <input
              type="email"
              placeholder="votre@adresse.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              style={{
                flex: 1, background: "transparent", border: "none", outline: "none",
                color: "#fff", fontFamily: "inherit", fontSize: 18, padding: 0,
              }}
            />
            <button type="submit" style={{
              background: "transparent", border: "none", color: "#fff", cursor: "pointer",
              fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", fontWeight: 700,
              fontFamily: "inherit",
            }}>
              {sent ? "✓ Envoyé" : "S'abonner →"}
            </button>
          </form>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 48, marginBottom: 80 }}>
          <div>
            <div style={{ fontSize: 12, letterSpacing: ".22em", opacity: .55, fontWeight: 700, marginBottom: 16 }}>STUDIO</div>
            <div style={{ fontSize: 16, lineHeight: 1.7 }}>Lyon · Paris<br/>Marseille · Londres</div>
          </div>
          <div>
            <div style={{ fontSize: 12, letterSpacing: ".22em", opacity: .55, fontWeight: 700, marginBottom: 16 }}>CONTACT</div>
            <div style={{ fontSize: 16, lineHeight: 1.7 }}>
              <a href="mailto:contact@agencejmd.com" style={{ color: "inherit", textDecoration: "none", borderBottom: "1px solid rgba(255,255,255,.3)" }}>contact@agencejmd.com</a><br/>
              <a href="tel:+33788182563" style={{ color: "inherit", textDecoration: "none", borderBottom: "1px solid rgba(255,255,255,.3)" }}>07 88 18 25 63</a>
            </div>
          </div>
          <div>
            <div style={{ fontSize: 12, letterSpacing: ".22em", opacity: .55, fontWeight: 700, marginBottom: 16 }}>SOCIAL</div>
            <div style={{ fontSize: 16, lineHeight: 1.7 }}>
              <a href="https://www.instagram.com/agencejmd/" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none", borderBottom: "1px solid rgba(255,255,255,.3)" }}>@agencejmd</a><br/>
              <a href="https://www.linkedin.com/company/agencejmd/" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none", borderBottom: "1px solid rgba(255,255,255,.3)" }}>LinkedIn</a> · <a href="https://www.instagram.com/agencejmd/" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none", borderBottom: "1px solid rgba(255,255,255,.3)" }}>Instagram</a>
            </div>
          </div>
          <div>
            <div style={{ fontSize: 12, letterSpacing: ".22em", opacity: .55, fontWeight: 700, marginBottom: 16 }}>SECTEURS</div>
            <div style={{ fontSize: 16, lineHeight: 1.7 }}>Mode · Beauté<br/>Lifestyle</div>
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", paddingTop: 28, borderTop: "1px solid rgba(255,255,255,.1)", gap: 32 }}>
          <img src="assets/logo-real-white.png" alt="agence JMD" style={{ height: 56, width: "auto" }} />
          <div style={{ fontSize: 11, letterSpacing: ".22em", opacity: .45, textTransform: "uppercase", fontWeight: 700 }}>© 2026 agence JMD · Tous droits réservés</div>
        </div>
      </div>
    </footer>
  );
};
window.Footer = Footer;