// All remaining pages — Feature pages, AI Tools, Pricing, For Students, Blog, State laws, Compare, About, Contact

// ============ CURRICULUM PLANNER PAGE ============
const CurriculumPlannerMock = () => (
  <MiniMock title="Curriculum Planner">
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6, marginBottom: 12 }}>
      {[['180', 'Days Planned', 'green'], ['97', 'Completed', 'blue'], ['Div', 'Current Unit', 'purple'], ['75%', 'Standards', 'orange']].map(([v, l, c]) => (
        <div key={l} style={{ background: 'white', borderRadius: 8, padding: 10, borderLeft: `3px solid var(--${c === 'green' ? 'success-green' : c === 'blue' ? 'primary-blue' : c === 'purple' ? 'primary-purple' : 'warning-orange'})` }}>
          <div style={{ fontSize: 18, fontWeight: 800, fontFamily: 'var(--font-display)' }}>{v}</div>
          <div style={{ fontSize: 10, color: 'var(--text-secondary)' }}>{l}</div>
        </div>
      ))}
    </div>
    <div style={{ background: 'white', borderRadius: 8, padding: 14 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '60px repeat(6, 1fr)', gap: 4, fontSize: 10, marginBottom: 6 }}>
        <div></div>
        {['AUG','SEP','OCT','NOV','DEC','JAN'].map(m => <div key={m} style={{ fontWeight: 700, color: 'var(--text-secondary)' }}>{m}</div>)}
      </div>
      {[
        ['Math', 'var(--primary-purple)', ['Place Value', 'Multiplication', 'Division', 'Fractions', 'Geometry', 'Algebra']],
        ['Science', 'var(--success-green)', ['Scientific Method', 'Life Science', 'Earth', 'Physical', 'Space', 'Review']],
        ['English', 'var(--primary-blue)', ['Reading', 'Writing', 'Grammar', 'Research', 'Literature', 'Poetry']],
        ['History', 'var(--warning-orange)', ['Ancient', 'Medieval', 'American', 'Civics', 'World', 'Modern']],
        ['Art', 'var(--primary-pink)', ['Drawing', 'Painting', 'Sculpt', 'Review', '', '']],
      ].map(([s, c, units]) => (
        <div key={s} style={{ display: 'grid', gridTemplateColumns: '60px repeat(6, 1fr)', gap: 4, marginBottom: 4, alignItems: 'center' }}>
          <div style={{ fontSize: 11, fontWeight: 600 }}>{s}</div>
          {units.map((u, i) => u ? (
            <div key={i} style={{ background: c, color: 'white', borderRadius: 4, padding: '4px 6px', fontSize: 9, fontWeight: 600 }}>{u}</div>
          ) : <div key={i}></div>)}
        </div>
      ))}
    </div>
  </MiniMock>
);

const CurriculumPlannerPage = () => (
  <PageShell currentPage="curriculum">
    <FeaturePage
      breadcrumb={[{ label: 'Features' }, { label: 'Curriculum Planner' }]}
      eyebrow="Curriculum Planner" eyebrowEmoji="🗺️"
      h1Prefix="Map your whole" h1Highlight="homeschool year" h1Suffix="in an afternoon."
      subhead="Drag-and-drop timeline for every subject, every kid, every month. AI drafts it in minutes; you tweak in the planner."
      color="blue"
      mockup={<CurriculumPlannerMock />}
      features={[
        { icon: 'sparkles', color: 'purple', title: 'AI-drafted plans', description: 'Tell us the grade level and priorities. We draft a year\'s worth of units in 30 seconds.' },
        { icon: 'map', color: 'blue', title: 'Drag-and-drop timeline', description: 'Reorder units. Extend one. Insert spring break. Everything recalculates automatically.' },
        { icon: 'trophy', color: 'green', title: 'Standards-aligned', description: 'Common Core, state-specific standards, classical, Charlotte Mason — pick your framework.' },
        { icon: 'users', color: 'orange', title: 'Multi-student view', description: 'See all your kids\' plans on one screen. Spot overlaps and free time.' },
        { icon: 'document', color: 'pink', title: 'Import existing plans', description: 'PDF, CSV, or old-fashioned typing. Takes about an hour to bring last year in.' },
        { icon: 'calendar', color: 'blue', title: 'Auto-schedule', description: 'We fit units into your calendar around holidays, co-op days, and field trips.' },
      ]}
      relatedPages={[
        { icon: 'sparkles', color: 'purple', title: 'AI Lesson Plans', description: 'Generate day-by-day lessons from your yearly plan.', href: 'ai-lesson-plan-generator.html' },
        { icon: 'chart', color: 'green', title: 'Gradebook', description: 'Track progress against your plan.', href: 'homeschool-gradebook.html' },
        { icon: 'graduation', color: 'blue', title: 'Transcripts', description: 'End-of-year reporting from your plan.', href: 'homeschool-transcripts-and-report-cards.html' },
      ]}
    />
  </PageShell>
);

