/* global WhatWeDo */
const motion = window.motion;

function WhatWeDo() {
  const cards = [
  {
    n: '01',
    head: 'Create',
    cls: 'y',
    body: 'Brand films, identity systems, photography, design. The story your brand was meant to tell, at the highest production bar.',
    tags: ['Brand films', 'Commercials', 'Identity', 'Editorial', 'Motion design'],
    icon: 'zap'
  },
  {
    n: '02',
    head: 'Automate',
    cls: 'b',
    body: 'Lead routing, content pipelines, internal tools, integrations. The engine that runs while you sleep, built specifically for your stack.',
    tags: ['Workflows', 'CRM + Ops', 'Content engines', 'Dashboards', 'AI agents'],
    icon: 'layers'
  },
  {
    n: '03',
    head: 'Elevate',
    cls: 'r',
    body: 'Performance, optimisation, compounding wins. We measure what matters and tune the system every month, until the curve bends.',
    tags: ['Analytics', 'Funnel ops', 'Retention', 'Optimisation', 'Reporting'],
    icon: 'crown'
  }];


  return (
    <section id="what" className="section" data-screen-label="What We Do">
      <div className="section-head">
        <div>
          <span className="eyebrow">03 — What we do</span>
          <h2>One vision.<br />Three jobs.<br />Zero handoffs.</h2>
        </div>
        <p>Most agencies do one of these well. We do all three under one roof. Designed together, shipped together, owned together.</p>
      </div>
      <div className="do-grid">
        {cards.map((c, i) =>
        <motion.div
          key={c.head}
          className="do-card"
          data-comment-anchor={`do-${c.head.toLowerCase()}`}
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ duration: 0.5, delay: i * 0.08, ease: [0.2, 0.7, 0.1, 1] }}>
          
            <div className="num">— {c.n}</div>
            <i data-lucide={c.icon} className="icon" style={{ width: 36, height: 36 }}></i>
            <h3 className={c.cls}>{c.head}.</h3>
            <p>{c.body}</p>
            <ul>{c.tags.map((t) => <li key={t}>{t}</li>)}</ul>
          </motion.div>
        )}
      </div>
    </section>);

}
window.WhatWeDo = WhatWeDo;