/* ============================================================
   BrainTrail · Marketing — VARIATION A · "Trailhead"
   Warm, editorial, family-leaning-but-clean. Cream paper,
   mountain hero with the WhizKid cub, orange punch.
   ============================================================ */

/* ---- Hero visual: mascot scene ---- */
function HeroSceneA({ heroVisual }) {
  if (heroVisual === 'product') {
    return (
      <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <div style={{ position: 'absolute', inset: '-6% -4%', borderRadius: 40, background: 'radial-gradient(120% 100% at 70% 20%, var(--mk-accent-soft) 0%, transparent 62%)' }}/>
        <div style={{ position: 'relative', transform: 'rotate(-2deg)' }}>
          <TabletMockup accent="var(--mk-accent)"/>
        </div>
        {/* floating badge card */}
        <div className="mk-card" style={{ position: 'absolute', bottom: 8, left: -6, padding: '11px 15px', borderRadius: 16, display: 'flex', alignItems: 'center', gap: 10, animation: 'mfloat 4.5s ease-in-out infinite' }}>
          <span style={{ fontSize: 24 }}>🏅</span>
          <div>
            <div style={{ fontFamily: 'Fredoka', fontWeight: 600, fontSize: 14 }}>Badge earned!</div>
            <div style={{ fontSize: 12, color: 'var(--ink-mute)' }}>Fractions Peak</div>
          </div>
        </div>
      </div>
    );
  }
  return (
    <div style={{ position: 'relative', minHeight: 440 }}>
      {/* glow */}
      <div style={{ position: 'absolute', inset: '4% 0 18%', borderRadius: '50%', background: 'radial-gradient(circle at 50% 45%, var(--mk-accent-soft) 0%, transparent 64%)' }}/>
      {/* mountain base */}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, borderRadius: 28, overflow: 'hidden', boxShadow: '0 18px 40px -28px rgba(20,58,51,0.4)' }}>
        <MountainArt width={560} height={240} palette="sunrise"/>
      </div>
      {/* cub */}
      <div style={{ position: 'absolute', left: '50%', bottom: 70, transform: 'translateX(-50%)', animation: 'mfloat 4s ease-in-out infinite' }}>
        <BearCub gear="trekker" size={290}/>
      </div>
      {/* floating chips */}
      <div className="mk-card" style={{ position: 'absolute', top: 24, right: 4, padding: '10px 14px', borderRadius: 15, display: 'flex', alignItems: 'center', gap: 9, animation: 'mfloat 5s ease-in-out infinite' }}>
        <span style={{ fontSize: 20 }}>🔥</span>
        <div style={{ fontFamily: 'Fredoka', fontWeight: 600, fontSize: 13.5 }}>6-day streak</div>
      </div>
      <div className="mk-card" style={{ position: 'absolute', top: 130, left: -8, padding: '10px 14px', borderRadius: 15, display: 'flex', alignItems: 'center', gap: 9, whiteSpace: 'nowrap', animation: 'mfloat 4.4s ease-in-out infinite 0.6s' }}>
        <span style={{ width: 30, height: 30, borderRadius: 9, background: 'var(--plum-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 }}>🧮</span>
        <div>
          <div style={{ fontFamily: 'Fredoka', fontWeight: 600, fontSize: 13 }}>+50 XP</div>
          <div style={{ fontSize: 11, color: 'var(--ink-mute)' }}>Nice climb!</div>
        </div>
      </div>
    </div>
  );
}

/* ---- How it works step ---- */
function StepA({ n, emoji, title, body, last }) {
  return (
    <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 12 }}>
      <div style={{
        width: 92, height: 92, borderRadius: '50%', background: 'var(--paper)',
        border: '2px dashed var(--mk-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 40, position: 'relative', boxShadow: '0 6px 0 rgba(20,58,51,0.05)',
      }}>
        {emoji}
        <span style={{
          position: 'absolute', top: -8, right: -8, width: 30, height: 30, borderRadius: '50%',
          background: 'var(--mk-accent)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'Fredoka', fontWeight: 600, fontSize: 15, boxShadow: '0 3px 0 var(--mk-accent-deep)',
        }}>{n}</span>
      </div>
      <h3 className="mk-h3">{title}</h3>
      <p className="mk-muted" style={{ fontSize: 15.5, maxWidth: 250 }}>{body}</p>
    </div>
  );
}

