/* =============================================
   Direction B v2 - Refined Optimist
   Bigger tutor characters, stronger hero,
   cleaner sections, more emotional warmth.
   ============================================= */

// Tutor lineup - featured tutor (hero + Discord pfp) is randomized per page load
const TUTORS = [
  { src: 'assets/tutor-1.png?v=24', name: 'Mira',   subject: 'Biology · Chemistry' },
  { src: 'assets/tutor-2.png?v=24', name: 'Oliver', subject: 'CS · Logic' },
  { src: 'assets/tutor-3.png?v=24', name: 'Kai',    subject: 'Math · Physics' },
  { src: 'assets/tutor-4.png?v=24', name: 'Sage',   subject: 'English · Literature' },
];
const FEATURED = TUTORS[Math.floor(Math.random() * TUTORS.length)];
// Voice section uses a different random tutor than the hero
const VOICE_TUTOR = (() => {
  const others = TUTORS.filter(t => t.name !== FEATURED.name);
  return others[Math.floor(Math.random() * others.length)];
})();

const DirectionBv2 = () => (
  <div className="dirBv2">
    <BV2_Nav />
    <BV2_Hero />
    <BV2_VoiceFlow />
    <BV2_LogoWheel />
    <BV2_Tutors />
    <BV2_Whiteboard />
    <BV2_HowItWorks />
    <BV2_Memory />
    <BV2_Subjects />
    <BV2_Accuracy />
    <BV2_Parents />
    <BV2_Mentors />
    <BV2_FAQ />
    <BV2_CTA />
    <BV2_Footer />
  </div>
);

/* ---------- Nav ---------- */
const BV2_Nav = () => {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    let unsub = null;
    let cancelled = false;
    const attach = () => {
      if (cancelled) return;
      if (window.__cyAuth && window.__cyOnAuth) {
        unsub = window.__cyOnAuth(window.__cyAuth, (u) => setUser(u || null));
      } else {
        setTimeout(attach, 100);
      }
    };
    attach();
    return () => { cancelled = true; if (unsub) unsub(); };
  }, []);

  const initial = user
    ? (user.displayName || user.email || '?').trim().charAt(0).toUpperCase()
    : '';

  return (
    <nav className="bv2-nav">
      <div className="bv2-nav__logo">
        <img src="assets/logo-dark.png" alt="Clarifyed" />
      </div>
      <div className="bv2-nav__links">
        <a href="#how">How it works</a>
        <a href="#tutors">Tutors</a>
        <a href="#parents">For parents</a>
        <a href="waitlist.html">{user ? 'My spot' : 'Join waitlist'}</a>
      </div>
      <div className="bv2-nav__right">
        {user ? (
          <a className="bv2-nav__user"
             href="waitlist.html"
             title={user.displayName || user.email || 'Your waitlist spot'}
             aria-label="Your waitlist spot">
            {user.photoURL ? (
              <img className="bv2-nav__user-avatar"
                   src={user.photoURL}
                   alt=""
                   referrerPolicy="no-referrer" />
            ) : (
              <span className="bv2-nav__user-avatar bv2-nav__user-avatar--placeholder">{initial}</span>
            )}
          </a>
        ) : (
          <>
            <a href="waitlist.html" className="bv2-nav__signin">Sign in</a>
            <a className="btn btn-primary btn-sm" href="waitlist.html">Join waitlist</a>
          </>
        )}
      </div>
    </nav>
  );
};

/* ---------- Hero ---------- */
const BV2_Hero = () => (
  <section className="bv2-hero" id="top">
    <div className="bv2-hero__sun" />
    <div className="bv2-hero__copy">
      <h1 className="bv2-hero__title">
        Hi. <span className="bv2-wave">👋🏻</span><br/>
        I'm <span className="bv2-name">{FEATURED.name}</span>.<br/>
        I teach on a <em>whiteboard</em>.
      </h1>
      <p className="bv2-hero__sub">
        Not a chatbot. I write notes by hand, draw diagrams, embed live graphs - and watch you work, correcting you the moment you go wrong.
      </p>
      <div className="bv2-hero__cta">
        <a className="btn btn-primary" href="waitlist.html?role=student">Start with {FEATURED.name} →</a>
        {/* <a className="btn btn-ghost" href="#voice">▶ Watch a 60-sec tour</a> */}
      </div>
      <div className="bv2-hero__trust">
        <div className="bv2-hero__avs">
          <img src="assets/tutor-1.png?v=24" alt="" />
          <img src="assets/tutor-2.png?v=24" alt="" />
          <img src="assets/tutor-3.png?v=24" alt="" />
          <img src="assets/tutor-4.png?v=24" alt="" />
        </div>
        <span>★★★★★&nbsp;&nbsp;Loved by many students</span>
      </div>
    </div>
    <div className="bv2-hero__char">
      {/* Hand-drawn scribble frame, drawn live */}
      <svg className="bv2-hero__scribble" viewBox="0 0 320 380" preserveAspectRatio="none">
        <defs>
          <clipPath id="bv2MiraClip">
            <path d="M 40 60
                     C 110 30, 220 30, 285 60
                     C 305 100, 305 280, 280 320
                     C 220 350, 110 350, 40 320
                     C 18 280, 18 100, 40 60 Z"/>
          </clipPath>
        </defs>
        {/* Background scribble texture */}
        <g className="bv2-scribble-bg" opacity="0.22">
          <path d="M44 80 C 120 70, 220 75, 280 85" stroke="#1A1814" strokeWidth="1" fill="none"/>
          <path d="M40 130 C 140 120, 240 125, 285 135" stroke="#1A1814" strokeWidth="1" fill="none"/>
          <path d="M40 180 C 140 170, 240 175, 285 185" stroke="#1A1814" strokeWidth="1" fill="none"/>
          <path d="M40 230 C 140 220, 240 225, 285 235" stroke="#1A1814" strokeWidth="1" fill="none"/>
          <path d="M40 280 C 140 270, 240 275, 285 285" stroke="#1A1814" strokeWidth="1" fill="none"/>
        </g>
        {/* Photo, clipped to the scribble shape */}
        <image href={FEATURED.src} x="20" y="20" width="280" height="360"
               preserveAspectRatio="xMidYMid slice"
               clipPath="url(#bv2MiraClip)"/>
        {/* Hand-drawn scribble outline drawn live */}
        <path className="bv2-scribble-outline"
              d="M 40 60
                 C 110 30, 220 30, 285 60
                 C 305 100, 305 280, 280 320
                 C 220 350, 110 350, 40 320
                 C 18 280, 18 100, 40 60 Z"
              fill="none" stroke="#1A1814" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
        {/* Extra scribble flourishes */}
        <path className="bv2-scribble-extra" d="M 50 70 C 130 50, 220 55, 275 75"
              fill="none" stroke="#1A1814" strokeWidth="1.5" strokeLinecap="round" opacity="0.4"/>
        <path className="bv2-scribble-extra2" d="M 285 70 C 295 150, 295 250, 280 310"
              fill="none" stroke="#1A1814" strokeWidth="1.5" strokeLinecap="round" opacity="0.4"/>
      </svg>
      <span className="bv2-sticker bv2-sticker--top">Hi! I'm {FEATURED.name} ✨</span>
      <span className="bv2-sticker bv2-sticker--bot">{FEATURED.subject}</span>
    </div>
  </section>
);