// ============ AI LESSON PLAN PAGE ============
const LessonPlanMock = () => (
  <MiniMock title="AI Lesson Plan Builder">
    <div style={{ background: 'var(--signature-gradient)', borderRadius: 10, padding: 14, color: 'white', marginBottom: 12 }}>
      <div style={{ fontSize: 11, fontWeight: 700, marginBottom: 4 }}>✨ GENERATING</div>
      <div style={{ fontSize: 14, fontWeight: 700 }}>Photosynthesis — 4th Grade Science</div>
      <div style={{ marginTop: 8, background: 'rgba(255,255,255,0.2)', borderRadius: 4, height: 4 }}>
        <div style={{ background: 'white', height: '100%', width: '72%', borderRadius: 4 }}></div>
      </div>
    </div>
    {[
      ['Objectives', 'Understand how plants convert sunlight to energy', 'green'],
      ['Materials', 'Leaves, white paper, magnifying glass, journal', 'blue'],
      ['Activity 1', 'Leaf observation and sketching (15 min)', 'purple'],
      ['Activity 2', 'Controlled light experiment with beans (30 min)', 'pink'],
      ['Assessment', '5-question vocabulary quiz', 'orange'],
    ].map(([t, d, c]) => (
      <div key={t} style={{ background: 'white', borderRadius: 8, padding: 10, marginBottom: 6, borderLeft: `3px solid var(--${c === 'green' ? 'success-green' : c === 'blue' ? 'primary-blue' : c === 'purple' ? 'primary-purple' : c === 'pink' ? 'primary-pink' : 'warning-orange'})` }}>
        <div style={{ fontSize: 11, fontWeight: 700, marginBottom: 2 }}>{t}</div>
        <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{d}</div>
      </div>
    ))}
  </MiniMock>
);

const LessonPlanPage = () => (
  <PageShell currentPage="lesson-plans">
    <FeaturePage
      breadcrumb={[{ label: 'AI Tools', href: 'ai-tools.html' }, { label: 'Lesson Plans' }]}
      eyebrow="AI Lesson Plan Generator" eyebrowEmoji="✨"
      h1Prefix="Lesson plans in" h1Highlight="30 seconds" h1Suffix="— tailored to your kid."
      subhead="Pick a topic, pick a grade level, hit generate. Full lesson plan with objectives, activities, materials, and assessment — ready to teach."
      color="purple"
      mockup={<LessonPlanMock />}
      features={[
        { icon: 'zap', color: 'purple', title: '30-second generation', description: 'From blank screen to full lesson plan in less time than pouring coffee.' },
        { icon: 'target', color: 'blue', title: 'Learning-style aware', description: 'Visual, auditory, kinesthetic — pick a style and the lesson adapts.' },
        { icon: 'layers', color: 'pink', title: 'Differentiation built in', description: 'One lesson, multiple grade levels. Perfect for siblings doing the same topic.' },
        { icon: 'edit', color: 'green', title: 'Editable everywhere', description: 'Not AI-perfect? Tweak anything, regenerate sections, add your notes.' },
        { icon: 'document', color: 'orange', title: 'Print-ready format', description: 'Clean PDF export. Hands-to-kid ready, not digital-only.' },
        { icon: 'bookOpen', color: 'blue', title: 'Saves to library', description: 'Every plan you generate goes to your library. Reuse next year, share with co-op.' },
      ]}
    />
  </PageShell>
);