/* ---- Audience card ---- */
function AudienceCardA({ emoji, tint, title, body, points, cta }) {
  return (
    <div className="mk-card mk-card-pad" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <span style={{ width: 56, height: 56, borderRadius: 17, background: `var(--${tint}-100)`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28 }}>{emoji}</span>
      <h3 className="mk-h3">{title}</h3>
      <p className="mk-muted" style={{ fontSize: 15.5 }}>{body}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9, marginTop: 'auto' }}>
        {points.map(p => (
          <div key={p} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 15, color: 'var(--ink-soft)' }}>
            <span style={{ width: 22, height: 22, borderRadius: '50%', background: `var(--${tint}-100)`, color: `var(--${tint}-700)`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
              <Icon.Check width="13" height="13" stroke="currentColor" strokeWidth="3" fill="none"/>
            </span>
            {p}
          </div>
        ))}
      </div>
      <a style={{ fontFamily: 'Fredoka', fontWeight: 600, fontSize: 15, color: `var(--${tint}-700)`, display: 'inline-flex', alignItems: 'center', gap: 7, cursor: 'pointer' }}>
        {cta}<Icon.Arrow width="16" height="16" stroke={`var(--${tint}-700)`} strokeWidth="2.5" fill="none"/>
      </a>
    </div>
  );
}

/* ============================================================
   PAGE A
   ============================================================ */
