// ═══════════════════════════════════════════════════════════
// Leftshifted - Individual Product Page
// ═══════════════════════════════════════════════════════════

const productData = {
  'discovery': {
    name: 'Data & AI Value Chain Audit',
    heroImg: res('assets/brand/graphic-audit.png'),
    stage: { num: 1, label: 'Navigate' },
    sub: 'We give you a clear, jargon-free picture of where your data and AI capability sits today - and a concrete plan for what to do next.',
    // 1. Problem
    problem: ['You\'ve spent lots of money, but delivery isn\'t there yet.', 'Your team tells you everything is fine, but it doesn\'t feel fine.', 'You need to invest more, but you can\'t make big decisions confidently like this.'],
    problemAttrib: 'You need an expert view you can actually trust, from someone senior enough to know what they\'re looking at, and honest enough to tell you what they find.',
    // 2. Why solve it
    whySolveTitle: 'Regardless of us, this problem is worth solving',
    whySolveIntro: 'We help you identify and avoid the most common pitfalls - so you can move forward with confidence.',
    whySolve: [
      { title: 'Delivery is slow', desc: 'Building tech debt, workarounds, reactive firefighting, constant fixes and a backlog that never shrinks.', icon: 'clock' },
      { title: 'Wasted spend', desc: 'Every decision made without a clear picture costs more than it should and delivers less than it could.\n\nWasted spend. Misdirected effort. Value left on the table.', icon: 'ban' },
      { title: 'Missed opportunities', desc: 'You have valuable untapped use cases. Your team can\'t see or communicate the commercial opportunities in what you have or could have.', icon: 'eye-off' },
      { title: 'Your reputation is on the line', desc: 'You\'re accountable for something you can\'t fully see or verify. Your board\'s trust in you, yours in your team. The longer it sits, the harder it is to lead.', icon: 'alert-triangle' },
    ],
    // 3. What you get
    whatYouGetIntro: 'We assess the entire end-to-end chain in your custom context. That\'s all your specific stack components and their ability to pass value along, and how far they\'ll scale. A single break anywhere means value doesn\'t make it to the end.\n\nThis is not a standard framework. Everything is custom to your environment, your architecture and your business.',
    deliverables: [
      { title: 'Custom component grid', desc: 'Your specific value chain mapped out end-to-end.' },
      { title: 'Traffic light scoring', desc: 'Every component scored on its ability to drive value, in your specific contexts.' },
      { title: 'As-is and gap analysis', desc: 'Gap analysis to your desired state(s), with all the technical details captured and translated.' },
      { title: 'Prioritised roadmap', desc: 'Effort sizing aligned to where the value actually is.' },
      { title: 'Purposeful documentation', desc: 'Translation work and diagramming delivered in the formats you like to work with.' },
    ],
    // 4. Proof
    proofHeadline: 'Achieve clarity like our clients',
    proofStats: [{ num: '£231M+', label: 'commercial results' }, { num: '15+', label: 'years experience' }, { num: '100%', label: 'success rate' }],
    // 5. How it works
    howItWorks: [
      { label: 'Fixed fee', value: '£7,500+', note: 'No surprises, no scope creep. One number, agreed upfront.' },
      { label: 'Duration', value: '2 weeks', note: 'From kickoff to final presentation.' },
      { label: 'Team', value: 'One senior consultant', note: 'Direct access throughout, no handoffs.' },
    ],
    howItWorksSubhead: 'Against the cost of getting the next 12 months wrong, it\'s a rounding error.',
    // 6. CTA - uses shared
  },
  'leftshifted-30': {
    name: 'Leftshifted 30',
    stage: { num: 1, label: 'Navigate' },
    sub: 'Leftshifted 30 is the fast track to a data strategy your board will actually back - built by people who\'ve been in the room.',
    problem: 'Contractors can only take you so far. Big firms send juniors. A first hire is a gamble.',
    problemAttrib: 'There\'s a gap between where you are and where you could be - and the longer you wait, the more it costs.',
    whySolveTitle: 'The cost of getting it wrong',
    whySolveIntro: 'Every month without a clear data strategy costs you in three ways.',
    whySolve: [
      { title: 'Scope', desc: 'A contractor delivers a model but it\'s built on shaky foundations and nobody can maintain it.' },
      { title: 'Time', desc: 'Six months into a data platform build and the business still can\'t answer basic questions.' },
      { title: 'Competition', desc: 'Your competitors are shipping AI use-cases while your team is still debating architecture.' },
      { title: 'Opportunity', desc: 'The commercial value sitting in your data compounds every month you leave it untapped.' },
    ],
    whatYouGetIntro: 'Ten concrete deliverables in 30 days, designed for leadership teams - not just technical audiences.',
    deliverables: [
      { title: 'Current State', desc: 'A comprehensive assessment of your data and AI capability today.' },
      { title: 'Commercial Prioritisation', desc: 'Which use-cases will deliver the most value, fastest.' },
      { title: 'Gap Analysis', desc: 'What\'s missing between where you are and where you need to be.' },
      { title: 'The Leftshifted 30 Plan', desc: 'A sequenced, board-ready plan for the next 90 days.' },
    ],
    proofHeadline: 'Achieve clarity like our clients',
    proofStats: [{ num: '500+', label: 'projects delivered' }, { num: '£50m', label: 'budget managed' }, { num: '200%', label: 'avg ROI' }],
    howItWorks: [
      { label: 'Fixed fee', value: '£40,000', note: 'Fixed fee, all deliverables included.' },
      { label: 'Duration', value: '30 days', note: 'From kickoff to board presentation.' },
      { label: 'Team', value: 'Two people, senior throughout', note: 'No juniors, no handoffs.' },
    ],
    howItWorksSubhead: 'Against the cost of getting the next 12 months wrong, it\'s a rounding error.',
  },
  'stabilise': {
    name: 'Stabilise',
    stage: { num: 2, label: 'Deliver' },
    sub: 'Stabilise is for the moment when your data or AI programme has hit trouble - missed deadlines, ballooning costs, or a team that\'s lost direction.',
    problem: 'The longer you leave a broken data programme, the more expensive the fix.',
    problemAttrib: 'We\'ve stabilised projects across retail, insurance, and telco - usually within the first month.',
    whySolveTitle: 'Signs you need Stabilise',
    whySolveIntro: 'If any of these sound familiar, it\'s time to act.',
    whySolve: [
      { title: 'Deadlines slipping', desc: 'The programme was supposed to deliver months ago. Every sprint adds scope and the finish line keeps moving.' },
      { title: 'Cost overruns', desc: 'The budget is burning faster than expected, and it\'s not clear what you\'re getting for it.' },
      { title: 'Team confusion', desc: 'Nobody can explain what the programme is actually delivering, or when.' },
    ],
    whatYouGetIntro: 'We don\'t just diagnose - we take ownership until it\'s fixed.',
    deliverables: [
      { title: 'Programme diagnostic', desc: 'What\'s gone wrong, why, and what to do about it.' },
      { title: 'Recovery plan', desc: 'A sequenced plan to get back on track.' },
      { title: 'Team restructuring', desc: 'Recommendations on who to keep, move, or replace.' },
      { title: 'Hands-on delivery', desc: 'We take ownership until it\'s stable, then hand back.' },
    ],
    proofHeadline: 'Programmes stabilised, results delivered',
    proofStats: [{ num: '£231M+', label: 'commercial results' }, { num: '1 month', label: 'typical turnaround' }, { num: '100%', label: 'success rate' }],
    howItWorks: [
      { label: 'Price', value: 'From £15,000/mo', note: 'Monthly retainer, no minimum term.' },
      { label: 'Duration', value: '1-3 months typical', note: 'We stay until it\'s stable.' },
      { label: 'Team', value: 'One senior lead + support', note: 'Direct access throughout.' },
    ],
    howItWorksSubhead: 'Against the cost of a stalled programme, it\'s a rounding error.',
  },
  'execute': {
    name: 'Execute',
    stage: { num: 2, label: 'Deliver' },
    sub: 'Execute is hands-on delivery of data platforms, AI models, and analytics products - by senior people who\'ve done it before.',
    problem: 'Plans are worthless without execution. Execution without a plan is expensive. We do both.',
    problemAttrib: 'Our delivery teams are small, senior, and ship fast.',
    whySolveTitle: 'Why execution fails',
    whySolveIntro: 'The three most common reasons data projects never reach production.',
    whySolve: [
      { title: 'Junior teams', desc: 'The big firms sell senior, deliver junior. You end up managing the people who are supposed to be managing your project.' },
      { title: 'No commercial focus', desc: 'The team builds what\'s technically interesting, not what\'s commercially valuable. Months pass with no business impact.' },
      { title: 'No knowledge transfer', desc: 'When the consultants leave, the capability leaves with them. You\'re back to square one.' },
    ],
    whatYouGetIntro: 'Production systems your team can maintain - not proofs of concept that gather dust.',
    deliverables: [
      { title: 'Production data pipelines', desc: 'Clean, governed, ready for the business to use.' },
      { title: 'ML models in production', desc: 'Not proofs of concept - real models that ship and get adopted.' },
      { title: 'Analytics dashboards', desc: 'Connected to the decisions that matter, not vanity metrics.' },
      { title: 'Documentation & handover', desc: 'Your team can maintain and extend everything we build.' },
    ],
    proofHeadline: 'Built, shipped, adopted',
    proofStats: [{ num: '£231M+', label: 'commercial results' }, { num: '100%', label: 'projects shipped' }, { num: '0', label: 'juniors' }],
    howItWorks: [
      { label: 'Price', value: 'From £20,000/mo', note: 'Scoped and quoted upfront.' },
      { label: 'Duration', value: '3-6 months typical', note: 'Milestones, not timesheets.' },
      { label: 'Team', value: '2-4 senior practitioners', note: 'No juniors, no rotation.' },
    ],
    howItWorksSubhead: 'Against the cost of a project that never ships, it\'s a rounding error.',
  },
  'scale': {
    name: 'On-demand experts',
    stage: { num: 3, label: 'Scale' },
    sub: 'Scale gives you a trusted data and AI partner on call - available when you need them, gone when you don\'t.',
    scaleOnly: true,
  },
};

