// Stats strip + Services + Process

function StatsStrip({ t }) {
  return (
    <section className="stats">
      <div className="container">
        <div className="stats-row reveal-stagger">
          {t.stats.map((s, i) => (
            <div key={i} className="stat">
              <div className="stat-k serif">{s.k}</div>
              <div className="stat-l mono">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services({ t }) {
  const [hover, setHover] = React.useState(null);
  return (
    <section id="services" className="services">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t.services.eyebrow}</span>
          <h2 className="section-title serif">{t.services.title}</h2>
          <p className="section-sub">{t.services.sub}</p>
        </div>
        <div className="services-list">
          {t.services.items.map((it, i) => (
            <div
              key={i}
              className={`service-row reveal ${hover === i ? 'hover' : ''}`}
              onMouseEnter={() => setHover(i)}
              onMouseLeave={() => setHover(null)}
              data-cursor
            >
              <div className="service-num mono">{it.n}</div>
              <div className="service-body">
                <h3 className="service-title serif">{it.t}</h3>
                <p className="service-desc">{it.d}</p>
                <div className="service-tags mono">
                  {it.tags.map((tag, j) => <span key={j}>{tag}</span>)}
                </div>
              </div>
              <div className="service-arrow">→</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process({ t }) {
  return (
    <section id="process" className="process">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t.process.eyebrow}</span>
          <h2 className="section-title serif">{t.process.title}</h2>
          <p className="section-sub">{t.process.sub}</p>
        </div>
        <div className="timeline reveal-stagger">
          {t.process.steps.map((s, i) => (
            <div key={i} className="step">
              <div className="step-week mono">{s.w}</div>
              <div className="step-node">
                <span className="dot" />
                {i < t.process.steps.length - 1 && <span className="tail" />}
              </div>
              <div className="step-body">
                <h4 className="step-title">{s.t}</h4>
                <p className="step-desc">{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.StatsStrip = StatsStrip;
window.Services = Services;
window.Process = Process;