// ═══════════════════════════════════════════════════════════
// Leftshifted - Data Service Page
// ═══════════════════════════════════════════════════════════

const DataPage = () => {
  const { useState, useEffect } = React;
  const words = ['architecture', 'engineering', 'science', 'analysis'];
  const wordWidths = { architecture: 300, engineering: 280, science: 170, analysis: 210 };
  const [cycleStep, setCycleStep] = useState(0);
  const [expStep, setExpStep] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => setCycleStep(c => c + 1), 1800);
    const expTimer = setInterval(() => setExpStep(c => c + 1), 2200);
    return () => { clearInterval(timer); clearInterval(expTimer); };
  }, []);
  const wordH = 46;
  return (
    <PageShell current="/data">
      <Section style={{ background: 'var(--ls-ultramarine-blue)', minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <h1 className="data-h1" style={{
          font: '700 clamp(24px, 3.4vw, 48px)/1.1 var(--font-display)', letterSpacing: 'var(--tracking-display)',
          color: '#fff', textAlign: 'center', maxWidth: '90vw', whiteSpace: 'nowrap',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0 0.28em', overflow: 'visible', padding: '0 40px', boxSizing: 'border-box',
        }}>
          <span>Data</span>
          <span className="dw-slot" style={{ position: 'relative', display: 'inline-block', width: wordWidths[words[cycleStep % words.length]], height: wordH * 3, transition: 'width 650ms cubic-bezier(0.34, 1.56, 0.64, 1)' }}>
            <span className="dw-mask" style={{
              position: 'absolute', left: '50%', top: 0, transform: 'translateX(-50%)',
              width: 340, height: wordH * 3, textAlign: 'center', color: 'var(--ls-lime)', overflow: 'hidden',
              maskImage: 'linear-gradient(to bottom, transparent, black 30%, black 70%, transparent)', WebkitMaskImage: 'linear-gradient(to bottom, transparent, black 30%, black 70%, transparent)',
            }}>
              <span style={{
                display: 'block', position: 'absolute', top: 0, left: 0, right: 0,
                transform: `translateY(${-(cycleStep * wordH)}px)`,
                transition: 'transform 650ms cubic-bezier(0.34, 1.56, 0.64, 1)',
              }}>
                {Array.from({ length: words.length + cycleStep + 2 }, (_, si) => si - 1).map((idx) => (
                  <span key={idx} style={{ display: 'block', height: wordH, lineHeight: `${wordH}px`, opacity: idx === cycleStep ? 1 : 0.3, whiteSpace: 'nowrap' }}>{words[((idx % words.length) + words.length) % words.length]}</span>
                ))}
              </span>
            </span>
          </span>
          <span>that delivers.</span>
        </h1>
      </Section>

      {/* ── SPECIALISMS ────────────────────────── */}
      <Section style={{ paddingTop: 100, paddingBottom: 100, background: 'var(--ls-ultramarine-blue)' }}>
        <div style={{ textAlign: 'center', maxWidth: 900, margin: '0 auto 56px' }}>
          <Eyebrow variant="dark">Our deep expertise</Eyebrow>
          <h2 className="data-h2" style={{
            font: 'var(--type-display-3)', letterSpacing: 'var(--tracking-display)',
            color: '#fff', marginTop: 16, textWrap: 'balance',
          }}>
            Serious data experts, end-to-end.
          </h2>
          <p style={{ font: 'var(--type-body-lg)', color: 'rgba(255,255,255,.75)', marginTop: 16, maxWidth: 640, margin: '16px auto 0' }}>
            99% of the time, we're the experts in the room across every one of these disciplines. When you need that 1% extra, we'll tell you and point you in the right direction.
          </p>
        </div>
        <div className="m-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {[
            { name: 'Architecture', short: 'Design', roles: ['Data Architect', 'Database Architect', 'Data Warehouse Architect', 'Solution Architect'], expertise: ['Organisation and management', 'Hyperscalers, other providers, on-prem', 'Database and warehouse design', 'Governance and compliance'] },
            { name: 'Engineering', short: 'Build', roles: ['Data Engineer', 'Big Data Engineer', 'Analytics Engineer', 'SQL Developer', 'ETL Developer', 'Database Developer', 'Database Administrator'], expertise: ['Data transfer', 'SQL and ETL', 'Data modelling', 'Platform and tool tuning'] },
            { name: 'Science', short: 'Predict', roles: ['Data Scientist', 'ML Engineer', 'AI Engineer'], expertise: ['Hypothesis testing', 'Building models', 'Shipping to the real world'] },
            { name: 'Analysis', short: 'Understand', roles: ['Data Analyst', 'BI Analyst', 'Insights Analyst', 'Business Analyst'], expertise: ['Storytelling', 'Measurement and reporting', 'Insights and decision making'] },
          ].map((item, i) => (
            <div key={i} style={{ background: 'rgba(255,255,255,.12)', borderRadius: 'var(--radius-xl)', padding: 28 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
                <span style={{
                  display: 'inline-block', padding: '6px 16px', borderRadius: 'var(--radius-pill)',
                  background: 'var(--ls-lime)', color: 'var(--ls-midnight-navy)',
                  font: '600 13px/1 var(--font-mono)', letterSpacing: '.04em', textTransform: 'uppercase',
                }}>{item.name}</span>
              </div>
              <p style={{ font: 'var(--type-body)', color: '#fff' }}>{item.short} it.</p>
              {item.roles && (
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 14 }}>
                  {item.roles.map((e, j) => (
                    <span key={j} style={{
                      font: '500 11px/1 var(--font-body)', color: 'rgba(255,255,255,.8)',
                      background: 'rgba(255,255,255,.1)', padding: '5px 10px', borderRadius: 'var(--radius-pill)',
                    }}>{e}</span>
                  ))}
                </div>
              )}
              {item.expertise && (
                <ul style={{ margin: '16px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {item.expertise.map((e, j) => (
                    <li key={j} style={{ font: 'var(--type-caption)', color: 'rgba(255,255,255,.7)' }}>{e}</li>
                  ))}
                </ul>
              )}
            </div>
          ))}
        </div>
      </Section>
    </PageShell>
  );
};

Object.assign(window, { DataPage });