/* ---------- Voice Flow ---------- */
/*
  ONE continuous curve: starts top-left (high), big loop on left,
  passes through avatar in the middle (lower on screen),
  exits with curvy waves on the right (also lower).
  Bars travel along the WHOLE path. Output text follows the right half via textPath.
*/
const BV2_VoiceFlow = () => {
  const CYCLE = 22;
  const fullPathRef = React.useRef(null);
  const inPathRef = React.useRef(null);
  const outPathRef = React.useRef(null);
  const [textDur, setTextDur] = React.useState(7);
  const [inDur, setInDur] = React.useState(CYCLE * 0.7);
  const [outDur, setOutDur] = React.useState(CYCLE * 0.3);

  // After mount, measure path lengths and set animation durations so that
  // bars on input and output sub-paths share the SAME pixel speed,
  // and text matches that speed too.
  React.useEffect(() => {
    if (!fullPathRef.current || !inPathRef.current || !outPathRef.current) return;
    const fullLen = fullPathRef.current.getTotalLength();
    const inLen = inPathRef.current.getTotalLength();
    const outLen = outPathRef.current.getTotalLength();
    const speed = fullLen / CYCLE; // px per sec - reference
    setInDur(inLen / speed);
    setOutDur(outLen / speed);
    // Text loop covers half the duplicated content along outPath at the same px/sec speed.
    // Approx: text content visible spans ~outLen worth of curve; one full -50%→0% cycle = outLen of travel.
    setTextDur(outLen / speed);
  }, []);

  // Two bar streams - input (black) on inPath, output (coral) on outPath.
  // Density tuned to feel continuous across the avatar.
  const inputBars = React.useMemo(() => {
    const N = 150;
    return Array.from({ length: N }).map((_, i) => {
      const v = (Math.sin(i * 0.37) * 0.9 + Math.sin(i * 0.81) * 0.7 + Math.sin(i * 1.31) * 0.5 + Math.sin(i * 0.17) * 0.6) * 0.5 + 0.5;
      const h = Math.max(2, Math.min(26, v * 24));
      return { h, t: i / N };
    });
  }, []);

  const outputBars = React.useMemo(() => {
    const N = 70;
    return Array.from({ length: N }).map((_, i) => {
      const v = (Math.sin((i + 31) * 0.37) * 0.9 + Math.sin((i + 31) * 0.81) * 0.7 + Math.sin((i + 31) * 1.31) * 0.5 + Math.sin((i + 31) * 0.17) * 0.6) * 0.5 + 0.5;
      const h = Math.max(2, Math.min(26, v * 24));
      return { h, t: i / N };
    });
  }, []);

  return (
    <section className="bv2-vf" id="voice">
      <p className="eyebrow bv2-vf__eyebrow" style={{textAlign: 'center'}}>How a session feels</p>
      <h2 className="bv2-h2 bv2-vf__h">Talk like you would<br/>to <em>a real tutor.</em></h2>

      <div className="bv2-vf__stage">
        <svg className="bv2-vf__svg" viewBox="0 0 1400 560" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
          <defs>
            {/*
              ONE continuous path - input loop on left, through avatar at (700, 360),
              single gentle bezier out the right side, ending lower around y=440.
            */}
            <path ref={fullPathRef} id="bv2vfPath"
              d="M -80 80
                 C 40 100, 110 150, 170 220
                 C 240 310, 360 350, 430 280
                 C 510 200, 430 70, 290 90
                 C 100 120, 60 350, 230 410
                 C 380 460, 540 400, 640 380
                 C 670 372, 690 368, 700 360
                 C 940 320, 1240 480, 1480 440"
              fill="none" />

            {/* Input sub-path (black bars travel here) - full path up to avatar */}
            <path ref={inPathRef} id="bv2vfInPath"
              d="M -80 80
                 C 40 100, 110 150, 170 220
                 C 240 310, 360 350, 430 280
                 C 510 200, 430 70, 290 90
                 C 100 120, 60 350, 230 410
                 C 380 460, 540 400, 640 380
                 C 670 372, 690 368, 700 360"
              fill="none" />

            {/* Output sub-path (coral bars + text travel here) */}
            <path ref={outPathRef} id="bv2vfOutPath"
              d="M 700 360
                 C 940 320, 1240 480, 1480 440"
              fill="none" />
          </defs>

          {/* INPUT BARS - black, on input sub-path */}
          {inputBars.map((b, i) => (
            <line key={`ib-${i}`} x1="0" y1={-b.h} x2="0" y2={b.h}
              stroke="#1a1814" strokeWidth="3" strokeLinecap="round">
              <animateMotion dur={`${inDur}s`} repeatCount="indefinite" rotate="auto" begin={`${-b.t * inDur}s`}>
                <mpath href="#bv2vfInPath" />
              </animateMotion>
            </line>
          ))}

          {/* OUTPUT BARS - coral, on output sub-path */}
          {outputBars.map((b, i) => (
            <line key={`ob-${i}`} x1="0" y1={-b.h} x2="0" y2={b.h}
              stroke="#C2563E" strokeWidth="3" strokeLinecap="round">
              <animateMotion dur={`${outDur}s`} repeatCount="indefinite" rotate="auto" begin={`${-b.t * outDur}s`}>
                <mpath href="#bv2vfOutPath" />
              </animateMotion>
            </line>
          ))}

          {/* OUTPUT TEXT - follows the output curve via textPath; icons inline as glyphs.
              Content is duplicated EXACTLY so animating startOffset from -50% to 0% loops seamlessly. */}
          <text className="bv2-vf__pathtxt" dy="110">
            <textPath href="#bv2vfOutPath" startOffset="-50%">
              your setup is right  ✏  but in step 3  ⚛  you flipped a sign  ✏  try again  ⚛  tell me what you get  ✏  good - now factor it out  ⚛  exactly, that's it  ✏  let's check the boundary case  ⚛  notice the symmetry here  ✏  perfect, move on  ⚛  remember Ohm's law from yesterday  ✏  this is just like the projectile problem  ⚛  what happens at t equals zero  ✏  draw the free-body diagram first  ⚛  yes, that's the integration constant  ✏  your setup is right  ✏  but in step 3  ⚛  you flipped a sign  ✏  try again  ⚛  tell me what you get  ✏  good - now factor it out  ⚛  exactly, that's it  ✏  let's check the boundary case  ⚛  notice the symmetry here  ✏  perfect, move on  ⚛  remember Ohm's law from yesterday  ✏  this is just like the projectile problem  ⚛  what happens at t equals zero  ✏  draw the free-body diagram first  ⚛  yes, that's the integration constant  ✏ 
              <animate attributeName="startOffset" from="-50%" to="0%" dur={`${textDur}s`} repeatCount="indefinite" />
            </textPath>
          </text>
        </svg>

        <div className="bv2-vf__avatar">
          <img src={VOICE_TUTOR.src} alt={VOICE_TUTOR.name} />
        </div>
      </div>
    </section>
  );
};