const ProductPage = ({ slug }) => {
  const product = productData[slug] || productData['leftshifted-30'];
  const [openProblem, setOpenProblem] = useState(0);

  // Scale-only layout
  if (product.scaleOnly) {
    return (
      <PageShell current="/services">
        <div className="product-hero">
          <UnionOverlay opacity={0.06} />
          <div className="page-wrap product-hero__grid">
            <div className="product-hero__content">
              <NumEyebrow number={product.stage.num}>{product.stage.label}</NumEyebrow>
              <h1 style={{ font: 'var(--type-display-2)', letterSpacing: 'var(--tracking-display)', color: '#fff', marginTop: 24, textWrap: 'balance' }}>
                {product.name}
              </h1>
              <p style={{ font: 'var(--type-body-lg)', color: 'rgba(255,255,255,.85)', marginTop: 20, maxWidth: 520 }}>
                {product.sub}
              </p>
              <div style={{ marginTop: 40, padding: '24px 28px', background: 'rgba(255,255,255,.1)', borderRadius: 16, border: '1px solid rgba(255,255,255,.15)', maxWidth: 480 }}>
                <p style={{ font: 'var(--type-body-sm)', color: 'rgba(255,255,255,.85)', marginBottom: 16 }}>
                  Scale is currently only available to existing Leftshifted clients. If you'd like to discuss how we can help, get in touch.
                </p>
                <Btn variant="white" href="/contact">Let's talk</Btn>
              </div>
            </div>
            <div className="product-hero__img">
              <img src={product.heroImg || res('assets/brand/services-graphic.png')} alt="" style={{ width: '100%', maxWidth: 400 }} />
            </div>
          </div>
        </div>
      </PageShell>
    );
  }

  return (
    <PageShell current="/services">
      {/* ── HERO ───────────────────────────────── */}
      <div className="product-hero">
        <UnionOverlay opacity={0.06} />
        <div className="page-wrap product-hero__grid">
          <div className="product-hero__content">
            <NumEyebrow number={product.stage.num}>{product.stage.label}</NumEyebrow>
            <h1 style={{ font: 'var(--type-display-2)', letterSpacing: 'var(--tracking-display)', color: '#fff', marginTop: 24, textWrap: 'balance' }}>
              {product.name}
            </h1>
            <p style={{ font: 'var(--type-body-lg)', color: 'rgba(255,255,255,.85)', marginTop: 20, maxWidth: 520 }}>
              {product.sub}
            </p>
            <div style={{ marginTop: 36 }}>
              <Btn variant="white" href="/contact">Book a call</Btn>
            </div>
          </div>
          <div className="product-hero__img">
            <img src={product.heroImg || res('assets/brand/services-graphic.png')} alt="" style={{ width: '100%', maxWidth: 400 }} />
          </div>
        </div>
      </div>

      {/* ── 1. PROBLEM ─────────────────────────── */}
      <div className="industry-challenge">
        <img src={res("assets/brand/challenge-squares.png")} alt="" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', pointerEvents: 'none',
        }} />
        <div className="page-wrap" style={{ position: 'relative', zIndex: 1, textAlign: 'center', padding: '120px 0' }}>
          <Eyebrow variant="dark">The problem</Eyebrow>
          <h2 style={{
            font: '700 32px/1.6 var(--font-display)', letterSpacing: '-0.02em',
            marginTop: 24, maxWidth: 1100, marginLeft: 'auto', marginRight: 'auto',
            color: '#fff',
          }}>
            {Array.isArray(product.problem) ? product.problem.map((line, i) => (
              <Fragment key={i}>{line}{i < product.problem.length - 1 && <br />}</Fragment>
            )) : product.problem}
          </h2>
          <p style={{ font: 'var(--type-body-lg)', color: 'rgba(255,255,255,.65)', marginTop: 24, maxWidth: 600, marginLeft: 'auto', marginRight: 'auto' }}>
            {product.problemAttrib}
          </p>
        </div>
      </div>

      {/* ── 2. WHY SOLVE IT ────────────────────── */}
      <Section style={{ paddingTop: 100, paddingBottom: 40 }} className="pp-why-section">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <Eyebrow>Why now?</Eyebrow>
          <h2 style={{ font: 'var(--type-h1)', letterSpacing: 'var(--tracking-h)', marginTop: 16, textWrap: 'balance' }}>
            {product.whySolveTitle}
          </h2>
          <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)', marginTop: 12, maxWidth: 560, marginLeft: 'auto', marginRight: 'auto' }}>
            {product.whySolveIntro}
          </p>
        </div>
        <div className="pp-why-grid">
          {product.whySolve.map((prob, i) => (
            <div key={i} className="pp-why-card">
              <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--ls-ultramarine-blue)', color: '#fff', display: 'grid', placeItems: 'center', marginBottom: 16 }}>
                <i data-lucide={prob.icon || 'arrow-right'} style={{ width: 20, height: 20 }}></i>
              </div>
              <h4 style={{ font: 'var(--type-h4)', marginBottom: 8 }}>{prob.title}</h4>
              <p style={{ font: 'var(--type-body-sm)', color: 'var(--fg-muted)', whiteSpace: 'pre-line' }}>{prob.desc}</p>
            </div>
          ))}
        </div>
        {/* Why Leftshifted themes */}
        <div style={{ marginTop: 64, textAlign: 'center', marginBottom: 48 }}>
          <Eyebrow>Why Leftshifted?</Eyebrow>
          <h2 style={{ font: 'var(--type-display-3)', letterSpacing: 'var(--tracking-display)', marginTop: 20, maxWidth: 800, marginLeft: 'auto', marginRight: 'auto', textWrap: 'balance' }}>
            Leftshifted was built differently
          </h2>
          <p style={{ font: 'var(--type-body-lg)', color: 'var(--fg-muted)', marginTop: 16, maxWidth: 640, marginLeft: 'auto', marginRight: 'auto' }}>
            Outcome based, expert led, designed to offboard to your team. Because the typical engagement takes too long, costs too much, and delivers nothing but dependency.
          </p>
        </div>
        <WhyThemes />
        <div style={{ marginTop: 48 }}><LogoBar variant="dark" /></div>
      </Section>

      {/* ── 4. PROOF ───────────────────────────── */}
      <div className="pp-proof-section">
        <div className="page-wrap pp-proof">
          <div className="pp-proof__content">
            <Eyebrow variant="blue">Case study</Eyebrow>
            <h2 style={{ font: 'var(--type-display-2)', letterSpacing: 'var(--tracking-display)', color: '#fff', marginTop: 20 }}>
              {product.proofHeadline}
            </h2>
            {product.proofBody && (
              <p style={{ font: 'var(--type-body)', color: 'rgba(255,255,255,.85)', marginTop: 20, maxWidth: 520 }}>
                {product.proofBody}
              </p>
            )}
            <div className="pp-proof__stats">
              {product.proofStats.map((s, i) => (
                <div key={i} className="pp-proof__stat">
                  <span className="pp-proof__stat-num">{s.num}</span>
                  <span className="pp-proof__stat-label">{s.label}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 40 }}>
              <Btn variant="primary" href="/case-studies">View case study</Btn>
            </div>
          </div>
          <div className="pp-proof__img-wrap">
            <div className="pp-proof__img">
              <img src={res("assets/imagery/founder-portrait-1.png")} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <DecorSquares layout="proof" />
          </div>
        </div>
      </div>

      {/* ── 6. CONTACT FORM ─────────────────────── */}
      <div className="pp-contact-panel">
        <div className="page-wrap pp-contact__grid">
          <div className="pp-contact__intro">
            <Eyebrow variant="blue">Get in touch</Eyebrow>
            <h2 style={{ font: 'var(--type-display-3)', letterSpacing: 'var(--tracking-display)', color: '#fff', marginTop: 16, textWrap: 'balance' }}>
              Interested in {product.name}?
            </h2>
            <p style={{ font: 'var(--type-body)', color: 'rgba(255,255,255,.78)', marginTop: 12, maxWidth: 380 }}>
              Fill in the form and we'll get back to you within 24 hours.
            </p>
          </div>
          <div className="pp-contact__form-card">
            <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div className="m-stack-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <input type="text" placeholder="First name" className="pp-input" />
                <input type="text" placeholder="Last name" className="pp-input" />
              </div>
              <input type="email" placeholder="Work email" className="pp-input" />
              <input type="text" placeholder="Company" className="pp-input" />
              <input type="text" placeholder="Job title" className="pp-input" />
              <textarea placeholder="Tell us a bit about what you're looking for" className="pp-input" rows={4} style={{ resize: 'vertical' }}></textarea>
              <Btn variant="primary" onClick={() => {}}>Send request</Btn>
            </form>
          </div>
        </div>
      </div>
    </PageShell>
  );
};

Object.assign(window, { ProductPage, productData });