// ============ GRADEBOOK PAGE ============
const GradebookMock = () => (
  <MiniMock title="Gradebook">
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginBottom: 10 }}>
      {[['87.3%', 'Class Avg', 'green'], ['42/47', 'Graded', 'blue'], ['5', 'Missing', 'pink']].map(([v, l, c]) => (
        <div key={l} style={{ background: 'white', borderRadius: 8, padding: 10, borderLeft: `3px solid var(--${c === 'green' ? 'success-green' : c === 'blue' ? 'primary-blue' : 'primary-pink'})` }}>
          <div style={{ fontSize: 16, fontWeight: 800, fontFamily: 'var(--font-display)' }}>{v}</div>
          <div style={{ fontSize: 9, color: 'var(--text-secondary)' }}>{l}</div>
        </div>
      ))}
    </div>
    <div style={{ background: 'white', borderRadius: 8, padding: 12 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '70px repeat(4, 1fr) 40px', gap: 4, fontSize: 10, marginBottom: 8, paddingBottom: 6, borderBottom: '1px solid var(--border-subtle)', fontWeight: 700, color: 'var(--text-secondary)' }}>
        <div>Student</div><div>HW1</div><div>HW2</div><div>Quiz</div><div>Test</div><div>Avg</div>
      </div>
      {[
        ['EJ', 'Emma', 'av-green', [95, 88, 87, 92], 'A-'],
        ['JJ', 'Jake', 'av-purple', [82, 78, 79, 78], 'B-'],
        ['SJ', 'Sophie', 'av-teal', [91, 94, 95, 94], 'A'],
        ['MC', 'Michael', 'av-orange', [76, 72, 71, 70], 'C'],
      ].map(([i, n, c, scores, grade], idx) => (
        <div key={idx} style={{ display: 'grid', gridTemplateColumns: '70px repeat(4, 1fr) 40px', gap: 4, fontSize: 10, padding: '6px 0', borderBottom: '1px solid var(--bg-subtle)', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <div className={`avatar ${c}`} style={{ width: 18, height: 18, fontSize: 8 }}>{i}</div>
            <span>{n}</span>
          </div>
          {scores.map((s, j) => <div key={j} style={{ fontWeight: 600, color: s < 80 ? 'var(--warning-red)' : 'var(--success-green)' }}>{s}</div>)}
          <div style={{ fontWeight: 800, color: 'var(--success-green)', fontSize: 11 }}>{grade}</div>
        </div>
      ))}
    </div>
  </MiniMock>
);

const GradebookPage = () => (
  <PageShell currentPage="gradebook">
    <FeaturePage
      breadcrumb={[{ label: 'Features' }, { label: 'Gradebook' }]}
      eyebrow="Gradebook" eyebrowEmoji="📊"
      h1Prefix="Track every grade," h1Highlight="spot every trend" h1Suffix=" — automatically."
      subhead="Enter grades once. We calculate averages, weight categories, flag struggling kids, and export to transcripts. You just teach."
      color="green"
      mockup={<GradebookMock />}
      features={[
        { icon: 'chart', color: 'green', title: 'Auto-calculated averages', description: 'Weighted categories, extra credit, dropped lowest — all configured once.' },
        { icon: 'sparkles', color: 'purple', title: 'AI grade assistant', description: 'Paste an essay, get a rubric-based grade and specific feedback in 10 seconds.' },
        { icon: 'bell', color: 'red', title: 'Trend alerts', description: 'When a kid starts sliding, we tell you — before the end-of-semester surprise.' },
        { icon: 'clipboard', color: 'blue', title: 'Bulk entry', description: 'Grade 20 homework assignments with keyboard shortcuts. No more click-fatigue.' },
        { icon: 'document', color: 'pink', title: 'Progress reports', description: 'One click from gradebook to professional progress report, emailed to co-op if needed.' },
        { icon: 'graduation', color: 'blue', title: 'Flows to transcript', description: 'High school grades carry straight to the official transcript. GPA updates live.' },
      ]}
    />
  </PageShell>
);

// ============ TRANSCRIPTS PAGE ============
const TranscriptMock = () => (
  <MiniMock title="Official Transcript">
    <div style={{ background: 'white', borderRadius: 10, padding: 16, border: '2px solid var(--primary-blue)' }}>
      <div style={{ textAlign: 'center', paddingBottom: 10, borderBottom: '2px solid var(--text-primary)', marginBottom: 10 }}>
        <div style={{ fontSize: 14, fontWeight: 800, fontFamily: 'var(--font-display)' }}>Emma Johnson</div>
        <div style={{ fontSize: 10, color: 'var(--text-secondary)' }}>Official Academic Transcript · Class of 2027</div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, marginBottom: 10 }}>
        <div>GPA: <strong>3.85</strong></div>
        <div>Weighted: <strong>4.2</strong></div>
        <div>Credits: <strong>18/24</strong></div>
        <div>Rank: <strong>Top 10%</strong></div>
      </div>
      {[
        ['9th', 'English I, Algebra I, Biology, World History', '4.0'],
        ['10th', 'English II, Geometry, Chemistry, US History', '3.9'],
        ['11th', 'English III, Algebra II, Physics, Gov/Econ', '3.7'],
      ].map(([g, c, gpa]) => (
        <div key={g} style={{ padding: '8px 0', borderBottom: '1px solid var(--border-subtle)', fontSize: 10, display: 'grid', gridTemplateColumns: '40px 1fr 40px', gap: 8, alignItems: 'center' }}>
          <div style={{ fontWeight: 700 }}>{g}</div>
          <div style={{ color: 'var(--text-secondary)' }}>{c}</div>
          <div style={{ fontWeight: 700, textAlign: 'right', color: 'var(--success-green)' }}>{gpa}</div>
        </div>
      ))}
    </div>
    <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
      <div style={{ flex: 1, textAlign: 'center', background: 'white', border: '1px solid var(--border-subtle)', borderRadius: 6, padding: 8, fontSize: 10, fontWeight: 600 }}>📄 Download PDF</div>
      <div style={{ flex: 1, textAlign: 'center', background: 'var(--signature-gradient)', color: 'white', borderRadius: 6, padding: 8, fontSize: 10, fontWeight: 600 }}>✉️ Send to college</div>
    </div>
  </MiniMock>
);

