// Demandscape website — Platform (how the digital twin is built)
function PIcon({ name, size = 22 }) {
  return <i data-lucide={name} style={{ width: size, height: size }}></i>;
}

// Placeholder for imagery / data-viz to be supplied later
function Placeholder({ label, minHeight = 240, tone = 'light' }) {
  const dark = tone === 'dark';
  return (
    <div style={{
      minHeight,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '.9rem',
      padding: '2rem', textAlign: 'center',
      border: dark ? '1px dashed rgba(255,255,255,.35)' : '1px dashed var(--ds-blue)',
      background: dark ? 'rgba(255,255,255,.04)' : 'var(--ds-grey-100)'
    }}>
      <i data-lucide="image" style={{ width: 30, height: 30, color: dark ? 'rgba(255,255,255,.7)' : 'var(--ds-blue)' }}></i>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.08em', textTransform: 'uppercase', color: dark ? 'rgba(255,255,255,.7)' : 'var(--ds-blue)' }}>
        <span className="br">[</span> {label} <span className="br">]</span>
      </span>
    </div>);

}

// ── How Demandscape works — 4-stage pipeline schematic ───────────────
function PipelineSchematic() {
  React.useEffect(() => {if (window.lucide) window.lucide.createIcons();});

  const chipStyle = {
    fontFamily: 'var(--font-mono)', fontSize: 12.5, letterSpacing: '.02em',
    color: 'var(--ds-navy)', background: 'var(--ds-grey-50)',
    border: '1px solid var(--ds-grey-200)', padding: '.5rem .8rem', whiteSpace: 'nowrap'
  };
  const stageLabel = (tone) => ({
    fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '.14em', textTransform: 'uppercase',
    color: tone === 'dark' ? 'rgba(255,255,255,.65)' : 'var(--ds-grey-500)'
  });
  const iconBox = (tone) => ({
    width: 48, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center',
    background: tone === 'dark' ? 'rgba(255,255,255,.10)' : 'var(--ds-blue-soft)'
  });
  const cardTitle = (tone) => ({
    fontFamily: 'var(--font-display)', fontSize: 'clamp(1.4rem,1.7vw,1.7rem)', lineHeight: 1.1,
    letterSpacing: '-0.01em', margin: 0, color: tone === 'dark' ? '#fff' : 'var(--ds-navy)'
  });
  const cardBody = (tone) => ({
    fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.55, margin: 0,
    color: tone === 'dark' ? 'rgba(255,255,255,.82)' : 'var(--ds-navy)'
  });

  function Card({ tone = 'light', stage, icon, title, children, footer }) {
    const dark = tone === 'dark';
    return (
      <div style={{ position: 'relative', flex: '1 1 0', minWidth: 0, display: 'flex', flexDirection: 'column' }}>
        {!dark && <div style={{ height: 5, background: 'var(--ds-blue)' }}></div>}
        <div style={{
          flex: 1, display: 'flex', flexDirection: 'column', gap: '1.25rem',
          padding: '1.75rem 1.6rem 2rem',
          background: dark ? 'var(--ds-navy)' : 'var(--ds-white)',
          border: dark ? '1px solid var(--ds-navy)' : '1px solid var(--ds-grey-200)',
          borderTop: dark ? '1px solid var(--ds-navy)' : 'none',
          boxShadow: dark ? '0 12px 32px rgba(0,31,115,.22)' : '0 1px 2px rgba(0,31,115,.06)'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '.9rem' }}>
            <div style={iconBox(tone)}>
              <i data-lucide={icon} style={{ width: 22, height: 22, color: dark ? '#fff' : 'var(--ds-blue)' }}></i>
            </div>
            <span style={stageLabel(tone)}>{stage}</span>
          </div>
          <h3 style={cardTitle(tone)}>{title}</h3>
          <div style={cardBody(tone)}>{children}</div>
          {footer}
        </div>
      </div>);

  }

  function Arrow() {
    return (
      <div style={{ flex: '0 0 auto', display: 'flex', alignItems: 'center', alignSelf: 'center', paddingInline: '.35rem' }}>
        <i data-lucide="arrow-right" style={{ width: 26, height: 26, color: 'var(--ds-blue)' }}></i>
      </div>);

  }

  return (
    <div>
      <div style={{ marginBottom: '2.5rem' }}>
        <span className="eyebrow"><span className="br">[</span> How Demandscape works <span className="br">]</span></span>
        <h2 className="mt-5" style={{ fontSize: 'var(--fs-h1)', lineHeight: 1.05, maxWidth: '16ch', color: 'var(--ds-navy)' }}>
          Creating a digital twin of a customer base
        </h2>
      </div>

      <div className="pipeline-row" style={{ display: 'flex', alignItems: 'stretch', gap: '.25rem' }}>
        <Card stage="Stage 01" icon="database" title="Raw data"
        footer={
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '.6rem', marginTop: 'auto' }}>
              <span style={chipStyle}>800k customers</span>
              <span style={chipStyle}>12k products</span>
              <span style={chipStyle}>25M baskets per yr</span>
            </div>
        }>
          Loyalty-card basket data containing the choices customers make repeatedly over time, against a cost.
        </Card>

        <Arrow />

        <Card stage="Stage 02" icon="cpu" title="Training"
        footer={
        <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
              <span style={{ ...chipStyle, alignSelf: 'flex-start', background: 'var(--ds-navy)', borderColor: 'var(--ds-navy)', color: '#fff' }}>1.5M weights</span>
              <p style={{ ...cardBody('light'), fontSize: 14.5, color: 'var(--ds-grey-500)' }}>
                Developed from original research at the University of Oxford.
              </p>
            </div>
        }>
          We train a <strong style={{ color: 'var(--ds-blue)' }}>constrained deep learning model</strong> which combines a deep-learning with an economic model of customer choice.
        </Card>

        <Arrow />

        <Card stage="Stage 03" icon="users" title="Digital twin">
          The model learns the <strong style={{ color: 'var(--ds-blue)' }}>purchase drivers</strong> behind every
          choice — a living twin of your customer base, not a record of the past.
        </Card>

        <Arrow />

        <Card tone="dark" stage="Stage 04" icon="trending-up" title="Scenario predictions"
        footer={
        <p style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(1.25rem,1.6vw,1.55rem)', lineHeight: 1.15, color: '#fff', margin: 0, marginTop: 'auto' }}>
              “What will customers do if…?”
            </p>
        }>
          Simulate any scenario, including ones that have never happened before, to predict customer demand for every product and every customer type.
        </Card>
      </div>
    </div>);

}

