/* ============================================================
   BrainTrail · Marketing — VARIATION B · "Summit"
   Structured, credibility-forward, school-buyer leaning.
   Deep-teal hero band + topo, product-forward, outcomes &
   district trust, interactive audience tabs, feature grid.
   ============================================================ */
const { useState: useBState } = React;

/* ---- feature grid card ---- */
function FeatCardB({ Ico, title, body, tint = 'teal' }) {
  return (
    <div className="mk-card mk-card-pad" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <span style={{ width: 48, height: 48, borderRadius: 14, background: `var(--${tint}-100)`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Ico width="24" height="24" stroke={`var(--${tint}-700)`} strokeWidth="2.1" fill="none"/>
      </span>
      <h3 style={{ fontFamily: 'Fredoka', fontWeight: 600, fontSize: 20 }}>{title}</h3>
      <p className="mk-muted" style={{ fontSize: 15 }}>{body}</p>
    </div>
  );
}

/* ---- interactive audience tabs ---- */
function AudienceTabsB() {
  const data = {
    Families: { emoji: '👪', tint: 'orange',
      head: 'Screen time you can feel good about',
      body: 'Give kids practice that builds real skills, and get a simple daily read on what they’re mastering — no grading, no nagging.',
      points: ['Gentle daily goals & streaks', 'Plain-language progress, not just scores', 'Private, ad-free, kid-first by design'] },
    Teachers: { emoji: '🎓', tint: 'teal',
      head: 'Assign in seconds, differentiate without the busywork',
      body: 'A standards-aligned trail library plus a live class dashboard that flags exactly which step a student got stuck on.',
      points: ['One-tap assignments to any group', 'Auto-grading + misconception flags', 'Exportable reports for conferences'] },
    Schools: { emoji: '🏫', tint: 'plum',
      head: 'Roll out district-wide with confidence',
      body: 'The rostering, controls and reporting administrators expect — deployed across classrooms without an IT marathon.',
      points: ['Clever & Google Classroom rostering', 'SSO, roles & district reporting', 'FERPA & COPPA compliant'] },
  };
  const keys = Object.keys(data);
  const [tab, setTab] = useBState('Teachers');
  const d = data[tab];
  return (
    <div>
      {/* tab bar */}
      <div style={{ display: 'inline-flex', gap: 6, padding: 6, background: 'var(--paper)', borderRadius: 999, border: '1.5px solid #efe6d2', marginBottom: 'clamp(28px,3.5vw,44px)' }}>
        {keys.map(k => {
          const on = k === tab;
          return (
            <button key={k} onClick={() => setTab(k)} style={{
              border: 'none', cursor: 'pointer', borderRadius: 999, padding: '11px 22px',
              fontFamily: 'Fredoka', fontWeight: 600, fontSize: 15.5,
              background: on ? 'var(--mk-accent)' : 'transparent',
              color: on ? '#fff' : 'var(--ink-soft)',
              boxShadow: on ? '0 3px 0 var(--mk-accent-deep)' : 'none',
              transition: 'all 0.15s',
            }}>{data[k].emoji} {k}</button>
          );
        })}
      </div>
      <div className="mk-feature mk-fadeup" key={tab}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <h3 className="mk-h2" style={{ fontSize: 'clamp(26px,3vw,38px)' }}>{d.head}</h3>
          <p className="mk-lead">{d.body}</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 4 }}>
            {d.points.map(p => (
              <div key={p} style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 16.5, color: 'var(--ink)', fontWeight: 600 }}>
                <span style={{ width: 26, height: 26, borderRadius: '50%', background: `var(--${d.tint}-100)`, color: `var(--${d.tint}-700)`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon.Check width="15" height="15" stroke="currentColor" strokeWidth="3" fill="none"/>
                </span>
                {p}
              </div>
            ))}
          </div>
        </div>
        <div className="mk-feature-media">
          {tab === 'Families' ? (
            <div style={{ display: 'flex', justifyContent: 'center' }}><div style={{ transform: 'rotate(-2deg)' }}><TabletMockup accent="var(--mk-accent)"/></div></div>
          ) : <DashMockup accent="var(--mk-accent)"/>}
        </div>
      </div>
    </div>
  );
}

