/* global React */
const { useState: useStateMid, useEffect: useEffectMid } = React;

/* ---------------- Stats ---------------- */
const _AnimatedNum = window.AnimatedNum;
function StatsReal() {
  const items = [
    { num: 250, suf: "+", label: "Digital products launched since 2020" },
    { num: 35,  suf: "+", label: "Countries our work is live in" },
    { num: 60,  suf: "+", label: "Brand transformations delivered" },
    { num: 40,  suf: "+", label: "Startups assisted with funding" },
    { num: 17,  suf: "+", label: "Industries served end-to-end" },
    { num: 120, suf: "+", label: "Innovative solutions designed" },
    { num: 270, suf: "M+", label: "Avg. client funding pre-partnership" },
    { num: 40,  suf: "+", label: "Team members across 4 divisions" },
  ];
  return (
    <section className="stats" id="numbers">
      <div className="wrap">
        <div className="stats-head">
          <h2>The numbers <em>behind</em> the noise.</h2>
          <p>Six years, one studio, an obsessive bias toward outcomes. Every metric below comes from shipped, in-market work — not pitch-deck math.</p>
        </div>
        <div className="stats-grid">
          {items.map((s, i) => (
            <div className="stat-cell" key={i}>
              <div className="num"><_AnimatedNum to={s.num}/><span className="suffix">{s.suf}</span></div>
              <div className="label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Services ---------------- */
function Services() {
  const services = [
    { idx: "01", name: "UI/UX Design", blurb: "Intuitive interfaces and journeys that earn engagement, not borrow it.", tags: ["Research", "Flows", "Systems"] },
    { idx: "02", name: "Web Development", blurb: "Performant, accessible sites that look as good as they perform.", tags: ["Webflow", "Next.js", "WP"] },
    { idx: "03", name: "App Development", blurb: "User-first mobile apps built for retention and real-world reliability.", tags: ["React Native", "iOS", "Android"] },
    { idx: "04", name: "Software Engineering", blurb: "Custom platforms that power operations and scale with the business.", tags: ["Full-stack", "CMS", "APIs"] },
    { idx: "05", name: "Creatives & Brand", blurb: "Visual systems that compress a strategy into a single, ownable impression.", tags: ["Identity", "Naming", "Print"] },
    { idx: "06", name: "SEO Marketing", blurb: "Compounding organic growth through content, structure and intent.", tags: ["Technical", "Content", "Links"] },
    { idx: "07", name: "Media Buying", blurb: "Measurable ad placement across Meta, Google and programmatic.", tags: ["Meta", "Google", "Programmatic"] },
    { idx: "08", name: "2D / 3D Animation", blurb: "Motion that explains, persuades and stops the scroll.", tags: ["Motion", "3D", "AR/VR"] },
  ];
  return (
    <section className="services section-pad" id="services">
      <div className="wrap">
        <div className="svc-head">
          <h2>What we <em>do</em> — eight disciplines, one team.</h2>
          <div className="col-right">
            <span className="eyebrow" style={{marginBottom: 16, display: "inline-flex"}}>Services</span>
            <p>We operate as one studio. Strategy briefs design, design briefs engineering, and engineering ships. No silos, no handoff loss.</p>
          </div>
        </div>
        <div className="svc-list">
          {services.map((s) => (
            <a className="svc-row" key={s.idx} href="#contact">
              <span className="svc-bg"></span>
              <span className="idx">{s.idx} /</span>
              <span className="name">{s.name}</span>
              <span className="blurb">{s.blurb}</span>
              <span className="tags">
                {s.tags.map((t) => <span className="tag" key={t}>{t}</span>)}
              </span>
              <span className="arrow"><ArrowSmDark/></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function ArrowSmDark() {
  return (
    <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.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

window.Stats = StatsReal;
window.Services = Services;