// ── Section visuals: bracket-framed Lucide diagrams ──────────────────
const visFrameBare = { width: '100%', aspectRatio: '1 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center' };

function ArchetypesDiagram() {
  const cols = ['var(--ds-blue)', 'var(--ds-purple)', 'var(--ds-amber)', 'var(--ds-green)', 'var(--ds-red)', 'var(--ds-blue-700)'];
  return (
    <div style={visFrameBare}>
      <div style={{ display: 'flex', alignItems: 'stretch', gap: 20 }}>
        <div style={{ width: 30, border: '9px solid var(--ds-blue)', borderRight: 'none' }}></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '30px 34px', padding: '26px 6px', alignItems: 'center' }}>
          {cols.map((c, i) =>
          <div key={i} style={{ display: 'flex', justifyContent: 'center' }}>
              <i data-lucide="user-round" style={{ width: 50, height: 50, color: c, display: 'block' }}></i>
            </div>)}
        </div>
        <div style={{ width: 30, border: '9px solid var(--ds-blue)', borderLeft: 'none' }}></div>
      </div>
    </div>);
}

function WelfareDiagram() {
  const base = [1, 1, 1, 0];
  return (
    <div style={visFrameBare}>
      <div style={{ display: 'flex', alignItems: 'stretch', justifyContent: 'center', gap: 14 }}>
        <div style={{ display: 'flex', alignItems: 'stretch', gap: 20 }}>
          <div style={{ width: 30, border: '9px solid #fff', borderRight: 'none' }}></div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '28px 30px', padding: '26px 6px', alignItems: 'center' }}>
            {base.map((c, i) =>
            <div key={i} style={{ display: 'flex', justifyContent: 'center' }}>
                {c ?
              <i data-lucide="user-round" style={{ width: 50, height: 50, color: '#fff', display: 'block' }}></i> :
              <i data-lucide="user-round" stroke-dasharray="3 3" style={{ width: 50, height: 50, color: 'rgba(255,255,255,0.30)', display: 'block' }}></i>}
              </div>)}
          </div>
          <div style={{ width: 30, border: '9px solid #fff', borderLeft: 'none' }}></div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <i data-lucide="move-right" style={{ width: 34, height: 34, color: 'var(--ds-amber)', display: 'block' }}></i>
          <i data-lucide="user-round" style={{ width: 50, height: 50, color: 'var(--ds-amber)', display: 'block' }}></i>
        </div>
      </div>
    </div>);
}