const TranscriptsPage = () => (
  <PageShell currentPage="transcripts">
    <FeaturePage
      breadcrumb={[{ label: 'Features' }, { label: 'Transcripts & Reports' }]}
      eyebrow="Transcripts & Report Cards" eyebrowEmoji="🎓"
      h1Prefix="College-ready" h1Highlight="transcripts" h1Suffix=" in two clicks."
      subhead="Professional formatting that colleges actually accept. GPA calculated automatically. Report cards for every term."
      color="blue"
      mockup={<TranscriptMock />}
      features={[
        { icon: 'graduation', color: 'blue', title: 'NCAA & Common App format', description: 'Matches exactly what admissions offices expect. Students admitted to UT, NYU, BYU, and more.' },
        { icon: 'chart', color: 'green', title: 'Automatic GPA', description: 'Weighted and unweighted. Honors and AP bonuses. Pulls from your gradebook live.' },
        { icon: 'document', color: 'pink', title: 'Course descriptions', description: 'AI writes detailed course descriptions from your curriculum plan. Counselors love this.' },
        { icon: 'clipboard', color: 'purple', title: 'Term report cards', description: 'Quarterly, semester, or custom cadence. One click from gradebook.' },
        { icon: 'mail', color: 'orange', title: 'Email directly to colleges', description: 'Sealed PDF straight to admissions. Tracking included.' },
        { icon: 'shield', color: 'red', title: 'Parent-signed authenticity', description: 'Digital signature + seal. Recognized format for scholarship committees.' },
      ]}
    />
  </PageShell>
);

