// Additional pages: AI Tools Index, Pricing, Blog, State Laws, Compare, About, Contact, Legal

// ============ AI TOOLS INDEX ============
const AIToolsIndexPage = () => {
  const tools = [
  ['Personalized Learning Plans', 'Create unique plans based on learner needs', 'Planning', 'target', 'green'],
  ['Lecture Scripts', 'Generate comprehensive lecture scripts', 'Content', 'messageCircle', 'purple'],
  ['Creative Stories', 'Generate stories with rich characters', 'Content', 'heart', 'teal'],
  ['Essay Grading', 'Grade essays on grammar and coherence', 'Assessment', 'pencil', 'pink'],
  ['Course Outline Design', 'Design engaging course structures', 'Planning', 'layers', 'purple'],
  ['Lesson Plan Builder', 'Build effective and engaging lessons', 'Planning', 'bookOpen', 'orange'],
  ['Exams and Quizzes', 'Generate questions aligned to objectives', 'Assessment', 'clipboard', 'green'],
  ['IEP Plans', 'Create individualized education plans', 'Planning', 'brain', 'purple'],
  ['Homework Creator', 'Create assignments for any objective', 'Content', 'file', 'teal'],
  ['Multiple Choice', 'Generate MC questions with explanations', 'Assessment', 'check', 'pink'],
  ['Math Problems', 'Differentiated math at any grade', 'Content', 'zap', 'blue'],
  ['Syllabi', 'Professional syllabi in minutes', 'Planning', 'document', 'orange'],
  ['Worksheets', 'Print-ready worksheets', 'Content', 'edit', 'pink'],
  ['Study Guides', 'Test-ready study guides', 'Content', 'target', 'green'],
  ['Differentiation Tool', 'One lesson, multiple grade levels', 'Planning', 'layers', 'purple'],
  ['Summaries', 'Summarize any text', 'Content', 'document', 'blue'],
  ['Games & Manipulatives', 'Printable educational games', 'Content', 'gamepad', 'orange'],
  ['Flashcards', 'Custom flashcard sets', 'Content', 'bookOpen', 'blue'],
  ['Correspondence', 'Parent-teacher letters', 'Admin', 'mail', 'purple'],
  ['State Documents', 'State-specific legal forms', 'Admin', 'shield', 'green']];

  return (
    <PageShell currentPage="ai-tools">
      <section style={{ paddingTop: 40, paddingBottom: 40 }}>
        <div className="container">
          <Breadcrumbs items={[{ label: 'AI Tools' }]} />
          <div style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto 48px' }} className="reveal">
            <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
              <span className="gradient-text" style={{ fontWeight: 700 }}>✨ AI-powered</span>
            </div>
            <h1 style={{ fontSize: 'clamp(40px, 6vw, 68px)', lineHeight: 1.05, marginBottom: 20 }}>
              Every generator you need. <span className="gradient-text">Included.</span>
            </h1>
            <p style={{ fontSize: 19, color: 'var(--text-secondary)' }}>
              20+ AI tools, all unlocked with Pro. No extra add-ons.
            </p>
          </div>
          <div className="grid grid-3 reveal">
            {tools.map(([name, desc, cat, icon, color], i) =>
            <div key={i} className="card" style={{ padding: 0, overflow: 'hidden' }}>
                <div style={{
                height: 100,
                background: `linear-gradient(135deg, var(--${color === 'blue' ? 'primary-blue' : color === 'purple' ? 'primary-purple' : color === 'pink' ? 'primary-pink' : color === 'green' ? 'success-green' : color === 'orange' ? 'warning-orange' : 'primary-blue'}), var(--primary-pink))`,
                display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>
                  <div style={{ background: 'rgba(255,255,255,0.2)', borderRadius: 12, padding: 14, backdropFilter: 'blur(8px)' }}>
                    <Icon name={icon} size={28} style={{ color: 'white' }} />
                  </div>
                </div>
                <div style={{ padding: 20 }}>
                  <h3 style={{ fontSize: 17, marginBottom: 6 }}>{name}</h3>
                  <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 12, lineHeight: 1.5, minHeight: 38 }}>{desc}</p>
                  <span className="badge badge-purple">{cat}</span>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
      <section style={{ background: 'var(--signature-gradient)', color: 'white', textAlign: 'center' }}>
        <div className="container">
          <h2 style={{ color: 'white', fontSize: 'clamp(32px, 5vw, 52px)', marginBottom: 16 }}>All 20+ tools. Free to start.</h2>
          <a href="https://app.getclassgenie.com/pricing" className="btn btn-white" style={{ padding: '16px 32px', fontSize: 16, borderRadius: 999, marginTop: 16 }}>
            <span>Start for free</span> <Icon name="arrowRight" size={18} style={{ color: 'var(--primary-purple)' }} />
          </a>
        </div>
      </section>
    </PageShell>);

};

// ============ PRICING PAGE ============
const PricingPage = () =>
<PageShell currentPage="pricing">
    <section style={{ paddingTop: 40 }}>
      <div className="container" style={{ maxWidth: 900 }}>
        <Breadcrumbs items={[{ label: 'Pricing' }]} />
        <div style={{ textAlign: 'center', marginBottom: 48 }} className="reveal">
          <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
            <span>✦</span> Free to start · No card needed
          </div>
          <h1 style={{ fontSize: 'clamp(40px, 6vw, 68px)', marginBottom: 16 }}>
            Start free. <span className="gradient-text">Go Pro when you're ready.</span>
          </h1>
          <p style={{ fontSize: 19, color: 'var(--text-secondary)' }}>No per-student pricing. No add-ons. Your first 14 days include everything in Pro.</p>
        </div>
        <div className="reveal pricing-tiers" style={{ display: 'grid', gap: 24, alignItems: 'stretch' }}>
          <div style={{ background: 'var(--bg-card)', border: '1px solid var(--border-subtle)', borderRadius: 22, padding: '40px 32px', display: 'flex', flexDirection: 'column' }}>
            <h2 style={{ fontSize: 24, marginBottom: 6 }}>Free</h2>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span style={{ fontSize: 56, fontWeight: 800, fontFamily: 'var(--font-display)', lineHeight: 1 }}>$0</span>
            </div>
            <div style={{ fontSize: 14, color: 'var(--text-secondary)', margin: '8px 0 22px' }}>No card required, ever.</div>
            {[
          'Full planner, gradebook, records',
          'Unlimited kids',
          '10 AI generations per month',
          'Core AI tools: lesson plans, worksheets, homework, quizzes',
          'First 14 days include everything in Pro'].
          map((f) =>
          <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 15, padding: '7px 0' }}>
              <Icon name="check" size={18} style={{ color: 'var(--success-green)', flexShrink: 0, marginTop: 2 }} />
              <span>{f}</span>
            </div>
          )}
            <a href="https://app.getclassgenie.com/pricing" className="btn btn-secondary btn-full" style={{ marginTop: 'auto', minHeight: 52 }}>
              Start for free
            </a>
          </div>
          <div style={{ position: 'relative', padding: 3, borderRadius: 24, background: 'var(--signature-gradient)', boxShadow: 'var(--shadow-xl)' }}>
            <div style={{ background: 'var(--bg-card)', borderRadius: 22, padding: '40px 32px', height: '100%', display: 'flex', flexDirection: 'column' }}>
              <div className="badge badge-purple" style={{ marginBottom: 12, alignSelf: 'flex-start' }}>FOUNDING FAMILY</div>
              <h2 style={{ fontSize: 24, marginBottom: 6 }}>Pro</h2>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span className="gradient-text" style={{ fontSize: 64, fontWeight: 800, fontFamily: 'var(--font-display)', lineHeight: 1 }}>$99</span>
                <span style={{ color: 'var(--text-secondary)', fontSize: 18 }}>/year</span>
              </div>
              <div style={{ fontSize: 14, color: 'var(--text-secondary)', margin: '8px 0 2px' }}>Locked in for as long as you stay subscribed.</div>
              <div style={{ fontSize: 14, color: 'var(--text-secondary)', marginBottom: 22 }}>or $16.99 a month</div>
              {[
          'Everything unlocked: all 20 AI tools',
          'Unlimited AI generations',
          'AI grading & feedback',
          'IEP plans, course design, study guides, syllabi',
          'Smart scheduling assistant'].
          map((f) =>
          <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 15, padding: '7px 0' }}>
              <Icon name="check" size={18} style={{ color: 'var(--success-green)', flexShrink: 0, marginTop: 2 }} />
              <span>{f}</span>
            </div>
          )}
              <a href="https://app.getclassgenie.com/pricing" className="btn btn-gradient btn-full" style={{ marginTop: 'auto', minHeight: 56, fontSize: 16 }}>
                Get Pro — $99 a year <Icon name="arrowRight" size={18} />
              </a>
              <div style={{ marginTop: 14, fontSize: 13, color: 'var(--text-secondary)', textAlign: 'center' }}>
                Cancel anytime. Money-back guarantee.
              </div>
            </div>
          </div>
        </div>
        <style>{`@media (min-width: 768px) { .pricing-tiers { grid-template-columns: 1fr 1.15fr; } }`}</style>
        <div style={{ marginTop: 48, textAlign: 'center', color: 'var(--text-secondary)', fontSize: 14 }}>
          Compared to <s>$90/month</s> worth of separate tools. You save ~$900/year.
        </div>
      </div>
    </section>
    <section>
      <div className="container" style={{ maxWidth: 820 }}>
        <div className="section-head"><h2>Pricing FAQs</h2></div>
        {[
      ['Can I start for free?', 'Yes — no credit card required, and your first 14 days include everything in Pro. After that the free plan keeps the full planner, gradebook, records, and 10 AI generations a month.'],
      ['How many students are included?', 'Unlimited. One subscription covers every student on your roster.'],
      ['What\'s the cancellation policy?', 'Cancel anytime from your dashboard. No questions, no retention calls.'],
      ['Do you offer annual plans?', 'Yes — $99 a year, the Founding Family price. It stays locked in for as long as you keep your subscription. Contact us for school and district volume pricing.']].
      map(([q, a], i) =>
      <div key={i} className="card" style={{ marginBottom: 12 }}>
            <h3 style={{ fontSize: 17, marginBottom: 8 }}>{q}</h3>
            <p style={{ color: 'var(--text-secondary)', fontSize: 15 }}>{a}</p>
          </div>
      )}
      </div>
    </section>
  </PageShell>;


