// ServiceApp.jsx — boots a service detail page using window.SVC_SLUG
const ServiceApp = () => {
  const slug = window.SVC_SLUG;
  const data = (window.SERVICES_DATA || {})[slug];

  if (!data) {
    return (
      <div style={{ background: '#010102', minHeight: '100vh', color: '#f7f8f8', padding: 60, fontFamily: 'var(--font-text)' }}>
        <Nav />
        <div style={{ maxWidth: 720, margin: '120px auto', textAlign: 'center' }}>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 48, letterSpacing: '-1.6px' }}>Service not found</h1>
          <p style={{ color: '#8a8f98', marginTop: 12 }}>The slug <code style={{ color: '#828fff' }}>{slug}</code> isn't mapped. Return to the home page.</p>
          <a href="/" style={{ display: 'inline-block', marginTop: 24, color: '#828fff' }}>← Back home</a>
        </div>
      </div>
    );
  }

  const MockupCmp = (window.SERVICE_MOCKUPS || {})[data.mockupKind] || window.WebMockup;
  const mockupEl = <MockupCmp />;

  return (
    <div style={{ background: '#010102', minHeight: '100vh' }}>
      <Nav />
      <main style={{ paddingTop: 56 }}>
        <ServiceHero
          tag={data.tag}
          title={data.title}
          lead={data.lead}
          bullets={data.bullets}
          mockup={mockupEl}
        />

        <ServiceStats stats={data.stats} />

        <SectionEdge />
        <TestVectors title={data.vectorsTitle} subtitle={data.vectorsSub} vectors={data.vectors} />

        <SectionEdge />
        <ServiceSignature slug={slug} />

        <SectionEdge />
        <PhaseRibbon phases={data.phases} />

        <SectionEdge />
        <Deliverables items={data.deliverables} />

        <SectionEdge />
        <RelatedServices currentSlug={slug} />

        <SectionEdge />
        <ServiceFaq items={data.faq} />

        <ServiceClose title={data.closeTitle} body={data.closeBody} />

        <Footer />
      </main>
    </div>
  );
};

const SectionEdge = () => (
  <div style={{ maxWidth: 1280, margin: '0 auto', height: 1, background: '#1a1b1e' }} />
);

// Related services — cards linking to the other five service pages
const RelatedServices = ({ currentSlug }) => {
  const all = window.SERVICES_DATA || {};
  const cur = all[currentSlug];
  const others = Object.keys(all).filter(s => s !== currentSlug);
  others.sort((a, b) => {
    const sa = all[a].tag === cur.tag ? 0 : 1;
    const sb = all[b].tag === cur.tag ? 0 : 1;
    return sa - sb;
  });
  const picks = others.slice(0, 3);

  return (
    <section style={{ maxWidth: 1280, margin: '0 auto', padding: '88px 32px' }}>
      <div style={{ marginBottom: 36, maxWidth: 720 }}>
        <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14 }}>Also explore</p>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.4vw, 40px)',
          fontWeight: 600, lineHeight: 1.05, letterSpacing: '-1.4px',
          color: '#f7f8f8', margin: 0,
        }}>Related services</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
        {picks.map(s => <RelatedCard key={s} slug={s} data={all[s]} />)}
      </div>
    </section>
  );
};

const RelatedCard = ({ slug, data }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={`/services/${slug}/`}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'block', textDecoration: 'none',
        background: hover ? '#141516' : '#0f1011',
        border: `1px solid ${hover ? '#34343a' : '#23252a'}`,
        borderRadius: 12, padding: 22,
        position: 'relative', overflow: 'hidden',
        transition: 'all 220ms',
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
      }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 1,
        background: `linear-gradient(90deg, transparent, rgba(94,105,210,${hover ? 0.5 : 0.1}) 50%, transparent)`,
      }} />
      <span style={{
        fontSize: 10.5, color: '#828fff', fontFamily: 'var(--font-mono)',
        textTransform: 'uppercase', letterSpacing: 0.4,
      }}>{data.tag}</span>
      <h3 style={{
        fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500,
        letterSpacing: '-0.4px', color: '#f7f8f8', margin: '8px 0 8px',
      }}>{data.title.replace(/\.$/, '')}</h3>
      <p style={{ fontSize: 13, color: '#8a8f98', lineHeight: 1.5, margin: 0,
        display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
      }}>{data.lead}</p>
      <div style={{
        marginTop: 14, fontSize: 12, fontWeight: 500, color: '#828fff',
        display: 'inline-flex', alignItems: 'center', gap: 5,
        transform: hover ? 'translateX(2px)' : 'translateX(0)',
        transition: 'transform 220ms',
      }}>
        Explore the service
        <Icon name="arrowRight" size={11} color="#828fff" strokeWidth={2.2} />
      </div>
    </a>
  );
};

Object.assign(window, { ServiceApp, SectionEdge, RelatedServices, RelatedCard });