/* ---------- Logo wheel (replaces the old text marquee) ---------- */
const BV2_LogoWheel = () => {
  const Logos = () => (
    <>
      <img className="bv2-flogo bv2-flogo--yc" src="assets/logo-yc-clean.png?v=2" alt="Y Combinator" />
      <span className="bv2-flogo__sep">✦</span>
      <img className="bv2-flogo bv2-flogo--pw" src="assets/logo-pw-clean.png?v=2" alt="PhysicsWallah" />
      <span className="bv2-flogo__sep">✦</span>
      <img className="bv2-flogo bv2-flogo--ph" src="assets/logo-ph-clean.png?v=2" alt="Product Hunt" />
      <span className="bv2-flogo__sep">✦</span>
    </>
  );
  return (
    <section className="bv2-wheel">
      <p className="bv2-wheel__label">Featured &amp; mentored by professionals from</p>
      <div className="bv2-wheel__viewport">
        <div className="bv2-wheel__track">
          <div className="bv2-wheel__row"><Logos /></div>
          <div className="bv2-wheel__row" aria-hidden="true"><Logos /></div>
          <div className="bv2-wheel__row" aria-hidden="true"><Logos /></div>
        </div>
      </div>
    </section>
  );
};

/* (Old SVG logo placeholders removed - now using real PNG/WEBP assets in BV2_Featured) */

/* ---------- Marquee ---------- */
const BV2_Marquee = () => (
  <div className="bv2-marquee">
    <div className="bv2-marquee__track">
      {[...Array(2)].map((_, k) => (
        <div className="bv2-marquee__row" key={k}>
          <span>✎ Handwritten notes</span><span>·</span>
          <span>∫ Live equations</span><span>·</span>
          <span>◉ Desmos embeds</span><span>·</span>
          <span>▶ Code-rendered videos</span><span>·</span>
          <span>✦ Knowledge graph</span><span>·</span>
          <span>✑ Now you try</span><span>·</span>
        </div>
      ))}
    </div>
  </div>
);

