// ═══════════════════════════════════════════════════════════
// Leftshifted - About Page
// ═══════════════════════════════════════════════════════════

const AboutPage = () => {
  const [openValue, setOpenValue] = useState(0);

  const values = [
    { title: 'Calm', icon: <path d="M12 3v3M12 18v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M3 12h3M18 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none" />, desc: 'We\'ve seen it all before. When things are broken and pressure is high, we assess, prioritise and move - without the panic that makes everything worse.' },
    { title: 'Impact driven', icon: <path d="M12 20V10M18 20V4M6 20v-6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none" />, desc: 'Every piece of work we do ties back to a commercial outcome. If it doesn\'t move a number that matters, we won\'t recommend it.' },
    { title: 'A sprinkling of fun', icon: <path d="M12 3l2.1 4.4 4.9.7-3.5 3.4.8 4.9L12 14l-4.3 2.4.8-4.9L5 8.1l4.9-.7L12 3z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" fill="none" />, desc: 'Data and AI are serious business, but we don\'t take ourselves too seriously. We work best with people who like what they do.' },
    { title: 'Quality', icon: <path d="M12 3l2.4 5 5.6.6-4.2 3.9 1.1 5.5L12 15l-4.9 3 1.1-5.5-4.2-3.9 5.6-.6L12 3z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" fill="none" />, desc: 'We\'d rather do fewer things well than many things badly. Every deliverable, every line of code, every recommendation - crafted to last.' },
  ];

  const timeline = [
    { year: '', title: '', desc: "Before Leftshifted, Jack spent over a decade helping senior leaders navigate data and AI across FTSE 100 and startup alike - delivering hundreds of millions in outcomes, and growing frustrated with what the professional services space had to offer." },
    { year: '2023', title: 'Leftshifted founded', desc: "Jack founded Leftshifted with a simple mission: make data and AI work actually work for the people paying for it." },
    { year: '2024', title: 'PR & Comms practice launched', desc: 'We launched a dedicated PR & Comms Intelligence practice, going on to deliver award-winning, industry-leading work for the sector.' },
    { year: '2026', title: '£231M+ and growing', desc: "A team of senior practitioners who've all delivered time and time again, with all the stories and scars to show for it." },
  ];

  return (
    <PageShell current="/about">
      {/* ── HERO ───────────────────────────────── */}
      <div className="about-hero">
        <UnionOverlay opacity={0.06} />
        <div className="page-wrap about-hero__grid">
          <div className="about-hero__content">
            <Eyebrow variant="dark">About us</Eyebrow>
            <h1 className="about-hero__h1">
              I founded Leftshifted because I saw too many senior leaders getting&nbsp;stuck.
            </h1>
            <p style={{ font: 'var(--type-body-lg)', color: 'rgba(255,255,255,.85)', maxWidth: 480, marginTop: 24 }}>
              Stuck navigating the complexity of data and AI projects that never delivered real value. Over 15+ years, I've helped unlock £231M+ in commercial results by doing things differently.
            </p>
          </div>
          <div className="about-hero__portrait">
            <img src={res("assets/brand/founder-squares.png")} alt="" style={{
              position: 'absolute', top: -20, right: '30.625%', width: '55%', height: 'calc(100% + 40px)',
              objectFit: 'contain', objectPosition: 'right', pointerEvents: 'none', zIndex: 2,
            }} />
            <img src={res("assets/imagery/founder-portrait-2-web.jpg")} alt="Jack, Founder & CEO" style={{ position: 'relative', zIndex: 1 }} />
          </div>
        </div>
      </div>

      {/* ── VALUES (removed for now) ─────────────────────────────── */}
      {false && <Section style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="about-values" style={{ gridTemplateColumns: '1fr', maxWidth: 640, margin: '0 auto', textAlign: 'center' }}>
          <div className="about-values__content" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <Eyebrow>Our values</Eyebrow>
            <h2 style={{ font: 'var(--type-h1)', letterSpacing: 'var(--tracking-h)', marginTop: 16, textWrap: 'balance' }}>
              The principles that shape how we think, act, and deliver.
            </h2>
            <p style={{ font: 'var(--type-body-sm)', color: 'var(--fg-muted)', marginTop: 12, maxWidth: 480 }}>
              We embed what's needed for your team to keep delivering new value with scaled up in-house data and AI.
            </p>
            <div className="about-values__list" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 24, textAlign: 'left', width: '100%' }}>
              {values.map((v, i) => (
                <div key={i} style={{ padding: 18, background: 'var(--bg-elevated)', borderRadius: 'var(--radius-xl)' }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: 'var(--radius-sm)', background: 'var(--ls-blue-10)',
                    color: 'var(--ls-ultramarine-blue)', display: 'grid', placeItems: 'center', marginBottom: 10,
                  }}>
                    <svg width="16" height="16" viewBox="0 0 24 24">{v.icon}</svg>
                  </div>
                  <h4 style={{ font: 'var(--type-h4)', marginBottom: 6 }}>{v.title}</h4>
                  <p style={{ font: 'var(--type-caption)', color: 'var(--fg-muted)' }}>{v.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Section>}

      {/* ── LOGO BAR ───────────────────────────── */}
      <div className="page-wrap"><div style={{ borderTop: '1px solid var(--border-subtle)' }}><LogoBar variant="dark" /></div></div>

      {/* ── TIMELINE ───────────────────────────── */}
      <Section style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingTop: 60, paddingBottom: 60, boxSizing: 'border-box' }}>
        <div className="about-timeline">
          <div className="about-timeline__left">
            <span style={{ font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-mono)', textTransform: 'uppercase', color: 'var(--fg-subtle)' }}>
              Our story / Timeline
            </span>
            <h2 style={{ font: 'var(--type-display-3)', letterSpacing: 'var(--tracking-display)', marginTop: 12 }}>
              Our journey
            </h2>
          </div>
          <div className="about-timeline__right">
            {timeline.map((t, i) => (
              <div key={i} className="timeline-item">
                <div className="timeline-item__marker">
                  <span className="timeline-item__dot"></span>
                  {i < timeline.length - 1 && <span className="timeline-item__line"></span>}
                </div>
                <div className="timeline-item__content">
                  {t.year && <span className="timeline-item__year">{t.year}</span>}
                  {t.title && <h3 style={{ font: 'var(--type-h2)', letterSpacing: 'var(--tracking-h)', margin: '8px 0 12px' }}>{t.title}</h3>}
                  <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)', maxWidth: 520 }}>{t.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* ── FAQ ────────────────────────────────── */}
      {/* ── FAQ ────────────────────────────────── */}
      <div className="home-faq-section">
        <img src={res("assets/brand/faq-squares.png")} alt="" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'contain', pointerEvents: 'none',
        }} />
        <div className="page-wrap" style={{ position: 'relative', zIndex: 1 }}>
          <div style={{ maxWidth: 780, margin: '0 auto' }}>
            <div style={{ textAlign: 'center', marginBottom: 40 }}>
              <Eyebrow>FAQs</Eyebrow>
              <h2 style={{ font: 'var(--type-h1)', letterSpacing: 'var(--tracking-h)', marginTop: 16 }}>
                Common questions, honest answers.
              </h2>
            </div>
            <HomeFAQ />
            <div style={{ textAlign: 'center', marginTop: 40 }}>
              <Btn href="/contact">I still have questions</Btn>
            </div>
          </div>
        </div>
      </div>
    </PageShell>
  );
};

Object.assign(window, { AboutPage });