function LandingA({ heroVisual = 'mascot', onCta, onDemo }) {
  return (
    <div data-screen-label="Variation A — Trailhead">
      <MkNav onCta={onCta}/>

      {/* HERO */}
      <header className="mk-section mk-section--tight" style={{ position: 'relative', paddingTop: 'clamp(40px,5vw,64px)' }}>
        <div className="mk-topo" style={{ opacity: 0.5 }}>
          <svg viewBox="0 0 1200 700" preserveAspectRatio="xMidYMid slice">
            {[0,1,2,3,4,5,6,7].map(i => (
              <ellipse key={i} cx="940" cy="240" rx={120 + i*96} ry={90 + i*70}
                fill="none" stroke="var(--teal-300)" strokeWidth="1.2" opacity="0.5"/>
            ))}
          </svg>
        </div>
        <div className="mk-wrap" style={{ position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'clamp(28px,5vw,64px)', alignItems: 'center' }} className="mk-hero-grid">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
              <span className="mk-chip" style={{ alignSelf: 'flex-start' }}>
                <Icon.Sparkle stroke="var(--mk-accent)" fill="none"/> K–8 · Standards-aligned practice
              </span>
              <h1 className="mk-h1">
                Where every<br/>problem is an<br/><span style={{ color: 'var(--mk-accent)' }}>adventure.</span>
              </h1>
              <p className="mk-lead" style={{ maxWidth: 460 }}>
                BrainTrail turns daily practice into a hike up the mountain. Kids climb real
                skills, grown-ups see real progress — minus the worksheet groans.
              </p>
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <button className="mk-btn mk-btn-primary mk-btn-lg" onClick={onCta}>
                  Start free<Icon.Arrow stroke="#fff" fill="none"/>
                </button>
                <button className="mk-btn mk-btn-ghost mk-btn-lg" onClick={onDemo}>
                  Book a demo
                </button>
              </div>
              <p style={{ fontSize: 13, color: 'var(--ink-mute)', margin: '2px 0 0', maxWidth: 420 }}>
                Sign up as a parent or teacher. Students join through a parent or school — not independently.
              </p>
              <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap', alignItems: 'center', marginTop: 4 }}>
                {[['👪','For families'],['🎓','For teachers'],['🏫','For schools']].map(([e,t]) => (
                  <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'Fredoka', fontWeight: 500, fontSize: 15, color: 'var(--ink-soft)' }}>
                    <span style={{ fontSize: 18 }}>{e}</span>{t}
                  </span>
                ))}
              </div>
            </div>
            <HeroSceneA heroVisual={heroVisual}/>
          </div>
        </div>
      </header>

      {/* HOW IT WORKS */}
      <section className="mk-section" style={{ background: 'var(--paper)', borderTop: '1.5px solid #efe6d2', borderBottom: '1.5px solid #efe6d2' }}>
        <div className="mk-wrap">
          <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, marginBottom: 'clamp(40px,5vw,64px)' }}>
            <Eyebrow>The trail</Eyebrow>
            <h2 className="mk-h2" style={{ maxWidth: 560 }}>Three steps to the summit</h2>
            <p className="mk-lead" style={{ maxWidth: 520 }}>No setup labyrinth. Pick a trail, climb at the right pace, and celebrate the win.</p>
          </div>
          <div style={{ position: 'relative' }}>
            {/* connecting dashed trail */}
            <svg viewBox="0 0 1000 40" preserveAspectRatio="none" style={{ position: 'absolute', top: 46, left: '8%', width: '84%', height: 40, zIndex: 0 }} className="mk-hide-mobile">
              <path d="M0 28 Q 250 -6 500 20 T 1000 12" fill="none" stroke="var(--orange-300)" strokeWidth="3" strokeDasharray="3 10" strokeLinecap="round"/>
            </svg>
            <div className="mk-grid mk-grid-3" style={{ position: 'relative', zIndex: 1 }}>
              <StepA n="1" emoji="🗺️" title="Pick a trail" body="Choose a skill or let BrainTrail map one to your standards. Each trail is a set of bite-size summits."/>
              <StepA n="2" emoji="🧗" title="Climb together" body="Adaptive questions meet kids where they are, with hints and worked steps when the path gets steep."/>
              <StepA n="3" emoji="🏔️" title="Reach the summit" body="Mastery unlocks badges and streaks — and a clear progress map for the grown-ups."/>
            </div>
          </div>
        </div>
      </section>

      {/* AUDIENCE */}
      <section className="mk-section">
        <div className="mk-wrap">
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 14, marginBottom: 'clamp(36px,4vw,52px)' }}>
            <Eyebrow>Built for everyone on the climb</Eyebrow>
            <h2 className="mk-h2" style={{ maxWidth: 600 }}>One trail, three points of view</h2>
          </div>
          <div className="mk-grid mk-grid-3">
            <AudienceCardA emoji="👪" tint="orange" title="Families"
              body="Screen time that actually builds skills — and a daily glimpse of what your kid is mastering."
              points={['Set gentle daily goals', 'See progress, not just scores', 'Safe, ad-free, kid-first']}
              cta="Explore for families"/>
            <AudienceCardA emoji="🎓" tint="teal" title="Teachers"
              body="Assign trails in seconds, then watch the whole class climb on one live dashboard."
              points={['Standards-aligned trail library', 'Auto-grading + misconception flags', 'Differentiate without the busywork']}
              cta="Explore for teachers"/>
            <AudienceCardA emoji="🏫" tint="plum" title="Schools & districts"
              body="Roll out across classrooms with the controls, rostering and reporting admins expect."
              points={['Clever / Google rostering', 'District-level outcome reports', 'FERPA & COPPA compliant']}
              cta="Explore for schools"/>
          </div>
        </div>
      </section>

      {/* FEATURE SHOWCASE */}
      <section className="mk-section" style={{ background: 'var(--paper)', borderTop: '1.5px solid #efe6d2' }}>
        <div className="mk-wrap" style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(56px,8vw,104px)' }}>
          <div className="mk-feature">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <Eyebrow>For the trailblazer</Eyebrow>
              <h2 className="mk-h2">Practice that feels like play, not punishment</h2>
              <p className="mk-lead">Every trail is a hand-drawn mountain to climb. Hints arrive right when a kid is stuck, worked steps explain the “why,” and streaks keep them coming back tomorrow.</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                {['Adaptive difficulty', 'Worked solutions', 'Streaks & badges', 'Read-aloud support'].map(t => (
                  <span key={t} className="mk-chip"><Icon.Check stroke="var(--mk-accent)" fill="none"/> {t}</span>
                ))}
              </div>
            </div>
            <div className="mk-feature-media" style={{ display: 'flex', justifyContent: 'center' }}>
              <div style={{ position: 'relative' }}>
                <div style={{ position: 'absolute', inset: '-8%', borderRadius: 36, background: 'radial-gradient(circle at 60% 30%, var(--mk-accent-soft), transparent 65%)' }}/>
                <div style={{ position: 'relative', transform: 'rotate(2deg)' }}><TabletMockup accent="var(--mk-accent)"/></div>
              </div>
            </div>
          </div>

          <div className="mk-feature mk-feature--flip">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <Eyebrow>For the guide</Eyebrow>
              <h2 className="mk-h2">See the whole class climb at a glance</h2>
              <p className="mk-lead">A live dashboard shows who’s soaring and who needs a nudge — with misconception flags that tell you exactly which step tripped a student up.</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                {['Live class view', 'Misconception flags', 'One-tap assign', 'Exportable reports'].map(t => (
                  <span key={t} className="mk-chip"><Icon.Check stroke="var(--mk-accent)" fill="none"/> {t}</span>
                ))}
              </div>
            </div>
            <div className="mk-feature-media"><DashMockup accent="var(--mk-accent)"/></div>
          </div>
        </div>
      </section>

      {/* PRICING TEASER */}
      <PricingTeaserA onCta={onCta} onDemo={onDemo}/>

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

