/* services.jsx — Capabilities + Tech stack + Process (dark) */

function ServicesPage({ onNavigate }) {
  const { t, lang } = useLang();
  const { SERVICES, STACK, PROCESS } = window.JMC_DATA;

  return (
    <div className="dc-page-enter" data-screen-label="Services">
      {/* Hero strip */}
      <section style={{ position: 'relative', padding: '180px 0 100px',
                         overflow: 'hidden', borderBottom: '1px solid var(--hairline)' }}>
        <div style={{ position: 'absolute', inset: 0,
                      backgroundImage: `url("${window.RES('assets/portfolio/bess-05.png')}")`,
                      backgroundSize: 'cover', backgroundPosition: 'center',
                      opacity: 0.45 }} />
        <div style={{ position: 'absolute', inset: 0,
                      background: 'linear-gradient(to bottom, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.65) 40%, var(--canvas) 100%)' }} />
        <div className="dc-container" style={{ position: 'relative' }}>
          <div className="dc-grid-2">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              <div className="dc-eyebrow">{t.services.hero.eyebrow}</div>
              <h1 style={{ fontSize: 'clamp(48px, 6vw, 80px)', fontWeight: 700, lineHeight: 1.02,
                            margin: 0, letterSpacing: '-1px' }}>
                {t.services.hero.title}
              </h1>
              <p style={{ fontSize: 18, fontWeight: 300, lineHeight: 1.6,
                           color: 'var(--body)', margin: 0, maxWidth: 540 }}>
                {t.services.hero.sub}
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
                <DcBtn onClick={() => onNavigate('contact')}>{t.services.hero.primary}</DcBtn>
                <DcBtn variant="secondary" onClick={() => onNavigate('portfolio')}>{t.services.hero.secondary}</DcBtn>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Capabilities — alternating rows w/ images */}
      <section className="dc-section" style={{ background: 'var(--canvas)' }}>
        <div className="dc-container">
          <DcReveal>
            <DcSectionHeader
              eyebrow={t.services.hero.eyebrow}
              title={t.services.capabilitiesTitle}
            />
          </DcReveal>
          <div>
            {SERVICES.map((s, i) => (
              <DcReveal key={s.id}>
                <ServiceRow service={s} index={i} reverse={i % 2 === 1} onNavigate={onNavigate} />
              </DcReveal>
            ))}
          </div>
        </div>
      </section>

      {/* Tech stack */}
      <section className="dc-section" style={{ background: 'var(--surface-soft)' }}>
        <div className="dc-container">
          <DcReveal>
            <DcSectionHeader
              eyebrow={lang === 'es' ? 'Tecnología' : 'Technology'}
              title={t.services.stackTitle}
              maxWidth={640}
            />
          </DcReveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
                         borderTop: '1px solid var(--hairline)',
                         borderLeft: '1px solid var(--hairline)' }}>
            {STACK.map(s => (
              <div key={s.category.en} style={{
                padding: 28,
                borderRight: '1px solid var(--hairline)',
                borderBottom: '1px solid var(--hairline)',
                background: 'var(--canvas)',
                display: 'flex', flexDirection: 'column', gap: 14,
                minHeight: 240,
              }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '2px',
                              textTransform: 'uppercase', color: 'var(--accent)' }}>
                  {s.category[lang]}
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0,
                              display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {s.items.map(item => (
                    <li key={item} style={{ fontSize: 14, fontWeight: 300,
                                              color: 'var(--body)',
                                              paddingBottom: 10,
                                              borderBottom: '1px solid var(--hairline)' }}>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process */}
      <section className="dc-section" style={{ background: 'var(--canvas)' }}>
        <div className="dc-container">
          <DcReveal>
            <DcSectionHeader
              eyebrow={lang === 'es' ? 'Proceso' : 'Process'}
              title={t.services.processTitle}
              maxWidth={640}
            />
          </DcReveal>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {PROCESS.map((p, i) => (
              <DcReveal key={p.n}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '120px 280px 1fr',
                  gap: 40, padding: '36px 0',
                  borderTop: '1px solid var(--hairline)',
                  borderBottom: i === PROCESS.length - 1 ? '1px solid var(--hairline)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div style={{ fontSize: 48, fontWeight: 700,
                                color: 'var(--accent)', lineHeight: 1,
                                fontVariantNumeric: 'tabular-nums', letterSpacing: '-1px' }}>
                    {p.n}
                  </div>
                  <h5 style={{ fontSize: 24, fontWeight: 700, margin: 0, color: 'var(--ink)',
                                letterSpacing: '-0.3px' }}>
                    {p[lang].label}
                  </h5>
                  <p style={{ fontSize: 16, fontWeight: 300, lineHeight: 1.65,
                               color: 'var(--body)', margin: 0, maxWidth: 700 }}>
                    {p[lang].body}
                  </p>
                </div>
              </DcReveal>
            ))}
          </div>
        </div>
      </section>

      <DcCTABand
        eyebrow={t.home.cta.eyebrow}
        title={t.home.cta.title}
        body={t.home.cta.body}
        primaryLabel={t.home.cta.primary}
        secondaryLabel={t.home.cta.secondary}
        onPrimary={() => onNavigate('contact')}
        onSecondary={() => onNavigate('portfolio')}
        image="assets/portfolio/bess-investors.png"
      />
    </div>
  );
}

function ServiceRow({ service, index, reverse, onNavigate }) {
  const { lang } = useLang();
  return (
    <div id={service.id} style={{
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 56,
      padding: '64px 0',
      borderTop: '1px solid var(--hairline)',
      direction: reverse ? 'rtl' : 'ltr',
      alignItems: 'center',
    }}>
      <div style={{ direction: 'ltr', display: 'flex', flexDirection: 'column', gap: 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ width: 56, height: 56,
                        background: 'rgba(226, 39, 24, 0.12)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        color: 'var(--accent)' }}>
            <DcIcon name={service.icon} size={28} />
          </div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '2px',
                        textTransform: 'uppercase', color: 'var(--muted)' }}>
            {service.eyebrow[lang]}
          </div>
        </div>
        <h3 style={{ fontSize: 'clamp(28px, 3.5vw, 40px)', fontWeight: 700,
                      lineHeight: 1.1, margin: 0, letterSpacing: '-0.5px' }}>
          {service.title[lang]}
        </h3>
        <p style={{ fontSize: 17, fontWeight: 300, lineHeight: 1.65,
                     color: 'var(--body)', margin: 0, maxWidth: 500 }}>
          {service.body[lang]}
        </p>
        <ul style={{ listStyle: 'none', padding: 0, margin: '8px 0 0',
                      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {service.bullets[lang].map(b => (
            <li key={b} style={{ display: 'flex', alignItems: 'center', gap: 12,
                                 fontSize: 14, fontWeight: 400, color: 'var(--ink)' }}>
              <span style={{ width: 6, height: 6, background: 'var(--accent)',
                              flexShrink: 0 }} />
              {b}
            </li>
          ))}
        </ul>
        <div style={{ marginTop: 16 }}>
          <DcTextLink onClick={() => onNavigate('contact')}>
            {lang === 'es' ? 'Conversar este entregable' : 'Discuss this deliverable'}
          </DcTextLink>
        </div>
      </div>
      <div style={{ direction: 'ltr' }}>
        <DcPhoto src={service.image} aspectRatio="4/3"
                 caption={service.title[lang]} tag="UE5" />
      </div>
    </div>
  );
}

window.ServicesPage = ServicesPage;