// contact.jsx — Section 5: Contact final + footer

function Contact() {
  const [time, setTime] = React.useState(() => formatTime());

  React.useEffect(() => {
    const id = setInterval(() => setTime(formatTime()), 1000 * 30);
    return () => clearInterval(id);
  }, []);

  function formatTime() {
    const d = new Date();
    return d.toLocaleTimeString('fr-FR', {
      hour: '2-digit', minute: '2-digit',
      timeZone: 'Europe/Paris',
    }) + ' · Paris';
  }

  return (
    <section id="contact" className="contact" data-screen-label="05 Contact" data-reveal="up">
      {/* Aurora — same DNA as hero, dimmer */}
      <div className="ct-aurora" aria-hidden="true">
        <div className="ct-blob ct-b1"></div>
        <div className="ct-blob ct-b2"></div>
      </div>

      <div className="ct-grid" aria-hidden="true"></div>

      <div className="ct-inner">
        <header className="ct-head">
          <span className="mono small dim">N° 05 / 05 — Contact</span>
          <span className="mono small dim ct-clock">
            <span className="dot"></span>
            {time}
          </span>
        </header>

        <h2 className="ct-title">
          <span className="ct-l1">On en</span>
          <span className="ct-l2 serif"><em>parle ?</em></span>
        </h2>

        <p className="ct-sub">
          Mission, audit ou simple échange : nous revenons vers vous sous 24&nbsp;h ouvrées.
        </p>

        <a className="ct-cta" href="mailto:contact@agence-mb.fr" data-magnet>
          <span className="ct-cta-l mono small">CONTACT</span>
          <span className="ct-cta-m">contact@agence-mb.fr</span>
          <span className="ct-cta-i" aria-hidden="true">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              <path d="M5 17 L17 5 M17 5 H8 M17 5 V14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </span>
        </a>

        <ul className="ct-channels">
          <li>
            <span className="mono small dim">Rendez-vous</span>
            <a href="#" data-magnet>Réserver 30 minutes</a>
          </li>
          <li>
            <span className="mono small dim">LinkedIn</span>
            <a href="#" data-magnet>/company/agence-mb</a>
          </li>
          <li>
            <span className="mono small dim">Téléphone</span>
            <a href="#" data-magnet>+33 1 00 00 00 00</a>
          </li>
        </ul>
      </div>

      <footer className="ct-foot">
        <div className="ct-foot-l">
          <span className="mono small dim">© 2026 — Agence MB</span>
          <span className="mono small dim ct-foot-sep">·</span>
          <span className="mono small dim">Studio indépendant · SIRET 000 000 000 00000</span>
        </div>
        <div className="ct-foot-r">
          <span className="mono small dim">Site construit en HTML, sans framework superflu.</span>
        </div>
      </footer>
    </section>
  );
}

window.Contact = Contact;