/* Chapter content sections */

const { useEffect, useRef, useState } = React;

// ============ CHAPTER: BACKGROUND ============
function Background() {
  return (
    <section id="background" data-chapter="Background" data-screen-label="01 Background">
      <div className="container">
        <div className="chapter-head">
          <div className="meta">
            <span className="section-num">§ 01 · Background</span>
          </div>
          <div>
            <h2 className="reveal">A professional B2B supplier deserves a platform that matches.</h2>
            <p className="lede reveal d1">
              Formedium supplies powdered culture media to universities, research labs, and pharma companies across 100+ countries. The current Shopify build doesn’t reflect that standing — and wasn’t designed for how institutional science actually buys.
            </p>
          </div>
        </div>

        <div className="two-col reveal d2">
          <div className="body-copy">
            <p>Formedium’s customer base is predominantly institutional B2B — universities, research facilities, and pharma companies who order repeatedly, require VAT-exempt processing, operate within procurement frameworks, and expect a professional digital experience that reflects the quality of the products they are buying.</p>
            <p>The current site, built on Shopify using the Baea Page Builder, is fragmented, plugin-dependent, and fails to perform for the audience it serves.</p>
          </div>
          <div className="body-copy">
            <p>This proposal is for a full platform rebuild that will serve the business properly for the long term — owned outright, free of licence fees, architected for the next decade, and designed around how procurement managers, lab buyers, and finance teams actually work.</p>
            <p style={{fontStyle: 'italic', fontFamily: 'var(--serif)', color: 'var(--ink-2)'}}>What follows is RVS Media’s honest recommendation.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ CHAPTER: OBJECTIVES ============
function Objectives() {
  const kpis = [
    ['Checkout Completion Rate', 'Uplift vs Shopify · measured at +30 days'],
    ['Repeat Order Rate', 'B2B benchmark: 40%+ repeat · tracked monthly'],
    ['Quote-to-Order Conversion', '% closed within 30 days of issue'],
    ['Account Portal Adoption', 'Self-service vs phone/email support'],
    ['Page Load Time', 'Under 2 seconds · Google PageSpeed'],
    ['Sage Sync Accuracy', 'Zero manual data entry post-go-live'],
    ['Support Ticket Reduction', 'Order-related inbound contact decrease'],
    ['Average Order Value', 'Volume pricing, quick order, templates uplift'],
  ];
  return (
    <section id="objectives" className="bg-paper-2" data-chapter="Objectives" data-screen-label="02 Objectives">
      <div className="container">
        <div className="chapter-head">
          <div className="meta">
            <span className="section-num">§ 02 · Objectives & Success</span>
          </div>
          <div>
            <h2 className="reveal">Four outcomes. Eight metrics. Measured at day 30, 60, 90.</h2>
            <p className="lede reveal d1">
              Not aspirational — these are the numbers we actively monitor and report on for the first 90 days.
            </p>
          </div>
        </div>

        <div className="bignum reveal d2">
          {[
            { k: 'Institutional UX', v: 'Every buyer journey', sub: 'Procurement, lab, finance — mapped in discovery and built in from day one.' },
            { k: 'Full B2B natively', v: 'PO, VAT, Quotes', sub: 'Company accounts, multi-user roles, approval workflows — all on the platform, not in plugins.' },
            { k: 'Sage integration', v: 'Zero manual entry', sub: 'Bi-directional REST API sync — customers, orders, invoices, payment status.' },
            { k: 'Owned forever', v: 'No licence fees', sub: 'Self-hosted, fully owned. Scales into Phase 2 without a rebuild.' },
          ].map((c, i) => (
            <div className="cell" key={i}>
              <div className="k">{c.k}</div>
              <div className="v">{c.v}</div>
              <div className="sub">{c.sub}</div>
            </div>
          ))}
        </div>

        <div style={{marginTop: 80}} className="reveal">
          <div style={{display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24, gap: 20, flexWrap: 'wrap'}}>
            <h3 style={{fontSize: '1.8rem', letterSpacing: '-0.02em'}}>Measures of success</h3>
            <span className="mono">Tracked monthly · reported to Formedium</span>
          </div>
          <div className="kpi-list">
            {kpis.map((k, i) => (
              <div className="kpi" key={i}>
                <span className="n">{String(i + 1).padStart(2, '0')}</span>
                <span className="k">{k[0]}</span>
                <span className="v">{k[1]}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ CHAPTER: SHOPIFY PROBLEM ============
function ShopifyProblem() {
  const lims = [
    ['No native B2B account structure', 'Every institutional buyer treated as an individual consumer. No company accounts, no role permissions, no approval workflows.'],
    ['No VAT exemption workflow', 'Handling research-institution VAT exemption requires messy workarounds entirely outside Shopify’s architecture.'],
    ['No negotiable quotes', 'Custom formulation enquiries and large-volume orders cannot be handled in the checkout flow. Buyers are pushed to email.'],
    ['Plugin dependency for B2B', 'Gated pricing, quick order, and account portals all require paid apps. They stack, conflict, and break on updates.'],
    ['Shopify Plus to unlock B2B', 'Genuine B2B features require Shopify Plus at £1,800–£2,000+/month — a permanent licence with no exit route.'],
    ['Page Builder fragmentation', 'Baea Page Builder slows the site and makes the codebase harder to maintain. Each Shopify update carries risk.'],
  ];
  return (
    <section id="shopify" className="bg-ink" data-chapter="Holding you back" data-screen-label="03 Why Shopify">
      <div className="container">
        <div className="chapter-head">
          <div className="meta">
            <span className="section-num" style={{color: 'color-mix(in oklab, var(--paper) 55%, transparent)'}}>§ 03 · The case against staying</span>
          </div>
          <div>
            <h2 className="reveal">Shopify was built for retail.<br/><span style={{color: 'var(--accent-soft)', fontStyle: 'italic'}}>Formedium is not retail.</span></h2>
            <p className="lede reveal d1" style={{color: 'color-mix(in oklab, var(--paper) 78%, transparent)'}}>
              The gap between what Shopify offers and what a professional B2B scientific supplier needs is fundamental, not superficial.
            </p>
          </div>
        </div>

        <div className="lims reveal d2">
          {lims.map((l, i) => (
            <div className="lim" key={i}>
              <span className="n">{String(i + 1).padStart(2, '0')}</span>
              <span className="limit">{l[0]}</span>
              <span className="impact">{l[1]}</span>
            </div>
          ))}
        </div>

        <div style={{marginTop: 80}} className="reveal d3">
          <h3 style={{fontSize: '1.6rem', letterSpacing: '-0.01em', color: 'var(--paper)', marginBottom: 12}}>What staying costs you over five years.</h3>
          <p style={{color: 'color-mix(in oklab, var(--paper) 70%, transparent)', maxWidth: '62ch', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: '1.1rem', lineHeight: 1.5}}>
            Shopify Plus at £2,000/month is £24,000 per year — every year — with no exit. Our solution is a one-off investment. You own the platform outright.
          </p>
          <div style={{background: 'var(--paper)', color: 'var(--ink)', padding: 32, marginTop: 32}}>
            {window.CostChart ? <CostChart /> : <div style={{padding: 40, textAlign: 'center', fontFamily: 'monospace'}}>Loading chart...</div>}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ CHAPTER: CHOOSE YOUR PATH ============
function ChoosePath() {
  return (
    <section id="paths" data-chapter="Your two options" data-screen-label="04 Options">
      <div className="container">
        <div className="chapter-head">
          <div className="meta">
            <span className="section-num">§ 04 · Two credible paths</span>
          </div>
          <div>
            <h2 className="reveal">Both options deliver every feature.<br/>The difference is <span style={{fontStyle: 'italic', color: 'var(--accent-2)'}}>how</span> — and what comes next.</h2>
            <p className="lede reveal d1">
              Hover a card to see which path suits you. Both are owned, self-hosted, licence-free, and delivered with the same rigour.
            </p>
          </div>
        </div>

        <div className="reveal d2">
          {window.Comparator ? <Comparator /> : <div style={{padding: 40, textAlign: 'center', fontFamily: 'monospace'}}>Loading comparator...</div>}
        </div>

        <div className="reveal d3" style={{marginTop: 120}}>
          <div style={{display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16, gap: 20, flexWrap: 'wrap'}}>
            <h3 style={{fontSize: '2rem', letterSpacing: '-0.02em'}}>Feature by feature</h3>
            <span className="mono">Tap a row group to expand · 24 features compared</span>
          </div>
          {window.FeatureTable ? <FeatureTable /> : <div style={{padding: 40, textAlign: 'center', fontFamily: 'monospace'}}>Loading feature table...</div>}
        </div>
      </div>
    </section>
  );
}

// ============ CHAPTER: TIMELINE ============
function TimelineChapter() {
  return (
    <section id="timeline" className="bg-paper-2" data-chapter="Delivery timeline" data-screen-label="05 Timeline">
      <div className="container">
        <div className="chapter-head">
          <div className="meta">
            <span className="section-num">§ 05 · Delivery timeline</span>
          </div>
          <div>
            <h2 className="reveal">Live in <span style={{fontStyle: 'italic'}}>seventeen</span> or <span style={{fontStyle: 'italic'}}>twenty</span> weeks.</h2>
            <p className="lede reveal d1">
              Six phases, dedicated team, weekly progress, staging access throughout. Toggle between options to see the shape of each build.
            </p>
          </div>
        </div>

        <div className="reveal d2">
          {window.Timeline ? <Timeline /> : <div style={{padding: 40, textAlign: 'center', fontFamily: 'monospace'}}>Loading timeline...</div>}
        </div>
      </div>
    </section>
  );
}

// ============ CHAPTER: COMMERCIAL ============
function Commercial() {
  return (
    <section id="commercial" data-chapter="Commercial proposal" data-screen-label="06 Commercial">
      <div className="container">
        <div className="chapter-head">
          <div className="meta">
            <span className="section-num">§ 06 · Commercial proposal</span>
          </div>
          <div>
            <h2 className="reveal">Shape the investment to your cash flow.</h2>
            <p className="lede reveal d1">
              Interest-free over 12 months. Use the calculator to model any split — we’re open to alternative arrangements during Discovery.
            </p>
          </div>
        </div>

        <div className="reveal d2">
          {window.PaymentCalc ? <PaymentCalc /> : <div style={{padding: 40, textAlign: 'center', fontFamily: 'monospace'}}>Loading payment calculator...</div>}
        </div>

        <div className="reveal d3" style={{marginTop: 80}}>
          <h3 style={{fontSize: '1.8rem', letterSpacing: '-0.02em', marginBottom: 24}}>Support retainers · post-launch</h3>
          <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2, background: 'color-mix(in oklab, var(--ink) 14%, transparent)', border: '1px solid color-mix(in oklab, var(--ink) 14%, transparent)'}}>
            {[
              { tier: 'Standard', price: '£400/mo', hrs: '5 hrs (rollover)', rate: '£80/hr', resp: '5–8 hour response', ooh: '—' },
              { tier: 'Professional', price: '£700/mo', hrs: '10 hrs (rollover)', rate: '£70/hr', resp: '4 business hour', ooh: 'Out-of-hours emergency' },
              { tier: 'Enterprise', price: '£1,200/mo', hrs: '20 hrs (rollover)', rate: '£60/hr', resp: '2 hour response', ooh: 'Out-of-hours + monthly health check' },
            ].map((t, i) => (
              <div key={i} style={{background: 'var(--paper)', padding: '28px 24px', display: 'flex', flexDirection: 'column', gap: 10}}>
                <div className="mono" style={{color: 'var(--ink-mute)'}}>{t.tier}</div>
                <div style={{fontFamily: 'var(--serif)', fontSize: '2.2rem', letterSpacing: '-0.02em', lineHeight: 1}}>{t.price}</div>
                <div style={{fontSize: '0.85rem', color: 'var(--ink-2)', marginTop: 12, lineHeight: 1.6}}>
                  <div>{t.hrs}</div>
                  <div>{t.resp}</div>
                  <div>{t.rate} (T&M)</div>
                  <div style={{color: 'var(--ink-mute)', fontStyle: 'italic', fontFamily: 'var(--serif)'}}>{t.ooh}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ CHAPTER: PROCESS ============
function Process() {
  const steps = [
    ['Discovery & Architecture', 'Feature sign-off, Sage technical scoping, hosting decisions, design direction, sprint plan. Both teams sign off before a single line of code.'],
    ['Design & Specification', 'UX wireframes, full visual designs, and a specification document covering pages, requirements, data layouts, and test plan. No design surprises at UAT.'],
    ['Development', 'Dedicated implementation team — PM, lead developer, supporting devs, QA specialist. Weekly progress updates. Staging access throughout.'],
    ['Integration & Migration', 'Sage built and tested against your live environment. All product data, customer accounts, and order history migrated. SEO redirects planned.'],
    ['User Acceptance Testing', 'Documented test plan, dedicated UAT period. Formedium tests; RVS QA runs full end-to-end across browsers and devices. Both sign off.'],
    ['Deployment & Go-Live', 'Live deployment; domain cutover under your control. Sage switches to live data. Dedicated RVS engineer available on go-live day.'],
    ['Training', 'Admin training tailored to Formedium workflows — not generic platform training. Product management, B2B admin, quote management, Sage monitoring.'],
    ['Warranty & Support', '30-day full warranty post-launch. Ongoing ticketing, phone, email escalation. Proactive monitoring and patch advisories.'],
  ];
  return (
    <section id="process" className="bg-paper-2" data-chapter="How we deliver" data-screen-label="07 Delivery">
      <div className="container">
        <div className="chapter-head">
          <div className="meta">
            <span className="section-num">§ 07 · How we deliver</span>
          </div>
          <div>
            <h2 className="reveal">A delivery method refined across hundreds of builds since 2016.</h2>
            <p className="lede reveal d1">
              Structured enough to guarantee timelines and budget. Flexible enough to absorb what we learn during the project.
            </p>
          </div>
        </div>

        <div className="steps reveal d2">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="num">Stage {String(i + 1).padStart(2, '0')}</div>
              <h4>{s[0]}</h4>
              <p>{s[1]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ CHAPTER: CASE STUDIES ============
function CaseStudies() {
  const cases = [
    {
      tag: 'Magento migration',
      name: 'Temptation Gifts',
      stack: 'Magento Open Source',
      why: 'The closest parallel to Formedium’s rebuild. Complex migration with multiple system integrations, data integrity requirements, and a long-term agency relationship — five years on, still their technical partner.',
      quote: '“Excellent communication, honest, clear pricing, and a highly professional team.”',
      by: 'Mike Adams · Managing Director',
    },
    {
      tag: 'B2B + B2C duality',
      name: 'Amathus Drinks',
      stack: 'Magento Open Source',
      why: 'Serves both trade and retail customers — the same duality Formedium needs, with institutional pricing alongside standard orders.',
      quote: '“RVS Media is the go-to agency for B2B and B2C ecommerce. After a recent optimisation we had a significant uplift in sales.”',
      by: 'P Moses · Ecommerce Manager',
    },
    {
      tag: 'Headless at scale',
      name: 'Wowcher',
      stack: 'Next.js + Magento + Middleware',
      why: 'Demonstrates complex integrations at scale under tight deadlines — the same discipline required for Formedium’s Sage integration. +15% conversion; −11% basket abandonment.',
      quote: '“Constant communication, valuable long-term solutions, and a high level of attention.”',
      by: 'Ian King · Product Head',
    },
    {
      tag: 'Platform migration',
      name: 'Fushi Wellbeing',
      stack: 'Magento → Shopify (reverse)',
      why: 'Directly relevant to Formedium’s situation — migrating away from a platform holding the business back, with zero tolerance for data loss. This is the migration discipline we bring.',
      quote: '“Full UX/UI redesign, bespoke integration, and SEO continuity — delivered without data loss.”',
      by: 'Project note · RVS Media',
    },
  ];
  return (
    <section id="cases" data-chapter="Case studies" data-screen-label="08 Case studies">
      <div className="container">
        <div className="chapter-head">
          <div className="meta">
            <span className="section-num">§ 08 · Selected work</span>
          </div>
          <div>
            <h2 className="reveal">Formedium would be in excellent company.</h2>
            <p className="lede reveal d1">
              Four case studies, each chosen for its direct parallel to what we are proposing — migration, B2B complexity, integration at scale, data integrity.
            </p>
          </div>
        </div>

        <div className="cases reveal d2">
          {cases.map((c, i) => (
            <div className="case" key={i}>
              <span className="tag">{c.tag}</span>
              <h4>{c.name}</h4>
              <div className="mono" style={{color: 'var(--ink-mute)'}}>{c.stack}</div>
              <p className="why">{c.why}</p>
              <div className="quote">{c.quote}<div className="attribution">{c.by}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ CHAPTER: PHASE 2 ============
function PhaseTwo() {
  const ai = [
    ['AI Media Selector', '“I’m culturing Aspergillus for fermentation — what do you recommend?” Instant, accurate product suggestion mapped to Formedium’s catalogue.'],
    ['Formulation Quote Assistant', 'Guided AI enquiry for bespoke media. Reduces email back-and-forth; accelerates quote turnaround significantly.'],
    ['Smart Reorder Prompts', 'Analyses historical order patterns and proactively suggests reorders at the right time — reducing lab stockouts.'],
    ['Natural Language Search', 'Search by organism, application, or experiment type — not just product name or CAS number.'],
  ];
  return (
    <section id="phase2" className="bg-ink" data-chapter="Phase 2 roadmap" data-screen-label="09 Phase 2">
      <div className="container">
        <div className="chapter-head">
          <div className="meta">
            <span className="section-num" style={{color: 'color-mix(in oklab, var(--paper) 55%, transparent)'}}>§ 09 · Phase 2 — Velocity AI</span>
          </div>
          <div>
            <h2 className="reveal">Where this platform <span style={{fontStyle: 'italic', color: 'var(--accent-soft)'}}>becomes</span> the product.</h2>
            <p className="lede reveal d1" style={{color: 'color-mix(in oklab, var(--paper) 78%, transparent)'}}>
              Phase 2 features are delivered by Velocity AI — RVS Media’s dedicated AI division. Scoped and priced separately following Phase 1 go-live.
            </p>
          </div>
        </div>

        <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 2, background: 'color-mix(in oklab, var(--paper) 20%, transparent)'}} className="reveal d2">
          {ai.map((a, i) => (
            <div key={i} style={{background: 'var(--ink)', padding: '32px 28px', display: 'flex', flexDirection: 'column', gap: 14, minHeight: 200}}>
              <span className="mono" style={{color: 'var(--accent-soft)'}}>Feature {String(i + 1).padStart(2, '0')}</span>
              <h4 style={{fontFamily: 'var(--serif)', fontSize: '1.5rem', color: 'var(--paper)', letterSpacing: '-0.02em'}}>{a[0]}</h4>
              <p style={{color: 'color-mix(in oklab, var(--paper) 75%, transparent)', fontSize: '0.95rem', lineHeight: 1.5, fontFamily: 'var(--serif)', fontStyle: 'italic'}}>{a[1]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ CLOSING CTA ============
function ClosingCTA() {
  return (
    <section className="cta-section" id="next" data-chapter="Next steps" data-screen-label="10 Next steps">
      <div className="container">
        <span className="eyebrow reveal">Next step · whichever path you choose</span>
        <h2 className="reveal d1">A free two-hour Discovery Session.</h2>
        <p className="tagline reveal d2">
          Technical architecture finalised, Sage scope confirmed, design direction aligned, a detailed project plan produced — before a contract is signed.
        </p>
        <div className="cta-actions reveal d3">
          <a className="btn accent" href="#book">Book free Discovery <span className="arrow">→</span></a>
          <a className="btn ghost" href="mailto:rajeev@rvsmedia.co.uk?subject=Formedium%20Proposal%20—%20Option%20A%20(Magento)">Accept Option A · Magento</a>
          <a className="btn ghost" href="mailto:rajeev@rvsmedia.co.uk?subject=Formedium%20Proposal%20—%20Option%20B%20(Next.js)">Accept Option B · Next.js</a>
        </div>
        <div className="cta-sig">
          <span>Rajeev Nar · Director · RVS Media</span>
          <span>rvsmedia.co.uk</span>
          <span>April 2026</span>
        </div>
      </div>
    </section>
  );
}

window.Background = Background;
window.Objectives = Objectives;
window.ShopifyProblem = ShopifyProblem;
window.ChoosePath = ChoosePath;
window.TimelineChapter = TimelineChapter;
window.Commercial = Commercial;
window.Process = Process;
window.CaseStudies = CaseStudies;
window.PhaseTwo = PhaseTwo;
window.ClosingCTA = ClosingCTA;