/* ── White-label demo input widget ── */
function WhiteLabelDemoInput() {
  const [name, setName] = useBState('');

  function openDemo() {
    const base = 'https://demo.braintrailapp.com';
    const n    = name.trim();
    const url  = n
      ? `${base}?name=${encodeURIComponent(n)}&color=%230f766e&accent=%23f59e0b`
      : base;
    window.open(url, '_blank', 'noopener,noreferrer');
  }

  const accentHex = 'var(--orange-500)';

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <span className="mk-chip" style={{ alignSelf: 'flex-start', background: 'rgba(255,255,255,0.1)', color: 'var(--cream)', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,0.22)' }}>
        <Icon.Sparkle stroke="var(--teal-300)" fill="none"/> White-label school branding
      </span>
      <h2 className="mk-h2" style={{ color: 'var(--cream)', fontSize: 'clamp(26px,3.5vw,42px)' }}>
        Every school gets its own branded home
      </h2>
      <p style={{ color: 'rgba(255,255,255,0.78)', fontSize: 17, lineHeight: 1.65, maxWidth: 480 }}>
        BrainTrail powers a fully white-labeled landing page, login screen, and dashboard —
        colors, logo, and school name all driven by your brand. No code required.
      </p>

      {/* School name input + CTA */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxWidth: 460 }}>
        <label style={{ color: 'rgba(255,255,255,0.55)', fontSize: 13, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', fontFamily: 'Nunito, sans-serif' }}>
          Enter your school name to try it live
        </label>
        <div style={{ display: 'flex', gap: 8 }}>
          <input
            type="text"
            value={name}
            onChange={e => setName(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && openDemo()}
            placeholder="e.g. Lincoln Academy"
            style={{
              flex: 1, padding: '13px 18px', borderRadius: 'var(--mk-radius-sm, 16px)',
              border: '1.5px solid rgba(255,255,255,0.18)',
              background: 'rgba(255,255,255,0.09)', color: '#fff',
              fontFamily: 'Nunito, sans-serif', fontSize: 15,
              outline: 'none',
            }}
            onFocus={e  => e.target.style.borderColor = 'rgba(255,255,255,0.45)'}
            onBlur={e   => e.target.style.borderColor = 'rgba(255,255,255,0.18)'}
          />
          <button
            onClick={openDemo}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 6, flexShrink: 0,
              background: 'var(--orange-500)', color: '#fff',
              padding: '13px 22px', borderRadius: 'var(--mk-radius-sm, 16px)',
              fontFamily: 'Fredoka, sans-serif', fontWeight: 600, fontSize: 16,
              boxShadow: '0 4px 0 var(--orange-700)', border: 'none', cursor: 'pointer',
              transition: 'opacity 0.15s',
            }}
            onMouseOver={e => e.currentTarget.style.opacity = '0.88'}
            onMouseOut={e  => e.currentTarget.style.opacity = '1'}
          >
            <Icon.Sparkle width="16" height="16" stroke="#fff" fill="none"/>
            Preview
          </button>
        </div>
        <p style={{ color: 'rgba(255,255,255,0.4)', fontSize: 12.5, margin: 0, fontFamily: 'Nunito, sans-serif' }}>
          No sign-up needed · live customizer · shareable URL with your colors
        </p>
      </div>
    </div>
  );
}

/* ============================================================
   PAGE B
   ============================================================ */
