// Services grid — the 5 services from the flyer with stacks

const SERVICES = [
  {
    n: "01",
    title: "Développement Web & Mobile",
    body:
      "Applications web et mobiles performantes, sécurisées, pensées pour votre croissance.",
    stack: ["React", "Next.js", "Node", "TypeScript"],
    icon: "code",
  },
  {
    n: "02",
    title: "Applications Mobiles",
    body:
      "iOS et Android natifs ou hybrides — expériences fluides, publication, maintenance.",
    stack: ["Swift", "Kotlin", "React Native", "Flutter"],
    icon: "phone",
  },
  {
    n: "03",
    title: "UI / UX Design",
    body:
      "Interfaces claires et accessibles, conçues autour de vos utilisateurs et de vos objectifs.",
    stack: ["Figma", "Prototypage", "Design System", "Recherche"],
    icon: "palette",
  },
  {
    n: "04",
    title: "Marketing Digital",
    body:
      "Stratégie, SEO, acquisition et analytics — nous faisons grandir votre audience.",
    stack: ["SEO", "SEA", "Analytics", "Content"],
    icon: "chart",
  },
  {
    n: "05",
    title: "Hébergement & Maintenance",
    body:
      "Infrastructure robuste, monitoring, sauvegardes et support continu pour la tranquillité.",
    stack: ["AWS", "Vercel", "CI / CD", "Monitoring"],
    icon: "cloud",
  },
];

function ServiceIcon({ name }) {
  const common = { width: 22, height: 22, stroke: "currentColor", fill: "none", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "code":
      return (
        <svg viewBox="0 0 24 24" {...common}>
          <polyline points="8 7 3 12 8 17" />
          <polyline points="16 7 21 12 16 17" />
          <line x1="14" y1="5" x2="10" y2="19" />
        </svg>
      );
    case "phone":
      return (
        <svg viewBox="0 0 24 24" {...common}>
          <rect x="7" y="3" width="10" height="18" rx="2" />
          <line x1="11" y1="18" x2="13" y2="18" />
        </svg>
      );
    case "palette":
      return (
        <svg viewBox="0 0 24 24" {...common}>
          <circle cx="12" cy="12" r="9" />
          <circle cx="8" cy="10" r="1.2" />
          <circle cx="12" cy="8" r="1.2" />
          <circle cx="16" cy="10" r="1.2" />
          <path d="M12 21 a2 2 0 0 1 0 -4 h1 a2 2 0 0 0 0 -4" />
        </svg>
      );
    case "chart":
      return (
        <svg viewBox="0 0 24 24" {...common}>
          <polyline points="3 17 9 11 13 15 21 6" />
          <polyline points="15 6 21 6 21 12" />
        </svg>
      );
    case "cloud":
      return (
        <svg viewBox="0 0 24 24" {...common}>
          <path d="M7 18h10a4 4 0 0 0 0 -8 a5 5 0 0 0 -9.6 -1.5 A3.5 3.5 0 0 0 7 18z" />
        </svg>
      );
    default:
      return null;
  }
}

function ServiceCard({ s, i }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: 32,
        background: "var(--surface)",
        border: "1px solid var(--hairline)",
        borderRadius: "var(--r-md)",
        display: "flex",
        flexDirection: "column",
        gap: 20,
        transition: "transform .25s ease, border-color .25s ease, box-shadow .25s ease",
        transform: hover ? "translateY(-4px)" : "none",
        borderColor: hover ? "var(--cyan)" : "var(--hairline)",
        boxShadow: hover ? "var(--shadow-md)" : "none",
        position: "relative",
        overflow: "hidden",
      }}
    >
      {/* hover accent */}
      <div
        aria-hidden
        style={{
          position: "absolute",
          top: 0, left: 0, right: 0,
          height: 2,
          background: "var(--cyan)",
          transform: hover ? "scaleX(1)" : "scaleX(0)",
          transformOrigin: "left",
          transition: "transform .35s ease",
        }}
      />
      <header
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <div
          style={{
            width: 44,
            height: 44,
            borderRadius: 10,
            background: "var(--cyan-wash)",
            color: "var(--cyan-ink)",
            display: "grid",
            placeItems: "center",
          }}
        >
          <ServiceIcon name={s.icon} />
        </div>
        <div
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 12,
            color: "var(--ink-soft)",
            letterSpacing: "0.08em",
          }}
        >
          / {s.n}
        </div>
      </header>
      <h3 style={{ fontSize: 22, fontWeight: 600 }}>{s.title}</h3>
      <p style={{ fontSize: 14.5 }}>{s.body}</p>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: "auto" }}>
        {s.stack.map((t) => (
          <span key={t} className="chip">{t}</span>
        ))}
      </div>
    </article>
  );
}

function Services() {
  const { isMobile, isTablet } = useViewport();

  return (
    <section id="services" style={{ padding: isMobile ? "72px 0" : "120px 0", background: "var(--bg)", position: "relative", overflow: "hidden" }}>
      <div className="bg-dots" aria-hidden />
      <div className="bg-blob bg-blob-a float-slow" style={{ right: isMobile ? "-24%" : "-10%", top: "10%", width: isMobile ? 240 : 420, height: isMobile ? 240 : 420, opacity: 0.6 }} aria-hidden />
      <div className="container">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: isTablet ? "1fr" : "1fr 1fr",
            gap: isMobile ? 24 : isTablet ? 32 : 80,
            alignItems: "end",
            marginBottom: isMobile ? 32 : 56,
          }}
        >
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Nos services</div>
            <h2>
              Cinq expertises,<br />
              <span style={{ color: "var(--cyan-ink)" }}>un partenaire</span> unique.
            </h2>
          </div>
          <p style={{ fontSize: isMobile ? 15 : 16, maxWidth: 460, justifySelf: isTablet ? "start" : "end" }}>
            De la conception à la mise en production, nous couvrons toute la chaîne de valeur
            pour livrer des produits digitaux cohérents et durables.
          </p>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : isTablet ? "repeat(2, 1fr)" : "repeat(3, 1fr)",
            gap: 20,
          }}
        >
          {SERVICES.map((s, i) => (
            <ServiceCard key={s.n} s={s} i={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services, SERVICES, ServiceIcon });