/* SERVICES — 3-column services grid + contact block, sits between Manifesto and Footer */

function ServiceCard({ index, label, title, lede, bullets, deliverable, href }) {
  const indexStr = String(index).padStart(2, "0");
  const cardRef = React.useRef(null);
  useTilt(cardRef);
  return (
    <a
      ref={cardRef}
      href={href}
      aria-label={`Learn more about ${title}`}
      className="relative rounded-2xl md:rounded-3xl p-6 sm:p-8 md:p-10 flex flex-col h-full group transition-colors duration-300 no-underline"
      style={{
        background: "#101010",
        border: "1px solid rgba(222,219,200,0.08)",
        color: "inherit",
      }}
    >
      {/* Top row: index + label */}
      <div className="flex items-center justify-between mb-8 md:mb-10">
        <div
          className="text-[10px] sm:text-xs tracking-[0.25em] uppercase"
          style={{ color: "rgba(225,224,204,0.5)" }}
        >
          {label}
        </div>
        <div
          className="font-mono text-[10px] sm:text-xs tracking-wider"
          style={{ color: "rgba(225,224,204,0.35)" }}
        >
          /{indexStr}
        </div>
      </div>

      {/* Title */}
      <h3
        className="font-medium tracking-[-0.02em] leading-[1.02] mb-5 md:mb-6"
        style={{
          color: "#E1E0CC",
          fontSize: "clamp(28px, 2.6vw, 40px)",
        }}
      >
        {title}
      </h3>

      {/* Lede */}
      <p
        className="text-sm sm:text-base leading-[1.55] mb-7 md:mb-8"
        style={{ color: "rgba(225,224,204,0.7)" }}
      >
        {lede}
      </p>

      {/* Bullets */}
      <ul className="space-y-3 mb-8 md:mb-10 flex-1">
        {bullets.map((b, i) => (
          <li
            key={i}
            className="flex items-start gap-3 text-sm sm:text-[15px]"
            style={{ color: "rgba(225,224,204,0.9)" }}
          >
            <span
              className="mt-[0.42em] inline-block w-1.5 h-1.5 rounded-full flex-shrink-0"
              style={{ background: "#DEDBC8" }}
            />
            <span className="leading-[1.4]">{b}</span>
          </li>
        ))}
      </ul>

      {/* Deliverable strip */}
      <div
        className="mt-auto pt-5 md:pt-6 flex items-end justify-between gap-4"
        style={{ borderTop: "1px solid rgba(222,219,200,0.12)" }}
      >
        <div>
          <div
            className="text-[10px] tracking-[0.25em] uppercase mb-1.5"
            style={{ color: "rgba(225,224,204,0.45)" }}
          >
            Deliverable
          </div>
          <div
            className="text-sm sm:text-[15px] font-serif-italic"
            style={{ color: "#E1E0CC" }}
          >
            {deliverable}
          </div>
        </div>
        <span
          aria-hidden="true"
          className="flex-shrink-0 w-10 h-10 sm:w-11 sm:h-11 rounded-full flex items-center justify-center transition-all duration-300 group-hover:scale-110"
          style={{
            background: "#DEDBC8",
            color: "#000",
          }}
        >
          <ArrowRight size={16} />
        </span>
      </div>
    </a>
  );
}

