// Services.jsx — numbered editorial list
const Services = () => {
  const [hovered, setHovered] = React.useState(null);
  const items = [
    ["01", "Stratégie de marque", "Plateformes, positionnement, messages-clés. On clarifie ce que vous êtes — et ce que vous n'êtes pas.", ["Plateforme de marque", "Mission / Vision", "Tone of voice", "Naming"]],
    ["02", "Identités visuelles", "Refonte ou création — logos, systèmes typographiques, charte photographique. Pensées pour durer.", ["Logo & lockups", "Système graphique", "Direction photo", "Guidelines"]],
    ["03", "Contenus premium", "Direction artistique, production éditoriale, photo, motion. Du shooting à la mise en page.", ["Direction artistique", "Production photo", "Films de marque", "Éditorial print"]],
    ["04", "Social media", "Instagram, LinkedIn, TikTok. Analyses culturelles, carrousels signature, stories travaillées.", ["Stratégie éditoriale", "Carrousels", "Stories", "Community"]],
    ["05", "Digital", "Sites éditoriaux, expériences WebGL, e-mailing premium. Le code au service de l'image.", ["Sites éditoriaux", "WebGL & motion", "E-mailing", "SEO éditorial"]],
  ];

  return (
    <section id="approche" style={{
      background: "#EDE8D8", color: "#0A0A0A", padding: "200px 56px 220px",
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
    }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 96, maxWidth: 1600, margin: "0 auto", alignItems: "start" }}>
        <div style={{ position: "sticky", top: 140 }}>
          <div style={{ fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", opacity: .55, marginBottom: 28, fontWeight: 700 }}>
            01 — Expertises
          </div>
          <h2 style={{ fontSize: "clamp(56px, 5.6vw, 88px)", lineHeight: 1, letterSpacing: "-0.018em", fontWeight: 700, margin: 0 }}>
            Cinq territoires.<br/><i>Une seule</i> voix.
          </h2>
          <p style={{ marginTop: 36, fontSize: 17, lineHeight: 1.55, opacity: .7, maxWidth: 380 }}>
            On n'empile pas des prestations. On construit une grammaire — qui se déploie ensuite
            sur tous vos points de contact.
          </p>
        </div>
        <div>
          {items.map(([n, label, body, tags], idx) => {
            const isHover = hovered === idx;
            return (
              <div
                key={n}
                onMouseEnter={() => setHovered(idx)}
                onMouseLeave={() => setHovered(null)}
                style={{
                  display: "grid", gridTemplateColumns: "100px 1fr",
                  gap: 32, padding: "36px 0",
                  borderTop: "1px solid rgba(0,0,0,.18)",
                  cursor: "pointer",
                  transition: "padding 200ms ease-out",
                  paddingLeft: isHover ? 24 : 0,
                }}
              >
                <div style={{ fontSize: 16, letterSpacing: ".22em", fontWeight: 700, opacity: .55, paddingTop: 12 }}>{n}</div>
                <div>
                  <div style={{
                    fontSize: "clamp(32px, 3.2vw, 44px)", fontWeight: 700, lineHeight: 1.1, marginBottom: 12,
                    letterSpacing: "-0.01em",
                    transition: "transform 200ms ease-out",
                    transform: isHover ? "translateX(8px)" : "translateX(0)",
                  }}>
                    {label}
                  </div>
                  <div style={{ fontSize: 19, lineHeight: 1.5, opacity: .8, maxWidth: 720, marginBottom: 20 }}>{body}</div>
                  <div style={{
                    display: "flex", flexWrap: "wrap", gap: 8,
                    maxHeight: isHover ? 60 : 0,
                    opacity: isHover ? 1 : 0,
                    overflow: "hidden",
                    transition: "max-height 280ms ease-out, opacity 200ms ease-out",
                  }}>
                    {tags.map(tag => (
                      <span key={tag} style={{
                        fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase",
                        fontWeight: 700, padding: "8px 14px",
                        border: "1px solid rgba(0,0,0,.25)",
                      }}>{tag}</span>
                    ))}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};
window.Services = Services;