// ============ BLOG PAGE ============
const BlogPage = () => {
  // Real published posts only (fake placeholder cards removed 2026-07-18 — no dead links).
  const posts = [
  ['How to Homeschool and Work Full Time: What Actually Works', 'Planning', 'Aug 19, 2026', 'purple', '9 min read', 'Everyone says stricter schedules fix it. They do not. The real fix is removing the invisible admin load — the planning, grading, and record-keeping — so the school day runs without you.', '/blog/how-to-homeschool-and-work-full-time'],
  ['How to Stop Switching Homeschool Curriculum (Finally)', 'Planning', 'Jul 31, 2026', 'purple', '8 min read', 'Stop treating every hard Tuesday as proof you picked the wrong program. The Four-Week Rule that ends curriculum hopping — and how to tell a hard week from a bad fit.', '/blog/stop-switching-homeschool-curriculum'],
  ['What Homeschool Records Do I Need to Keep in Pennsylvania?', 'Pennsylvania', 'Jul 26, 2026', 'purple', '8 min read', 'Act 169 requires four records and a June portfolio review. Exactly what to keep, a ten-minute-a-month system, and how to make the evaluator meeting easy.', '/blog/pennsylvania-homeschool-records'],
  ['California Homeschool Record Keeping Requirements (2026)', 'California', 'Jul 22, 2026', 'purple', '9 min read', 'File the PSA, keep four things, skip the rest. A calm, California-specific checklist from a mom who has actually filed the affidavit.', '/blog/california-homeschool-record-keeping-requirements'],
  ['What Homeschool Records Do I Need to Keep in Texas?', 'Texas', 'Jul 21, 2026', 'purple', '7 min read', 'The state requires nothing — but the right records protect you. What to save, what to skip, and a three-folder system that takes twenty minutes a month.', '/blog/what-homeschool-records-texas'],
  ['How to Make a Homeschool Schedule for Multiple Kids', 'Planning', 'Jul 20, 2026', 'purple', '8 min read', 'A two-layer system: combined subjects for everyone, plus rotating one-on-one blocks that bend when the day falls apart.', '/blog/homeschool-schedule-multiple-kids']];

  return (
    <PageShell currentPage="blog">
      <section style={{ paddingTop: 40, paddingBottom: 60 }}>
        <div className="container">
          <Breadcrumbs items={[{ label: 'Blog' }]} />
          <div style={{ maxWidth: 720, marginBottom: 48 }} className="reveal">
            <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
              <span>📝</span> Field notes from homeschool moms
            </div>
            <h1 style={{ fontSize: 'clamp(40px, 6vw, 64px)', marginBottom: 16 }}>
              The <span className="gradient-text">ClassGenie blog</span>.
            </h1>
            <p style={{ fontSize: 19, color: 'var(--text-secondary)' }}>Practical guides, honest takes, and spreadsheets we've stolen from smarter moms.</p>
          </div>
          {/* Featured post */}
          <a href="/blog/how-to-make-a-homeschool-transcript" className="card card-accent accent-purple" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 0, marginBottom: 32, textDecoration: 'none', color: 'inherit', padding: 0, overflow: 'hidden' }}>
            <img src="/uploads/how-to-make-a-homeschool-transcript.jpg" alt="how to make a homeschool transcript" style={{ width: '100%', height: 'auto', display: 'block' }} />
            <div style={{ padding: 32 }}>
              <span className="badge badge-purple">Featured · High School</span>
              <h2 style={{ fontSize: 28, margin: '12px 0' }}>How to Make a Homeschool Transcript: Step-by-Step</h2>
              <p style={{ color: 'var(--text-secondary)', marginBottom: 16 }}>Credit rules, grading scales, the exact GPA math, and how to count co-ops, labs, and life skills — from a mom who is also the registrar.</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div className="avatar av-purple">LM</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>Laura Marguerite</div>
                  <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Jul 18, 2026 · 9 min read</div>
                </div>
              </div>
            </div>
          </a>
          {posts.length > 0 &&
          <div className="grid grid-3 reveal">
            {posts.map(([title, cat, date, color, time, desc, href], i) => {
              const slug = href.split('/').pop();
              return (
              <a key={i} href={href} className={`card card-accent accent-${color}`} style={{ textDecoration: 'none', color: 'inherit', padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
                <img src={`/uploads/${slug}.jpg`} alt={title} loading="lazy"
                  onError={(e) => { e.target.style.display = 'none'; }}
                  style={{ width: '100%', aspectRatio: '16 / 9', objectFit: 'cover', display: 'block' }} />
                <div style={{ padding: 22, display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <span className={`badge badge-${color}`} style={{ alignSelf: 'flex-start' }}>{cat}</span>
                  <h3 style={{ fontSize: 18, margin: '12px 0 8px' }}>{title}</h3>
                  <p style={{ fontSize: 14, color: 'var(--text-secondary)', marginBottom: 16, lineHeight: 1.6, flex: 1 }}>{desc}</p>
                  <div style={{ fontSize: 12, color: 'var(--text-tertiary)', display: 'flex', justifyContent: 'space-between' }}>
                    <span>{date}</span><span>{time}</span>
                  </div>
                </div>
              </a>
              );
            })}
          </div>}
          <p style={{ color: 'var(--text-tertiary)', fontSize: 15 }}>More guides are on the way. New posts land here first.</p>
        </div>
      </section>
    </PageShell>);
};

// ============ STATE LAW PAGE (Texas) ============
const StateLawPage = () =>
<PageShell currentPage="laws">
    <section style={{ paddingTop: 40 }}>
      <div className="container" style={{ maxWidth: 900 }}>
        <Breadcrumbs items={[{ label: 'Homeschool Laws' }, { label: 'Texas' }]} />
        <div style={{ marginBottom: 32 }} className="reveal">
          <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
            <span>🌵</span> Texas · Last updated April 2026
          </div>
          <h1 style={{ fontSize: 'clamp(36px, 5.5vw, 60px)', marginBottom: 16 }}>
            How to Homeschool in <span className="gradient-text">Texas</span>: Complete 2026 Guide
          </h1>
          <p style={{ fontSize: 18, color: 'var(--text-secondary)' }}>
            Texas is one of the most homeschool-friendly states in the country. Here\'s everything you need to know — requirements, paperwork, and how ClassGenie handles each piece.
          </p>
        </div>

        {/* Quick reference card */}
        <div className="card card-accent accent-blue reveal" style={{ marginBottom: 40 }}>
          <h2 style={{ fontSize: 22, marginBottom: 20 }}>Texas quick reference</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 20 }}>
            {[
          ['Notification required?', 'No', 'green'],
          ['Testing required?', 'No', 'green'],
          ['Subjects required?', '5 (listed below)', 'orange'],
          ['Record-keeping?', 'Recommended', 'blue']].
          map(([q, a, c]) =>
          <div key={q}>
                <div style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{q}</div>
                <div style={{ fontSize: 20, fontWeight: 800, fontFamily: 'var(--font-display)', marginTop: 4, color: `var(--${c === 'green' ? 'success-green' : c === 'orange' ? 'warning-orange' : 'primary-blue'})` }}>{a}</div>
              </div>
          )}
          </div>
        </div>

        <div className="reveal" style={{ fontSize: 17, lineHeight: 1.75 }}>
          <h2 style={{ fontSize: 28, marginTop: 40, marginBottom: 16 }}>The full legal requirements (plain English)</h2>
          <p style={{ marginBottom: 16, color: 'var(--text-primary)' }}>
            Texas treats homeschools as private schools. You don\'t have to notify the state, register, or submit curricula in advance. But you do have to teach the five required subjects and keep your kids learning in a "bona fide" way — which means actually teaching them, not just handing them a Kindle.
          </p>
          <h3 style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>The five required subjects</h3>
          <ol style={{ paddingLeft: 20, marginBottom: 16 }}>
            <li>Reading</li><li>Spelling</li><li>Grammar</li><li>Mathematics</li><li>Good citizenship</li>
          </ol>
          <p style={{ marginBottom: 16 }}>That\'s it. No mandated hours, no tests, no scope and sequence. You pick the curriculum, you pick the pace.</p>

          <h3 style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>Withdrawing from public school</h3>
          <p style={{ marginBottom: 16 }}>If your kid is currently enrolled, send a withdrawal letter to the school. ClassGenie generates this for you with the right language and your school\'s address auto-filled.</p>

          <h3 style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>How ClassGenie handles each requirement</h3>
          <div style={{ display: 'grid', gap: 12, marginBottom: 24 }}>
            {[
          ['5 subjects taught in a bona fide manner', 'Curriculum planner with standards-aligned units in all 5 subjects'],
          ['Withdrawal letter', 'Generated in 2 clicks with Texas-specific language'],
          ['Attendance records (best practice)', 'Auto-logged when you mark lessons complete'],
          ['Transcripts for college', 'NCAA/Common App format, GPA auto-calculated'],
          ['Course descriptions for high school', 'AI-generated from your curriculum plan']].
          map(([req, h]) =>
          <div key={req} className="card card-accent accent-green" style={{ padding: 20 }}>
                <div style={{ fontWeight: 700, marginBottom: 6 }}>{req}</div>
                <div style={{ color: 'var(--text-secondary)', fontSize: 14 }}><strong>ClassGenie:</strong> {h}</div>
              </div>
          )}
          </div>
          <p style={{ marginBottom: 24, color: 'var(--text-secondary)' }}>
            Texas asks you to submit nothing, but the paperwork still matters the day a registrar
            or an admissions office asks. Here is <a href="/blog/what-homeschool-records-texas" style={{ color: 'var(--primary-purple)', fontWeight: 600 }}>what homeschool records to keep in Texas</a>, what you can skip, and how to file it in about twenty minutes a month.
          </p>

          <h3 style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>Texas-specific FAQ</h3>
          {[
        ['Do I need to hire a certified teacher?', 'No. Texas does not require homeschool parents to have any specific credentials.'],
        ['Can my child play public school sports?', 'Since 2021 (HB 547), yes — homeschoolers can participate in UIL activities at their zoned public school.'],
        ['What about dual enrollment?', 'Texas community colleges accept homeschool students. Many offer dual credit starting at 9th grade.'],
        ['Do I have to follow TEKS?', 'No, but aligning to TEKS makes dual enrollment and transcripts cleaner. ClassGenie offers optional TEKS alignment.']].
        map(([q, a], i) =>
        <div key={i} className="card" style={{ marginBottom: 8 }}>
              <div style={{ fontWeight: 700, marginBottom: 6 }}>{q}</div>
              <div style={{ color: 'var(--text-secondary)', fontSize: 14 }}>{a}</div>
            </div>
        )}

          <div style={{ marginTop: 40, padding: 20, background: 'var(--bg-subtle)', borderRadius: 12, fontSize: 14, color: 'var(--text-secondary)' }}>
            <strong>Sources:</strong> Texas Education Agency · HSLDA Texas · Leeper v. Arlington ISD (1994) · UIL Eligibility Rules (2021)
          </div>
        </div>

        <div style={{ marginTop: 48, display: 'grid', gap: 12 }} className="reveal">
          <h3 style={{ fontSize: 20 }}>Nearby states</h3>
          <div className="grid grid-3">
            {[['Oklahoma', 'oklahoma'], ['New Mexico', 'new-mexico'], ['Louisiana', 'louisiana']].map(([n, s]) =>
          <a key={s} href="#" className="card" style={{ textDecoration: 'none', color: 'inherit' }}>
                <div style={{ fontWeight: 700 }}>How to homeschool in {n}</div>
                <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>Complete 2026 guide →</div>
              </a>
          )}
          </div>
        </div>
      </div>
    </section>
  </PageShell>;