/* ---------- Tutors ---------- */
const BV2_Tutors = () => {
  const tutors = [
    { src: 'assets/tutor-1.png?v=24', name: 'Mira',   subject: 'Biology · Chemistry',   color: '#F4A38A', tagline: 'Patient. Visual. Sketches every system.' },
    { src: 'assets/tutor-2.png?v=24', name: 'Oliver', subject: 'CS · Logic',            color: '#BFD4B8', tagline: 'Curious. Asks "why?" until it clicks.' },
    { src: 'assets/tutor-3.png?v=24', name: 'Kai',    subject: 'Math · Physics',        color: '#F5E2A8', tagline: 'Calm. Walks you through every step.' },
    { src: 'assets/tutor-4.png?v=24', name: 'Sage',   subject: 'English · Literature',  color: '#E76F51', tagline: 'Warm. Pulls stories from anywhere.' },
  ];
  return (
    <section className="bv2-tutors" id="tutors">
      <p className="eyebrow">Meet the tutors</p>
      <h2 className="bv2-h2">Pick the one you <em>vibe</em> with.</h2>
      <p className="bv2-lede">Four AI tutors. Same brain underneath, different teaching styles. Switch any time - your knowledge graph follows you.</p>
      <div className="bv2-tutors__grid">
        {tutors.map((t, i) => (
          <div className="bv2-tutor" key={i}>
            <div className="bv2-tutor__photo" style={{background: t.color}}>
              <img src={t.src} alt={t.name} />
            </div>
            <div className="bv2-tutor__meta">
              <h3>{t.name} <span className="bv2-tutor__sub">· {t.subject}</span></h3>
              <p>"{t.tagline}"</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

/* ---------- Whiteboard hero (the product) ---------- */
const BV2_Whiteboard = () => (
  <section className="bv2-wb" id="product">
    <div className="bv2-wb__head">
      <p className="eyebrow eyebrow--cream">The product</p>
      <h2 className="bv2-h2 bv2-h2--cream">A page that <em>writes itself.</em></h2>
      <p className="bv2-lede bv2-lede--cream">
        Multi-page, never infinite. Each page is a self-contained lesson. Your tutor writes notes, draws diagrams, embeds graphs, and asks you to solve - all on one surface.
      </p>
    </div>
    <div className="bv2-wb__shot">
      <div className="bv2-wb__chrome">
        <span className="dot dot--coral"/><span className="dot dot--butter"/><span className="dot dot--sage"/>
      </div>
      <img src="assets/whiteboard-demo.png" alt="Clarifyed whiteboard" />
    </div>
    <div className="bv2-wb__feats">
      {[
        { t: 'Handwritten', b: 'Real ink. Real strokes. The AI writes notes the way a teacher would.' },
        { t: 'Live math', b: 'Code-rendered equations that derive themselves in real time.' },
        { t: 'Embedded', b: 'Desmos sliders, graphs, videos and interactives drop in inline.' },
        { t: 'Your turn', b: 'The AI hands you the pen. You solve. It corrects you mid-step.' },
      ].map((f, i) => (
        <div className="bv2-wb__feat" key={i}>
          <span className="bv2-wb__feat-num">0{i+1}</span>
          <h4>{f.t}</h4>
          <p>{f.b}</p>
        </div>
      ))}
    </div>
  </section>
);

/* ---------- How it works ---------- */
const BV2_HowItWorks = () => (
  <section className="bv2-how" id="how">
    <p className="eyebrow">A session, in four beats</p>
    <h2 className="bv2-h2">Teach. Try. Remember. <em>Follow up.</em></h2>
    <div className="bv2-how__steps">
      {[
        { n: '01', t: 'I teach.',     b: 'I write notes, draw a diagram, embed a graph. You watch me think, stroke by stroke.', accent: '#F97316', face: 'assets/tutor-1.png?v=24' },
        { n: '02', t: 'You try.',     b: 'Then I hand you the pen. You solve on the same page. I watch and correct you mid-step - not after.', accent: '#7A9E7E', face: 'assets/tutor-2.png?v=24' },
        { n: '03', t: 'I remember.',  b: 'Tomorrow I won\'t ask "what are we covering?" Your knowledge graph keeps me sharp on what you know.', accent: '#6FA8C9', face: 'assets/tutor-3.png?v=24' },
        { n: '04', t: 'I follow up.', b: 'I drop HW after every session, nudge you when you\'re stuck, and book your next sit-down before you forget.', accent: '#E8C566', face: 'assets/tutor-4.png?v=24' },
      ].map((s, i) => (
        <div className="bv2-how__step" key={i}>
          <div className="bv2-how__face" style={{background: s.accent + '40'}}>
            <img src={s.face} alt="" />
          </div>
          <div className="bv2-how__body">
            <span className="bv2-how__num" style={{color: s.accent}}>{s.n}</span>
            <h3>{s.t}</h3>
            <p>{s.b}</p>
          </div>
        </div>
      ))}
    </div>
  </section>
);

/* ---------- Memory / Always-on tutor ---------- */
const BV2_Memory = () => (
  <section className="bv2-mem" id="memory">
    <div className="bv2-mem__copy">
      <p className="eyebrow">Beyond the whiteboard</p>
      <h2 className="bv2-h2">A tutor that <em>texts</em> you<br/>like a real one would.</h2>
      <p className="bv2-lede">
        Your tutor doesn't disappear when you close the app. It checks in on Discord, Telegram or WhatsApp - assigns homework, follows up on last session's weak spots, and books your next sit-down before you forget.
      </p>
      <ul className="bv2-mem__list">
        <li><span className="bv2-check">✓</span> Auto-assigns homework after every session</li>
        <li><span className="bv2-check">✓</span> Quizzes you on last week's gaps, on chat</li>
        <li><span className="bv2-check">✓</span> Schedules sessions and reminds you on time</li>
        <li><span className="bv2-check">✓</span> Works on Discord, Telegram &amp; WhatsApp</li>
      </ul>
    </div>
    <div className="bv2-mem__viz">
      <BV2_ChatStack />
    </div>
  </section>
);

const BV2_ChatStack = () => {
  const ref = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  // Total messages across all three apps
  const messages = [
    // 0..4 WhatsApp (featured tutor)
    { app: 'wa', side: 'in', text: <>Hey! Quick HW from today - try problems 4 &amp; 7 from the chain rule sheet 📝</> },
    { app: 'wa', side: 'in', text: <>I'll check it tomorrow at 6pm ✨</> },
    { app: 'wa', side: 'out', text: 'ok ill do it after dinner' },
    { app: 'wa', side: 'typing' },
    { app: 'wa', side: 'in', text: <>Perfect 💪 also - locking in <b>Wed 5pm</b> for derivatives. Sound good?</> },
    // 5..6 Telegram
    { app: 'tg', side: 'in', text: <>📊 Last week's quiz · <b>Functions</b></> },
    { app: 'tg', side: 'in', text: <>You missed 1 question. Want me to re-explain the limit definition before Wed?</> },
    { app: 'tg', side: 'out', text: 'yes pls' },
    // 8..9 Discord
    { app: 'dc', side: 'discord', text: <>Pop quiz from last Friday 📚 - was the misconception about <b>∆x → 0</b> vs <b>∆x = 0</b>? React below if you remember!</> },
  ];

  React.useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const rect = ref.current.getBoundingClientRect();
      const vh = window.innerHeight;
      // Start when top hits 80% of viewport, finish when bottom hits 20%
      const start = vh * 0.85;
      const end = -rect.height * 0.4;
      const raw = (start - rect.top) / (start - end);
      const clamped = Math.max(0, Math.min(1, raw));
      setProgress(clamped);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  const visibleCount = Math.floor(progress * (messages.length + 1));

  // Group messages by app
  const wa = messages.map((m, i) => ({...m, i})).filter(m => m.app === 'wa');
  const tg = messages.map((m, i) => ({...m, i})).filter(m => m.app === 'tg');
  const dc = messages.map((m, i) => ({...m, i})).filter(m => m.app === 'dc');

  const isVisible = (i) => i < visibleCount;
  const cardActive = (msgs) => msgs.some(m => isVisible(m.i));

  return (
    <div className="bv2-chats" ref={ref}>
      {/* WhatsApp */}
      <div className={`bv2-chat bv2-chat--wa ${cardActive(wa) ? 'is-active' : ''}`}>
        <div className="bv2-chat__head">
          <span className="bv2-chat__app bv2-chat__app--wa">
            <img src="assets/icon-whatsapp.png" alt="WhatsApp" />
          </span>
        </div>
        <div className="bv2-chat__body">
          {wa.map(m => (
            <div
              key={m.i}
              className={`bv2-bubble bv2-bubble--${m.side === 'typing' ? 'typing' : m.side} ${isVisible(m.i) ? 'is-in' : ''}`}
            >
              {m.side === 'typing' ? <><span/><span/><span/></> : m.text}
            </div>
          ))}
        </div>
      </div>

      {/* Telegram */}
      <div className={`bv2-chat bv2-chat--tg ${cardActive(tg) ? 'is-active' : ''}`}>
        <div className="bv2-chat__head">
          <span className="bv2-chat__app bv2-chat__app--tg">
            <img src="assets/icon-telegram.png" alt="Telegram" />
          </span>
        </div>
        <div className="bv2-chat__body">
          {tg.map(m => (
            <div
              key={m.i}
              className={`bv2-bubble bv2-bubble--tg-${m.side} ${isVisible(m.i) ? 'is-in' : ''}`}
            >
              {m.text}
            </div>
          ))}
        </div>
      </div>

      {/* Discord */}
      <div className={`bv2-chat bv2-chat--dc ${cardActive(dc) ? 'is-active' : ''}`}>
        <div className="bv2-chat__head bv2-chat__head--dc">
          <span className="bv2-chat__app bv2-chat__app--dc">
            <img src="assets/icon-discord.png" alt="Discord" />
          </span>
        </div>
        <div className="bv2-chat__body bv2-chat__body--dc">
          {dc.map(m => (
            <div key={m.i} className={`bv2-discord ${isVisible(m.i) ? 'is-in' : ''}`}>
              <div className="bv2-discord__row">
                <div className="bv2-discord__avatar"><img src={FEATURED.src} alt={FEATURED.name} /></div>
                <div className="bv2-discord__content">
                  <span className="bv2-discord__name">{FEATURED.name} <span className="bv2-discord__bot">BOT</span> <span className="bv2-discord__time">Today at 4:12 PM</span></span>
                  <p>{m.text}</p>
                  <div className="bv2-discord__embed">
                    <div className="bv2-discord__embedTitle">Last session recap</div>
                    <div className="bv2-discord__embedBody">Calculus · Tangent Lines · 87% mastered</div>
                  </div>
                  <div className="bv2-discord__reacts">
                    <span>✅ 1</span><span>🤔 0</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Floating sparkles */}
      <span className="bv2-spark bv2-spark--1">✦</span>
      <span className="bv2-spark bv2-spark--2">✶</span>
      <span className="bv2-spark bv2-spark--3">✦</span>
    </div>
  );
};

/* ---------- Subjects ---------- */
const BV2_Subjects = () => (
  <section className="bv2-subj" id="subjects">
    <p className="eyebrow">Subjects we cover</p>
    <h2 className="bv2-h2">Anything you can teach<br/>on a <em>real</em> whiteboard.</h2>
    <div className="bv2-subj__grid">
      {/* Icons from Lucide (lucide.dev) - MIT */}
      {[
        {name:'Mathematics', bg:'#F4A38A', desc: <>Algebra → multivariable.<br/>Proofs that actually click.</>, icon: (
          <svg viewBox="0 0 24 24" fill="none" stroke="#1a1814" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M18 7V4H6l6 8-6 8h12v-3"/>
          </svg>
        )},
        {name:'Physics', bg:'#F5E2A8', desc: <>Mechanics → quantum.<br/>Derived, not memorized.</>, icon: (
          <svg viewBox="0 0 24 24" fill="none" stroke="#1a1814" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="1"/>
            <path d="M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z"/>
            <path d="M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z"/>
          </svg>
        )},
        {name:'Chemistry', bg:'#BFD4B8', desc: <>Organic, inorganic, phys.<br/>Mechanisms over answers.</>, icon: (
          <svg viewBox="0 0 24 24" fill="none" stroke="#1a1814" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"/>
            <path d="M8.5 2h7"/>
            <path d="M7 16h10"/>
          </svg>
        )},
        {name:'Biology', bg:'#E8C566', desc: <>Cells → ecosystems.<br/>Pathways drawn with you.</>, icon: (
          <svg viewBox="0 0 24 24" fill="none" stroke="#1a1814" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.2 2.96a1 1 0 0 1 1.8.55c0 7.51-3.84 14.49-9 17.49Z"/>
            <path d="M2 21c0-3 1.85-5.36 5.08-6"/>
          </svg>
        )},
        {name:'Computer Science', bg:'#BBD4E2', desc: <>Algorithms · DS · ML basics.<br/>Trace it before you type.</>, icon: (
          <svg viewBox="0 0 24 24" fill="none" stroke="#1a1814" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="m18 16 4-4-4-4"/>
            <path d="m6 8-4 4 4 4"/>
            <path d="m14.5 4-5 16"/>
          </svg>
        )},
        {name:'English', bg:'#F4A38A', desc: <>Lit · comp · rhetoric.<br/>Close-read, then write better.</>, icon: (
          <svg viewBox="0 0 24 24" fill="none" stroke="#1a1814" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 7v14"/>
            <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>
          </svg>
        )},
      ].map((s, i) => (
        <div className="bv2-subj__tile" key={i}>
          <span className="bv2-subj__icon" style={{background: s.bg}}>{s.icon}</span>
          <h4>{s.name}</h4>
          <p>{s.desc}</p>
        </div>
      ))}
    </div>
  </section>
);

/* ---------- Videos ---------- */
/* ---------- Accuracy ---------- */
const BV2_Accuracy = () => (
  <section className="bv2-accuracy" id="accuracy">
    <div className="bv2-accuracy__copy">
      <p className="eyebrow">Accuracy, not approximation</p>
      <h2 className="bv2-h2">No hallucinations.<br/>Every answer <em>verified.</em></h2>
      <p className="bv2-lede">Every explanation is checked against a custom corpus of real exam syllabi - past papers, official prep materials, and curriculum bibles. If the answer doesn't match the source, your child never sees it.</p>
      <p className="bv2-accuracy__caption">Trained &amp; verified against:</p>
      <div className="bv2-accuracy__exams">
        <span className="bv2-exam-chip">SAT</span>
        <span className="bv2-exam-chip">ESAT</span>
        <span className="bv2-exam-chip">AP</span>
        <span className="bv2-exam-chip">ACT</span>
        <span className="bv2-exam-chip">TOEFL</span>
        <span className="bv2-exam-chip">Cambridge</span>
        <span className="bv2-exam-chip">NCERT</span>
        <span className="bv2-exam-chip bv2-exam-chip--more">+ more</span>
      </div>
    </div>
    <div className="bv2-accuracy__stack">
      <div className="bv2-accuracy__fade bv2-accuracy__fade--top"></div>
      <div className="bv2-accuracy__fade bv2-accuracy__fade--bot"></div>
      <div className="bv2-accuracy__scroll">
        {[
          {tag: 'SAT · Past Paper', title: 'Reading & Writing - 2024', meta: '1,420 problems indexed', verified: true, rot: -1.6},
          {tag: 'College Board', title: 'AP Physics C - Mechanics', meta: '980 problems · cross-referenced', verified: true, rot: 2.1},
          {tag: 'NCERT · Class 12', title: 'Mathematics - Calculus', meta: '2,100 problems indexed', verified: true, rot: -1.2},
          {tag: 'Cambridge IGCSE', title: 'Chemistry - Organic', meta: '720 problems · verified', verified: true, rot: 1.8},
          {tag: 'JEE Advanced', title: 'Physics - Rotational Mechanics', meta: '540 problems indexed', verified: true, rot: -2.3},
          {tag: 'ACT · Past Paper', title: 'Math Section - 2023', meta: '1,160 problems · cross-referenced', verified: true, rot: 1.4},
          {tag: 'AP', title: 'Calculus BC - Series & Sequences', meta: '610 problems indexed', verified: true, rot: -0.9},
          {tag: 'TOEFL iBT', title: 'Reading Comprehension', meta: '480 passages · verified', verified: true, rot: 2.6},
          {tag: 'NEET', title: 'Biology - Genetics', meta: '890 problems indexed', verified: true, rot: -1.7},
          {tag: 'IB Diploma', title: 'Mathematics HL - Vectors', meta: '420 problems · verified', verified: true, rot: 1.1},
        ].concat([
          {tag: 'SAT · Past Paper', title: 'Reading & Writing - 2024', meta: '1,420 problems indexed', verified: true, rot: -1.6},
          {tag: 'College Board', title: 'AP Physics C - Mechanics', meta: '980 problems · cross-referenced', verified: true, rot: 2.1},
          {tag: 'NCERT · Class 12', title: 'Mathematics - Calculus', meta: '2,100 problems indexed', verified: true, rot: -1.2},
          {tag: 'Cambridge IGCSE', title: 'Chemistry - Organic', meta: '720 problems · verified', verified: true, rot: 1.8},
          {tag: 'JEE Advanced', title: 'Physics - Rotational Mechanics', meta: '540 problems indexed', verified: true, rot: -2.3},
        ]).map((c, i) => (
          <div key={i} className="bv2-accuracy__card" style={{transform: `rotate(${c.rot}deg)`}}>
            <div className="bv2-accuracy__paperhead">
              <span className="bv2-accuracy__papertag">{c.tag}</span>
              {c.verified && <span className="bv2-accuracy__verified">✓ verified</span>}
            </div>
            <span className="bv2-accuracy__paperttl">{c.title}</span>
            <div className="bv2-accuracy__lines">
              <span></span><span></span><span style={{width:'72%'}}></span>
            </div>
            <div className="bv2-accuracy__meta">
              <span>{c.meta}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- Parents ---------- */
const BV2_Parents = () => (
  <section className="bv2-parents" id="parents">
    <div className="bv2-parents__copy">
      <p className="eyebrow">For parents</p>
      <h2 className="bv2-h2">You'll see the <em>lesson</em>.<br/>Not just the score.</h2>
      <p className="bv2-lede">Every session generates a textbook-quality PDF - the teaching, the work, the corrections. You see exactly what your child learned, and where they got stuck.</p>
      <a className="btn btn-dark" href="waitlist.html?role=parent">Sign up as a parent →</a>
    </div>
    <div className="bv2-parents__pdfs">
      <div className="bv2-pdfwidget bv2-pdfwidget--1">
        <div className="bv2-pdfwidget__icon">
          <svg viewBox="0 0 28 32" width="28" height="32"><path d="M2 2h16l8 8v20H2z" fill="#fff" stroke="#C2563E" strokeWidth="1.6"/><path d="M18 2v8h8" fill="none" stroke="#C2563E" strokeWidth="1.6"/><text x="14" y="24" textAnchor="middle" fontSize="7" fontWeight="700" fill="#C2563E" fontFamily="system-ui">PDF</text></svg>
        </div>
        <div className="bv2-pdfwidget__meta">
          <div className="bv2-pdfwidget__title">Calculus - Tangent Lines.pdf</div>
          <div className="bv2-pdfwidget__sub">12 pages · 1.4 MB</div>
        </div>
        <div className="bv2-pdfwidget__dl">↓</div>
      </div>
      <div className="bv2-pdfwidget bv2-pdfwidget--2">
        <div className="bv2-pdfwidget__icon">
          <svg viewBox="0 0 28 32" width="28" height="32"><path d="M2 2h16l8 8v20H2z" fill="#fff" stroke="#C2563E" strokeWidth="1.6"/><path d="M18 2v8h8" fill="none" stroke="#C2563E" strokeWidth="1.6"/><text x="14" y="24" textAnchor="middle" fontSize="7" fontWeight="700" fill="#C2563E" fontFamily="system-ui">PDF</text></svg>
        </div>
        <div className="bv2-pdfwidget__meta">
          <div className="bv2-pdfwidget__title">Newton's Laws - Friction.pdf</div>
          <div className="bv2-pdfwidget__sub">9 pages · 1.1 MB · today, 4:12 pm</div>
        </div>
        <div className="bv2-pdfwidget__dl">↓</div>
      </div>
      <div className="bv2-pdfwidget bv2-pdfwidget--3">
        <div className="bv2-pdfwidget__icon">
          <svg viewBox="0 0 28 32" width="28" height="32"><path d="M2 2h16l8 8v20H2z" fill="#fff" stroke="#C2563E" strokeWidth="1.6"/><path d="M18 2v8h8" fill="none" stroke="#C2563E" strokeWidth="1.6"/><text x="14" y="24" textAnchor="middle" fontSize="7" fontWeight="700" fill="#C2563E" fontFamily="system-ui">PDF</text></svg>
        </div>
        <div className="bv2-pdfwidget__meta">
          <div className="bv2-pdfwidget__title">Stoichiometry - Mole Ratios.pdf</div>
          <div className="bv2-pdfwidget__sub">14 pages · 1.7 MB · yesterday</div>
        </div>
        <div className="bv2-pdfwidget__dl">↓</div>
      </div>
      <div className="bv2-pdfwidget bv2-pdfwidget--4">
        <div className="bv2-pdfwidget__icon">
          <svg viewBox="0 0 28 32" width="28" height="32"><path d="M2 2h16l8 8v20H2z" fill="#fff" stroke="#C2563E" strokeWidth="1.6"/><path d="M18 2v8h8" fill="none" stroke="#C2563E" strokeWidth="1.6"/><text x="14" y="24" textAnchor="middle" fontSize="7" fontWeight="700" fill="#C2563E" fontFamily="system-ui">PDF</text></svg>
        </div>
        <div className="bv2-pdfwidget__meta">
          <div className="bv2-pdfwidget__title">Essay Feedback - Macbeth.pdf</div>
          <div className="bv2-pdfwidget__sub">7 pages · 0.9 MB · 2 days ago</div>
        </div>
        <div className="bv2-pdfwidget__dl">↓</div>
      </div>
      <div className="bv2-pdfwidget bv2-pdfwidget--5">
        <div className="bv2-pdfwidget__icon">
          <svg viewBox="0 0 28 32" width="28" height="32"><path d="M2 2h16l8 8v20H2z" fill="#fff" stroke="#C2563E" strokeWidth="1.6"/><path d="M18 2v8h8" fill="none" stroke="#C2563E" strokeWidth="1.6"/><text x="14" y="24" textAnchor="middle" fontSize="7" fontWeight="700" fill="#C2563E" fontFamily="system-ui">PDF</text></svg>
        </div>
        <div className="bv2-pdfwidget__meta">
          <div className="bv2-pdfwidget__title">Cell Biology - Mitosis.pdf</div>
          <div className="bv2-pdfwidget__sub">11 pages · 1.3 MB · 3 days ago</div>
        </div>
        <div className="bv2-pdfwidget__dl">↓</div>
      </div>
    </div>
  </section>
);

/* ---------- Mentors ---------- */
const BV2_Mentors = () => (
  <section className="bv2-mentors">
    <p className="eyebrow">Built by</p>
    <h2 className="bv2-h2">Made by <em>teenagers</em><br/>for teenagers.</h2>
    <p className="bv2-lede">Built by two teenage founders, mentored by senior AI/ML leaders from India's largest edtechs.</p>
    <div className="bv2-mentors__row">
      <div className="bv2-mentors__avs">
        <span style={{background:'#F4A38A'}}>VNP</span>
        <span style={{background:'#BFD4B8'}}>AM</span>
        <span style={{background:'#F5E2A8'}}>SV</span>
        <span style={{background:'#BBD4E2'}}>VG</span>
      </div>
      <a className="btn btn-dark" href="https://teenage.works" target="_blank" rel="noopener noreferrer">About us →</a>
    </div>
  </section>
);

/* ---------- FAQ ---------- */
const BV2_FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: "Is Clarifyed.ai safe for my child?",
      a: "Yes. Clarifyed.ai is end-to-end encrypted, never sold to advertisers, and never used to train external AI models. Parents have full visibility into the knowledge graph at any time, can see every lesson PDF, and can pause or delete the account immediately. We comply with COPPA in the US, GDPR-K in the EU, and India's DPDP Act for minors. The student experience has zero ads, zero behavioral profiling, and no third-party trackers."
    },
    {
      q: "How is Clarifyed different from ChatGPT, Khanmigo, Photomath, Socratic, or Brainly?",
      a: "Every AI tutor on the market today - ChatGPT Study Mode, Khan Academy's Khanmigo, Photomath, Socratic by Google, Brainly, Quizlet AI - is fundamentally a chat box. The student types a question, the AI types back a paragraph. Clarifyed has no chat. Instead, the AI teaches on a multi-page digital whiteboard: writing notes by hand stroke by stroke, drawing diagrams, embedding Desmos calculators and Manim-generated explainer videos, then handing the student the pen to solve on the same canvas. The AI watches you write and corrects you mid-step, not after. It also remembers everything you've ever learned through a persistent knowledge graph - something no chatbot tutor offers. The result is sitting next to a brilliant private tutor at a giant whiteboard, not texting a bot."
    },
    {
      q: "Will Clarifyed.ai replace my school or my regular tutor?",
      a: "No - it complements both. Clarifyed is the patient, brilliant, always-available tutor your child has access to whenever they need help. Stuck on calculus homework at 11pm? Cramming for the SAT, ACT, AP exams, JEE, NEET, IB Diploma, NCERT, ESAT, or Cambridge IGCSE? Want to actually understand why a chemistry mechanism works the way it does? Clarifyed teaches you, watches you solve, and tracks what you really understand. School covers breadth; Clarifyed delivers the patient depth that's impossible at a 30-to-1 student-teacher ratio."
    },
    {
      q: "What ages, grade levels, and exam boards does Clarifyed.ai support?",
      a: "Clarifyed is designed for ages 12-22, but the whiteboard format works for anyone who wants to actively learn rather than passively read. The tutor is verified against syllabi from major standardized tests and curricula: SAT, ESAT, AP (every subject), ACT, TOEFL, Cambridge IGCSE, NCERT (Classes 9-12), JEE Main, JEE Advanced, NEET, and IB Diploma. If your exam syllabus has past papers, we've cross-referenced our explanations against them so the answer style matches what graders expect."
    },
    {
      q: "What subjects does Clarifyed.ai teach?",
      a: "Mathematics from algebra and geometry through multivariable calculus, linear algebra, and discrete math; Physics from mechanics and electromagnetism through quantum mechanics; Chemistry covering organic, inorganic, and physical; Biology from cells and genetics through systems and ecology; Computer Science covering algorithms, data structures, and machine learning basics; English including literature, composition, and rhetoric. Four AI tutors are available - Mira (Biology and Chemistry), Oliver (CS and Logic), Kai (Math and Physics), and Sage (English and Literature) - and your knowledge graph follows you when you switch between them."
    },
    {
      q: "How much does Clarifyed.ai cost? Is there a free version?",
      a: "The free tier is genuinely generous and never expires - no per-message limits, no daily quotas, no nag screens. Every student gets the full Socratic teaching experience on free. Paid plans unlock richer modalities such as on-demand Manim explainer videos (5-6 minute videos auto-generated in about 3 minutes), longer collaboration sessions, and more lesson PDFs. Economics are invisible to the student - the tutor just picks the right tool for the moment."
    },
    {
      q: "How does Clarifyed.ai's knowledge graph work?",
      a: "Every student has a persistent knowledge graph that tracks every topic, formula, derivation, misconception, and confidence level - built passively from every interaction. The student never does anything extra. The AI uses it to check prerequisites before teaching new material (no jumping into projectile motion if vectors aren't solid), to weave spaced repetition into lessons naturally, to reference past learning ('remember when you derived this formula last Tuesday?'), and to proactively address misconceptions whenever related topics come up. After months of use, the graph becomes a complete map of what you know - and switching to another platform means starting over with a tutor that doesn't know you."
    },
    {
      q: "Is Clarifyed.ai accurate? Does it hallucinate like other AI tutors?",
      a: "Clarifyed is verified against a custom corpus of real exam syllabi - past papers, official prep materials, and curriculum bibles for SAT, AP, ACT, NCERT, JEE, NEET, IB, Cambridge IGCSE, and more. Every explanation is checked against this source corpus before it reaches a student. If the answer doesn't match the source, your child never sees it. Videos are generated using coding models that write Manim scripts (not video diffusion models), so every equation, animation, and visual is mathematically accurate and fully controllable - no shimmering text, no garbled formulas, no fake numbers."
    },
    {
      q: "Can I work on Clarifyed.ai with friends or in a study group?",
      a: "Yes. Students can invite friends to the same whiteboard notebook. Everyone writes and solves on the same pages while the AI teaches and observes all participants. Because the AI has access to each participant's knowledge graph, it can subtly direct stronger students to teach weaker ones on specific topics - if one student understands derivatives but struggles with integrals, and the other is the opposite, the AI nudges them to help each other. There's also a Meeting Mode for virtual study sessions with full AI voice moderation. After every session, a textbook-quality PDF is auto-generated from all the work."
    },
    {
      q: "Does Clarifyed.ai work with YouTube videos and PDF textbooks?",
      a: "Yes. Students can watch YouTube videos inside the app, pause at any point, and ask the AI about what was just discussed - the AI uses the video's context plus the student's knowledge graph to give targeted help on the whiteboard. The same applies to PDFs: open any textbook or problem set in-app, and the AI teaches alongside the document, working out problems and explaining sections directly on the whiteboard."
    },
    {
      q: "What devices does Clarifyed.ai work on?",
      a: "Clarifyed runs in any modern browser - Chrome, Safari, Edge, Firefox - on laptops, desktops, iPads, Chromebooks, and Android tablets. It's best with a stylus on a tablet, but mouse and trackpad work fine. Beyond the app itself, your tutor stays with you on Discord, Telegram, and WhatsApp - assigning homework after sessions, checking in when you're stuck, and booking your next sit-down before you forget."
    },
    {
      q: "Can students use Clarifyed.ai to cheat on graded exams?",
      a: "No, and we actively design against it. Clarifyed corrects you mid-step instead of handing you the final answer, so the value is in the understanding, not the output. Our acceptable-use terms prohibit using Clarifyed on any graded exam, certification, or interview where AI assistance is forbidden by the testing body or your institution. Parents see every PDF and the full knowledge graph - so misuse is visible, not hidden."
    },
  ];
  return (
    <section className="bv2-faq" id="faq">
      <p className="eyebrow">Common questions</p>
      <h2 className="bv2-h2">Quick <em>answers.</em></h2>
      <div className="bv2-faq__list">
        {items.map((it, i) => {
          const slug = `faq-${i + 1}`;
          return (
            <div key={i}
                 id={slug}
                 className={`bv2-faq__item ${open === i ? 'open' : ''}`}
                 onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="bv2-faq__q">
                <span>{it.q}</span>
                <span className="bv2-faq__toggle">{open === i ? '−' : '+'}</span>
              </div>
              <p className="bv2-faq__a">{it.a}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
};

/* ---------- CTA ---------- */
const BV2_CTA = () => (
  <section className="bv2-cta" id="cta">
    <div className="bv2-cta__sun" />
    <div className="bv2-cta__chars">
      <img src="assets/tutor-1.png?v=24" alt="" style={{transform: 'rotate(-6deg)'}}/>
      <img src="assets/tutor-2.png?v=24" alt="" style={{transform: 'rotate(4deg)'}}/>
      <img src="assets/tutor-3.png?v=24" alt="" style={{transform: 'rotate(-3deg)'}}/>
      <img src="assets/tutor-4.png?v=24" alt="" style={{transform: 'rotate(7deg)'}}/>
    </div>
    <h2 className="bv2-cta__title">Ready to <em>meet</em><br/>your tutor?</h2>
    <p className="bv2-cta__sub">First lesson is free. No credit card. No chatbot.</p>
    <div className="bv2-cta__buttons">
      <a className="btn btn-primary" href="waitlist.html?role=student">I'm a student →</a>
      <a className="btn btn-ghost" href="waitlist.html?role=parent">I'm a parent →</a>
    </div>
  </section>
);

/* ---------- Footer ---------- */
const BV2_Footer = () => {
  const socials = [
    { name: 'Discord', url: 'https://discord.gg/u4NeK7kan', icon: (
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19.27 5.33A18.6 18.6 0 0 0 14.6 4l-.21.42a14.4 14.4 0 0 1 4.66 1.5 16.1 16.1 0 0 0-13.6 0A14.4 14.4 0 0 1 9.61 4.4L9.4 4a18.6 18.6 0 0 0-4.67 1.33C2.06 10.5 1.2 15.55 1.62 20.5a18.7 18.7 0 0 0 5.7 2.92l1.16-1.6a12 12 0 0 1-1.85-.9c.16-.12.31-.24.46-.36a13.4 13.4 0 0 0 11.82 0c.15.12.3.24.46.36-.6.36-1.22.66-1.86.9l1.16 1.6a18.7 18.7 0 0 0 5.7-2.92c.5-5.74-.83-10.74-3.9-15.17ZM8.52 17.13c-1.13 0-2.06-1.04-2.06-2.32s.91-2.33 2.06-2.33 2.08 1.05 2.06 2.33c0 1.28-.92 2.32-2.06 2.32Zm6.96 0c-1.13 0-2.06-1.04-2.06-2.32s.91-2.33 2.06-2.33 2.08 1.05 2.06 2.33c0 1.28-.92 2.32-2.06 2.32Z"/></svg>
    )},
    { name: 'Instagram', url: 'https://instagram.com/clarifyed.ai', icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" stroke="none"/></svg>
    )},
    { name: 'LinkedIn', url: 'https://linkedin.com/company/teenageworks', icon: (
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5.001 2.5 2.5 0 0 1 0-5.001ZM3 9.5h4V21H3V9.5Zm6.5 0H13v1.6c.5-.9 1.7-1.9 3.6-1.9 3.8 0 4.5 2.5 4.5 5.7V21h-4v-5.6c0-1.3 0-3-1.9-3s-2.2 1.4-2.2 2.9V21h-4V9.5Z"/></svg>
    )},
    { name: 'X', url: 'https://x.com/teenage_works', icon: (
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.4 3h3l-6.6 7.6L21.5 21h-6l-4.7-6-5.4 6H2.4l7-8L2 3h6.1l4.3 5.6L17.4 3Zm-1 16.2h1.7L7.7 4.7H5.9l10.5 14.5Z"/></svg>
    )},
    { name: 'Product Hunt', url: 'https://www.producthunt.com/@teenage_works', icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.5 7.5h4a3 3 0 0 1 0 6H9.5V17m0-3.5V7.5"/></svg>
    )},
  ];

  const explore = [
    { label: 'How it works',   href: '#how' },
    { label: 'Meet the tutors', href: '#tutors' },
    { label: 'The whiteboard', href: '#product' },
    { label: 'Always-on tutor', href: '#memory' },
    { label: 'Subjects',       href: '#subjects' },
  ];

  const moreLinks = [
    { label: 'Accuracy',     href: '#accuracy' },
    { label: 'For parents',  href: '#parents' },
    { label: 'FAQ',          href: '#faq' },
    { label: 'Join the waitlist', href: 'waitlist.html' },
    { label: '↑ Back to top', href: '#top' },
  ];

  return (
    <footer className="bv2-footer">
      <div className="bv2-footer__top">
        <div className="bv2-footer__brand">
          <img src="assets/logo-white.png" alt="Clarifyed" className="bv2-footer__logo" />
          <p className="bv2-footer__tag">The whiteboard tutor for the next generation of learners.</p>
          <a className="bv2-footer__email" href="mailto:hello@clarifyed.ai">hello@clarifyed.ai</a>
          <div className="bv2-footer__socials" aria-label="Social links">
            {socials.map(s => (
              <a key={s.name} href={s.url} target="_blank" rel="noopener noreferrer" aria-label={s.name} title={s.name}>
                {s.icon}
              </a>
            ))}
          </div>
          <address className="bv2-footer__address">
            <strong>Teenage Works Private Limited</strong>
            C 38-39, Awfis, 1st Floor, Parinee Crescenzo,<br/>
            G-Block BKC, Bandra Kurla Complex,<br/>
            Bandra East, Mumbai, Maharashtra - 400051, India.
          </address>
        </div>
        <div className="bv2-footer__cols">
          <div>
            <p className="eyebrow">Explore</p>
            {explore.map(x => <a key={x.href} href={x.href}>{x.label}</a>)}
          </div>
          <div>
            <p className="eyebrow">More</p>
            {moreLinks.map(x => <a key={x.href} href={x.href}>{x.label}</a>)}
          </div>
          <div>
            <p className="eyebrow">Legal</p>
            <a href="terms.html#terms">Terms of Service</a>
            <a href="terms.html#privacy">Privacy Policy</a>
            <a href="mailto:hello@clarifyed.ai">Contact us</a>
          </div>
        </div>
      </div>
      <div className="bv2-footer__bottom">
        <p>© 2026 Teenage Works Private Limited · Made with curiosity and being rebels against mugging up concepts</p>
        <a className="bv2-footer__tw" href="https://teenage.works" target="_blank" rel="noopener noreferrer" aria-label="Teenage Works">
          <span>Quality product by</span>
          <img src="https://teenage.works/logo.png" alt="Teenage Works" />
        </a>
      </div>
    </footer>
  );
};