/* ============================================================
   Services · Process
   ============================================================ */

const SERVICES = [
  { icon: 'video', title: 'Short-form content + paid social', core: true,
    body: 'Research-backed scripts, full production, posting-ready videos. Then paid spend behind the winners. 8–12 videos per month.' },
  { icon: 'layout', title: 'Websites & landing pages',
    body: 'Fast, conversion-focused sites. Built so your content has somewhere to send people that actually closes them.' },
  { icon: 'pen-tool', title: 'Brand & content strategy',
    body: 'Positioning, hooks, and a content system so every video ladders into one story.' },
];

function Services() {
  const { Reveal, Container, SectionHead } = window;
  return (
    <section id="services" data-screen-label="Services" style={{ padding: 'var(--space-section) 0', background: 'var(--canvas)' }}>
      <Container style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(40px,6vw,64px)' }}>
        <SectionHead eyebrow="What we do" title="One core engine, two force multipliers."
          lede="Short-form is the engine. The site and the strategy make every video work harder they're strongest run together." max={640} />
        <div className="services-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(16px,2vw,24px)' }}>
          {SERVICES.map((s, i) => (
            <Reveal key={s.title} delay={i * 90} y={22} style={s.core ? { gridColumn: '1 / -1' } : undefined} className={s.core ? 'service-core-wrap' : undefined}>
              <article className="lift service-card" style={{
                height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 'var(--space-md)',
                background: 'var(--surface-1)',
                border: s.core ? '1.5px solid var(--accent)' : '1px solid var(--hairline)',
                borderRadius: 'var(--radius-lg)', padding: 'clamp(22px,2.4vw,32px)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-md)' }}>
                  <span className="service-icon" style={{
                    width: 44, height: 44, borderRadius: 'var(--radius-md)', display: 'inline-flex',
                    alignItems: 'center', justifyContent: 'center', background: 'var(--surface-2)', color: 'var(--ink)',
                  }}>
                    <i data-lucide={s.icon} style={{ width: 22, height: 22 }}></i>
                  </span>
                  {s.core && (
                    <span className="t-caption" style={{
                      display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px',
                      borderRadius: 'var(--radius-sm)', background: 'var(--accent)', color: '#fff',
                      fontWeight: 600, letterSpacing: '0.02em',
                    }}>Core</span>
                  )}
                </div>
                <h3 className="t-card-title" style={{ margin: '4px 0 0', color: 'var(--ink)' }}>{s.title}</h3>
                <p className="t-body" style={{ margin: 0, color: 'var(--ink-muted)', textWrap: 'pretty', flex: 1, maxWidth: s.core ? 560 : 'none' }}>{s.body}</p>
              </article>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { Services });