// ============ LEGAL DOCS PAGE ============
const LegalDocsMock = () => (
  <MiniMock title="Legal Documents">
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
      {[
        ['Notice of Intent', 'mail', 'blue', 'State-Specific'],
        ['Homeschool Affidavit', 'shield', 'purple', 'Legal'],
        ['Withdrawal Letter', 'document', 'pink', 'Professional'],
        ['Course Descriptions', 'bookOpen', 'orange', 'College-Prep'],
        ['Attendance Record', 'calendar', 'green', 'Compliance'],
        ['IEP Plans', 'brain', 'purple', 'Planning'],
      ].map(([name, icon, color, tag], i) => (
        <div key={i} style={{ background: 'white', borderRadius: 8, padding: 10, border: '1px solid var(--border-subtle)' }}>
          <div className={`icon-box icon-${color}`} style={{ width: 26, height: 26, borderRadius: 6, marginBottom: 6 }}>
            <Icon name={icon} size={13} />
          </div>
          <div style={{ fontSize: 11, fontWeight: 700, marginBottom: 4 }}>{name}</div>
          <span className={`badge badge-${color === 'orange' ? 'orange' : color === 'green' ? 'green' : color === 'pink' ? 'red' : color}`} style={{ fontSize: 8 }}>{tag}</span>
        </div>
      ))}
    </div>
  </MiniMock>
);

const LegalDocsPage = () => (
  <PageShell currentPage="legal">
    <FeaturePage
      breadcrumb={[{ label: 'Features' }, { label: 'Legal Documents' }]}
      eyebrow="Legal & Compliance Docs" eyebrowEmoji="📋"
      h1Prefix="Every form," h1Highlight="every state" h1Suffix=" — done."
      subhead="Notice of intent, affidavits, withdrawal letters, attendance records, diplomas. State-specific templates that stand up to scrutiny."
      color="pink"
      mockup={<LegalDocsMock />}
      features={[
        { icon: 'shield', color: 'blue', title: 'All 50 states covered', description: 'Every state\'s requirements, always up to date. We track the law so you don\'t have to.' },
        { icon: 'document', color: 'purple', title: '15+ document types', description: 'Notice of intent, affidavits, withdrawal letters, diplomas, course descriptions, attendance.' },
        { icon: 'edit', color: 'pink', title: 'Auto-filled from your data', description: 'Student info, dates, courses — pulled in automatically. You just review and sign.' },
        { icon: 'brain', color: 'green', title: 'IEP plan generator', description: 'Document accommodations for special needs students in evaluator-ready language.' },
        { icon: 'file', color: 'orange', title: 'Print-ready PDFs', description: 'Professional letterhead, signature fields, official format.' },
        { icon: 'clock', color: 'red', title: 'Deadline reminders', description: 'We\'ll tell you when your state\'s notice of intent is due. No more missed filings.' },
      ]}
    />
  </PageShell>
);

// ============ CO-OP PAGE ============
const CoopPageMock = () => (
  <MiniMock title="Co-op Hub">
    <div style={{ background: 'white', borderRadius: 10, padding: 12, marginBottom: 8 }}>
      <div style={{ fontSize: 12, fontWeight: 700, marginBottom: 8 }}>Hill Country Classical Co-op</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, fontSize: 10 }}>
        <div><strong style={{ fontSize: 14 }}>62</strong><div style={{ color: 'var(--text-secondary)' }}>Families</div></div>
        <div><strong style={{ fontSize: 14 }}>138</strong><div style={{ color: 'var(--text-secondary)' }}>Students</div></div>
        <div><strong style={{ fontSize: 14 }}>24</strong><div style={{ color: 'var(--text-secondary)' }}>Classes</div></div>
      </div>
    </div>
    {[
      ['Pending invites', '3 families waiting', 'orange'],
      ['This week', 'Thursday 9am - 2pm', 'blue'],
      ['Shared resources', '47 documents', 'green'],
      ['Announcements', '2 drafts', 'purple'],
    ].map(([t, d, c], i) => (
      <div key={i} style={{ background: 'white', borderRadius: 8, padding: 10, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 10, borderLeft: `3px solid var(--${c === 'orange' ? 'warning-orange' : c === 'blue' ? 'primary-blue' : c === 'green' ? 'success-green' : 'primary-purple'})` }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, fontWeight: 700 }}>{t}</div>
          <div style={{ fontSize: 10, color: 'var(--text-secondary)' }}>{d}</div>
        </div>
        <Icon name="chevronRight" size={14} />
      </div>
    ))}
  </MiniMock>
);

