// Overview.jsx · landing page tab.
// Hero (with mini chart), Slots banner, In-report preview (KPIs), Why Fractions,
// What schools receive, How it works, closing quote / CTA.

const ICONS = {
  check: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>,
  device: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>,
  clock: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>,
  free:  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>,
  arrow: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
  dot: <svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3" fill="currentColor"/></svg>,
};

// Three pitch angles. Reframed for premium / global context. No em dashes.
const PITCH_ANGLES = {
  stem: {
    headline: <>Build the STEM pipeline.<br/><span style={{ color: 'var(--insight-violet, #7C3AED)' }}>Starting in Grade 7.</span></>,
    lead: 'Around the world, the schools shaping the next generation of scientists, engineers and doctors are paying close attention to one transition: fractions. Project Baseline is a premium, free diagnostic for leading South African primary schools that want a precise view of where every Grade 6 or 7 learner sits on the progression.',
  },
  bridge: {
    headline: <>Fractions is the bridge<br/>to <span style={{ color: 'var(--insight-violet, #7C3AED)' }}>high school maths.</span></>,
    lead: 'Decades of research point to one transition that decides high school maths success. Project Baseline gives your school a clear, learner-by-learner view of the fractions progression, so your maths team has the precision it needs heading into Grade 8. Free of charge.',
  },
  invisible: {
    headline: <>Every learner.<br/>Every concept. <span style={{ color: 'var(--insight-violet, #7C3AED)' }}>Precisely placed.</span></>,
    lead: 'A premium fractions diagnostic for top primary schools that want an evidence-based view of Grade 6 and 7 learner readiness. Concept by concept, learner by learner. Delivered to your maths team within one week.',
  },
};

function HeroMiniChart() {
  const rows = [
    { label: 'Comparing fractions',       segs: [10, 22, 38, 30] },
    { label: 'Equivalence (proper)',      segs: [18, 27, 33, 22] },
    { label: 'Adding fractions',          segs: [28, 31, 28, 13] },
    { label: 'Fraction \u2194 decimal',   segs: [34, 30, 24, 12] },
    { label: 'Using percentages',         segs: [44, 28, 19,  9] },
  ];
  return (
    <div className="pb-hero-viz">
      <div className="pb-hero-viz-head">
        <div>
          <p className="pb-hero-viz-title">Class diagnostic · Grade 7A</p>
          <p className="pb-hero-viz-sub">Concept-level mastery, 28 learners assessed</p>
        </div>
        <span className="pb-hero-viz-badge">
          {ICONS.dot}
          Sample
        </span>
      </div>
      <div>
        {rows.map((r, i) => (
          <div className="pb-bar-row" key={i}>
            <span className="pb-bar-label">{r.label}</span>
            <span className="pb-bar-track">
              {r.segs.map((v, j) => (
                <span key={j} className={`pb-bar-seg ${['below','low','near','at'][j]}`} style={{ width: `${v}%` }}/>
              ))}
            </span>
          </div>
        ))}
      </div>
      <div className="pb-bar-legend">
        <span className="pb-bar-legend-item"><span className="pb-bar-legend-swatch" style={{ background: 'var(--band-below)' }}></span>Building (below Gr 3)</span>
        <span className="pb-bar-legend-item"><span className="pb-bar-legend-swatch" style={{ background: 'var(--band-low)' }}></span>Developing (Gr 3 to 5)</span>
        <span className="pb-bar-legend-item"><span className="pb-bar-legend-swatch" style={{ background: 'var(--band-near)' }}></span>Securing (Gr 6 to 7)</span>
        <span className="pb-bar-legend-item"><span className="pb-bar-legend-swatch" style={{ background: 'var(--band-at)' }}></span>Ready for Gr 8</span>
      </div>
    </div>
  );
}