// ============ COMPARE PAGE ============
const ComparePage = () =>
<PageShell currentPage="compare">
    <section style={{ paddingTop: 40 }}>
      <div className="container" style={{ maxWidth: 980 }}>
        <Breadcrumbs items={[{ label: 'Compare' }, { label: 'MagicSchool' }]} />
        <div style={{ textAlign: 'center', marginBottom: 48 }} className="reveal">
          <h1 style={{ fontSize: 'clamp(36px, 5.5vw, 60px)', marginBottom: 16 }}>
            <span className="gradient-text">ClassGenie</span> vs. MagicSchool
          </h1>
          <p style={{ fontSize: 19, color: 'var(--text-secondary)' }}>An honest comparison of two AI tools for teachers. Here is what actually differs.</p>
        </div>
        <div className="reveal" style={{ background: 'var(--bg-card)', border: '1px solid var(--border-subtle)', borderRadius: 16, overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', borderBottom: '1px solid var(--border-subtle)' }}>
            <div style={{ padding: 20, fontSize: 13, fontWeight: 700, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Feature</div>
            <div style={{ padding: 20, fontWeight: 700, textAlign: 'center', fontSize: 16, background: 'var(--bg-lavender)' }}>ClassGenie</div>
            <div style={{ padding: 20, fontWeight: 700, textAlign: 'center', fontSize: 16, color: 'var(--text-secondary)' }}>MagicSchool</div>
          </div>
          {[
        ['Paid plan', '$16.99/mo (or $99/yr)', '$12.99/mo (or $99.96/yr)'],
        ['Free to start (no card)', true, true],
        ['AI lesson plan generator', true, true],
        ['Number of AI tools', '20+', '80+'],
        ['Differentiated versions of a lesson', true, true],
        ['Curriculum and year planner', true, false],
        ['Gradebook', true, false],
        ['Report cards', true, false],
        ['Student portal', true, true],
        ['Grade-level team hub', true, 'School plans']].
        map(([f, a, b], i, rows) =>
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', borderBottom: i < rows.length - 1 ? '1px solid var(--border-subtle)' : 'none' }}>
              <div style={{ padding: 16, fontSize: 14, fontWeight: 500 }}>{f}</div>
              <div style={{ padding: 16, textAlign: 'center', background: 'var(--bg-lavender)' }}>
                {a === true ? <Icon name="check" size={20} style={{ color: 'var(--success-green)' }} /> :
            a === false ? <Icon name="close" size={20} style={{ color: 'var(--text-tertiary)' }} /> :
            <span style={{ fontSize: 14, fontWeight: 600 }}>{a}</span>}
              </div>
              <div style={{ padding: 16, textAlign: 'center' }}>
                {b === true ? <Icon name="check" size={20} style={{ color: 'var(--success-green)' }} /> :
            b === false ? <Icon name="close" size={20} style={{ color: 'var(--text-tertiary)' }} /> :
            <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)' }}>{b}</span>}
              </div>
            </div>
        )}
        </div>
        <div style={{ marginTop: 32, padding: 24, background: 'var(--bg-subtle)', borderRadius: 12 }} className="reveal">
          <h3 style={{ fontSize: 18, marginBottom: 8 }}>The honest take</h3>
          <p style={{ color: 'var(--text-secondary)', fontSize: 15 }}>
            MagicSchool has more AI tools and a cheaper monthly plan. If all you want is AI generators, it is a good choice. ClassGenie is for teachers who want the AI next to the planning, the gradebook and the report cards, so the lesson you just generated is already on the calendar instead of sitting in another browser tab.
          </p>
          <p style={{ color: 'var(--text-tertiary)', fontSize: 13, marginTop: 12 }}>
            MagicSchool pricing and features are from their public pricing page as of September 2026 and may have changed.
          </p>
        </div>
      </div>
    </section>
  </PageShell>;


// ============ ABOUT PAGE ============
const AboutPage = () =>
<PageShell currentPage="about">
    <section style={{ paddingTop: 40 }}>
      <div className="container" style={{ maxWidth: 760 }}>
        <Breadcrumbs items={[{ label: 'About' }]} />
        <div className="reveal">
          <div className="eyebrow-pill" style={{ marginBottom: 20 }}><span>👋</span> Our story</div>
          <h1 style={{ fontSize: 'clamp(40px, 6vw, 64px)', marginBottom: 24 }}>
            Built by a <span className="gradient-text">homeschool mom</span>, for homeschool moms.
          </h1>
          <div style={{ fontSize: 17, color: 'var(--text-primary)', lineHeight: 1.8 }}>
            <p style={{ marginBottom: 20 }}>Hi, I'm Laura!! 🩷</p>
            <p style={{ marginBottom: 20 }}>
              I grew up homeschooled, so homeschooling has never felt like a trend or a theory to me. It has always felt like real life. It shaped how I learned, how I saw the world, and honestly, how I think about family and education now.
            </p>
            <p style={{ marginBottom: 20 }}>
              Years later, I found myself back in that world as a homeschool mom of two.
            </p>
            <p style={{ marginBottom: 20 }}>
              And once I was living it from the parent side, I saw everything differently.
            </p>
            <p style={{ marginBottom: 20 }}>
              I saw how beautiful it was, but I also saw how heavy it could feel. I watched my mom friends carry so much. Lesson plans, printables, schedules, research, progress tracking, the emotional weight of trying to do right by your kids, and the constant feeling that there had to be a better way to hold it all together.
            </p>
            <p style={{ marginBottom: 20 }}>I felt that too in my own home.</p>
            <p style={{ marginBottom: 20 }}>
              There were so many Sundays where I was trying to piece together the week from scattered notes, saved tabs, half-finished documents, random ideas, and mental lists I was terrified I would forget by Monday morning. It was not that homeschooling was wrong. It was that the tools around it were not built for the way real homeschool families actually live.
            </p>
            <p style={{ marginBottom: 20 }}>That stayed with me.</p>
            <p style={{ marginBottom: 20 }}>
              I could not stop thinking about how much easier this could feel if there were one place that truly understood homeschool life. Not a clunky school tool trying to adapt itself to families like ours. Not another generic planner. Something thoughtful. Something beautiful. Something that could actually help carry the load.
            </p>
            <p style={{ marginBottom: 20, fontWeight: 600 }}>That is why I built ClassGenie.</p>
            <p style={{ marginBottom: 20 }}>
              I built it because I was once the homeschooled child. I built it because I am now the homeschooling mom. I built it because I have seen my own friends struggle under the weight of planning everything themselves, and I knew families deserved better support than a pile of tabs and good intentions.
            </p>
            <p style={{ marginBottom: 20 }}>
              My co-founder is a software engineer, and together we are building the tool I genuinely wish existed years ago. Our kids are the unofficial QA team. Real homeschool families shape what we build. We still read every support email ourselves, and we pay close attention to what families are actually asking for because that matters more to me than building something flashy just to impress people.
            </p>
            <p style={{ marginBottom: 20 }}>
              We are a small team on purpose. We want ClassGenie to feel personal. We want it to feel useful. We want it to feel like it was made by someone who actually understands the rhythm, the beauty, and the pressure of homeschooling.
            </p>
            <p style={{ marginBottom: 20 }}>
              If you are homeschooling now, or even just considering it, I want you to know this from the bottom of my heart.
            </p>
            <p style={{ marginBottom: 24, fontWeight: 700, fontSize: 22 }}>We are rooting for you.</p>
          </div>
          <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 16 }}>
            <div className="avatar av-purple avatar-lg">LD</div>
            <div>
              <div style={{ fontWeight: 700 }}>Laura Dovalina</div>
              <div style={{ fontSize: 14, color: 'var(--text-secondary)' }}>Founder & homeschool mom of 2</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </PageShell>;


// ============ CONTACT PAGE ============
const ContactPage = () =>
<PageShell currentPage="contact">
    <section style={{ paddingTop: 40 }}>
      <div className="container" style={{ maxWidth: 820 }}>
        <Breadcrumbs items={[{ label: 'Contact' }]} />
        <div style={{ marginBottom: 40 }} className="reveal">
          <h1 style={{ fontSize: 'clamp(36px, 5.5vw, 56px)', marginBottom: 16 }}>
            <span className="gradient-text">Say hi.</span>
          </h1>
          <p style={{ fontSize: 19, color: 'var(--text-secondary)' }}>We read every message. Usually reply within a day.</p>
        </div>
        <div className="grid grid-3 reveal">
          {[
        ['mail', 'blue', 'Email', 'Laura@homescholar.app', 'mailto:Laura@homescholar.app'],
        ['messageCircle', 'purple', 'Help Center', 'Browse FAQs & guides', '#'],
        ['heart', 'pink', 'Social', '@homescholar everywhere', '#']].
        map(([icon, color, title, body, href]) =>
        <a key={title} href={href} className={`card card-accent accent-${color}`} style={{ textDecoration: 'none', color: 'inherit' }}>
              <div className={`icon-box icon-${color}`} style={{ marginBottom: 16 }}>
                <Icon name={icon} size={20} />
              </div>
              <h3 style={{ fontSize: 18, marginBottom: 8 }}>{title}</h3>
              <p style={{ color: 'var(--text-secondary)', fontSize: 14 }}>{body}</p>
            </a>
        )}
        </div>
      </div>
    </section>
  </PageShell>;


// ============ LEGAL (PRIVACY/TERMS) ============
const LegalPage = () =>
<PageShell>
    <section style={{ paddingTop: 40 }}>
      <div className="container" style={{ maxWidth: 760 }}>
        <Breadcrumbs items={[{ label: 'Legal' }]} />
        <h1 style={{ fontSize: 'clamp(32px, 5vw, 48px)', marginBottom: 24 }}>Privacy & Terms</h1>
        <div style={{ fontSize: 16, color: 'var(--text-primary)', lineHeight: 1.8 }}>
          <p style={{ marginBottom: 20 }}>
            We take your family\'s data seriously. We don\'t sell it, we don\'t share it with third-party advertisers, and we use minimal analytics.
          </p>
          <h2 style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>Data we collect</h2>
          <p style={{ marginBottom: 20 }}>Account info (email, name), student records you enter, usage analytics (pages visited, features used). That\'s it.</p>
          <h2 style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>Data we don\'t collect</h2>
          <p style={{ marginBottom: 20 }}>Your location, your contacts, your browsing history outside ClassGenie.</p>
          <h2 style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>Cancel and export</h2>
          <p style={{ marginBottom: 20 }}>Cancel from your dashboard anytime. Export everything as PDF/CSV. We keep your account dormant for 90 days if you come back.</p>
          <p style={{ marginTop: 40, color: 'var(--text-secondary)', fontSize: 14 }}>Full privacy policy and terms available on request. Last updated April 2026.</p>
        </div>
      </div>
    </section>
  </PageShell>;


Object.assign(window, { AIToolsIndexPage, PricingPage, BlogPage, StateLawPage, ComparePage, AboutPage, ContactPage, LegalPage });