// Marquee.jsx — running tagline strip between sections
const Marquee = () => {
  const items = ["Devenez culturel.", "La mode est une pensée.", "Un objet culturel, pas un divertissement.", "Au même rang que la philosophie.", "Devenez culturel."];
  const row = (
    <div style={{ display: "flex", gap: 64, paddingRight: 64, flexShrink: 0 }}>
      {items.map((t, i) => (
        <span key={i} style={{
          fontSize: "clamp(48px, 6vw, 96px)",
          fontWeight: 700, letterSpacing: "-0.02em",
          fontStyle: i % 2 === 0 ? "normal" : "italic",
          whiteSpace: "nowrap",
        }}>
          {t} <span style={{ opacity: .35, margin: "0 24px" }}>·</span>
        </span>
      ))}
    </div>
  );
  return (
    <section style={{
      background: "#0A0A0A", color: "#fff",
      padding: "60px 0", overflow: "hidden",
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
      borderTop: "1px solid rgba(255,255,255,.08)",
      borderBottom: "1px solid rgba(255,255,255,.08)",
    }}>
      <style>{`
        @keyframes jmd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        .jmd-marquee-track { display: flex; width: max-content; animation: jmd-marquee 40s linear infinite; }
      `}</style>
      <div className="jmd-marquee-track">
        {row}{row}
      </div>
    </section>
  );
};
window.Marquee = Marquee;