function LandingB({ heroVisual = 'product', onCta, onDemo }) {
  return (
    <div data-screen-label="Variation B — Summit">
      <MkNav onCta={onCta}/>

      {/* HERO — deep teal band */}
      <header style={{ position: 'relative', background: 'var(--teal-900)', overflow: 'hidden' }}>
        <div className="mk-topo" style={{ opacity: 0.16 }}>
          <svg viewBox="0 0 1200 760" preserveAspectRatio="xMidYMid slice">
            {[0,1,2,3,4,5,6,7,8].map(i => (
              <ellipse key={i} cx="320" cy="540" rx={140 + i*108} ry={104 + i*78}
                fill="none" stroke="#7cd6c4" strokeWidth="1.5"/>
            ))}
          </svg>
        </div>
        {/* mountain footer of hero */}
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, opacity: 0.6 }}>
          <svg viewBox="0 0 1200 200" preserveAspectRatio="none" style={{ width: '100%', height: 200, display: 'block' }}>
            <path d="M0 200 L160 120 L320 170 L480 80 L640 150 L820 70 L1000 140 L1200 90 L1200 200 Z" fill="var(--teal-700)" opacity="0.5"/>
            <path d="M0 200 L220 150 L420 185 L620 120 L820 175 L1040 130 L1200 175 L1200 200 Z" fill="#0a3a34"/>
          </svg>
        </div>

        <div className="mk-wrap mk-section--tight" style={{ position: 'relative', paddingTop: 'clamp(48px,6vw,84px)', paddingBottom: 'clamp(72px,9vw,128px)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }} className="mk-hero-grid">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
              <span className="mk-chip" style={{ alignSelf: 'flex-start', background: 'rgba(255,255,255,0.1)', color: 'var(--cream)', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,0.22)' }}>
                <Icon.Sparkle stroke="var(--teal-300)" fill="none"/> Standards-aligned · K–8 math & literacy
              </span>
              <h1 className="mk-h1" style={{ color: 'var(--cream)' }}>
                The practice platform that <span style={{ color: 'var(--orange-500)' }}>kids choose</span> and schools trust.
              </h1>
              <p className="mk-lead" style={{ color: 'rgba(255,255,255,0.82)', maxWidth: 480 }}>
                BrainTrail turns daily practice into a climb up the mountain — boosting engagement
                while giving teachers and administrators the data they need to act.
              </p>
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <button className="mk-btn mk-btn-lg" onClick={onDemo} style={{ background: 'var(--orange-500)', color: '#fff', boxShadow: '0 4px 0 var(--orange-700)' }}>
                  Book a demo<Icon.Arrow stroke="#fff" fill="none"/>
                </button>
                <button className="mk-btn mk-btn-lg" onClick={onCta} style={{ background: 'rgba(255,255,255,0.1)', color: '#fff', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,0.3)' }}>
                  Start free trial
                </button>
              </div>
            </div>
            {/* product mockup */}
            <div style={{ position: 'relative' }}>
              <div style={{ position: 'absolute', inset: '-6%', borderRadius: 32, background: 'radial-gradient(circle at 60% 30%, rgba(124,214,196,0.25), transparent 64%)' }}/>
              <div style={{ position: 'relative' }}><DashMockup accent="var(--mk-accent)"/></div>
              <div className="mk-card" style={{ position: 'absolute', bottom: -22, left: -18, padding: '11px 15px', borderRadius: 16, display: 'flex', alignItems: 'center', gap: 11, animation: 'mfloat 4.5s ease-in-out infinite' }}>
                <span style={{ width: 34, height: 34, borderRadius: 10, background: 'var(--teal-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon.Trophy width="19" height="19" stroke="var(--teal-700)" strokeWidth="2" fill="none"/>
                </span>
                <div>
                  <div style={{ fontFamily: 'Fredoka', fontWeight: 600, fontSize: 14 }}>Class mastery up 12%</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-mute)' }}>this week</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* AUDIENCE TABS */}
      <section className="mk-section">
        <div className="mk-wrap">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 'clamp(28px,3.5vw,44px)', maxWidth: 620 }}>
            <Eyebrow>One platform, every role</Eyebrow>
            <h2 className="mk-h2">Made for the whole school community</h2>
          </div>
          <AudienceTabsB/>
        </div>
      </section>

      {/* WHITE-LABEL SCHOOL DEMO BAND */}
      <section style={{ background: 'var(--teal-900)', position: 'relative', overflow: 'hidden' }}>
        {/* subtle topo backdrop */}
        <div style={{ position: 'absolute', inset: 0, opacity: 0.07, pointerEvents: 'none' }}>
          <svg viewBox="0 0 1200 320" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
            {[0,1,2,3].map(i => (
              <ellipse key={i} cx="900" cy="400" rx={200 + i*140} ry={140 + i*90} fill="none" stroke="#7cd6c4" strokeWidth="1.5"/>
            ))}
          </svg>
        </div>
        <div className="mk-wrap mk-section--tight mk-hero-grid" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }}>
          {/* left copy */}
          <WhiteLabelDemoInput />
          {/* right preview card */}
          <div className="mk-hide-mobile" style={{ position: 'relative' }}>
            <div style={{
              background: '#fff', borderRadius: 20, overflow: 'hidden',
              boxShadow: '0 24px 56px -12px rgba(0,0,0,0.55)',
              border: '2px solid rgba(255,255,255,0.12)',
            }}>
              {/* mock browser chrome */}
              <div style={{ background: '#1e293b', padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#ef4444', display: 'inline-block' }}/>
                <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#f59e0b', display: 'inline-block' }}/>
                <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#22c55e', display: 'inline-block' }}/>
                <div style={{ flex: 1, background: '#334155', borderRadius: 6, padding: '4px 12px', marginLeft: 8, fontSize: 11, color: '#94a3b8', fontFamily: 'monospace' }}>
                  demo.braintrailapp.com
                </div>
              </div>
              {/* mock landing page preview */}
              <div style={{ background: '#1c1917', padding: '20px 20px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {/* mock nav */}
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--mk-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon.Trophy width="13" height="13" stroke="#fff" strokeWidth="2" fill="none"/>
                    </div>
                    <div style={{ height: 8, width: 110, background: 'rgba(255,255,255,0.7)', borderRadius: 4 }}/>
                  </div>
                  <div style={{ height: 22, width: 64, background: 'var(--mk-accent)', borderRadius: 6 }}/>
                </div>
                {/* mock hero text */}
                <div style={{ padding: '14px 0 8px', display: 'flex', flexDirection: 'column', gap: 7 }}>
                  <div style={{ height: 6, width: '65%', background: 'rgba(255,255,255,0.75)', borderRadius: 3 }}/>
                  <div style={{ height: 6, width: '85%', background: 'rgba(255,255,255,0.75)', borderRadius: 3 }}/>
                  <div style={{ height: 6, width: '50%', background: 'rgba(255,255,255,0.4)', borderRadius: 3 }}/>
                  <div style={{ height: 6, width: '72%', background: 'rgba(255,255,255,0.4)', borderRadius: 3, marginTop: 2 }}/>
                </div>
                {/* mock stat card */}
                <div style={{ background: 'rgba(255,255,255,0.95)', borderRadius: 10, padding: '12px 14px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                  {[['98%','Graduation Rate'],['12:1','Student Ratio'],['Pre K','to Grade 12'],['15+','AP Courses']].map(([v,l]) => (
                    <div key={l} style={{ borderLeft: `3px solid var(--mk-accent)`, paddingLeft: 8 }}>
                      <div style={{ fontSize: 14, fontWeight: 700, color: '#1c1917' }}>{v}</div>
                      <div style={{ fontSize: 9, color: '#78716c', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{l}</div>
                    </div>
                  ))}
                </div>
              </div>
              {/* customizer tray hint */}
              <div style={{ background: '#f59e0b', padding: '8px 16px', display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 13 }}>✨</span>
                <span style={{ fontSize: 12, fontWeight: 700, color: '#1c1917', fontFamily: 'Fredoka, sans-serif' }}>Customize Brand Style — live editor open</span>
              </div>
            </div>
            {/* floating chip */}
            <div className="mk-card" style={{ position: 'absolute', bottom: -18, left: -20, padding: '10px 14px', borderRadius: 14, display: 'flex', alignItems: 'center', gap: 10, animation: 'mfloat 5s ease-in-out infinite' }}>
              <span style={{ width: 30, height: 30, borderRadius: 9, background: 'var(--teal-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon.Check width="15" height="15" stroke="var(--teal-700)" strokeWidth="3" fill="none"/>
              </span>
              <div>
                <div style={{ fontFamily: 'Fredoka', fontWeight: 600, fontSize: 13 }}>Your school. Your brand.</div>
                <div style={{ fontSize: 11, color: 'var(--ink-mute)' }}>zero code required</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURE GRID */}
      <section className="mk-section" style={{ background: 'var(--paper)', borderTop: '1.5px solid #efe6d2', borderBottom: '1.5px solid #efe6d2' }}>
        <div className="mk-wrap">
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 14, marginBottom: 'clamp(36px,4vw,52px)' }}>
            <Eyebrow>Everything in the pack</Eyebrow>
            <h2 className="mk-h2" style={{ maxWidth: 560 }}>A complete toolkit, not a single trick</h2>
          </div>
          <div className="mk-grid mk-grid-3">
            <FeatCardB Ico={Icon.Map} tint="teal" title="Standards-aligned trails" body="A library mapped to Common Core & state standards — or build your own custom trail."/>
            <FeatCardB Ico={Icon.Sparkle} tint="orange" title="Adaptive practice" body="Difficulty adjusts in real time, with hints and worked solutions when kids get stuck."/>
            <FeatCardB Ico={Icon.Clipboard} tint="plum" title="Live dashboards" body="Class, student and roster views with misconception flags that pinpoint the gap."/>
            <FeatCardB Ico={Icon.Trophy} tint="orange" title="Motivation engine" body="Streaks, badges and summit celebrations that keep learners coming back daily."/>
            <FeatCardB Ico={Icon.Person} tint="plum" title="Rostering & SSO" body="Sync with Clever, Google Classroom and ClassLink. Roles for staff, families and admins."/>
            <FeatCardB Ico={Icon.Lock} tint="teal" title="Private by default" body="FERPA & COPPA compliant. No ads, no selling data — student privacy comes first."/>
          </div>
        </div>
      </section>

      {/* PRICING (reuse A's teaser for consistency) */}
      <PricingTeaserA onCta={onCta} onDemo={onDemo}/>

      <CtaBand onCta={onCta} onDemo={onDemo}/>
      <MkFooter/>
    </div>
  );
}

Object.assign(window, { LandingB });