// Reusable page sections.

function MetricCounter({ value, suffix = "", label, mono }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <div style={{
        fontFamily: mono ? "var(--font-mono)" : "var(--font-display)",
        fontSize: mono ? 36 : 56,
        fontWeight: 480,
        letterSpacing: mono ? "0.02em" : "-0.04em",
        lineHeight: 1,
        color: "var(--ink)"
      }}>
        {value}<span style={{ color: "var(--accent)" }}>{suffix}</span>
      </div>
      <div className="mono" style={{ color: "var(--ink-3)" }}>{label}</div>
    </div>
  );
}

function ServiceCard({ title, desc, href, tag, icon }) {
  return (
    <a href={href} className="card card--accent" style={{
      display: "flex", flexDirection: "column", gap: 16,
      textDecoration: "none", color: "inherit", height: "100%"
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div style={{
          width: 36, height: 36,
          border: "1px solid var(--line)",
          borderRadius: 6,
          display: "flex", alignItems: "center", justifyContent: "center",
          background: "var(--bg-soft)"
        }}>
          {icon}
        </div>
        {tag && <span className="mono" style={{ fontSize: 10 }}>{tag}</span>}
      </div>
      <div style={{ marginTop: 8 }}>
        <h3 style={{ fontSize: 19, marginBottom: 6 }}>{title}</h3>
        <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.5 }}>{desc}</p>
      </div>
      <div style={{ marginTop: "auto", paddingTop: 12 }}>
        <span style={{ fontSize: 13, color: "var(--ink-2)", display: "inline-flex", alignItems: "center", gap: 6 }}>
          Explore →
        </span>
      </div>
    </a>
  );
}

// minimalist line icons
function I({ children, size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" style={{ color: "var(--ink-2)" }}>
      {children}
    </svg>
  );
}
const Icons = {
  code: <I><path d="M8 7l-5 5 5 5" /><path d="M16 7l5 5-5 5" /><path d="M14 4l-4 16" /></I>,
  reasoning: <I><circle cx="12" cy="12" r="3" /><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4" /></I>,
  rlhf: <I><path d="M3 17l4-8 4 4 4-6 6 8" /><circle cx="7" cy="9" r="1.5" /><circle cx="11" cy="13" r="1.5" /><circle cx="15" cy="7" r="1.5" /></I>,
  rl: <I><rect x="3" y="3" width="18" height="18" rx="1" strokeDasharray="2 2" /><circle cx="12" cy="12" r="3" /><path d="M12 9V5M12 19v-4M9 12H5M19 12h-4" /></I>,
  safety: <I><path d="M12 2L4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z" /><path d="M9 12l2 2 4-4" /></I>,
  multimodal: <I><rect x="3" y="4" width="18" height="14" rx="1" /><circle cx="9" cy="10" r="1.5" /><path d="M3 16l5-4 5 4M13 14l3-2 5 4" /></I>,
  multilingual: <I><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 3 4 7 4 9s-1.5 6-4 9c-2.5-3-4-7-4-9s1.5-6 4-9z" /></I>,
  domain: <I><path d="M4 22V8l8-5 8 5v14" /><path d="M9 22v-7h6v7" /><path d="M12 3v5" /></I>,
  eval: <I><path d="M3 20V4M3 20h18" /><rect x="6" y="11" width="3" height="9" /><rect x="11" y="7" width="3" height="13" /><rect x="16" y="14" width="3" height="6" /></I>,
  synthetic: <I><circle cx="8" cy="12" r="5" /><circle cx="16" cy="12" r="5" /></I>,
  agents: <I><rect x="4" y="6" width="16" height="12" rx="2" /><circle cx="9" cy="12" r="1.5" fill="currentColor" /><circle cx="15" cy="12" r="1.5" fill="currentColor" /><path d="M12 2v4M8 18v3M16 18v3" /></I>,
};