/* ---- pricing ---- */
function PricingTeaserA({ onCta, onDemo }) {
  const tiers = [
    { name: 'Family', price: 'Free', unit: 'for 1 learner', tint: 'orange', feats: ['1 trail (10 questions) per concept', 'Daily goals & streaks', 'Parent progress view'], cta: 'Start free', ghost: true },
    { name: 'Classroom', price: 'As low as $1', unit: 'per student / month', tint: 'teal', feats: ['Live class dashboard', 'Assignments & reports', 'Roster import', 'Parent updates'], cta: 'Start free trial', featured: true },
    { name: 'School & District', price: 'Custom', unit: 'volume pricing', tint: 'plum', feats: ['Everything in Classroom', 'Admin & SSO controls', 'District reporting', 'Bus tracking', 'Onboarding support', 'White-labeled solutions available'], cta: 'Talk to us', ghost: true, demo: true },
  ];
  return (
    <section className="mk-section" style={{ background: 'var(--paper)', borderTop: '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>Simple pricing</Eyebrow>
          <h2 className="mk-h2">Free to start. Easy to grow.</h2>
        </div>
        <div className="mk-grid mk-grid-3" style={{ alignItems: 'stretch' }}>
          {tiers.map(t => (
            <div key={t.name} className="mk-card mk-card-pad" style={{
              display: 'flex', flexDirection: 'column', gap: 18, position: 'relative',
              border: t.featured ? '2px solid var(--mk-accent)' : '1.5px solid #efe6d2',
              boxShadow: t.featured ? '0 6px 0 var(--mk-accent-soft), 0 24px 44px -26px rgba(20,58,51,0.34)' : undefined,
            }}>
              {t.featured && <span style={{ position: 'absolute', top: -13, left: '50%', transform: 'translateX(-50%)', background: 'var(--mk-accent)', color: '#fff', fontFamily: 'Fredoka', fontWeight: 600, fontSize: 12.5, padding: '5px 14px', borderRadius: 999, whiteSpace: 'nowrap' }}>Most popular</span>}
              <div>
                <div style={{ fontFamily: 'Fredoka', fontWeight: 600, fontSize: 19, color: `var(--${t.tint}-700)` }}>{t.name}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
                  <span className="mk-price-amt">{t.price}</span>
                  <span className="mk-muted" style={{ fontSize: 14 }}>{t.unit}</span>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {t.feats.map(f => (
                  <div key={f} style={{ display: 'flex', gap: 10, fontSize: 15, color: 'var(--ink-soft)' }}>
                    <Icon.Check width="18" height="18" stroke={`var(--${t.tint}-700)`} strokeWidth="2.6" fill="none"/> {f}
                  </div>
                ))}
              </div>
              <button onClick={t.demo ? onDemo : onCta} className={`mk-btn ${t.featured ? 'mk-btn-primary' : 'mk-btn-ghost'}`} style={{ marginTop: 'auto', width: '100%' }}>{t.cta}</button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LandingA });