function Services() {
  const services = [
    {
      label: "Search / GEO",
      title: "AI Citation Engineering",
      href: "/citation",
      lede:
        "We make ChatGPT, Gemini, Perplexity, and Claude recommend you by name. Generative engines cite sources — we engineer the entity data, schemas, and corpus footprint that make your brand the default answer.",
      bullets: [
        "Entity & knowledge-graph hardening",
        "Schema, embeddings, and authority mapping",
        "LLM monitoring across 6+ surfaces",
        "Monthly citation-share reporting",
      ],
      deliverable: "Citation Share, monthly",
    },
    {
      label: "Search / SEO",
      title: "Google Ranking Infrastructure",
      href: "/seo",
      lede:
        "Technical SEO as infrastructure — not content mills. We ship the site architecture, internal linking, and programmatic pages that compound into durable rankings for the queries that actually move revenue.",
      bullets: [
        "Technical audit & Core Web Vitals",
        "Programmatic SEO & content systems",
        "Link acquisition via digital PR",
        "Conversion-weighted keyword strategy",
      ],
      deliverable: "Ranked pages, quarterly",
    },
    {
      label: "Operations",
      title: "Business Automation Builds",
      href: "/automation",
      lede:
        "Visibility without operational capacity is a tax. We build the automation layer — lead routing, qualification, CRM plumbing, and AI agents — that absorbs new demand without new headcount.",
      bullets: [
        "Lead capture, scoring & routing",
        "CRM and GTM stack integration",
        "Custom AI agents for sales & ops",
        "Workflow observability & SLAs",
      ],
      deliverable: "Shipped workflows, sprintly",
    },
  ];

  return (
    <section className="bg-black px-4 md:px-6 pt-16 md:pt-24 pb-16 md:pb-24">
      {/* Section header */}
      <div className="max-w-6xl mx-auto mb-10 md:mb-16">
        <div className="flex items-start justify-between gap-6 flex-wrap mb-6 md:mb-10">
          <div
            className="text-[10px] sm:text-xs tracking-[0.25em] uppercase flex items-center gap-2"
            style={{ color: "rgba(225,224,204,0.6)" }}
          >
            <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary" />
            <span>What we do / 03 disciplines</span>
          </div>
          <div
            className="font-mono text-[10px] sm:text-xs tracking-wider"
            style={{ color: "rgba(225,224,204,0.35)" }}
          >
            §02 · CAPABILITIES
          </div>
        </div>

        <h2
          className="font-medium tracking-[-0.03em] leading-[0.95] max-w-4xl"
          style={{
            color: "#E1E0CC",
            fontSize: "clamp(40px, 5.6vw, 88px)",
          }}
        >
          Three disciplines,{" "}
          <span className="font-serif-italic" style={{ color: "rgba(225,224,204,0.7)" }}>
            one
          </span>{" "}
          compounding system.
        </h2>
      </div>

      {/* Cards grid */}
      <div
        className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-5"
        style={{ perspective: "1400px" }}
      >
        {services.map((s, i) => (
          <ServiceCard key={s.title} index={i + 1} {...s} />
        ))}
      </div>

      {/* Contact block */}
      <div className="max-w-6xl mx-auto mt-16 md:mt-24">
        <div
          className="relative rounded-2xl md:rounded-[2rem] overflow-hidden p-8 sm:p-10 md:p-14"
          style={{
            background:
              "linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%)",
            border: "1px solid rgba(222,219,200,0.08)",
          }}
        >
          {/* subtle noise on the contact card */}
          <div className="absolute inset-0 bg-noise opacity-[0.08] pointer-events-none" />

          <div className="relative z-10 grid grid-cols-12 gap-6 md:gap-10 items-end">
            {/* Left: heading + pitch */}
            <div className="col-span-12 lg:col-span-7">
              <div
                className="text-[10px] sm:text-xs tracking-[0.25em] uppercase mb-5 md:mb-7 flex items-center gap-2"
                style={{ color: "rgba(225,224,204,0.55)" }}
              >
                <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
                <span>Engagement open / 2026</span>
              </div>

              <h3
                className="font-medium tracking-[-0.02em] leading-[1.02] mb-5 md:mb-7 max-w-xl"
                style={{
                  color: "#E1E0CC",
                  fontSize: "clamp(28px, 3.4vw, 52px)",
                }}
              >
                Start with the{" "}
                <span className="font-serif-italic" style={{ color: "rgba(225,224,204,0.75)" }}>
                  visibility audit.
                </span>
              </h3>

              <p
                className="text-sm sm:text-base md:text-lg leading-[1.5] max-w-lg"
                style={{ color: "rgba(225,224,204,0.7)" }}
              >
                A no-cost 30-minute read on where your brand is ranked, cited, and overlooked across Google and the major AI engines — plus the three highest-leverage moves to change that.
              </p>

              {/* CTAs */}
              <div className="mt-8 md:mt-10 flex items-center flex-wrap gap-4">
                <a
                  href="mailto:hello@datadogs.studio"
                  className="group inline-flex items-center gap-2 hover:gap-3 transition-all duration-300 bg-primary rounded-full pl-5 sm:pl-6 pr-1 py-1 text-black font-medium text-sm sm:text-base whitespace-nowrap"
                >
                  <span className="pr-2">Book the audit</span>
                  <span
                    className="bg-black rounded-full w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
                  >
                    <ArrowRight size={16} style={{ color: "#E1E0CC" }} />
                  </span>
                </a>
                <a
                  href="#"
                  className="nav-link text-sm sm:text-base border-b border-transparent hover:border-primary/60 transition-colors whitespace-nowrap"
                >
                  or download the free report ↗
                </a>
              </div>
            </div>

            {/* Right: contact details */}
            <div className="col-span-12 lg:col-span-5">
              <div className="grid grid-cols-2 gap-5 md:gap-6">
                {[
                  { label: "Email", value: "hello@datadogs.studio", href: "mailto:hello@datadogs.studio" },
                  { label: "Studio", value: "London / UK", href: "#" },
                  { label: "Response", value: "< 24 hours", href: null },
                  { label: "Next intake", value: "Q2 · 2026", href: null },
                ].map((row) => (
                  <div key={row.label}>
                    <div
                      className="text-[10px] tracking-[0.25em] uppercase mb-2"
                      style={{ color: "rgba(225,224,204,0.45)" }}
                    >
                      {row.label}
                    </div>
                    {row.href ? (
                      <a
                        href={row.href}
                        className="nav-link text-sm sm:text-base block border-b border-transparent hover:border-primary/60 transition-colors"
                        style={{ color: "#E1E0CC" }}
                      >
                        {row.value}
                      </a>
                    ) : (
                      <div
                        className="text-sm sm:text-base"
                        style={{ color: "#E1E0CC" }}
                      >
                        {row.value}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });