/* work-services.jsx — Selected Work list w/ cursor preview + Services grid */

const WORK = [
  { n: "01", title: "Nordhaus Atelier", meta: "Website · Branding", year: "2025" },
  { n: "02", title: "Rerouted", meta: "Website · Software", year: "2025" },
  { n: "03", title: "Mousa Export", meta: "Website", year: "2025" },
  { n: "04", title: "Steak Club", meta: "Website · Branding", year: "2024" },
  { n: "05", title: "Josh Jabs", meta: "Website · Branding", year: "2024" },
  { n: "06", title: "Movecraft", meta: "Website · SEO", year: "2024" },
];

function Work() {
  const [active, setActive] = useState(null);
  const posRef = useRef({ x: 0, y: 0 });
  const prevRef = useRef(null);
  const rafRef = useRef(0);

  const onMove = useCallback((e) => {
    posRef.current = { x: e.clientX, y: e.clientY };
    if (!rafRef.current) {
      rafRef.current = requestAnimationFrame(() => {
        rafRef.current = 0;
        if (prevRef.current) {
          const { x, y } = posRef.current;
          prevRef.current.style.left = x + "px";
          prevRef.current.style.top = y + "px";
        }
      });
    }
  }, []);

  return (
    <section className="section" id="work" data-screen-label="Selected Work">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="left">
            <Eyebrow n="02">Selected Work / 2024 — 2026</Eyebrow>
            <h2 className="headline">What we've <em>built.</em></h2>
          </div>
          <a className="linka" href="#contact">Start your project <Arrow size={15} /></a>
        </div>

        <div className="work-list reveal" onMouseMove={onMove} onMouseLeave={() => setActive(null)}>
          {WORK.map((w, i) => (
            <div
              key={w.n}
              className="work-row"
              onMouseEnter={() => setActive(i)}
            >
              <span className="wn">{w.n}</span>
              <span className="wt">{w.title}</span>
              <span className="wmeta">{w.meta}</span>
              <span className="wyear" style={{ marginLeft: "auto" }}>{w.year}</span>
              <span className="wgo"><ArrowUR size={16} /></span>
            </div>
          ))}
        </div>
      </div>

      <div className={"work-preview" + (active !== null ? " show" : "")} ref={prevRef}>
        {active !== null && (
          <image-slot id={"auren-work-" + active} shape="rect" fit="cover" placeholder={WORK[active].title}></image-slot>
        )}
      </div>
    </section>
  );
}

/* ---- services ---- */
const SI = {
  browser: "M3 5h18M3 5v14h18V5M6 7.5h.01M8.5 7.5h.01M11 7.5h.01",
  sparkle: "M12 3v18M3 12h18M12 3c.4 4.5 4.5 8.6 9 9-4.5.4-8.6 4.5-9 9-.4-4.5-4.5-8.6-9-9 4.5-.4 8.6-4.5 9-9Z",
  code: "M8 7l-5 5 5 5M16 7l5 5-5 5",
  phone: "M7 3h10a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1ZM10.5 18h3",
  next: "M5 4h14v16H5zM9 16V8l6 8V8",
  cms: "M4 5h16M4 5v14h16V5M8 9.5h8M8 12.5h8M8 15.5h5",
  seo: "M11 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12ZM15.5 14.5 20 19",
  ab: "M4 4h16v16H4zM12 4v16M4 12h8",
  logo: "M5 4h14v16H5zM9.5 15l2.5-7 2.5 7M10.3 13h3.4",
  palette: "M12 3a9 9 0 1 0 0 18c1.2 0 1.8-1 1.8-1.8 0-1.3-1.2-1.6-1.2-2.7 0-.8.7-1.5 1.6-1.5H16a5 5 0 0 0 5-5c0-4-4-7-9-7ZM7.5 12.5h.01M10 8.5h.01M14.5 8.5h.01",
  grid: "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z",
  book: "M4 5.5C4 4.7 4.7 4 5.5 4H11v15H5.5A1.5 1.5 0 0 0 4 20.5V5.5ZM20 5.5C20 4.7 19.3 4 18.5 4H13v15h5.5a1.5 1.5 0 0 1 1.5 1.5V5.5Z",
  dash: "M4 4h7v5H4zM4 12h7v8H4zM13 4h7v8h-7zM13 15h7v5h-7z",
  api: "M4 6h16v4H4zM4 14h16v4H4zM7.5 8h.01M7.5 16h.01",
  cloud: "M7 18a4 4 0 0 1 0-8 5 5 0 0 1 9.6-1.3A3.5 3.5 0 0 1 17 18H7Z",
  tools: "M14.5 6.5a3.5 3.5 0 0 1-4.6 4.6L5 16l3 3 4.9-4.9a3.5 3.5 0 0 1 4.6-4.6l-2 2-2-2 2-2Z",
  atom: "M12 12m-1.5 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0-3 0M12 4.5c4.5 0 8 3.4 8 7.5s-3.5 7.5-8 7.5-8-3.4-8-7.5 3.5-7.5 8-7.5ZM5 7c2-2.6 9.9-1.5 13 3.5M19 17c-2 2.6-9.9 1.5-13-3.5",
  rocket: "M14 4c3 0 6 3 6 6 0 3-3 6-6 7l-2-2-3-3-2-2c1-3 4-6 7-6ZM9 15l-3 3M6 13l-2 2M11 17l-2 2",
  chart: "M4 20h16M7 20v-6M12 20V8M17 20v-9",
};

const SERVICES = [
  { n: "01", title: "Websites", icon: "browser", body: "High-performance marketing sites, landing pages and corporate websites — built for conversion and speed.", tags: [["Next.js & React","next"],["Headless CMS","cms"],["SEO & Performance","seo"],["A/B Testing","ab"]] },
  { n: "02", title: "Branding", icon: "sparkle", body: "Brand identities from logo to design system — identities that stick and stay consistent across every touchpoint.", tags: [["Logo & Wordmark","logo"],["Visual Identity","palette"],["Design System","grid"],["Brand Guidelines","book"]] },
  { n: "03", title: "Software", icon: "code", body: "Custom tools, internal platforms and SaaS products. From MVP to scalable enterprise solution.", tags: [["Web apps & dashboards","dash"],["API & Backend","api"],["SaaS platforms","cloud"],["Internal tools","tools"]] },
  { n: "04", title: "Mobile Apps", icon: "phone", body: "Native and cross-platform apps with first-class user experience — iOS, Android and everything in between.", tags: [["iOS & Android","phone"],["React Native","atom"],["App Store launch","rocket"],["Push & Analytics","chart"]] },
];

function SvcIcon({ name, size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={SI[name]} />
    </svg>
  );
}

function Services() {
  return (
    <section className="section" id="services" data-screen-label="Services">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="left">
            <Eyebrow n="02">Services / What we do</Eyebrow>
            <h2 className="headline">Four <em>disciplines.</em><br />One team.</h2>
          </div>
          <p className="lede">No handoffs between agencies — strategy, design and engineering live under one roof, on one timeline.</p>
        </div>

        <div className="svc-grid">
          {SERVICES.map((s, i) => (
            <article key={s.n} className={"svc reveal d" + ((i % 2) + 1)}>
              <span className="svc-bignum">{s.n}</span>
              <span className="svc-icon"><SvcIcon name={s.icon} size={24} /></span>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="svc-tags">
                {s.tags.map(([t, ic]) => (
                  <span key={t}><i className="ti"><SvcIcon name={ic} size={13} /></i>{t}</span>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Work, Services, WORK, SERVICES, SvcIcon, SI });