// SECTION 3 — SERVICES
function ServicesSection() {
  const services = [
    ["Signature", "Haircuts & Styling",    "Een coupe ontworpen rond je gezicht, val en gewoonten."],
    ["Couleur",   "Color",                 "Toon, diepte en glans — ontwikkeld in afgemeten lagen."],
    ["Lumière",   "Highlights · Balayage", "Hand-geschilderde lichtval met natuurlijke overgangen."],
    ["Soin",      "Haircare Treatment",    "Herstel en glans, opgebouwd over meerdere bezoeken."],
    ["Atelier",   "Men's Grooming",        "Coupe en barbierwerk in één afspraak. Precies, ingetogen."],
    ["Occasion",  "Event Styling",         "Bruiloft, podium, redactie — styling die de avond uithoudt."],
  ];

  return (
    <section id="services" style={sv.wrap}>
      <RevealGroup baseDelay={0} stagger={80} threshold={0.1} style={sv.inner} data-sv-inner>

        {/* Header */}
        <div style={sv.head} data-services-head>
          <Reveal as="p" style={{ ...s.sectionLabel, color: BM.c.mute }}>
            <span style={{ ...s.labelRule, background: BM.c.mute }} />
            Services
          </Reveal>
          <Reveal as="h2" style={s.h2}>
            Een dienst voor elke <em style={s.italic}>nuance</em>.
          </Reveal>
        </div>

        {/* Grid */}
        <Reveal style={sv.grid} data-services-grid>
          {services.map(([label, title, desc], i) => (
            <ServiceCard key={title} label={label} title={title} desc={desc} index={i} />
          ))}
        </Reveal>

      </RevealGroup>
    </section>
  );
}

function ServiceCard({ label, title, index }) {
  const [hover, setHover] = React.useState(false);
  const photo = "site/assets/service-" + (index + 1) + ".png";

  return (
    <a
      href="#contact"
      data-service-card
      onMouseEnter={function() { setHover(true); }}
      onMouseLeave={function() { setHover(false); }}
      style={sv.card}
    >
      {/* Foto */}
      <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
        <img
          src={photo}
          alt={title}
          style={{
            width: "100%", height: "100%",
            objectFit: "cover", objectPosition: "center",
            transform: hover ? "scale(1.06)" : "scale(1)",
            transition: "transform 1100ms " + BM.ease,
          }}
        />
      </div>

      {/* Gradient overlay — altijd zichtbaar, sterker bij hover */}
      <div style={{
        position: "absolute", inset: 0,
        background: hover
          ? "linear-gradient(180deg, rgba(6,26,46,0.10) 0%, rgba(6,26,46,0.82) 65%, rgba(6,26,46,0.95) 100%)"
          : "linear-gradient(180deg, rgba(6,26,46,0.04) 0%, rgba(6,26,46,0.60) 60%, rgba(6,26,46,0.88) 100%)",
        transition: "background 500ms " + BM.ease,
      }} />

      {/* Index — rechts boven */}
      <span style={{
        position: "absolute", top: 24, right: 28, zIndex: 1,
        fontFamily: BM.f.serif, fontStyle: "italic",
        fontSize: 15, color: "rgba(250,248,244,0.50)",
        fontWeight: 400,
      }}>
        0{index + 1}
      </span>

      {/* Inhoud — links onder */}
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0,
        padding: "0 32px 32px",
        zIndex: 1,
      }}>
        <p style={{
          margin: "0 0 10px",
          fontFamily: BM.f.sans,
          fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase",
          color: "rgba(250,248,244,0.60)", fontWeight: 400,
        }}>
          {label}
        </p>
        <h3 style={{
          margin: 0,
          fontFamily: BM.f.serif, fontWeight: 500,
          fontSize: "clamp(22px, 1.8vw, 28px)",
          lineHeight: 1.1, letterSpacing: "-0.01em",
          color: BM.c.paper,
          transform: hover ? "translateY(-4px)" : "translateY(0)",
          transition: "transform 420ms " + BM.ease,
        }}>
          {title}
        </h3>
      </div>
    </a>
  );
}

window.ServicesSection = ServicesSection;

const sv = {
  wrap: {
    background: BM.c.ivory,
    color: BM.c.ink,
    padding: "160px 0 120px",
    fontFamily: BM.f.sans,
  },
  inner: {
    maxWidth: 1480, margin: "0 auto",
    padding: "0 80px",
  },
  head: {
    marginBottom: 64,
  },
  grid: {
    display: "grid",
    gridTemplateColumns: "repeat(3, 1fr)",
    gridTemplateRows: "repeat(2, 460px)",
    gap: 3,
    background: BM.c.rule,
    border: "1px solid " + BM.c.rule,
    borderRadius: 4,
    overflow: "hidden",
  },
  card: {
    position: "relative",
    overflow: "hidden",
    display: "block",
    background: BM.c.navy,
    textDecoration: "none",
    cursor: "pointer",
  },
};

// Mobile overrides — grid stacks to 1 col, shorter cards
(function injectServicesResponsive() {
  if (document.getElementById("sv-responsive")) return;
  var el = document.createElement("style");
  el.id = "sv-responsive";
  el.textContent = `
    @media (max-width: 768px) {
      #services { padding: 80px 0 80px !important; }
      [data-sv-inner] { padding: 0 24px !important; }
      [data-services-grid] {
        grid-template-columns: 1fr !important;
        grid-template-rows: unset !important;
        gap: 2px !important;
        border-radius: 0 !important;
      }
      [data-service-card] { min-height: 260px !important; }
    }
  `;
  document.head.appendChild(el);
})();