// 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 your $14.99/mo subscription. 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. $14.99/month.</h2>
          <a href="pricing.html" className="btn btn-white" style={{ padding: '16px 32px', fontSize: 16, borderRadius: 999, marginTop: 16 }}>
            <span>Start free trial</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> Less than two coffees a month
          </div>
          <h1 style={{ fontSize: 'clamp(40px, 6vw, 68px)', marginBottom: 16 }}>
            One price. <span className="gradient-text">Everything included.</span>
          </h1>
          <p style={{ fontSize: 19, color: 'var(--text-secondary)' }}>No per-student pricing. No add-ons. No gotchas.</p>
        </div>
        <div className="reveal" style={{ position: 'relative', padding: 3, borderRadius: 24, background: 'var(--signature-gradient)', boxShadow: 'var(--shadow-xl)' }}>
          <div style={{ background: 'var(--bg-card)', borderRadius: 22, padding: '48px 40px', textAlign: 'center' }}>
            <div className="badge badge-purple" style={{ marginBottom: 16 }}>7-DAY FREE TRIAL · NO CREDIT CARD</div>
            <h2 style={{ fontSize: 28, marginBottom: 20 }}>HomeScholar Premium</h2>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 8, marginBottom: 28 }}>
              <span className="gradient-text" style={{ fontSize: 72, fontWeight: 800, fontFamily: 'var(--font-display)', lineHeight: 1 }}>$14.99</span>
              <span style={{ color: 'var(--text-secondary)', fontSize: 18 }}>/month</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 14, marginBottom: 32, textAlign: 'left', maxWidth: 620, margin: '0 auto 32px' }}>
              {[
                'Unlimited students',
                'Curriculum planner',
                '20+ AI generators',
                'Gradebook & transcripts',
                'Co-op management',
                'Legal docs (all 50 states)',
                'Student portal',
                'Priority support',
                'Export anytime',
              ].map(f => (
                <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 15 }}>
                  <Icon name="check" size={18} style={{ color: 'var(--success-green)', flexShrink: 0 }} />
                  {f}
                </div>
              ))}
            </div>
            <a href="#" className="btn btn-gradient" style={{ minHeight: 56, padding: '16px 40px', fontSize: 16 }}>
              Start 7-day free trial <Icon name="arrowRight" size={18} />
            </a>
            <div style={{ marginTop: 16, fontSize: 13, color: 'var(--text-secondary)' }}>
              Cancel anytime. Money-back guarantee.
            </div>
          </div>
        </div>
        <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>
        {[
          ['Is there a free trial?', 'Yes — 7 days, no credit card required. Full access to every feature.'],
          ['How many students are included?', 'Unlimited. One subscription covers your whole family.'],
          ['What\'s the cancellation policy?', 'Cancel anytime from your dashboard. No questions, no retention calls.'],
          ['Do you offer annual plans?', 'Yes — $149/year (save ~17%). Contact us for co-op 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 = () => {
  const posts = [
    ['How to Start Homeschooling: The Complete Beginner\'s Guide', 'Getting Started', 'Apr 20', 'blue', '12 min read', 'You\'ve made the decision. Now what? Here\'s the honest, no-fluff guide to your first year.'],
    ['Homeschool Curriculum Planning: A Step-by-Step Walkthrough', 'Planning', 'Apr 15', 'purple', '10 min read', 'From blank calendar to a full year mapped out. How we plan at the Smith household.'],
    ['How to Create a Homeschool Transcript Colleges Will Accept', 'High School', 'Apr 10', 'green', '8 min read', 'What admissions offices actually look for — and the 3 mistakes that get transcripts rejected.'],
    ['Homeschool Laws by State: What You Actually Need to File', 'Legal', 'Apr 8', 'red', '15 min read', 'A quick-reference guide to notice of intent, testing, and record-keeping in all 50 states.'],
    ['The Best Homeschool Schedule for Multiple Kids', 'Multi-Student', 'Apr 5', 'orange', '7 min read', 'Block schedules, loop schedules, interest-led — what works with 3 kids at different levels.'],
    ['How to Grade Homeschool Work (Without Losing Your Mind)', 'Assessment', 'Apr 1', 'pink', '6 min read', 'You don\'t need to grade everything. Here\'s a rubric for what actually matters.'],
    ['IEP Plans for Homeschool: A Parent\'s Guide', 'Special Needs', 'Mar 28', 'purple', '11 min read', 'When to document accommodations, how to do it, and why it matters for evaluators.'],
    ['How Much Does Homeschooling Cost? A Real Breakdown', 'Money', 'Mar 22', 'green', '9 min read', 'The honest number, from curriculum to co-ops to field trips. Ours is $2,800/year.'],
    ['Homeschool Co-ops: How to Find One (or Start Your Own)', 'Community', 'Mar 18', 'blue', '8 min read', 'The single best decision we made this year. Here\'s what to look for.'],
    ['AI Tools Every Homeschool Parent Should Be Using', 'Tech', 'Mar 14', 'purple', '6 min read', 'Not just HomeScholar — the full stack that saves me 10 hours a week.'],
  ];
  return (
    <PageShell currentPage="blog">
      <section style={{ paddingTop: 40 }}>
        <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">HomeScholar 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="#" className="reveal card card-accent accent-purple" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 24, marginBottom: 32, textDecoration: 'none', color: 'inherit', padding: 0, overflow: 'hidden' }}>
            <div style={{ background: 'var(--signature-gradient)', minHeight: 240, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ color: 'white', fontSize: 80 }}>📚</span>
            </div>
            <div style={{ padding: 32 }}>
              <span className="badge badge-purple">Featured · Getting Started</span>
              <h2 style={{ fontSize: 28, margin: '12px 0' }}>How to Start Homeschooling: The Complete Beginner\'s Guide</h2>
              <p style={{ color: 'var(--text-secondary)', marginBottom: 16 }}>You\'ve made the decision. Now what? The 12-page, no-fluff guide to your first year — from pulling your kid out of school to filing your notice of intent.</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div className="avatar av-purple">LR</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>Laura R.</div>
                  <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Apr 20 · 12 min read</div>
                </div>
              </div>
            </div>
          </a>
          {/* Grid of posts */}
          <div className="grid grid-3 reveal">
            {posts.slice(1).map(([title, cat, date, color, time, desc], i) => (
              <a key={i} href="#" className={`card card-accent accent-${color}`} style={{ textDecoration: 'none', color: 'inherit' }}>
                <span className={`badge badge-${color === 'red' ? 'red' : color === 'orange' ? 'orange' : color === 'green' ? 'green' : color === 'pink' ? 'red' : color}`}>{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 }}>{desc}</p>
                <div style={{ fontSize: 12, color: 'var(--text-tertiary)', display: 'flex', justifyContent: 'space-between' }}>
                  <span>{date}</span><span>{time}</span>
                </div>
              </a>
            ))}
          </div>
        </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 HomeScholar 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. HomeScholar 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 HomeScholar 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>HomeScholar:</strong> {h}</div>
              </div>
            ))}
          </div>

          <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. HomeScholar 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: 'HomeSchool Planet' }]} />
        <div style={{ textAlign: 'center', marginBottom: 48 }} className="reveal">
          <h1 style={{ fontSize: 'clamp(36px, 5.5vw, 60px)', marginBottom: 16 }}>
            <span className="gradient-text">HomeScholar</span> vs. Homeschool Planet
          </h1>
          <p style={{ fontSize: 19, color: 'var(--text-secondary)' }}>An honest comparison. We built both — this is what 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)' }}>HomeScholar</div>
            <div style={{ padding: 20, fontWeight: 700, textAlign: 'center', fontSize: 16, color: 'var(--text-secondary)' }}>Homeschool Planet</div>
          </div>
          {[
            ['Monthly price', '$14.99', '$8.95'],
            ['Curriculum planner', true, true],
            ['Gradebook', true, true],
            ['AI lesson plan generator', true, false],
            ['20+ AI tools included', true, false],
            ['Transcript generator', true, 'Add-on'],
            ['Co-op management', true, false],
            ['Student portal', true, true],
            ['State legal documents', true, false],
            ['Free trial (no CC)', '7 days', '30 days'],
            ['Mobile responsive', true, 'Partial'],
          ].map(([f, a, b], i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', borderBottom: i < 10 ? '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 }}>
            Homeschool Planet is solid and cheaper. If you only need a planner and gradebook, it\'s a fine choice. HomeScholar costs $6 more per month but replaces 5+ other subscriptions — AI tools, transcripts, legal docs, co-op management. Do the math against your actual stack.
          </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. I\'ve been homeschooling three kids in Austin, Texas for six years. I used to spend Sundays cobbling together next week\'s lessons from seventeen browser tabs, three Pinterest boards, and one half-finished Google Doc.
            </p>
            <p style={{ marginBottom: 20 }}>
              In 2024 I decided to stop complaining and build the tool I wished existed. My co-founder is a software engineer. Our kids are our QA team. This is HomeScholar.
            </p>
            <p style={{ marginBottom: 20 }}>
              We\'re a small team. We read every support email ourselves. We ship features real homeschool families ask for — not whatever VCs tell us to build. We charge $14.99/month because that\'s what keeps the lights on without gouging families.
            </p>
            <p>
              If you\'re homeschooling — or thinking about it — we\'re rooting for you.
            </p>
          </div>
          <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 16 }}>
            <div className="avatar av-purple avatar-lg">LR</div>
            <div>
              <div style={{ fontWeight: 700 }}>Laura Dovalina</div>
              <div style={{ fontSize: 14, color: 'var(--text-secondary)' }}>Founder & homeschool mom of 3</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', 'hello@homescholar.app', 'mailto:hello@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 HomeScholar.</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 });