function SlotsBanner({ onBook }) {
  return (
    <div className="pb-slots-banner">
      <span className="pb-slots-pulse"></span>
      <span className="pb-slots-text">
        <strong>Phase 1 is limited to 25 schools nationally.</strong>
        <span> 12 of 25 slots booked. Reserve your school's Term 2 / 3 date before slots close.</span>
      </span>
      <button className="pb-btn pb-btn-primary pb-btn-sm" onClick={onBook}>Reserve a slot</button>
    </div>
  );
}

function Hero({ pitch, onBook }) {
  const p = PITCH_ANGLES[pitch] || PITCH_ANGLES.stem;
  return (
    <section className="pb-hero">
      <div className="pb-container pb-hero-inner">
        <div className="pb-hero-copy">
          <div className="pb-hero-badge">
            <ProjectBaselineMark size={32}/>
            <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1, gap: 2 }}>
              <span style={{ fontWeight: 700, fontSize: 14, letterSpacing: '-0.01em', color: 'var(--graphite-950, #1c1b2f)' }}>Project Baseline</span>
              <span style={{ fontSize: 10.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-tertiary, #475467)', fontWeight: 500 }}>a numerate diagnostic · 2026</span>
            </span>
          </div>
          <h1 className="pb-display-xl">{p.headline}</h1>
          <p className="pb-lead">{p.lead}</p>
          <div className="pb-hero-cta">
            <button className="pb-btn pb-btn-primary pb-btn-lg" onClick={onBook}>
              Reserve your school's slot {ICONS.arrow}
            </button>
            <a className="pb-btn pb-btn-secondary pb-btn-lg" href="#why-fractions">Why fractions</a>
          </div>
          <div className="pb-hero-meta">
            <span className="pb-hero-meta-item">{ICONS.free} Free of charge</span>
            <span className="pb-hero-meta-item">{ICONS.clock} One hour of class time</span>
            <span className="pb-hero-meta-item">{ICONS.device} Your devices · your data</span>
          </div>
        </div>
        <HeroMiniChart/>
      </div>
    </section>
  );
}

// ============================================================================
// In-Report Preview · the 4 KPI cards from the report, on the Overview page
// ============================================================================
function InReportPreview({ onSeeReport }) {
  return (
    <section className="pb-section pb-section-beige-soft">
      <div className="pb-container">
        <div className="pb-section-head" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, alignItems: 'end', maxWidth: 'none', marginBottom: 32 }}>
          <div>
            <span className="pb-eyebrow">A look inside the report</span>
            <h2 className="pb-display-lg" style={{ marginTop: 14 }}>The headline numbers your maths team will see, one week after the assessment.</h2>
          </div>
          <div>
            <p className="pb-body" style={{ marginBottom: 16 }}>
              Every report opens with a one-screen view of your class. Below is what an example Grade 7A class looks like. Full reports include concept-by-concept breakdowns, individual learner profiles, and specific next steps for your team.
            </p>
            <button className="pb-btn pb-btn-secondary" onClick={onSeeReport}>See the full sample report {ICONS.arrow}</button>
          </div>
        </div>

        <div className="pb-kpi-preview">
          <div className="pb-kpi accent-violet">
            <span className="pb-kpi-label">Class fractions readiness</span>
            <span className="pb-kpi-value">47<span className="unit">%</span></span>
            <span className="pb-kpi-trend">at or near Grade 7 mastery</span>
          </div>
          <div className="pb-kpi accent-amber">
            <span className="pb-kpi-label">Learners to support closely</span>
            <span className="pb-kpi-value">8<span className="unit"> / 28</span></span>
            <span className="pb-kpi-trend">would benefit from focused work before Gr 8</span>
          </div>
          <div className="pb-kpi accent-green">
            <span className="pb-kpi-label">Strength to build from</span>
            <span className="pb-kpi-value" style={{ fontSize: 22, lineHeight: 1.2 }}>Adding decimals</span>
            <span className="pb-kpi-trend">72% of class at grade level</span>
          </div>
          <div className="pb-kpi accent-violet-soft">
            <span className="pb-kpi-label">Concept to focus on</span>
            <span className="pb-kpi-value" style={{ fontSize: 22, lineHeight: 1.2 }}>Ratio & proportion</span>
            <span className="pb-kpi-trend">a global priority area for Gr 7</span>
          </div>
        </div>

        <div className="pb-preview-strip">
          <div>
            <span className="pb-eyebrow">Plus, in your full report</span>
            <h3 className="pb-display-sm" style={{ marginTop: 10 }}>Concept by concept, learner by learner.</h3>
          </div>
          <ul className="pb-preview-list">
            <li>{ICONS.check} Mastery across 13 fractions concepts, benchmarked at Grade 3, 5, 6 and 7+</li>
            <li>{ICONS.check} Each learner placed on the progression with a clear next step</li>
            <li>{ICONS.check} Three concrete priorities for your maths team, with supporting resources</li>
            <li>{ICONS.check} Optional 30-day Numerate trial to continue tracking, with no obligation</li>
          </ul>
        </div>
      </div>
    </section>
  );
}

