/* ========================================================
   Social proof strip + Services grid + Case studies
   ======================================================== */

function SocialProof() {
  const tags = ["HOSPITALITY", "FINTECH", "INSURANCE", "MSP", "REAL ESTATE", "CONSTRUCTION", "HEALTHTECH", "LEGAL"];
  return (
    <section className="proof container reveal" aria-label="Industries">
      <div className="proof-label mono">Trusted by teams building with AI across</div>
      <div className="proof-track">
        {tags.map((t, i) => (
          <React.Fragment key={t}>
            <span className="proof-item mono">{t}</span>
            {i < tags.length - 1 && <span className="proof-sep" aria-hidden>·</span>}
          </React.Fragment>
        ))}
      </div>
      <style>{`
        .proof { padding: 64px 0; }
        .proof-label { text-align: center; margin-bottom: 20px; font-size: 10.5px; }
        .proof-track {
          display: flex; align-items: center; justify-content: center;
          flex-wrap: wrap; gap: 14px 20px;
          color: var(--text-3);
        }
        .proof-item {
          font-size: 12.5px; letter-spacing: 0.14em; color: var(--text-3);
          transition: color .3s;
        }
        .proof-item:hover { color: var(--text); }
        .proof-sep { color: var(--border-3); }
        @media (max-width: 640px) { .proof-sep { display: none; } }
      `}</style>
    </section>
  );
}

function SectionHeader({ num, label, children, align = "left" }) {
  return (
    <div className={"sec-head reveal sec-head--" + align}>
      <div className="section-label"><span className="num">{num}</span> — {label}</div>
      <h2>{children}</h2>
    </div>
  );
}

/* ---------------- Services ---------------- */
const SERVICES = [
  { id: "01", key: "agents", name: "AI Agents",
    desc: "Multi-step reasoning systems that plan, call tools, and recover from failure.",
    tech: ["LangGraph", "Claude", "Temporal"] },
  { id: "02", key: "rag", name: "RAG & Knowledge",
    desc: "Retrieval systems grounded in your data — not hallucinated summaries.",
    tech: ["Pinecone", "pgvector", "LlamaIndex"] },
  { id: "03", key: "voice", name: "Voice AI",
    desc: "Sub-second voice agents for support, scheduling, and inbound qualification.",
    tech: ["Deepgram", "ElevenLabs", "Vapi"] },
  { id: "04", key: "flow", name: "Workflow Automation",
    desc: "Agentic pipelines that replace brittle Zaps and manual handoffs.",
    tech: ["n8n", "FastAPI", "Celery"] },
  { id: "05", key: "stack", name: "Full-Stack AI Products",
    desc: "End-to-end products: auth, billing, dashboards, and the AI layer beneath.",
    tech: ["Next.js", "Postgres", "AWS"] },
  { id: "06", key: "consult", name: "AI Consulting",
    desc: "Fractional CTO and architecture reviews for teams scaling their AI systems.",
    tech: ["Strategy", "Audits", "Roadmaps"] },
];

function ServiceCard({ s }) {
  const Diagram = ServiceDiagrams[s.key];
  return (
    <a className="svc-card reveal" href="contact.html">
      <div className="svc-head">
        <span className="svc-num mono">{s.id}</span>
        <div className="svc-diag">
          <Diagram/>
        </div>
      </div>
      <h3 className="svc-name">{s.name}</h3>
      <p className="svc-desc">{s.desc}</p>
      <div className="svc-tech">
        {s.tech.map((t, i) => (
          <React.Fragment key={t}>
            <span>{t}</span>
            {i < s.tech.length - 1 && <span className="svc-tech-sep">·</span>}
          </React.Fragment>
        ))}
      </div>
      <span className="svc-arrow"><I.ArrowUR size={16}/></span>
      <style>{`
        .svc-card {
          position: relative; display: block;
          padding: 32px;
          background: var(--surface);
          border: 1px solid var(--border-2);
          border-radius: 14px;
          transition: transform .3s, border-color .3s, background-color .3s;
          overflow: hidden;
          color: inherit;
        }
        .svc-card::before {
          content: ""; position: absolute; inset: 0;
          background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), var(--accent-soft), transparent 40%);
          opacity: 0; transition: opacity .4s;
          pointer-events: none;
        }
        .svc-card:hover {
          transform: translateY(-2px);
          border-color: var(--accent-line);
          background: var(--surface-2);
        }
        .svc-card:hover::before { opacity: 1; }
        .svc-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; }
        .svc-num { color: var(--text-4); font-size: 11px; }
        .svc-diag { color: var(--text-3); transition: color .3s; }
        .svc-card:hover .svc-diag { color: var(--text-2); }
        .svc-name { margin-bottom: 8px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
        .svc-desc { font-size: 14.5px; line-height: 1.55; color: var(--text-3); margin-bottom: 28px; max-width: 36ch; }
        .svc-tech {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
          color: var(--text-3);
          padding-top: 20px;
          border-top: 1px solid var(--border);
        }
        .svc-tech-sep { color: var(--border-3); margin: 0 8px; }
        .svc-arrow {
          position: absolute; right: 24px; bottom: 24px;
          color: var(--text-4);
          opacity: 0; transform: translate(-4px, 4px);
          transition: opacity .25s, transform .25s, color .25s;
        }
        .svc-card:hover .svc-arrow { opacity: 1; transform: none; color: var(--accent); }
      `}</style>
    </a>
  );
}

function Services() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e) => {
      const cards = el.querySelectorAll(".svc-card");
      cards.forEach((c) => {
        const r = c.getBoundingClientRect();
        c.style.setProperty("--mx", `${e.clientX - r.left}px`);
        c.style.setProperty("--my", `${e.clientY - r.top}px`);
      });
    };
    el.addEventListener("pointermove", onMove);
    return () => el.removeEventListener("pointermove", onMove);
  }, []);

  return (
    <section id="services" className="services container" aria-label="Services">
      <SectionHeader num="01" label="What we build">
        Six practices. <span style={{color:"var(--text-3)"}}>One playbook.</span>
      </SectionHeader>
      <div className="svc-grid" ref={ref}>
        {SERVICES.map(s => <ServiceCard key={s.id} s={s}/>)}
      </div>
      <style>{`
        .services { padding: var(--section-y) 0; }
        .sec-head { margin-bottom: 64px; max-width: 820px; }
        .sec-head h2 { max-width: 24ch; }
        .svc-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }
        @media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { SocialProof, Services, SectionHeader });