// dthas — Services page. A dedicated, full page for the studio's offering.
// Development-led: web → web apps → applications → embedded engineering, with
// digital consultancy in support. Shares the design system (components.jsx),
// the Section scaffolding (Shared.jsx) and the Footer with the landing page.

const { Tag, Button } = window.DesignSystem_aa2f04;

// reveal-on-scroll — same behaviour as the landing page
function Reveal({ children }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <div ref={ref} className="reveal">{children}</div>;
}

// Inverted page header — bookends with the footer, like the landing hero.
function ServicesHeader() {
  return (
    <header id="top" style={{
      background: 'var(--c-black)', color: 'var(--c-white)',
      borderBottom: '1px solid var(--c-line-invert)',
    }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: 'clamp(56px, 10vh, 128px) var(--container-pad) clamp(48px, 8vh, 96px)',
      }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-overline)',
          letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase',
          color: 'var(--c-paper-500)', marginBottom: 'clamp(32px, 6vh, 72px)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px',
        }}>
          <span>Services</span>
        </div>

        <h1 style={{
          margin: 0, fontWeight: 400,
          fontSize: 'var(--fs-h1)', lineHeight: 1.04,
          letterSpacing: '-0.04em', maxWidth: '16ch',
        }}>Software, engineered end to end.</h1>

        <div style={{
          marginTop: 'clamp(32px, 6vh, 64px)',
          display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto',
          alignItems: 'end', gap: '32px',
          borderTop: '1px solid var(--c-line-invert)', paddingTop: '32px',
        }} className="dthas-hero-foot">
          <p style={{
            margin: 0, maxWidth: '54ch',
            fontSize: 'var(--fs-lead)', lineHeight: 1.45,
            letterSpacing: '-0.01em', color: 'var(--c-paper-700)',
          }}>
            Development first, everything else in support. Bespoke web, applications
            and engineering capacity, delivered end to end.
          </p>
          <Button variant="inverse" size="lg" withArrow as="a" href="contact.html">
            Start a project
          </Button>
        </div>
      </div>
    </header>
  );
}

// One service — title on the left, copy + capability tags on the right.
function ServiceRow({ title, description, tags }) {
  return (
    <article style={{
      display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.4fr)',
      gap: 'clamp(24px, 5vw, 80px)', alignItems: 'start',
      padding: 'clamp(40px, 7vh, 88px) 0',
      borderTop: '1px solid var(--border-hairline)',
    }} className="dthas-svc-row">
      <div>
        <h2 style={{
          margin: 0, fontWeight: 400,
          fontSize: 'var(--fs-h2)', lineHeight: 1.1, letterSpacing: '-0.03em',
        }}>{title}</h2>
      </div>
      <div>
        <p style={{
          margin: 0, fontSize: 'var(--fs-lead)', lineHeight: 1.5,
          letterSpacing: '-0.01em', color: 'var(--text-secondary)', maxWidth: '50ch',
        }}>{description}</p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginTop: 'clamp(20px, 3vh, 32px)' }}>
          {tags.map((t) => <Tag key={t} interactive>{t}</Tag>)}
        </div>
      </div>
    </article>
  );
}

function ServicesList() {
  const { Section, SectionHead } = window;

  const services = [
    {
      index: '01', category: 'Development',
      title: 'Bespoke web development',
      description: 'Marketing sites, content platforms and portfolios, engineered from the ground up. Hand-built front ends, no page-builder underneath, fast, accessible and search-ready by construction.',
      tags: ['Front-end architecture', 'Responsive UI', 'CMS', 'Core Web Vitals', 'Accessibility (WCAG)', 'SEO foundations'],
    },
    {
      index: '02', category: 'Development',
      title: 'Web application engineering',
      description: 'Complex, stateful products in the browser: dashboards, internal tools, platforms and SaaS. Designed around real data and real scale, with a back end and API to match.',
      tags: ['Full-stack', 'REST / GraphQL APIs', 'Databases', 'Authentication', 'Real-time', 'Third-party integrations'],
    },
    {
      index: '03', category: 'Development',
      title: 'Application development',
      description: 'Desktop and mobile applications with a native-grade feel, from a single maintainable codebase. Built to ship to every platform your users are on, and to keep shipping.',
      tags: ['Cross-platform', 'Desktop', 'Mobile', 'Offline-first', 'Packaging & distribution'],
    },
    {
      index: '04', category: 'Development',
      title: 'Embedded & fractional engineering',
      description: 'Senior development capacity on demand. Embedded in your team to lift throughput, or owning delivery end to end, engaged by the project, the sprint or a monthly retainer.',
      tags: ['Project-based', 'Retainer', 'Team augmentation', 'Code review', 'Technical leadership'],
    },
    {
      index: '05', category: 'Consultancy',
      title: 'Digital & technical consultancy',
      description: 'Technical direction without the headcount. Architecture reviews, stack and build-vs-buy decisions, and a pragmatic roadmap, from someone who still writes the code.',
      tags: ['Architecture review', 'Technical strategy', 'Code & security audits', 'Roadmapping', 'Due diligence'],
    },
  ];

  return (
    <Section id="services">
      <SectionHead
        eyebrow="What we do"
        title="A development-led practice."
        intro="The headline offering is software development across the web and beyond. Consultancy strengthens it, never the other way around."
      />
      <div>
        {services.map((s) => (
          <Reveal key={s.index}><ServiceRow {...s} /></Reveal>
        ))}
      </div>
    </Section>
  );
}

// Closing call to action, mirrors the studio's contact tone.
function ServicesCTA() {
  const { Section } = window;
  return (
    <Section id="cta">
      <div style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) auto',
        gap: 'clamp(32px, 6vw, 96px)', alignItems: 'end',
      }} className="dthas-hero-foot">
        <h2 style={{
          margin: 0, fontWeight: 400,
          fontSize: 'var(--fs-h1)', lineHeight: 1.04, letterSpacing: '-0.03em',
          maxWidth: '18ch',
        }}>Have something to build? Let's scope it.</h2>
        <Button variant="primary" size="lg" withArrow as="a" href="contact.html">
          Start a project
        </Button>
      </div>
    </Section>
  );
}

function ServicesPage() {
  return (
    <React.Fragment>
      <SiteNav current="services" />
      <ServicesHeader />
      <main id="main-content" tabIndex={-1}>
        <ServicesList />
        <ServicesCTA />
      </main>
      <Footer />
    </React.Fragment>
  );
}

Object.assign(window, { ServicesPage });