function WhyFractions() {
  const stats = [
    { num: <>1<span className="small">/2</span></>, label: 'of adults globally cannot be classed as proportional thinkers. Fractions is where the skill is built.', source: 'Lamon, 1999' },
    { num: <>5</>, label: 'sub-constructs of fractions (part-whole, ratio, operator, quotient, measure) that learners hold simultaneously.', source: 'Pantziara & Phillipou, 2012' },
    { num: <>G7</>, label: 'is the pivot year in the CAPS curriculum. By Grade 8, fractions fluency is assumed across algebra, ratio and finance.', source: 'CAPS · Usiskin, 2004', isInk: true },
    { num: <>3<span className="small">x</span></>, label: 'higher likelihood of choosing Maths in Grade 10 for learners with secure fractions reasoning at Grade 7.', source: 'Wu, 2001 · Reflective research' },
  ];
  return (
    <section className="pb-section pb-section-beige" id="why-fractions">
      <div className="pb-container">
        <div className="pb-section-head">
          <span className="pb-eyebrow">Why fractions</span>
          <h2 className="pb-display-lg">A global pattern. A national priority. One concept that decides what comes next.</h2>
          <p className="pb-lead" style={{ marginTop: 18 }}>
            Fractions is where many learners first encounter the idea that numbers do not always behave like whole numbers. It is the entry point to proportional reasoning, algebra and abstract mathematical thinking. The pattern is the same worldwide: where fractions are secured by Grade 7, the rest of high school maths follows.
          </p>
        </div>
        <div className="pb-why-grid">
          {stats.map((s, i) => (
            <div className={`pb-stat-card ${s.isInk ? 'pb-stat-card-ink' : ''}`} key={i}>
              <span className="pb-stat-num">{s.num}</span>
              <p className="pb-stat-label">{s.label}</p>
              <p className="pb-stat-source">{s.source}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TheOffer() {
  const items = [
    { n: '01', h: 'A class diagnostic report', p: 'Concept-by-concept mastery for your whole class, benchmarked at Grade 3, 5, 6 and 7+ levels. The actual progression, not pass or fail.' },
    { n: '02', h: 'Individual learner profiles', p: 'Each learner placed precisely on the fractions progression, with a clear note on what they have secured and what comes next.' },
    { n: '03', h: 'Supporting materials for your maths team', p: 'Teacher guidance documents aligned to the specific concepts that need attention. From the Instructiv and Maths Pathway libraries.' },
    { n: '04', h: 'Ready-to-run learner worksheets', p: 'Activity sheets your team can use in class the following week, matched to the concepts identified in your report.' },
    { n: '05', h: 'Three priorities for next term', p: 'A focused, evidence-based view of what to work on next. Which concepts. Which learners. In what order.' },
    { n: '06', h: 'A free 30-day Numerate trial', p: 'If you want to continue tracking these learners with our adaptive maths platform, a 30-day trial is included. No pressure. No auto-billing.' },
  ];
  return (
    <section className="pb-section" id="what-you-get">
      <div className="pb-container">
        <div className="pb-section-head">
          <span className="pb-eyebrow">What your school receives</span>
          <h2 className="pb-display-lg">A complete diagnostic package, delivered within one week.</h2>
          <p className="pb-lead" style={{ marginTop: 18 }}>
            This is a gift of insight, not a sales call. Free, no obligation, no upsell on the day. Your data stays with you. Your team decides what to do with it.
          </p>
        </div>
        <div className="pb-offer-grid">
          {items.map((it, i) => (
            <div className="pb-offer-card" key={i}>
              <span className="pb-offer-num">{it.n}</span>
              <h3>{it.h}</h3>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks({ onBook, onSeeReport }) {
  const steps = [
    { n: 1, h: 'Reserve your slot', p: 'Tell us your school, grade, and roughly how many learners. We confirm a date within the same week.' },
    { n: 2, h: 'We come to you', p: 'Our facilitator runs the 30-minute diagnostic with your class using your devices. Total class time including set-up: one hour.' },
    { n: 3, h: 'You receive the report', p: 'Within 7 working days, a full concept-by-concept and learner-by-learner report lands in your inbox.' },
    { n: 4, h: 'We debrief together', p: 'A 30-minute walk-through of the findings with your maths team. Resources handed over. That is the end of the commitment.' },
  ];
  return (
    <section className="pb-section pb-section-beige">
      <div className="pb-container">
        <div className="pb-section-head">
          <span className="pb-eyebrow">How it works</span>
          <h2 className="pb-display-lg">Four steps. One hour of class time. Zero cost.</h2>
        </div>
        <div className="pb-steps">
          {steps.map((s) => (
            <div className="pb-step" key={s.n}>
              <span className="pb-step-dot">{s.n}</span>
              <h4>{s.h}</h4>
              <p>{s.p}</p>
            </div>
          ))}
        </div>

        <div className="pb-requirements">
          <div>
            <p className="pb-display-sm" style={{ marginBottom: 6 }}>What your school needs.</p>
            <p className="pb-body-tight">One device per learner (tablet, Chromebook or laptop). A reliable internet connection. One hour of Grade 6 or 7 class time.</p>
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <button className="pb-btn pb-btn-secondary" onClick={onSeeReport}>See a sample report</button>
            <button className="pb-btn pb-btn-primary" onClick={onBook}>Reserve your slot</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function ClosingQuote({ onBook }) {
  return (
    <section className="pb-section">
      <div className="pb-container">
        <div className="pb-quote">
          <div style={{ position: 'absolute', top: 32, right: 40, opacity: 0.18 }}>
            <ProjectBaselineMark size={120} tone="white"/>
          </div>
          <p className="pb-quote-mark">"</p>
          <blockquote>
            The schools that thrive in Grade 12 maths are the ones that get specific about Grade 7 fractions. Project Baseline gives that specificity to leading South African primary schools, at no cost, before high school assumes the fluency is in place.
          </blockquote>
          <cite>Drawing on Wu (2001), Usiskin (2004) and the Reflective fractions research programme</cite>
          <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="pb-btn pb-btn-on-dark pb-btn-lg" onClick={onBook}>
              Reserve your school's slot {ICONS.arrow}
            </button>
            <a className="pb-btn pb-btn-on-brand-secondary pb-btn-lg" href="mailto:partnerships@reflective.global">
              Or email partnerships@reflective.global
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Overview({ pitch, onBook, onSeeReport }) {
  return (
    <div data-screen-label="Overview">
      <Hero pitch={pitch} onBook={onBook}/>
      <SlotsBanner onBook={onBook}/>
      <InReportPreview onSeeReport={onSeeReport}/>
      <WhyFractions/>
      <TheOffer/>
      <HowItWorks onBook={onBook} onSeeReport={onSeeReport}/>
      <ClosingQuote onBook={onBook}/>
    </div>
  );
}

Object.assign(window, { Overview, PITCH_ANGLES, SlotsBanner });