// Demandscape website — Home
function HIcon({ name, size = 22 }) {
  return <i data-lucide={name} style={{ width: size, height: size }}></i>;
}

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

  return (
    <main>
      {/* ── HERO ─────────────────────────────────── */}
      <section className="hero container">
        <div className="hero__bracketwrap">
          <BracketFrame stroke={11} arm={42} padding="2.2rem clamp(1.5rem, 5vw, 4rem)">
            <h1>Demand prediction</h1>
          </BracketFrame>
        </div>
        <div className="hero__lead">
          <p>Demandscape is a <strong>digital twin</strong> of a grocery retail customer base that predicts demand in a wide
             range of scenarios. It is driven by a proprietary deep learning model, trained on
             large-scale basket data to learn what drives customer behaviour.</p>
        </div>
        <div className="hero__ctas">
          <Button variant="primary" size="lg" onClick={() => onNav('demo')}>Request a demo →</Button>
        </div>
        <p className="hero__prov">
          <b>Demandscape</b> is a Rosroe technology, developed from original research at the
          University of Oxford. Deployed with a leading European grocery retailer.
        </p>
      </section>

      {/* ── THE PROBLEM ──────────────────────────── */}
      <section className="band--navy">
        <div className="container section">
          <div className="split split--copyfirst" style={{ alignItems: 'stretch' }}>
            <div>
              <span className="eyebrow"><span className="br">[</span> <span className="n">01</span> The problem <span className="br">]</span></span>
              <h2 style={{ fontSize: 'var(--fs-h1)', marginTop: 16, maxWidth: '16ch' }}>
                A changing and uncertain world
              </h2>
              <div className="prose mt-6" style={{ maxWidth: '52ch' }}>
                <p>Current decision making is based on a combination of traditional analytics and human
                   intuition. These apply historical patterns to future events, effectively optimising
                   for last year.</p>
                <p>The decisions that matter most step outside those patterns.</p>
              </div>
            </div>
            <div className="plist">
              {[
              ['refresh-cw', 'Changing customer tastes and needs'],
              ['wallet', 'Cost of living pressures'],
              ['truck', 'Supply chain shocks'],
              ['target', 'Shifting competitive conditions']].
              map(([icon, t]) =>
              <div className="item" key={t}>
                  <span className="ico"><HIcon name={icon} size={26} /></span>
                  <span className="t">{t}</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ── WHAT WE OFFER ────────────────────────── */}
      <section className="container section">
        <div className="split" style={{ alignItems: 'center' }}>
          <div>
            <span className="eyebrow"><span className="br">[</span> <span className="n">02</span> What we offer <span className="br">]</span></span>
            <h2 className="mt-5" style={{ fontSize: 'var(--fs-h1)', letterSpacing: '-0.02em', maxWidth: '20ch' }}>
              A digital twin that lets you anticipate both risks and opportunities
            </h2>
            <div className="prose mt-6">
              <p>Demandscape predicts demand by simulating how your shoppers make purchasing decisions.</p>
              <p>It lets you identify future risks and opportunities and evaluate strategies to address
                 them before they happen.</p>
              <p>Demandscape predicts demand across every product and every customer type across any
                 scenario from a price or range change to a new product launch or a widespread decrease
                 in household budgets.</p>
            </div>
          </div>
          <div className="img-ph" style={{ border: 'none', padding: 0, background: 'transparent' }}>
            <img src="assets/point-cloud-grey.png" alt="Point cloud visualisation of the customer base"
            style={{ display: 'block', width: '100%', aspectRatio: '4 / 3', objectFit: 'cover' }} />
          </div>
        </div>
      </section>

      {/* ── USE CASE SIGNPOSTS ───────────────────── */}
      <section className="band--blue">
        <div className="container section">
          <div className="sec-head" style={{ maxWidth: 'none' }}>
            <span className="eyebrow"><span className="br">[</span> <span className="n">03</span> Use cases <span className="br">]</span></span>
            <h2 style={{ marginTop: 14, fontSize: 'var(--fs-h1)' }}>What will customers do if<span className="ell">…?</span></h2>
            <p className="standfirst" style={{ maxWidth: 'none' }}>The answer to this question is the key to building strategies that anticipate change rather than react to it.</p>
          </div>
          <div className="uc-grid mt-7">
            {[
            ['lightbulb', 'New product innovation', 'Forecast the impact of a new product, including who will buy it and what they will stop buying instead.'],
            ['tag', 'Ranging and price pack architecture - PPA', 'Predict the demand impact of any price, range or format change across every SKU by each customer type.'],
            ['trending-down', 'Cost of living crisis', 'Understand how pressure on household budgets will affect different customers, and evaluate programmes to address their changing behaviour and minimise attrition.'],
            ['route', 'Supply chain disruption', 'Anticipate how customers will respond to a lack of products in a category and know where the demand will migrate to.']].
            map(([icon, title, body]) =>
            <div className="uc-card" key={title}>
                <span className="uc-card__icon"><HIcon name={icon} size={30} /></span>
                <div className="uc-eye"><span className="br">[</span> {title} <span className="br">]</span></div>
                <div className="q">{body}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── WHY WE'RE DIFFERENT ──────────────────── */}
      <section className="container section">
        <div className="sec-head">
          <span className="eyebrow"><span className="br">[</span> <span className="n">04</span> Why we're different <span className="br">]</span></span>
          <h2 style={{ marginTop: 14, fontSize: 'var(--fs-h1)' }}>Most analytics tools identify purchasing patterns. Ours learns what drives them.</h2>
        </div>
        <div className="prose prose--2col mt-6">
          <p>Consider the difference between autocomplete and a Large Language Model. Autocomplete works
             well for phrases it has seen before, but fails when the input is new. An LLM learns the
             underlying structure of language, so it can respond plausibly to any prompt.</p>
          <p>Demandscape is trained on the same deep learning technology behind LLMs. It analyses millions of individual purchase decisions to identify the underlying structure of demand. By learning the drivers of purchase rather than simply the patterns it can predict scenarios outside your historical data set.


          </p>
        </div>
        <div className="diffs mt-7">
          {[
          ['01', 'Systematic and granular', 'It is a systematic model of your customer base. All categories. All SKUs. All customer types. It shows the full picture, at the level decisions are actually made.'],
          ['02', 'Adaptive', 'The model learns and applies what drives different customers to make purchase decisions. So it generates meaningful predictions for scenarios that have not been seen before.'],
          ['03', 'Comprehensive', 'The model can explore through multiple scenarios to map possible futures and evaluate a wide range of alternative strategies.']].
          map(([n, h, p]) =>
          <div className="col" key={n}>
              <div className="n">[ {n} ]</div>
              <h3>{h}</h3>
              <p>{p}</p>
            </div>
          )}
        </div>
      </section>

      {/* ── PROOF STRIP ──────────────────────────── */}
      <section className="container section" style={{ paddingTop: 0 }}>
        <div className="sec-head">
          <span className="eyebrow"><span className="br">[</span> <span className="n">05</span> Validation <span className="br">]</span></span>
          <h2 style={{ marginTop: 14, fontSize: 'var(--fs-h2)' }}>Predictive accuracy</h2>
        </div>
        <div className="proof mt-6">
          <div className="cell">
            <div className="v">±2<span className="ac">%</span></div>
            <div className="s">Price changes</div>
          </div>
          <div className="cell">
            <div className="v">±12<span className="ac">%</span></div>
            <div className="s">Format changes</div>
          </div>
          <div className="cell">
            <div className="v">±20<span className="ac">%</span></div>
            <div className="s">New products</div>
          </div>
        </div>
      </section>

      {/* ── CLOSING CTA ──────────────────────────── */}
      <section className="band--blue">
        <div className="container section" style={{ textAlign: 'center', paddingBlock: 'clamp(3rem,6vw,5rem)' }}>
          <h2 style={{ fontSize: 'var(--fs-display-md)' }}>See Demandscape in action</h2>
          <p className="standfirst" style={{ margin: '0.85rem auto 0', maxWidth: '52ch' }}>
            We'll show you how it works and explain how we could build a digital twin of your customer
            base.
          </p>
          <div style={{ marginTop: '2rem' }}>
            <Button variant="white" size="lg" onClick={() => onNav('demo')}>Request a demo →</Button>
          </div>
        </div>
      </section>
    </main>);

}
window.HomePage = HomePage;