const SERVICES = [
  { key: "code", title: "Code & SWE data", desc: "Senior-engineer SFT, RLHF, and verifier construction for the world's most demanding coding models.", href: "service-code.html", tag: "01", icon: Icons.code },
  { key: "reasoning", title: "Reasoning & math", desc: "Step-by-step chain-of-thought traces and process reward modeling from STEM PhDs.", href: "service-reasoning.html", tag: "02", icon: Icons.reasoning },
  { key: "posttraining", title: "RLHF, SFT & DPO", desc: "Preference data, calibrated to your model's reward stack and post-training pipeline.", href: "service-posttraining.html", tag: "03", icon: Icons.rlhf },
  { key: "rl", title: "RL environments", desc: "Production-grade gyms for coding, browser, computer-use, and tool-calling agents.", href: "service-rl.html", tag: "04", icon: Icons.rl },
  { key: "safety", title: "Red teaming & safety", desc: "Adversarial testing, jailbreak discovery, and alignment data from safety-trained experts.", href: "service-safety.html", tag: "05", icon: Icons.safety },
  { key: "multimodal", title: "Multimodal data", desc: "Image, video, audio, and document understanding data for multimodal models.", href: "service-multimodal.html", tag: "06", icon: Icons.multimodal },
  { key: "multilingual", title: "Multilingual data", desc: "Native-speaker SFT, RLHF, and evals in 50+ languages, with depth in Indic.", href: "service-multilingual.html", tag: "07", icon: Icons.multilingual },
  { key: "domain", title: "Domain expert data", desc: "PhDs, MDs, JDs, CFAs producing frontier-level annotations and benchmarks.", href: "service-domain.html", tag: "08", icon: Icons.domain },
  { key: "eval", title: "Evaluation & benchmarks", desc: "Custom benchmarks, LLM-as-judge calibration, and human preference evals.", href: "service-eval.html", tag: "09", icon: Icons.eval },
  { key: "synthetic", title: "Synthetic validation", desc: "Hybrid pipelines that combine LLM-generated data with expert verification.", href: "service-synthetic.html", tag: "10", icon: Icons.synthetic },
  { key: "agents", title: "Agent training data", desc: "Trajectory data, function-calling correctness, and tool-use sequences.", href: "service-agents.html", tag: "11", icon: Icons.agents },
];

function ServicesGrid({ limit }) {
  const items = limit ? SERVICES.slice(0, limit) : SERVICES;
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
      gap: 16
    }}>
      {items.map(s => <ServiceCard key={s.key} {...s} />)}
    </div>
  );
}