function PurposeDiagram() {
  const goods = [['milk', 'var(--ds-blue)'], ['egg', 'var(--ds-amber)'], ['croissant', 'var(--ds-purple)'], ['apple', 'var(--ds-green)'], ['carrot', 'var(--ds-red)']];
  return (
    <div style={visFrameBare}>
      <div style={{ display: 'flex', alignItems: 'stretch', gap: 14 }}>
        <div style={{ width: 30, border: '9px solid var(--ds-blue)', borderRight: 'none', borderBottomWidth: 11 }}></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '22px 24px', padding: '24px 4px' }}>
          {goods.map(([n, c], i) =>
          <div key={i} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              <i data-lucide={n} style={{ width: 46, height: 46, color: c, display: 'block' }}></i>
            </div>)}
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative' }}>
            <div style={{ width: 54, height: 54, border: '2px dashed var(--ds-grey-400)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <i data-lucide="plus" style={{ width: 26, height: 26, color: 'var(--ds-green)', display: 'block' }}></i>
            </div>
          </div>
        </div>
        <div style={{ width: 30, border: '9px solid var(--ds-blue)', borderLeft: 'none', borderBottomWidth: 11 }}></div>
      </div>
    </div>);
}

function PlatformPage({ onNav }) {
  const { Button, Card, Badge, BracketFrame, Stat } = window.DemandscapeDesignSystem_0e6a32;
  React.useEffect(() => {if (window.lucide) window.lucide.createIcons();});

  return (
    <main>
      {/* ── HERO ─────────────────────────────────── */}
      <section className="container" style={{ paddingBlock: 'clamp(3rem,7vw,5rem)', textAlign: 'center' }}>
        <Badge variant="soft" bracket>Platform</Badge>
        <h1 style={{ fontSize: 'var(--fs-display-lg)', letterSpacing: '-0.03em', marginTop: 18, color: 'var(--ds-navy)', maxWidth: '20ch', marginInline: 'auto' }}>
          How Demandscape builds a digital twin of your customer base
        </h1>
      </section>

      {/* ── PIPELINE ─────────────────────────────── */}
      <section className="container section" style={{ paddingTop: 0 }}>
        <PipelineSchematic />
      </section>

      {/* ── PURCHASE DRIVERS ─────────────────────── */}
      <section className="band--navy">
        <div className="container section">
          <div className="split" style={{ alignItems: 'center', gap: '3.5rem' }}>
            <div>
              <span className="eyebrow"><span className="br">[</span> Purchase drivers <span className="br">]</span></span>
              <h2 className="mt-5" style={{ fontSize: 'var(--fs-h1)', maxWidth: '22ch' }}>
                What drives your customers, discovered from data, not assumed from theory
              </h2>
              <div className="prose mt-6">
                <p>We provide Demandscape with <em>no product characteristics and no customer attributes</em>.
                   The model infers what matters entirely from the decisions customers made and their
                   context.</p>
                <p>The result is a set of purchase drivers that are used to motivate the digital twin.</p>
              </div>
            </div>
            <img src="assets/drivers-blue.png" alt="Purchase drivers visual"
            style={{ display: 'block', width: '100%', aspectRatio: '1 / 1', objectFit: 'cover' }} />
          </div>
        </div>
      </section>

      {/* ── CUSTOMER ARCHETYPES ──────────────────── */}
      <section className="container section">
        <div className="split" style={{ alignItems: 'center', gap: '3.5rem' }}>
          <div>
            <span className="eyebrow"><span className="br">[</span> Customer archetypes <span className="br">]</span></span>
            <h2 className="mt-5" style={{ fontSize: 'var(--fs-h1)', maxWidth: '20ch' }}>
              The pure expressions of how different shoppers decide
            </h2>
            <div className="prose mt-6">
              <p>We can map the <strong>purchase drivers</strong> to identify a set of customer archetypes which represent the range of behaviours within the customer base.
              </p>
              <p>These archetypes exist as real customers, although most real shoppers are a weighted blend of multiple archetypes.
              </p>
              <p>A synthetic panel of these archetypes reproduces the behaviour of the full customer base.
              </p>
              <p>Archetypes can be mapped directly onto any existing segmentation framework so that
                 insights are readily interpretable and actionable.</p>
            </div>
          </div>
          <ArchetypesDiagram />
        </div>
      </section>

      {/* ── CUSTOMER WELFARE ─────────────────────── */}
      <section className="band--blue">
        <div className="container section">
          <div className="split" style={{ alignItems: 'center', gap: '3.5rem' }}>
            <div>
              <span className="eyebrow"><span className="br">[</span> Customer utility <span className="br">]</span></span>
              <h2 className="mt-5" style={{ fontSize: 'var(--fs-h1)', maxWidth: '20ch' }}>
                An early signal of which customers are at risk, before churn shows in your data
              </h2>
              <div className="prose mt-6">
                <p>As a natural output of the digital twin, we can calculate <em>utility</em> for different
                   customer types. It is a measure of how well your current range, pricing and format
                   choices are meeting underlying needs.</p>
                <p>For example, a set of price increases or changes in range, might trigger a decline in utility for certain groups, even as spending remains the same. This is a warning signal of customer attrition.

                </p>
                <p>The model can be used to evaluate interventions to maintain customer utility and reduce chances of attrition.
                </p>
              </div>
            </div>
            <WelfareDiagram />
          </div>
        </div>
      </section>

      {/* ── CUSTOMER PURPOSE ─────────────────────── */}
      <section className="container section">
        <div className="split" style={{ alignItems: 'center', gap: '3.5rem' }}>
          <div>
            <span className="eyebrow"><span className="br">[</span> Customer purpose <span className="br">]</span></span>
            <h2 className="mt-5" style={{ fontSize: 'var(--fs-h1)', maxWidth: '18ch' }}>
              Finding ways to increase share of wallet
            </h2>
            <div className="prose mt-6">
              <p>The customers within the digital twin are driven by distinct shopping <strong>purposes</strong> which
                 reflect the reality that they split their spend across multiple stores.</p>
              <p>Within the model we can identify how different customer's purposes can be extended to
                 increase their spend within the store.</p>
            </div>
          </div>
          <PurposeDiagram />
        </div>
      </section>

      {/* ── TECHNICAL FOUNDATIONS ────────────────── */}
      <section className="band--navy">
        <div className="container section">
          <div className="sec-head">
            <span className="eyebrow"><span className="br">[</span> Technical foundations <span className="br">]</span></span>
            <h2 style={{ marginTop: 14, fontSize: 'var(--fs-h1)' }}>Built on leading AI research</h2>
          </div>
          <div className="split mt-6" style={{ alignItems: 'center', gap: '3.5rem' }}>
            <div className="prose">
              <p>Demandscape was developed from original research at the University of Oxford, combining an
                 economic model of consumer choice with a deep learning architecture. The result is a
                 constrained deep learning model (CDLM) which can capture the complexity of grocery
                 purchase behaviour across a full retailer range; structured to respect the economic
                 principles that govern customer decision making.</p>
              <p>Demandscape is built on JAX and runs on NVIDIA GPU infrastructure. Training data for our
                 most recent deployment covers approximately 350 million data points: one year of
                 transaction history across 800,000 customers, 12,000 products, and 20 million weekly
                 shops.</p>
              <p>And the model is designed to scale to significantly larger data sets.</p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
              <div style={{ background: '#fff', border: '2px solid var(--ds-navy)', padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 120 }}>
                <img src="assets/jax-logo.png" alt="JAX" style={{ display: 'block', width: '100%', maxWidth: 170, height: 'auto' }} />
              </div>
              <div style={{ background: '#fff', border: '2px solid var(--ds-navy)', padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 120 }}>
                <img src="assets/nvidia-logo.png" alt="NVIDIA" style={{ display: 'block', width: '100%', maxWidth: 140, height: 'auto' }} />
              </div>
            </div>
          </div>
          <div style={{ marginTop: '2.5rem', display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
            <Button variant="white" size="lg" onClick={() => onNav('demo')}>Request a demo →</Button>
            <Button variant="secondary" size="lg" onClick={() => onNav('about')} style={{ color: '#fff', borderColor: 'rgba(255,255,255,.4)' }}>About Rosroe</Button>
          </div>
        </div>
      </section>
    </main>);

}
window.PlatformPage = PlatformPage;