// "What we deliver" — Service capabilities deep-dive with tabs.

function ServiceCapabilities() {
  const [active, setActive] = React.useState(0);

  // Icons reused from the global I set
  const icons = {
    app: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="5" y="1" width="8" height="16" rx="1" stroke="currentColor" strokeWidth="1.2"/><circle cx="9" cy="14" r="0.8" fill="currentColor"/><path d="M7 3.5H11" stroke="currentColor" strokeWidth="1.2"/></svg>,
    web: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="1.5" y="3" width="15" height="12" stroke="currentColor" strokeWidth="1.2"/><path d="M1.5 7H16.5 M6 3V15 M6 7L8 9L6 11" stroke="currentColor" strokeWidth="1.2"/></svg>,
    graphic: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 1L17 16H1L9 1Z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="miter"/><circle cx="9" cy="11" r="2" stroke="currentColor" strokeWidth="1.2"/></svg>,
    seo: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="8" cy="8" r="5" stroke="currentColor" strokeWidth="1.2"/><path d="M12 12L16 16 M6 8H10 M8 6V10" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/></svg>,
    video: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="1.5" y="4" width="11" height="10" stroke="currentColor" strokeWidth="1.2"/><path d="M12.5 7L16.5 4V14L12.5 11Z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="miter"/></svg>,
    ai: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="4" y="4" width="10" height="10" stroke="currentColor" strokeWidth="1.2"/><rect x="7" y="7" width="4" height="4" stroke="currentColor" strokeWidth="1.2"/><path d="M9 1V4M9 14V17M1 9H4M14 9H17M2 2L4 4M16 16L14 14M2 16L4 14M16 2L14 4" stroke="currentColor" strokeWidth="1.2"/></svg>,
  };
  const arrow = <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H4.5M11 3V9.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/></svg>;

  const services = [
    {
      key: "app", num: "01", short: "App Development",
      icon: icons.app,
      title: "Native & cross-platform apps",
      tagline: "iOS · Android · Flutter · React Native",
      desc: "From MVP to apps with millions of users. We design, engineer, and operate native iOS, Android, and cross-platform apps — including the back-office, CI/CD pipeline, and crash-free release process.",
      stats: [["50+", "apps shipped"], ["4.8★", "avg store rating"], ["8wk", "MVP timeline"]],
      deliverables: [
        "Native iOS (Swift / SwiftUI)",
        "Native Android (Kotlin / Compose)",
        "Cross-platform (Flutter / RN)",
        "Push & in-app messaging",
        "Offline-first sync",
        "App Store + Play Store launch",
        "Crash + perf monitoring",
        "Continuous OTA delivery",
      ],
      stack: ["Swift", "Kotlin", "Flutter", "React Native", "Firebase", "Supabase", "Fastlane", "Sentry"],
      timeline: [
        ["WK 1-2", "Discovery + UX"],
        ["WK 3-6", "Build core flows"],
        ["WK 7-8", "Polish + QA"],
        ["WK 9+", "Submit + iterate"],
      ],
    },
    {
      key: "web", num: "02", short: "Web Development",
      icon: icons.web,
      title: "Marketing sites & web platforms",
      tagline: "Next.js · React · Laravel · Node",
      desc: "Pixel-perfect marketing sites, complex dashboards, and full SaaS platforms — engineered for sub-second loads, real accessibility, and search-engine-ready performance from day one.",
      stats: [["120+", "sites shipped"], ["98", "avg Lighthouse"], ["6wk", "marketing site"]],
      deliverables: [
        "Marketing & landing pages",
        "SaaS dashboards",
        "Custom CMS / headless",
        "E-commerce + checkout",
        "API design & integration",
        "Auth + RBAC",
        "Performance optimization",
        "Lighthouse 95+ guaranteed",
      ],
      stack: ["Next.js", "React", "TypeScript", "Tailwind", "Laravel", "Node", "PostgreSQL", "Vercel"],
      timeline: [
        ["WK 1", "Wireframes + design"],
        ["WK 2-4", "Build + CMS"],
        ["WK 5", "QA + launch"],
        ["WK 6+", "Iterate on data"],
      ],
    },
    {
      key: "graphic", num: "03", short: "Graphic Design",
      icon: icons.graphic,
      title: "Brand identity & visual systems",
      tagline: "Brand · UI/UX · Illustration · Motion",
      desc: "Brand identity, design systems, illustration, and motion design. We build visual languages that compound — every screen, every social asset, every pitch deck pulls from the same canon.",
      stats: [["80+", "brands shaped"], ["100%", "in-house team"], ["4wk", "full identity"]],
      deliverables: [
        "Logo + brand identity",
        "Design system / UI kit",
        "Marketing illustration",
        "Pitch decks & one-pagers",
        "Social media kits",
        "Print + packaging",
        "Motion design",
        "Style guide + tokens",
      ],
      stack: ["Figma", "After Effects", "Illustrator", "Photoshop", "Cinema 4D", "Spline", "Lottie", "Framer"],
      timeline: [
        ["WK 1", "Brand strategy"],
        ["WK 2", "Logo + system"],
        ["WK 3", "Apply + iterate"],
        ["WK 4", "Style guide"],
      ],
    },
    {
      key: "seo", num: "04", short: "SEO",
      icon: icons.seo,
      title: "Technical SEO & content strategy",
      tagline: "Audit · On-page · Content · Link-building",
      desc: "Technical audits, on-page optimization, content strategy, and outreach that compounds. We treat SEO as engineering — measurable, predictable, and shipped on a roadmap.",
      stats: [["340%", "avg traffic lift"], ["12mo", "to compound"], ["#1", "for target terms"]],
      deliverables: [
        "Technical SEO audit",
        "Core Web Vitals fix",
        "Schema markup",
        "Keyword research",
        "Content calendar",
        "Backlink outreach",
        "Local SEO setup",
        "Monthly ranking reports",
      ],
      stack: ["Ahrefs", "Semrush", "GSC", "GA4", "Screaming Frog", "Surfer", "ContentKing", "Looker"],
      timeline: [
        ["WK 1-2", "Audit + fix tech"],
        ["WK 3-4", "On-page sprint"],
        ["MO 2-3", "Content engine"],
        ["MO 4+", "Compound"],
      ],
    },
    {
      key: "video", num: "05", short: "Video Marketing",
      icon: icons.video,
      title: "Brand films & performance creative",
      tagline: "Script · Shoot · Edit · Motion",
      desc: "Brand films, product launch videos, and performance-driven ad creative — script to final render. In-house cinematography team and motion designers who can ship a campaign in a fortnight.",
      stats: [["200+", "videos shipped"], ["2wk", "campaign turnaround"], ["3.2×", "avg CTR lift"]],
      deliverables: [
        "Brand films",
        "Product launch trailers",
        "Explainer animations",
        "Performance ad creative",
        "Social-first cutdowns",
        "Founder & testimonial",
        "Motion graphics package",
        "Sound design + score",
      ],
      stack: ["Premiere", "After Effects", "DaVinci", "Cinema 4D", "Blender", "Sony FX", "DJI Ronin", "Octane"],
      timeline: [
        ["WK 1", "Script + storyboard"],
        ["WK 2", "Shoot day"],
        ["WK 3", "Edit + motion"],
        ["WK 4", "Final + delivery"],
      ],
    },
    {
      key: "ai", num: "06", short: "AI Services",
      icon: icons.ai,
      title: "Custom AI systems & agents",
      tagline: "LLMs · RAG · Agents · Fine-tuning",
      desc: "Custom LLM applications, RAG pipelines, multi-agent systems, and fine-tuned models — built on our own runtime so you don't get locked into a single model vendor. Production-grade, day one.",
      stats: [["41k", "MAU on 4UAI"], ["94%", "eval pass rate"], ["280ms", "p95 latency"]],
      deliverables: [
        "Custom LLM apps",
        "RAG over your data",
        "Multi-agent systems",
        "Fine-tuned models",
        "Eval harness + CI",
        "Cost & latency guardrails",
        "Voice + multimodal",
        "Bring-your-own-cloud deploy",
      ],
      stack: ["OpenAI", "Anthropic", "Llama", "LangChain", "LlamaIndex", "Pinecone", "Weaviate", "Modal"],
      timeline: [
        ["WK 1", "Use-case scoping"],
        ["WK 2-4", "Pipeline + evals"],
        ["WK 5-6", "Polish + deploy"],
        ["WK 7+", "Iterate on data"],
      ],
    },
  ];

  const cur = services[active];

  return (
    <section className="s" id="capabilities">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow eyebrow-dot">Our Services / Deep dive</span>
            <h2>What we<br/><span className="accent">deliver</span>.</h2>
          </div>
          <p className="lead">
            Six disciplines. Each one is a complete, senior team with its own playbook,
            tech stack, and predictable timeline. Click through to see what's actually in the box.
          </p>
        </div>
        <div className="reveal">
          <div className="svc-tabs" role="tablist">
            {services.map((s, i) => (
              <button
                key={s.key}
                role="tab"
                aria-selected={active === i}
                className={"svc-tab " + (active === i ? "active" : "")}
                onClick={() => setActive(i)}
              >
                <span className="num">{s.num}</span>
                <span>{s.short}</span>
              </button>
            ))}
          </div>
          <div className="svc-panel">
            <div className="svc-panel-grid">
              <div>
                <div className="svc-panel-head">
                  <div className="svc-panel-icon">{cur.icon}</div>
                  <div>
                    <h3>{cur.title}</h3>
                    <div className="svc-panel-tagline">{cur.tagline}</div>
                  </div>
                </div>
                <p className="svc-panel-desc">{cur.desc}</p>
                <div className="svc-panel-stats">
                  {cur.stats.map(([v, l], i) => (
                    <div className="svc-stat" key={i}>
                      <div className="svc-stat-val">{v}</div>
                      <div className="svc-stat-label">{l}</div>
                    </div>
                  ))}
                </div>
                <div className="svc-deliverables-title">Included deliverables / {String(cur.deliverables.length).padStart(2,"0")}</div>
                <ul className="svc-deliverables">
                  {cur.deliverables.map((d, i) => <li key={i}>{d}</li>)}
                </ul>
              </div>
              <aside className="svc-panel-side">
                <div>
                  <div className="svc-side-block-label">Tech stack</div>
                  <div className="svc-stack">
                    {cur.stack.map(s => <span key={s} className="svc-stack-chip">{s}</span>)}
                  </div>
                </div>
                <div>
                  <div className="svc-side-block-label">Typical timeline</div>
                  <div>
                    {cur.timeline.map(([w, l], i) => (
                      <div className="svc-timeline-row" key={i}>
                        <span className="wk">{w}</span>
                        <span>{l}</span>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="svc-cta-row">
                  <span className="meta">Average kickoff in 7 business days</span>
                  <a href="contact.html" className="btn btn-primary" style={{padding: "10px 16px"}}>
                    Start
                    {arrow}
                  </a>
                </div>
              </aside>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ServiceCapabilities = ServiceCapabilities;