function CTASection({ eyebrow = "Get started", title, desc, primary = { label: "Schedule a call", href: "contact.html" }, secondary }) {
  return (
    <section className="section" style={{ borderTop: "1px solid var(--line-strong)" }}>
      <div className="container">
        <div style={{
          display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "end"
        }}>
          <Reveal>
            <span className="eyebrow">{eyebrow}</span>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", marginTop: 18, maxWidth: 720, letterSpacing: "-0.035em" }}>{title}</h2>
          </Reveal>
          <Reveal delay={150}>
            <div style={{ display: "flex", flexDirection: "column", gap: 20, alignItems: "flex-start" }}>
              {desc && <p style={{ color: "var(--ink-3)", fontSize: 16, maxWidth: 420 }}>{desc}</p>}
              <div style={{ display: "flex", gap: 10 }}>
                <a href={primary.href} className="btn btn--primary">
                  {primary.label}
                  <span className="arr">→</span>
                </a>
                {secondary && <a href={secondary.href} className="btn btn--ghost">{secondary.label}</a>}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function PageHeader({ eyebrow, title, sub, meta }) {
  return (
    <section className="section section--first" style={{ paddingTop: 96, paddingBottom: 80 }}>
      <div className="container">
        <Reveal><span className="eyebrow">{eyebrow}</span></Reveal>
        <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 96px)", marginTop: 22, maxWidth: 1100, lineHeight: 0.96, letterSpacing: "-0.035em" }}>
          {title}
        </h1>
        {sub && <Reveal delay={120}><p style={{
          marginTop: 28, fontSize: 19, color: "var(--ink-2)",
          maxWidth: 720, lineHeight: 1.5, fontWeight: 400
        }}>{sub}</p></Reveal>}
        {meta && <Reveal delay={240}><div className="measure-row" style={{ marginTop: 56 }}>{meta}</div></Reveal>}
      </div>
    </section>
  );
}

function Pillar({ n, title, desc, children }) {
  return (
    <div style={{
      borderTop: "1px solid var(--line-strong)",
      paddingTop: 28,
      display: "grid",
      gridTemplateColumns: "auto 1fr",
      gap: 24
    }}>
      <span className="mono" style={{ fontSize: 11 }}>{n}</span>
      <div>
        <h3 style={{ fontSize: 24, marginBottom: 12, letterSpacing: "-0.025em" }}>{title}</h3>
        <p style={{ color: "var(--ink-3)", fontSize: 15, maxWidth: 480, marginBottom: 24 }}>{desc}</p>
        {children}
      </div>
    </div>
  );
}

function FeatureRow({ items }) {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: `repeat(${items.length}, 1fr)`,
      borderTop: "1px solid var(--line-strong)",
      borderBottom: "1px solid var(--line)"
    }}>
      {items.map((item, i) => (
        <div key={i} style={{
          padding: "32px 24px 32px 0",
          borderRight: i < items.length - 1 ? "1px solid var(--line)" : "none",
          paddingLeft: i > 0 ? 24 : 0,
        }}>
          <div className="mono" style={{ marginBottom: 16, fontSize: 10 }}>{`0${i+1}`}</div>
          <h4 style={{ fontSize: 18, marginBottom: 10, letterSpacing: "-0.02em" }}>{item.title}</h4>
          <p style={{ color: "var(--ink-3)", fontSize: 14, lineHeight: 1.55 }}>{item.desc}</p>
        </div>
      ))}
    </div>
  );
}

function CaseTeaser({ tag, title, metric, metricLabel, href }) {
  return (
    <a href={href} className="card" style={{
      display: "flex", flexDirection: "column", gap: 28, textDecoration: "none", color: "inherit",
      padding: 28, minHeight: 280
    }}>
      <span className="mono" style={{ fontSize: 10 }}>{tag}</span>
      <div style={{
        fontFamily: "var(--font-display)",
        fontSize: 56, fontWeight: 480, letterSpacing: "-0.04em",
        lineHeight: 1, color: "var(--accent)"
      }}>
        {metric}
      </div>
      <div className="mono" style={{ color: "var(--ink-3)", fontSize: 10 }}>{metricLabel}</div>
      <p style={{ marginTop: "auto", fontSize: 16, lineHeight: 1.4, letterSpacing: "-0.01em" }}>{title}</p>
      <span className="arrow-link" style={{ alignSelf: "flex-start" }}>Read case study →</span>
    </a>
  );
}

function ChecklistGrid({ items, columns = 2 }) {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: `repeat(${columns}, 1fr)`,
      gap: 0,
      borderTop: "1px solid var(--line)"
    }}>
      {items.map((item, i) => (
        <div key={i} style={{
          padding: "16px 20px 16px 0",
          borderBottom: "1px solid var(--line)",
          borderRight: (i % columns) < columns - 1 ? "1px solid var(--line)" : "none",
          paddingLeft: (i % columns) > 0 ? 20 : 0,
          display: "flex", gap: 12, alignItems: "flex-start"
        }}>
          <span style={{ color: "var(--accent)", fontFamily: "var(--font-mono)", fontSize: 11, paddingTop: 2 }}>+</span>
          <span style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.5 }}>{item}</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  MetricCounter, ServiceCard, ServicesGrid, SERVICES, Icons,
  CTASection, PageHeader, Pillar, FeatureRow, CaseTeaser, ChecklistGrid
});