const CoopPage = () => (
  <PageShell currentPage="coops">
    <FeaturePage
      breadcrumb={[{ label: 'Features' }, { label: 'Co-op Management' }]}
      eyebrow="Co-op Management" eyebrowEmoji="🏫"
      h1Prefix="Run your" h1Highlight="homeschool co-op" h1Suffix=" like a real organization."
      subhead="Rosters, invite codes, roles, shared resources, a calendar everyone can see. The admin tools you wish you had."
      color="pink"
      mockup={<CoopPageMock />}
      features={[
        { icon: 'users', color: 'pink', title: 'Member management', description: 'Rosters, family profiles, student lists. Filter by grade, subject, anything.' },
        { icon: 'mail', color: 'blue', title: 'Invite codes', description: 'Share a code. Families join themselves. Approval workflow included.' },
        { icon: 'shield', color: 'purple', title: 'Roles & permissions', description: 'Admin, teacher, parent, student — each sees what they should.' },
        { icon: 'bookOpen', color: 'green', title: 'Shared resources', description: 'Curriculum, worksheets, reading lists — shared across the co-op, not re-uploaded.' },
        { icon: 'calendar', color: 'orange', title: 'Central calendar', description: 'Class days, field trips, picture day. Everyone sees the same thing.' },
        { icon: 'globe', color: 'blue', title: 'Local co-op finder', description: 'Prospective families can find you on the public map. Free marketing.' },
      ]}
    />
  </PageShell>
);

// ============ FOR STUDENTS PAGE ============
const StudentsPage = () => (
  <PageShell currentPage="students">
    <FeaturePage
      breadcrumb={[{ label: 'For Students' }]}
      eyebrow="For Students" eyebrowEmoji="🎒"
      h1Prefix="A dashboard" h1Highlight="students actually want" h1Suffix=" to open."
      subhead="Your teen has their own login. They see their schedule, assignments, grades, and progress — without mom nagging."
      color="orange"
      mockup={<MiniMock title="Student Dashboard">
        <div style={{ background: 'var(--signature-gradient)', borderRadius: 10, padding: 14, color: 'white', marginBottom: 10 }}>
          <div style={{ fontSize: 11, opacity: 0.9 }}>Good morning,</div>
          <div style={{ fontSize: 18, fontWeight: 800, fontFamily: 'var(--font-display)' }}>Emma 👋</div>
          <div style={{ fontSize: 11, marginTop: 6, opacity: 0.9 }}>4 assignments due this week · 87% on track</div>
        </div>
        {[
          ['Math: Fractions Worksheet', 'Due tomorrow', 'green'],
          ['Science: Lab Report', 'Due Friday', 'blue'],
          ['English: Book Report', 'In progress', 'purple'],
        ].map(([t, d, c], i) => (
          <div key={i} style={{ background: 'white', borderRadius: 8, padding: 10, marginBottom: 6, borderLeft: `3px solid var(--${c === 'green' ? 'success-green' : c === 'blue' ? 'primary-blue' : 'primary-purple'})`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700 }}>{t}</div>
              <div style={{ fontSize: 10, color: 'var(--text-secondary)' }}>{d}</div>
            </div>
            <div style={{ width: 22, height: 22, borderRadius: '50%', border: '2px solid var(--border-strong)' }}></div>
          </div>
        ))}
      </MiniMock>}
      features={[
        { icon: 'calendar', color: 'blue', title: 'Their own schedule', description: 'What\'s today, what\'s tomorrow, what\'s this week — on their device.' },
        { icon: 'clipboard', color: 'orange', title: 'Assignment checklist', description: 'Tap to mark complete. Submit work directly. No more "did you finish?"' },
        { icon: 'chart', color: 'green', title: 'Grade transparency', description: 'They see their own grades. Ownership of their learning.' },
        { icon: 'trophy', color: 'purple', title: 'Progress badges', description: 'Streaks, completions, milestones. Gamified in a way that doesn\'t feel fake.' },
        { icon: 'messageCircle', color: 'pink', title: 'Parent messaging', description: 'Leave notes, ask questions, request help — without leaving the app.' },
        { icon: 'bookOpen', color: 'blue', title: 'Resource library', description: 'Everything mom shared, organized by class. No more "where\'s that link?"' },
      ]}
    />
  </PageShell>
);

Object.assign(window, {
  CurriculumPlannerPage, LessonPlanPage, GradebookPage, TranscriptsPage, LegalDocsPage, CoopPage, StudentsPage
});