// ClassGenie Homepage — all 10 sections

const { useState, useEffect, useRef, Fragment } = React;

// ============ SECTION 1: HERO ============
const Hero = ({ copy }) =>
<section style={{ paddingTop: 120, paddingBottom: 60, position: 'relative', overflow: 'hidden' }}>
    {/* Radial gradient glow */}
    <div style={{
    position: 'absolute', top: '10%', left: '50%', transform: 'translateX(-50%)',
    width: 900, height: 600,
    background: 'radial-gradient(ellipse at center, hsla(270, 71%, 60%, 0.12) 0%, hsla(330, 75%, 65%, 0.08) 40%, transparent 70%)',
    filter: 'blur(40px)', pointerEvents: 'none', zIndex: 0
  }}></div>

    <div className="container" style={{ position: 'relative', zIndex: 1 }}>
      <div className="hero-grid" style={{ display: 'grid', gap: 48, alignItems: 'center' }}>
        {/* Left */}
        <div>
          <div className="eyebrow-pill hero-mom-pill" style={{ marginBottom: 20 }}>
            <span style={{ color: 'var(--primary-purple)' }}>✨</span>
            Built for real classrooms, by people who teach
          </div>
          <h1 style={{
          fontSize: 'clamp(34px, 5vw, 60px)',
          lineHeight: 1.05,
          marginBottom: 20,
          letterSpacing: '-0.03em'
        }}>
            {copy.heroH1Prefix} <span className="gradient-text">{copy.heroH1Highlight}</span>{copy.heroH1Suffix.startsWith('.') || copy.heroH1Suffix.startsWith(',') || copy.heroH1Suffix.startsWith('!') || copy.heroH1Suffix.startsWith('?') ? '' : ' '}{copy.heroH1Suffix}
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--text-secondary)', marginBottom: 32, maxWidth: 600 }}>
            {copy.heroSub}
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginBottom: 28 }}>
            <a href="https://app.homescholarapp.com/pricing" className="btn btn-gradient btn-full btn-md-auto" style={{ minHeight: 56, fontSize: 16 }}>
              Start for free <Icon name="arrowRight" size={18} />
            </a>
            <a href="#how-it-works" className="btn btn-secondary btn-full btn-md-auto" style={{ minHeight: 56, fontSize: 16 }}>
              <Icon name="play" size={16} /> See how it works
            </a>
          </div>
          <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 20, display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="check" size={14} style={{ color: 'var(--success-green)' }} /> No credit card</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="check" size={14} style={{ color: 'var(--success-green)' }} /> Cancel anytime</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="check" size={14} style={{ color: 'var(--success-green)' }} /> 500+ families and growing</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
            <div className="avatar-stack">
              <div className="avatar av-blue">SM</div>
              <div className="avatar av-purple">JT</div>
              <div className="avatar av-pink">AK</div>
              <div className="avatar av-green">RL</div>
              <div className="avatar av-orange">DB</div>
            </div>
            <div>
              <Stars />
              <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>Loved by homeschool families around the world!</div>
            </div>
          </div>
        </div>

        {/* Right — dashboard mockup */}
        <div style={{ position: 'relative', animation: 'floaty 6s ease-in-out infinite' }}>
          <div style={{
          position: 'absolute', inset: '-40px -40px -40px -40px',
          background: 'radial-gradient(ellipse at center, hsla(217, 91%, 60%, 0.18) 0%, hsla(270, 71%, 60%, 0.12) 50%, transparent 75%)',
          filter: 'blur(40px)', zIndex: 0
        }}></div>
          <div style={{ position: 'relative', zIndex: 1 }}>
            <DashboardMockup />
          </div>
        </div>
      </div>
    </div>

    <style>{`
      @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
      @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1.1fr; } }
    `}</style>
  </section>;


// ============ SECTION 2: PROBLEM ============
const ProblemSection = () =>
<section style={{ background: 'var(--bg-card)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', overflow: 'hidden' }}>
    <div className="container">
      <div style={{ maxWidth: 760, marginBottom: 36 }} className="reveal">
        <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
          <span style={{ color: 'var(--warning-red)' }}>💛</span>
          Why we built this
        </div>
        <h2 style={{ fontSize: 'clamp(32px, 5vw, 56px)', letterSpacing: '-0.03em' }}>
          You chose this work because your students deserve better.<br />
          <span className="gradient-text">You deserve a team.</span>
        </h2>
        <p style={{ fontSize: 18, color: 'var(--text-secondary)', marginTop: 20, maxWidth: 620, lineHeight: 1.6 }}>
          Here's what was on your fridge before ClassGenie — and what we replaced it with.
        </p>
      </div>
      <div className="sticky-grid reveal">
        <StickyNote
        color="yellow" rotate={-2.2}
        pain="Sundays gone to lesson planning."
        solution="AI drafts your week in 90 seconds. You sip coffee, you tweak, you're done by 9am." />
        <StickyNote
        color="pink" rotate={1.8} tape="left"
        pain="Grading until midnight."
        solution="Snap a photo. AI grades it, flags the misses, writes the feedback. You approve in 2 minutes." />
        <StickyNote
        color="blue" rotate={-1.4} tape="right"
        pain="Paperwork for every student, every term."
        solution="We auto-generate IEP documentation, progress reports, transcripts and report cards — pre-filled." />
        <StickyNote
        color="green" rotate={2.4}
        pain="Is this student actually behind?"
        solution="A live progress dashboard shows trends across subjects. Catch slides before conferences." />
        <StickyNote
        color="lavender" rotate={-2.8} tape="left"
        pain="Team chaos in 4 group chats."
        solution="One Team Hub. Roles, members, invites, shared resources, calendar — all in one place." />
        <StickyNote
        color="peach" rotate={1.6}
        pain="College apps. Transcripts. Panic."
        solution="College-ready transcripts in two clicks. GPA calculated. Counselor letter template included." />
      </div>
    </div>
    <style>{`
      .sticky-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 36px 28px;
        padding: 28px 8px 40px;
        max-width: 1100px;
        margin: 0 auto;
      }
      .sticky-note {
        position: relative;
        padding: 30px 28px 34px;
        border-radius: 2px;
        font-family: 'Caveat', 'Kalam', 'Patrick Hand', cursive, system-ui;
        box-shadow:
          0 1px 1px rgba(0,0,0,0.04),
          0 8px 16px -4px rgba(0,0,0,0.12),
          0 16px 32px -8px rgba(0,0,0,0.10);
        transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms;
        will-change: transform;
        min-height: 240px;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .sticky-note::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
          radial-gradient(ellipse at top left, rgba(255,255,255,0.4), transparent 60%),
          radial-gradient(ellipse at bottom right, rgba(0,0,0,0.05), transparent 60%);
        pointer-events: none;
        border-radius: inherit;
      }
      .sticky-note:hover {
        transform: rotate(0deg) translateY(-6px) scale(1.02) !important;
        box-shadow:
          0 2px 2px rgba(0,0,0,0.06),
          0 14px 28px -4px rgba(0,0,0,0.18),
          0 28px 56px -8px rgba(0,0,0,0.14);
        z-index: 5;
      }
      .sticky-tape {
        position: absolute;
        top: -14px;
        width: 92px; height: 26px;
        background: rgba(255, 250, 220, 0.55);
        border: 1px solid rgba(180, 160, 80, 0.18);
        backdrop-filter: blur(2px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
      }
      .sticky-tape.center { left: 50%; transform: translateX(-50%) rotate(-2deg); }
      .sticky-tape.left { left: 18px; transform: rotate(-8deg); }
      .sticky-tape.right { right: 18px; transform: rotate(8deg); }
      .sticky-pain {
        font-family: 'Kalam', 'Caveat', cursive;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.3;
        color: #2a1d0d;
        text-decoration: line-through;
        text-decoration-color: rgba(180, 30, 30, 0.7);
        text-decoration-thickness: 2px;
        letter-spacing: 0.01em;
      }
      .sticky-divider {
        width: 32px; height: 2px;
        background: rgba(0,0,0,0.18);
        border-radius: 2px;
      }
      .sticky-solution {
        font-family: 'Kalam', 'Caveat', cursive;
        font-size: 17px;
        line-height: 1.45;
        color: #1a1208;
        font-weight: 400;
        letter-spacing: 0.005em;
      }
      .sticky-solution strong {
        font-weight: 700;
        background: linear-gradient(180deg, transparent 62%, rgba(255, 215, 60, 0.75) 62%);
        padding: 0 2px;
        color: #0d0805;
      }
      .sticky-yellow { background: linear-gradient(135deg, #FFF8C4 0%, #FFEB85 100%); }
      .sticky-pink   { background: linear-gradient(135deg, #FFE4EC 0%, #FFC4D4 100%); }
      .sticky-blue   { background: linear-gradient(135deg, #D6EDFF 0%, #B0D8FF 100%); }
      .sticky-green  { background: linear-gradient(135deg, #DFF4D2 0%, #BFE5A6 100%); }
      .sticky-lavender { background: linear-gradient(135deg, #E8DEFF 0%, #CFC0F8 100%); }
      .sticky-peach  { background: linear-gradient(135deg, #FFE6CC 0%, #FFCAA3 100%); }
      @media (max-width: 600px) {
        .sticky-grid { gap: 28px 16px; padding: 20px 0 32px; }
        .sticky-note { transform: none !important; min-height: 200px; }
      }
    `}</style>
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Kalam:wght@400;700&display=swap" rel="stylesheet" />
  </section>;


const StickyNote = ({ color, rotate = 0, tape = 'center', pain, solution }) => {
  // Bold the second half of solution starting after first sentence-end
  const parts = solution.split(/(?<=[.!?])\s+/);
  const firstHalf = parts[0];
  const rest = parts.slice(1).join(' ');
  return (
    <div className={`sticky-note sticky-${color}`} style={{ transform: `rotate(${rotate}deg)` }}>
      <div className={`sticky-tape ${tape}`}></div>
      <div className="sticky-pain">{pain}</div>
      <div className="sticky-divider"></div>
      <div className="sticky-solution">
        {firstHalf} {rest && <strong>{rest}</strong>}
      </div>
    </div>);

};


// (legacy ProblemCard kept for reference but no longer used)
const ProblemCard = ({ color, icon, emoji, title, description }) =>
<div className={`card card-accent accent-${color}`}>
    <div style={{ fontSize: 36, marginBottom: 12 }}>{emoji}</div>
    <h3 style={{ fontSize: 22, marginBottom: 10 }}>{title}</h3>
    <p style={{ color: 'var(--text-secondary)', fontSize: 15, lineHeight: 1.6 }}>{description}</p>
  </div>;


// ============ SECTION 3: AI AGENTS / SOLUTION ============
const agents = [
{ id: 'ivy', name: 'Ivy', role: 'Learning Plan Architect', tone: 'green',
  bg: 'linear-gradient(135deg, #d4f1c5 0%, #b5e099 100%)',
  chip: 'rgba(80, 130, 50, 0.12)', chipText: '#3d6020',
  pitch: 'I build your year, your way.',
  detail: 'Ivy maps your whole school year around each kid\'s strengths, weaknesses, and learning style. Drag-and-drop calendar. Goals, lessons, schedule, done in one afternoon.',
  actions: ['Year-long plans', 'Goal tracking', 'Learning styles'] },
{ id: 'milo', name: 'Milo', role: 'Worksheet Maker', tone: 'blue',
  bg: 'linear-gradient(135deg, #c7e6ff 0%, #9fcEff 100%)',
  chip: 'rgba(20, 80, 160, 0.12)', chipText: '#1e4f8a',
  pitch: 'I make worksheets in 30 seconds.',
  detail: 'Milo prints practice sheets the second a kid needs more reps. Math drills, vocab, spelling, handwriting — differentiated by level, ready to print.',
  actions: ['Math · ELA · Science', 'Auto-differentiated', 'Print-ready PDF'] },
{ id: 'penny', name: 'Penny', role: 'Grading & Feedback', tone: 'pink',
  bg: 'linear-gradient(135deg, #ffd9e4 0%, #ffb8cc 100%)',
  chip: 'rgba(160, 40, 70, 0.12)', chipText: '#8a2849',
  pitch: 'I grade a stack in minutes.',
  detail: 'Snap a photo of any assignment. Penny scores it, flags the misses, and writes warm, kid-specific feedback. You review and approve — never automated alone.',
  actions: ['Photo-to-grade', 'Custom rubrics', 'Parent-approved'] },
{ id: 'pip', name: 'Pip', role: 'Lesson Plan Pro', tone: 'yellow',
  bg: 'linear-gradient(135deg, #fff6b3 0%, #ffe873 100%)',
  chip: 'rgba(120, 90, 20, 0.14)', chipText: '#7a5d18',
  pitch: 'I write lessons ready to teach.',
  detail: 'Pip writes full lesson plans with objectives, materials, warm-ups, instruction, and discussion. Plus optional lecture scripts so you can read it aloud word-for-word.',
  actions: ['Full lesson plans', 'Lecture scripts', 'Aligned to standards'] },
{ id: 'sage', name: 'Sage', role: 'Study Guide Tutor', tone: 'lavender',
  bg: 'linear-gradient(135deg, #e0d4ff 0%, #c5b3f2 100%)',
  chip: 'rgba(80, 50, 150, 0.14)', chipText: '#5e3da8',
  pitch: 'I tutor with patience, on call.',
  detail: 'Sage turns any unit into study guides, flashcards, and key-term sheets. Made for the kid who needs another way in — visual, narrative, or step-by-step.',
  actions: ['Study guides', 'Flashcards', 'Key-term reviews'] },
{ id: 'scout', name: 'Scout', role: 'Curriculum Scout', tone: 'teal',
  bg: 'linear-gradient(135deg, #c4ece4 0%, #95d8c9 100%)',
  chip: 'rgba(20, 110, 100, 0.14)', chipText: '#16685e',
  pitch: 'I find what to teach next.',
  detail: 'Scout scans your standards, your kid\'s progress, and your library — then surfaces topics, books, and project ideas you\'d never have found yourself.',
  actions: ['Topic suggestions', 'Book matches', 'Project ideas'] }];


const SolutionSection = () => {
  const [active, setActive] = React.useState('ivy');
  const a = agents.find((x) => x.id === active);
  return (
    <section id="features" style={{ position: 'relative', overflow: 'hidden' }}>
    <div className="container">
      <div className="section-head reveal" style={{ textAlign: 'center' }}>
        <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
          <span>✨</span> Meet the team
        </div>
        <h2 style={{ fontSize: 'clamp(36px, 5.5vw, 64px)', letterSpacing: '-0.03em' }}>
          Six AI helpers. <span className="gradient-text">One teaching team.</span>
        </h2>
        <p style={{ fontSize: 19, maxWidth: 680, margin: '20px auto 0', color: 'var(--text-secondary)' }}>
          Each one specializes in something hard. Together, they take the night shift so you don't have to.
        </p>
      </div>

      {/* Hero agent spotlight */}
      <div className="agent-stage reveal">
        <div className="agent-portrait" style={{ background: a.bg }}>
          <img src={`agents/${a.id}.png`} alt={a.name} key={a.id} />
          <div className="agent-name-tag" style={{ background: a.chip, color: a.chipText }}>
            {a.name} · {a.role}
          </div>
        </div>
        <div className="agent-detail">
          <div style={{ fontSize: 14, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--text-tertiary)', marginBottom: 12 }}>
            {a.name}
          </div>
          <h3 className="agent-pitch">{a.pitch}</h3>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--text-secondary)', marginBottom: 24 }}>
            {a.detail}
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 28 }}>
            {a.actions.map((act) =>
              <span key={act} style={{
                fontSize: 13, fontWeight: 600,
                padding: '6px 12px', borderRadius: 999,
                background: a.chip, color: a.chipText
              }}>{act}</span>
              )}
          </div>
          <a href="ai-tools.html" className="btn btn-secondary" style={{ minHeight: 44 }}>
            See how {a.name} works <Icon name="arrowRight" size={14} />
          </a>
        </div>
      </div>

      {/* Agent picker row */}
      <div className="agent-picker reveal">
        {agents.map((ag) =>
          <button
            key={ag.id}
            onClick={() => setActive(ag.id)}
            className={`agent-thumb ${active === ag.id ? 'is-active' : ''}`}
            aria-label={`Meet ${ag.name}`}>
            
            <div className="agent-thumb-img" style={{ background: ag.bg }}>
              <img src={`agents/${ag.id}.png`} alt="" />
            </div>
            <div className="agent-thumb-name">{ag.name}</div>
            <div className="agent-thumb-role">{ag.role}</div>
          </button>
          )}
      </div>
    </div>

    <style>{`
      .agent-stage {
        display: flex;
        flex-direction: column;
        gap: 32px;
        align-items: stretch;
        max-width: 1080px;
        margin: 0 auto 36px;
      }
      @media (min-width: 880px) {
        .agent-stage { flex-direction: row; gap: 56px; align-items: center; }
        .agent-stage > .agent-portrait { flex: 0 0 420px; }
        .agent-stage > .agent-detail { flex: 1 1 auto; min-width: 0; }
      }
      .agent-portrait {
        position: relative;
        border-radius: 28px;
        padding: 0;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        box-shadow: 0 24px 48px -12px rgba(0,0,0,0.18), 0 8px 16px -4px rgba(0,0,0,0.08);
      }
      .agent-portrait img {
        width: 100%; height: 100%; object-fit: cover;
        animation: agentSwap 600ms cubic-bezier(.2,.8,.2,1);
      }
      @keyframes agentSwap {
        from { opacity: 0; transform: scale(1.04); }
        to { opacity: 1; transform: scale(1); }
      }
      .agent-name-tag {
        position: absolute;
        bottom: 18px; left: 18px;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 13px; font-weight: 700;
        backdrop-filter: blur(12px);
        background: rgba(255,255,255,0.85);
      }
      .agent-pitch {
        font-size: clamp(28px, 3.4vw, 40px);
        line-height: 1.1;
        letter-spacing: -0.02em;
        margin-bottom: 16px;
        font-family: var(--font-display);
      }
      .agent-picker {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        max-width: 1080px;
        margin: 0 auto;
      }
      @media (min-width: 720px) {
        .agent-picker { grid-template-columns: repeat(6, 1fr); gap: 14px; }
      }
      .agent-thumb {
        background: var(--bg-card);
        border: 2px solid var(--border-subtle);
        border-radius: 18px;
        padding: 14px 10px 16px;
        cursor: pointer;
        transition: all 200ms cubic-bezier(.2,.8,.2,1);
        text-align: center;
        font-family: inherit;
        display: flex; flex-direction: column; align-items: center;
      }
      .agent-thumb:hover {
        transform: translateY(-3px);
        border-color: var(--primary-purple);
        box-shadow: 0 8px 20px -4px rgba(120, 80, 200, 0.18);
      }
      .agent-thumb.is-active {
        border-color: var(--primary-purple);
        background: var(--bg-lavender);
        box-shadow: 0 8px 20px -4px rgba(120, 80, 200, 0.22);
        transform: translateY(-3px);
      }
      .agent-thumb-img {
        width: 64px; height: 64px;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 10px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      }
      .agent-thumb-img img { width: 100%; height: 100%; object-fit: cover; }
      .agent-thumb-name {
        font-size: 15px; font-weight: 700;
        color: var(--text-primary);
        font-family: var(--font-display);
      }
      .agent-thumb-role {
        font-size: 11px;
        color: var(--text-tertiary);
        margin-top: 2px;
        line-height: 1.2;
      }
    `}</style>
  </section>);
};


// ============ SECTION 4: AI TOOLS SHOWCASE ============
// Sample outputs shown in the preview modal — just enough to sell the feature
const toolPreviews = {
  'Lesson Plans': { subject: 'Science · 4th Grade', title: 'Photosynthesis Lab', body: 'Objective: Students will explain how plants convert sunlight into energy.\n\nMaterials: 2 bean plants · plastic cups · aluminum foil · sunlight\n\nWarm-up (5 min) · Instruction (20 min) · Lab (25 min) · Discussion (10 min)' },
  'Exams & Quizzes': { subject: 'Math · 5th Grade', title: 'Fractions Quiz', body: '1. What is 3/4 + 1/2?\n2. Simplify 8/12.\n3. Convert 2.75 to a fraction.\n4. A recipe calls for 2/3 cup flour. If you double it…\n\n+ 6 more · Answer key included' },
  'IEP Plans': { subject: 'Special Education', title: 'IEP — Reading Support', body: 'Present levels: Student reads at 2nd-grade level; grade placement 4th.\n\nGoals: Decode multisyllabic words at 90% accuracy by Q4.\n\nAccommodations: Extended time · Text-to-speech · Quiet testing room' },
  'Homework': { subject: 'History · 6th Grade', title: 'Ancient Egypt', body: '1. Label the Nile River on the map.\n2. Who was Ramses II?\n3. Why was the annual flood important?\n4. Short answer: Describe two gods and their roles.\n\nDue: Friday · 30 min' },
  'Worksheets': { subject: 'English · 3rd Grade', title: 'Nouns & Verbs', body: 'Circle the nouns · underline the verbs:\n\n"The brown dog ran across the field."\n"Emma painted a bright picture."\n"The kettle whistled on the stove."\n\n+ 12 more sentences' },
  'Study Guides': { subject: 'Science · 7th Grade', title: 'Cells Unit Review', body: 'Key terms: nucleus, mitochondria, cytoplasm, cell membrane…\n\nBig ideas: All living things are made of cells. Cells contain organelles. Mitochondria produce energy.\n\nPractice questions: 15 · Flashcard set included' },
  'Multiple Choice': { subject: 'Math · Grade 8', title: 'Linear Equations', body: 'What is the slope of y = 3x + 2?\n  a) 2   b) 3   c) -3   d) 1/3 ✓\n\nSolve for x: 2x + 5 = 17\n  a) 6 ✓   b) 11   c) 22   d) 4\n\n+ 8 more · Explanations included' },
  'Math Problems': { subject: 'Math · 2nd Grade', title: 'Word Problems', body: 'Sam has 14 marbles. He gives 6 to his sister. How many does he have left?\n\nA baker made 24 cupcakes. She puts them in boxes of 4. How many boxes?\n\n+ 18 more · Differentiated by level' },
  'Syllabi': { subject: 'High School · Year-long', title: 'American Literature', body: 'Unit 1: Colonial & Revolutionary (6 wks)\nUnit 2: Romanticism & Transcendentalism (6 wks)\nUnit 3: Realism & Regionalism (6 wks)\nUnit 4: Modernism (6 wks)\n\nTexts · Assessments · Grading policy' },
  'Lecture Scripts': { subject: 'Science · 5th Grade', title: 'The Water Cycle', body: 'Good morning, scientists! Today we\'re going to follow a single water droplet on an incredible journey…\n\n[Show diagram] Here\'s what we\'re going to cover: evaporation, condensation, precipitation, collection.\n\n25-minute script · natural tone' },
  'Stories': { subject: 'Creative Writing', title: 'The Lighthouse Keeper\'s Cat', body: 'Mira had lived at the lighthouse all her nine lives — at least, the four she could remember. Every night she climbed the 283 spiral stairs with Captain Holloway…\n\n1,200 words · Comprehension questions included' },
  'Course Design': { subject: 'New Course', title: 'Intro to Astronomy', body: 'Week 1: What is a star?\nWeek 2: Our solar system\nWeek 3: The moon\nWeek 4: Galaxies & the universe\n\n16-week outline · Learning objectives · Resources · Projects' },
  'Learning Plans': { subject: 'Emma · 4th Grade', title: 'Personalized Plan', body: 'Strengths: Visual learner · strong reading comprehension\nGrowth areas: Number fluency · written expression\n\nRecommended approach: Math games 3x/week · Journaling 10 min daily · Audio books alongside reading' },
  'Differentiation': { subject: 'One lesson, 3 levels', title: 'Photosynthesis', body: '3rd grade: "Plants eat sunshine! Their leaves soak it up…"\n\n5th grade: "Plants convert sunlight into glucose through chlorophyll…"\n\n8th grade: "Chloroplasts use light-dependent reactions to split water molecules…"' },
  'Essay Grading': { subject: 'Jake · 5th Grade', title: 'Book Report Feedback', body: 'Thesis: Clear (B+)\nOrganization: Strong intro, weak conclusion (B)\nEvidence: Two solid quotes, needs one more (B-)\nGrammar: 3 comma splices flagged\n\nOverall: B · Specific rewrite suggestions included' },
  'Summaries': { subject: 'Reading comprehension', title: 'Charlotte\'s Web — Ch. 1', body: 'Fern saves a runt piglet from being killed by her father. She names him Wilbur and cares for him on her family\'s farm. The chapter establishes the bond between Fern and the animals…\n\n120 words · Grade-level adjustable' },
  'Games': { subject: 'Printable · Any subject', title: 'Multiplication Bingo', body: '24 bingo cards · Caller list included\n\nHow to play: Call a math fact (7 × 6 = ?). Students mark the answer on their card. First to 5 in a row wins.\n\nPrint · play · done in 15 min' },
  'Flashcards': { subject: 'Vocabulary', title: 'Spanish — Weather', body: 'hace sol · it\'s sunny\nhace frío · it\'s cold\nestá lloviendo · it\'s raining\nnieva · it\'s snowing\n\n+ 16 more · Print or digital · Self-quiz mode' },
  'Correspondence': { subject: 'Parent letter', title: 'Q2 Progress Update', body: 'Dear Mrs. Johnson,\n\nI wanted to share an update on Emma\'s progress this quarter. She has shown significant growth in reading fluency and continues to excel in science…\n\nReady to send · Tone adjustable' },
  'State Documents': { subject: 'Texas', title: 'Notice of Intent', body: 'Letter of Assurance of Instruction\n\nTo: [School District]\nFrom: [Parent Name]\nRe: Homeschool instruction for [Student]\n\nPursuant to Texas Education Code §29.916, this letter confirms…\n\nState-specific · Auto-filled · Print-ready' }
};

const AIToolsSection = () => {
  const [open, setOpen] = React.useState(null);
  const tools = [
  ['Lesson Plans', 'bookOpen', 'blue'], ['Exams & Quizzes', 'clipboard', 'green'],
  ['IEP Plans', 'brain', 'purple'], ['Homework', 'file', 'orange'],
  ['Worksheets', 'edit', 'pink'], ['Study Guides', 'target', 'blue'],
  ['Multiple Choice', 'check', 'green'], ['Math Problems', 'zap', 'purple'],
  ['Syllabi', 'map', 'blue'], ['Lecture Scripts', 'messageCircle', 'pink'],
  ['Stories', 'heart', 'orange'], ['Course Design', 'layers', 'purple'],
  ['Learning Plans', 'user', 'blue'], ['Differentiation', 'layers', 'purple'],
  ['Essay Grading', 'pencil', 'pink'], ['Summaries', 'document', 'green'],
  ['Games', 'gamepad', 'orange'], ['Flashcards', 'bookOpen', 'blue'],
  ['Correspondence', 'mail', 'purple'], ['State Documents', 'shield', 'green']];

  React.useEffect(() => {
    const onKey = (e) => {if (e.key === 'Escape') setOpen(null);};
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  return (
    <section style={{
      background: 'linear-gradient(180deg, var(--bg-base) 0%, hsl(260, 60%, 97%) 50%, var(--bg-base) 100%)',
      position: 'relative'
    }}>
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
            <span className="gradient-text" style={{ fontWeight: 700 }}>✨ AI-powered</span>
          </div>
          <h2>20+ <span className="gradient-text">amazing tools</span>.</h2>
          <p>Every document, worksheet, and lesson plan you'll ever need — generated in seconds, while the kettle boils.</p>
        </div>
        <div className="reveal ai-tools-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 12,
          marginBottom: 40
        }}>
          {tools.map(([name, icon, color], i) =>
          <button key={i} className="ai-tool-card" onClick={() => setOpen({ name, icon, color })} style={{
            background: 'var(--bg-card)',
            border: '1px solid var(--border-subtle)',
            borderRadius: 14,
            padding: '14px 16px',
            display: 'flex', alignItems: 'center', gap: 10,
            transition: 'all 200ms ease',
            cursor: 'pointer',
            textAlign: 'left',
            font: 'inherit',
            color: 'inherit',
            width: '100%'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = 'var(--shadow-md)';e.currentTarget.style.borderColor = 'var(--primary-purple)';}}
          onMouseLeave={(e) => {e.currentTarget.style.transform = 'none';e.currentTarget.style.boxShadow = 'none';e.currentTarget.style.borderColor = 'var(--border-subtle)';}}>
            
              <div className={`icon-box icon-${color}`} style={{ width: 32, height: 32, borderRadius: 8 }}>
                <Icon name={icon} size={16} />
              </div>
              <span style={{ fontSize: 14, fontWeight: 600, flex: 1 }}>{name}</span>
              <Icon name="arrowRight" size={14} style={{ color: 'var(--text-tertiary)', opacity: 0.5 }} />
            </button>
          )}
        </div>
        <div style={{ textAlign: 'center' }}>
          <a href="ai-tools.html" className="btn btn-gradient" style={{ minHeight: 56, fontSize: 16, padding: '14px 28px' }}>
            Explore all AI tools <Icon name="arrowRight" size={18} />
          </a>
        </div>
      </div>
      {open && <AIToolPreview tool={open} onClose={() => setOpen(null)} />}
      <style>{`
        @keyframes aiToolFadeIn { from { opacity: 0 } to { opacity: 1 } }
        @keyframes aiToolSlideUp { from { opacity: 0; transform: translateY(20px) scale(0.97) } to { opacity: 1; transform: translateY(0) scale(1) } }
        @keyframes aiToolType { from { width: 0 } to { width: 100% } }
        @keyframes aiToolShimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
      `}</style>
      <style>{`
        @media (min-width: 640px) { .ai-tool-card { /* 3 col */ } }
        @media (min-width: 768px) { .ai-tools-grid { grid-template-columns: repeat(3, 1fr) !important; } }
        @media (min-width: 1024px) { .ai-tools-grid { grid-template-columns: repeat(4, 1fr) !important; } }
      `}</style>
    </section>);

};

// ============ AI TOOL PREVIEW MODAL ============
const AIToolPreview = ({ tool, onClose }) => {
  const [generating, setGenerating] = React.useState(true);
  const [shown, setShown] = React.useState('');
  const preview = toolPreviews[tool.name] || { subject: 'Any subject', title: tool.name, body: 'Generated output preview.' };

  React.useEffect(() => {
    setGenerating(true);
    setShown('');
    const t1 = setTimeout(() => {
      setGenerating(false);
      // Typewriter
      let i = 0;
      const full = preview.body;
      const id = setInterval(() => {
        i += Math.max(2, Math.floor(full.length / 60));
        setShown(full.slice(0, i));
        if (i >= full.length) clearInterval(id);
      }, 20);
      return () => clearInterval(id);
    }, 800);
    return () => clearTimeout(t1);
  }, [tool.name]);

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 1000,
        background: 'rgba(15, 23, 42, 0.55)',
        backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 20,
        animation: 'aiToolFadeIn 180ms ease'
      }}>
      
      <div
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-label={`Preview: ${tool.name}`}
        style={{
          background: 'white',
          borderRadius: 20,
          maxWidth: 520, width: '100%',
          maxHeight: '86vh',
          overflow: 'hidden',
          boxShadow: '0 25px 60px -15px rgba(0,0,0,0.4)',
          animation: 'aiToolSlideUp 280ms cubic-bezier(0.16, 1, 0.3, 1)',
          display: 'flex', flexDirection: 'column'
        }}>
        
        {/* Header: gradient like Classes tiles */}
        <div style={{
          background: `linear-gradient(135deg, var(--${tool.color === 'blue' ? 'primary-blue' : tool.color === 'purple' ? 'primary-purple' : tool.color === 'pink' ? 'primary-pink' : tool.color === 'green' ? 'success-green' : tool.color === 'orange' ? 'warning-orange' : 'primary-blue'}), var(--primary-pink))`,
          padding: '20px 22px',
          display: 'flex', alignItems: 'center', gap: 14,
          color: 'white',
          position: 'relative'
        }}>
          <div style={{ background: 'rgba(255,255,255,0.22)', borderRadius: 10, padding: 10, backdropFilter: 'blur(6px)' }}>
            <Icon name={tool.icon} size={20} style={{ color: 'white' }} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.85 }}>
              ✨ AI Generator
            </div>
            <div style={{ fontSize: 17, fontWeight: 800, fontFamily: 'var(--font-display)', marginTop: 2 }}>
              {tool.name}
            </div>
          </div>
          <button onClick={onClose} aria-label="Close" style={{
            background: 'rgba(255,255,255,0.2)', border: 'none', borderRadius: 8,
            width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'white', cursor: 'pointer'
          }}>
            <Icon name="close" size={16} />
          </button>
        </div>

        {/* Body */}
        <div style={{ padding: '20px 22px', overflow: 'auto', flex: 1 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-secondary)', letterSpacing: '0.05em', textTransform: 'uppercase', marginBottom: 6 }}>
            {preview.subject}
          </div>
          <div style={{ fontSize: 19, fontWeight: 800, fontFamily: 'var(--font-display)', marginBottom: 14, color: 'var(--text-primary)' }}>
            {preview.title}
          </div>

          {generating ?
          <div style={{ padding: '8px 0' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14, color: 'var(--primary-purple)', fontWeight: 600, fontSize: 13 }}>
                <span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: '50%', background: 'var(--primary-purple)', animation: 'pulse 1.2s infinite' }} />
                Generating…
              </div>
              {[0.92, 0.78, 0.85, 0.6].map((w, i) =>
            <div key={i} style={{
              height: 10, borderRadius: 4, marginBottom: 8, width: `${w * 100}%`,
              background: 'linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%)',
              backgroundSize: '200% 100%',
              animation: 'aiToolShimmer 1.4s linear infinite'
            }} />
            )}
            </div> :

          <div style={{
            background: 'var(--bg-subtle, #f8fafc)',
            border: '1px solid var(--border-subtle)',
            borderRadius: 12, padding: 16,
            fontSize: 14, lineHeight: 1.65,
            color: 'var(--text-primary)',
            whiteSpace: 'pre-wrap',
            fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
            minHeight: 140
          }}>
              {shown}
              <span style={{ display: 'inline-block', width: 8, height: 16, background: 'var(--primary-purple)', marginLeft: 2, verticalAlign: 'text-bottom', animation: 'pulse 1s infinite' }} />
            </div>
          }

          <div style={{ display: 'flex', gap: 8, marginTop: 14, flexWrap: 'wrap' }}>
            {['Copy', 'Download PDF', 'Edit in app'].map((label, i) =>
            <div key={label} style={{
              padding: '7px 12px',
              borderRadius: 8,
              fontSize: 12, fontWeight: 600,
              background: i === 0 ? 'var(--signature-gradient)' : 'white',
              color: i === 0 ? 'white' : 'var(--text-primary)',
              border: i === 0 ? 'none' : '1px solid var(--border-subtle)'
            }}>{label}</div>
            )}
          </div>
        </div>

        {/* Footer */}
        <div style={{
          padding: '14px 22px',
          borderTop: '1px solid var(--border-subtle)',
          background: 'var(--bg-subtle, #f8fafc)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12
        }}>
          <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>
            One of 20+ included with ClassGenie.
          </div>
          <a href="#" className="btn btn-gradient" style={{ fontSize: 13, padding: '8px 14px', minHeight: 0 }}>
            Start for free
          </a>
        </div>
      </div>
      <style>{`@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.3 } }`}</style>
    </div>);

};

// ============ SECTION 5: HOW IT WORKS ============
const HowItWorks = () =>
<section id="how-it-works" style={{ background: 'var(--bg-card)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
    <div className="container">
      <div className="section-head reveal" style={{ textAlign: 'center' }}>
        <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
          <span style={{ color: 'var(--success-green)' }}>⚡</span>
          From overwhelmed to organized, in one afternoon
        </div>
        <h2 style={{ fontSize: 'clamp(36px, 5.5vw, 64px)', letterSpacing: '-0.03em' }}>
          From scattered and stressed to <span className="gradient-text">clear and ready</span>.
        </h2>
        <p style={{ fontSize: 19, maxWidth: 660, margin: '20px auto 0', color: 'var(--text-secondary)' }}>
          No more cobbling next week together from a dozen tabs and a tired brain. Get a clear plan — without spending your whole Sunday on it.
        </p>
      </div>

      <div className="hiw-grid reveal">
        {[
      { n: 1, time: '5 min', accent: '#3B82F6', accentBg: '#dbeafe',
        kicker: 'Tell us about your students',
        title: 'Add your students.',
        body: 'Name, grade, learning style, strengths, accommodations. Skip what you don\'t know — the team picks up from wherever you start.',
        mock: 'students' },
      { n: 2, time: '20 min', accent: '#7C3AED', accentBg: '#ede9fe',
        kicker: 'Let Ivy draft your year',
        title: 'A school year, mapped subject by subject.',
        body: 'Ivy reads each kid\'s profile and your state\'s requirements, then drafts 36 weeks of lessons. Drag, drop, swap — the calendar rebalances itself.',
        mock: 'curriculum' },
      { n: 3, time: 'Daily', accent: '#EC4899', accentBg: '#fce7f3',
        kicker: 'Teach. Generate. Grade.',
        title: 'The team takes the night shift.',
        body: 'Need a worksheet? Milo. Lesson? Pip. Quiz, study guide, transcript? Sage, Penny, the gang. Click, get, move on.',
        mock: 'actions' }].
      map((step) =>
      <div key={step.n} className="hiw-card-v2">
            <div className="hiw-card-head">
              <div className="hiw-num-v2" style={{ background: step.accent }}>{step.n}</div>
              <div className="hiw-time-v2" style={{ background: step.accentBg, color: step.accent }}>
                {step.time}
              </div>
            </div>
            <div className="hiw-kicker" style={{ color: step.accent }}>{step.kicker}</div>
            <h3 className="hiw-title">{step.title}</h3>
            <p className="hiw-body">{step.body}</p>
            <div className="hiw-mock-v2">
              <HiwMock type={step.mock} accent={step.accent} accentBg={step.accentBg} />
            </div>
          </div>
      )}
      </div>

      {/* Outcome callout */}
      <div className="reveal" style={{ marginTop: 40, textAlign: 'center', padding: '36px 32px', background: 'var(--bg-lavender)', borderRadius: 24, maxWidth: 760, marginLeft: 'auto', marginRight: 'auto', border: '1px solid rgba(120, 80, 200, 0.15)' }}>
        <div style={{ fontSize: 13, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--primary-purple)', marginBottom: 14 }}>The result</div>
        <div style={{ fontSize: 'clamp(22px, 3vw, 30px)', fontWeight: 700, lineHeight: 1.3, fontFamily: 'var(--font-display)', letterSpacing: '-0.01em' }}>
          You spend your time <em style={{ color: 'var(--primary-purple)', fontStyle: 'normal' }}>teaching your students</em>, not building lesson plans at 11 pm.
        </div>
      </div>
    </div>

    <style>{`
      .hiw-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      @media (min-width: 860px) {
        .hiw-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
      }
      .hiw-card-v2 {
        background: var(--bg-base);
        border: 1px solid var(--border-subtle);
        border-radius: 24px;
        padding: 28px 28px 24px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms;
      }
      .hiw-card-v2:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 32px -8px rgba(0,0,0,0.10);
      }
      .hiw-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 4px;
      }
      .hiw-num-v2 {
        width: 44px; height: 44px;
        border-radius: 14px;
        color: white;
        display: flex; align-items: center; justify-content: center;
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 800;
        box-shadow: 0 6px 14px -4px rgba(0,0,0,0.20);
      }
      .hiw-time-v2 {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 6px 12px;
        border-radius: 999px;
      }
      .hiw-kicker {
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
      }
      .hiw-title {
        font-size: clamp(22px, 2.4vw, 26px);
        line-height: 1.2;
        letter-spacing: -0.01em;
        margin: 0;
      }
      .hiw-body {
        color: var(--text-secondary);
        font-size: 15px;
        line-height: 1.6;
        margin: 0;
      }
      .hiw-mock-v2 {
        margin-top: auto;
        padding-top: 8px;
      }
      .hiw-mock-card {
        background: var(--bg-card);
        border: 1px solid var(--border-subtle);
        border-radius: 14px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .hiw-mock-row-v2 {
        display: grid;
        grid-template-columns: 36px 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 10px 12px;
        background: var(--bg-base);
        border: 1px solid var(--border-subtle);
        border-radius: 10px;
      }
      .hiw-tag-v2 {
        font-size: 10px;
        font-weight: 700;
        padding: 4px 9px;
        border-radius: 999px;
        white-space: nowrap;
      }
      @media (max-width: 600px) {
        .hiw-card-v2 { padding: 22px 22px 20px; }
      }
    `}</style>
  </section>;


const HiwMock = ({ type, accent, accentBg }) => {
  if (type === 'students') {
    return (
      <div className="hiw-mock-card">
        {[
        ['EJ', 'av-green', 'Emma · 4th', 'Visual learner'],
        ['JJ', 'av-purple', 'Jake · 6th', 'Hands-on, loves math'],
        ['LJ', 'av-pink', 'Liv · 1st', 'Just starting out']].
        map(([i, c, name, sub]) =>
        <div key={i} className="hiw-mock-row-v2">
            <div className={`avatar ${c}`} style={{ width: 36, height: 36, fontSize: 13 }}>{i}</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{name}</div>
              <div style={{ fontSize: 11, color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{sub}</div>
            </div>
            <div className="hiw-tag-v2" style={{ background: '#dcfce7', color: '#166534' }}>Saved</div>
          </div>
        )}
      </div>);

  }
  if (type === 'curriculum') {
    const rows = [
    ['Math', '#7c3aed'],
    ['Science', '#10b981'],
    ['English', '#3b82f6'],
    ['History', '#ec4899'],
    ['Reading', '#f59e0b']];

    return (
      <div className="hiw-mock-card" style={{ gap: 7 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '70px repeat(3, 1fr)', gap: 6, alignItems: 'center', paddingBottom: 4, borderBottom: '1px solid var(--border-subtle)' }}>
          <div></div>
          <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-tertiary)', textAlign: 'center', letterSpacing: '0.05em' }}>WK 1</div>
          <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-tertiary)', textAlign: 'center', letterSpacing: '0.05em' }}>WK 2</div>
          <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-tertiary)', textAlign: 'center', letterSpacing: '0.05em' }}>WK 3</div>
        </div>
        {rows.map(([sub, color]) =>
        <div key={sub} style={{ display: 'grid', gridTemplateColumns: '70px repeat(3, 1fr)', gap: 6, alignItems: 'center' }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-secondary)' }}>{sub}</div>
            <div style={{ background: color, color: 'white', borderRadius: 5, height: 20, fontSize: 10 }}></div>
            <div style={{ background: color, opacity: 0.7, color: 'white', borderRadius: 5, height: 20 }}></div>
            <div style={{ border: `1.5px dashed ${color}`, color, borderRadius: 5, height: 20 }}></div>
          </div>
        )}
      </div>);

  }
  // actions
  return (
    <div className="hiw-mock-card">
      {[
      ['📝', 'Pop quiz · fractions', 'Milo · 8s'],
      ['✓', 'Jake\'s essay graded', 'Penny · 12s'],
      ['📄', 'TX letter of intent', 'Filed · auto']].
      map(([emoji, label, status], i) =>
      <div key={i} className="hiw-mock-row-v2">
          <div style={{ width: 36, height: 36, borderRadius: 10, background: accentBg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, color: accent, fontWeight: 800 }}>{emoji}</div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 700, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</div>
            <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>{status}</div>
          </div>
          <div className="hiw-tag-v2" style={{ background: '#dcfce7', color: '#166534' }}>Done</div>
        </div>
      )}
    </div>);

};


const StepMock = ({ type }) => {
  if (type === 'students') {
    return (
      <div style={{ background: 'linear-gradient(135deg, #ecfdf5, #dbeafe)', padding: 20, minHeight: 180 }}>
        <div style={{ display: 'flex', gap: 10 }}>
          {[['EJ', 'av-green', 'Emma', '4th'], ['JJ', 'av-purple', 'Jake', '5th']].map(([i, c, n, g]) =>
          <div key={i} style={{ background: 'white', borderRadius: 10, padding: 12, flex: 1, border: '1px solid var(--border-subtle)' }}>
              <div className={`avatar ${c}`} style={{ width: 36, height: 36, fontSize: 13, marginBottom: 8 }}>{i}</div>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{n} Johnson</div>
              <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{g} Grade</div>
            </div>
          )}
        </div>
      </div>);

  }
  if (type === 'curriculum') {
    return (
      <div style={{ background: 'linear-gradient(135deg, #eef2ff, #fae8ff)', padding: 20, minHeight: 180 }}>
        {[
        ['Math', 'Place Value', 'Multiplication', 'var(--primary-purple)'],
        ['Science', 'Scientific Method', 'Life Science', 'var(--success-green)'],
        ['English', 'Reading', 'Creative Writing', 'var(--primary-blue)']].
        map(([s, a, b, c], i) =>
        <div key={i} style={{ display: 'flex', gap: 6, marginBottom: 6, alignItems: 'center' }}>
            <div style={{ fontSize: 10, fontWeight: 600, width: 50 }}>{s}</div>
            <div style={{ flex: 1, background: c, color: 'white', borderRadius: 4, padding: '3px 6px', fontSize: 9, fontWeight: 600 }}>{a}</div>
            <div style={{ flex: 1, background: c, opacity: 0.8, color: 'white', borderRadius: 4, padding: '3px 6px', fontSize: 9, fontWeight: 600 }}>{b}</div>
            <div style={{ flex: 1, border: `1px dashed ${c}`, color: c, borderRadius: 4, padding: '3px 6px', fontSize: 9, fontWeight: 600 }}>Next up</div>
          </div>
        )}
      </div>);

  }
  return (
    <div style={{ background: 'linear-gradient(135deg, #fae8ff, #fce7f3)', padding: 20, minHeight: 180 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {[['sparkles', 'Lesson Plan'], ['clipboard', 'Quiz'], ['document', 'IEP'], ['file', 'Worksheet']].map(([i, l]) =>
        <div key={l} style={{ background: 'white', borderRadius: 8, padding: 10, display: 'flex', alignItems: 'center', gap: 8, border: '1px solid var(--border-subtle)' }}>
            <div className="icon-box icon-purple" style={{ width: 26, height: 26, borderRadius: 6 }}>
              <Icon name={i} size={13} />
            </div>
            <span style={{ fontSize: 12, fontWeight: 600 }}>{l}</span>
            <div style={{ marginLeft: 'auto', background: 'var(--signature-gradient)', color: 'white', fontSize: 9, padding: '2px 6px', borderRadius: 4, fontWeight: 600 }}>✨</div>
          </div>
        )}
      </div>
    </div>);

};

// ============ SECTION 6: TESTIMONIALS ============
const Testimonials = () => {
  const items = [
  { quote: "I got four hours of my Sunday back. Four. I used to plan lessons until midnight; now the AI drafts them and I just tweak. Game changer for a mom of three.", name: 'Sarah M.', loc: 'Austin, TX', role: 'mom of 3', initials: 'SM', color: 'av-blue' },
  { quote: "My daughter's transcript got her into her top-choice college. The admissions office literally complimented the formatting. I just hit a button.", name: 'Jennifer R.', loc: 'Cincinnati, OH', role: 'homeschool for 11 years', initials: 'JR', color: 'av-purple' },
  { quote: "Five kids, five grade levels. The differentiation tool takes one lesson and gives me five versions. I stopped crying on Sundays.", name: 'Rebecca K.', loc: 'Nashville, TN', role: 'mom of 5', initials: 'RK', color: 'av-pink' },
  { quote: "My son has dyslexia. The IEP generator helped me document accommodations in language our evaluator actually recognized. Huge.", name: 'Amanda L.', loc: 'Phoenix, AZ', role: 'special needs parent', initials: 'AL', color: 'av-orange' },
  { quote: "Running our co-op used to mean a shared Google Drive and a lot of confusion. Now we have rosters, invite codes, and a central calendar. Admins rejoice.", name: 'Michelle T.', loc: 'Charlotte, NC', role: 'co-op director', initials: 'MT', color: 'av-green' },
  { quote: "I'm the dad who took over homeschooling this year. ClassGenie made me look like I knew what I was doing. My wife was impressed. Still am.", name: 'David P.', loc: 'Denver, CO', role: 'dad of 2', initials: 'DP', color: 'av-teal' }];

  return (
    <section style={{ background: 'var(--bg-card)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
            <Stars /> <span style={{ marginLeft: 4 }}>4.9 from 500+ families</span>
          </div>
          <h2><span className="gradient-text">500+ homeschool families.</span> One subscription.</h2>
        </div>
        <div className="grid grid-3 reveal">
          {items.map((t, i) =>
          <div key={i} className={`card card-accent ${i % 3 === 0 ? 'accent-blue' : i % 3 === 1 ? 'accent-purple' : 'accent-pink'}`}>
              <Stars />
              <p style={{ fontSize: 16, lineHeight: 1.6, marginTop: 12, marginBottom: 20, color: 'var(--text-primary)', fontStyle: 'italic', fontFamily: 'Georgia, serif' }}>
                "{t.quote}"
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 16, borderTop: '1px solid var(--border-subtle)' }}>
                <div className={`avatar ${t.color}`}>{t.initials}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{t.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{t.loc} · {t.role}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// ============ SECTION 7: VS THE AI TOOL BELT ============
// Claims about named products are sourced from their own marketing pages
// (magicschool.ai, diffit.me). Keep them descriptive, never disparaging, and
// re-check before editing — these companies ship fast.
const PricingArgument = () =>
<section>
    <div className="container">
      <div className="section-head reveal">
        <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
          <span>🧭</span> Why teachers move over
        </div>
        <h2>Most AI tools stop at the worksheet. <span className="gradient-text">We keep the record.</span></h2>
        <p style={{ color: 'var(--text-secondary)', fontSize: 17, maxWidth: 620, margin: '16px auto 0', lineHeight: 1.6 }}>
          Generators are good at making things. None of them remember what your student
          did in October, or turn a year of work into a transcript.
        </p>
      </div>
      <div className="pricing-compare reveal" style={{ display: 'grid', gap: 24, alignItems: 'start' }}>
        {/* The tool belt */}
        <div className="card" style={{ background: 'var(--bg-subtle)', border: '1px dashed var(--border-strong)' }}>
          <div style={{ fontSize: 13, fontWeight: 700, textTransform: 'uppercase', color: 'var(--text-tertiary)', letterSpacing: '0.08em', marginBottom: 6 }}>The AI tool belt</div>
          <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>MagicSchool, Diffit and friends</div>
          {[
        'Generates a lesson plan \u2014 you file it yourself',
        'Writes a rubric \u2014 you retype the scores',
        'Drafts report card comments \u2014 your gradebook lives elsewhere',
        'Levels a reading passage \u2014 it lands in Downloads',
        'Nothing carries into next term'].
        map((l) =>
        <div key={l} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '12px 0', borderBottom: '1px solid var(--border-subtle)', fontSize: 15, color: 'var(--text-secondary)' }}>
              <Icon name="minus" size={17} style={{ color: 'var(--text-tertiary)', flex: '0 0 auto', marginTop: 2 }} />
              <span>{l}</span>
            </div>
        )}
          <div style={{ paddingTop: 18, fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.55 }}>
            Great at making things. Built to plug into your gradebook, not to be one.
          </div>
        </div>
        {/* ClassGenie */}
        <div style={{ position: 'relative', padding: 2, borderRadius: 18, background: 'var(--signature-gradient)', boxShadow: 'var(--shadow-lg)' }}>
          <div style={{ background: 'var(--bg-card)', borderRadius: 16, padding: 32 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
              <Logo size={20} />
              <span className="badge badge-purple" style={{ marginLeft: 'auto' }}>Free to start</span>
            </div>
            {[
          'Generates all of it too \u2014 20+ AI tools',
          'The plan lands in your planner',
          'The scores land in your gradebook',
          'The year rolls up into transcripts and report cards',
          'Students and families see it in the portal'].
          map((l) =>
          <div key={l} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '12px 0', borderBottom: '1px solid var(--border-subtle)', fontSize: 15 }}>
                <Icon name="check" size={18} style={{ color: 'var(--success-green)', flex: '0 0 auto', marginTop: 1 }} />
                <span>{l}</span>
              </div>
          )}
            <div style={{ paddingTop: 18, fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.55 }}>
              One place that generates the work <em style={{ fontStyle: 'normal', color: 'var(--text-primary)', fontWeight: 600 }}>and remembers it</em>.
            </div>
            <a href="https://app.homescholarapp.com/pricing" className="btn btn-gradient btn-full" style={{ marginTop: 20, minHeight: 52 }}>
              Start for free
            </a>
            <div style={{ textAlign: 'center', color: 'var(--text-secondary)', fontSize: 13, marginTop: 10 }}>
              No card. Your first 14 days include everything.
            </div>
          </div>
        </div>
      </div>
      <div style={{ textAlign: 'center', marginTop: 40 }} className="reveal">
        <h3 style={{ fontSize: 'clamp(24px, 3.4vw, 34px)', maxWidth: 720, margin: '0 auto', lineHeight: 1.3 }}>
          Keep your favourite generator. <span className="gradient-text">Just stop losing the record.</span>
        </h3>
      </div>
    </div>
    <style>{`
      @media (min-width: 768px) { .pricing-compare { grid-template-columns: 1fr 1fr; } }
    `}</style>
  </section>;


// ============ SECTION 8: TEAMS ============
const CoopSection = () =>
<section style={{ background: 'var(--bg-card)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
    <div className="container">
      <div className="coop-grid reveal" style={{ display: 'grid', gap: 48, alignItems: 'center' }}>
        <div style={{ position: 'relative' }}>
          <div style={{
          position: 'absolute', inset: -20,
          background: 'radial-gradient(ellipse, hsla(330, 75%, 65%, 0.15), transparent 70%)',
          filter: 'blur(30px)'
        }}></div>
          <CoopMock />
        </div>
        <div>
          <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
            <span style={{ color: 'var(--primary-pink)' }}>🏫</span>
            For department heads
          </div>
          <h2 style={{ fontSize: 'clamp(32px, 5vw, 48px)', marginBottom: 20 }}>
            Running a <span className="gradient-text">grade-level team</span>? We built that too.
          </h2>
          <p style={{ fontSize: 17, color: 'var(--text-secondary)', marginBottom: 24 }}>
            Rosters, invite codes, roles, shared resources — all the admin stuff you're doing in three spreadsheets, in one place.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', display: 'grid', gap: 12 }}>
            {['Member management', 'Invite codes & join requests', 'Roles & permissions', 'Shared resources & calendar', 'Local group discovery map'].map((item) =>
          <li key={item} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 15 }}>
                <div className="icon-box icon-pink" style={{ width: 24, height: 24, borderRadius: 6 }}>
                  <Icon name="check" size={14} />
                </div>
                {item}
              </li>
          )}
          </ul>
          <a href="homeschool-co-op-management.html" className="btn btn-secondary">Learn about team hubs <Icon name="arrowRight" size={16} /></a>
        </div>
      </div>
    </div>
    <style>{`
      @media (min-width: 900px) { .coop-grid { grid-template-columns: 1.1fr 1fr; } }
    `}</style>
  </section>;


const CoopMock = () =>
<div style={{ background: 'white', borderRadius: 14, boxShadow: 'var(--shadow-xl)', overflow: 'hidden', border: '1px solid var(--border-subtle)' }}>
    <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', gap: 10 }}>
      <div className="icon-box icon-pink" style={{ width: 32, height: 32, borderRadius: 8 }}>
        <Icon name="globe" size={16} />
      </div>
      <div>
        <div style={{ fontSize: 14, fontWeight: 700 }}>Team Finder</div>
        <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>10 found within 25mi of Austin, TX</div>
      </div>
    </div>
    {[
  { letter: 'H', color: 'blue', name: 'Hill Country Middle — Science', tags: ['Science', '6-8'], status: 'Waitlist', families: 62 },
  { letter: 'T', color: 'orange', name: 'Tiny Explorers Pre-K', tags: ['Pre-K', 'Play-Based'], status: 'Accepting', families: 18 },
  { letter: 'A', color: 'green', name: 'Austin ISD Athletics', tags: ['Sports', 'All Ages'], status: 'Accepting', families: 120 },
  { letter: 'G', color: 'purple', name: 'Grace Community Tutoring', tags: ['Accredited', 'Tutoring'], status: 'Accepting', families: 88 }].
  map((c, i) =>
  <div key={i} style={{ padding: 14, borderBottom: i < 3 ? '1px solid var(--border-subtle)' : 'none', display: 'flex', gap: 12 }}>
        <div className={`icon-box icon-${c.color}`} style={{ width: 44, height: 44, borderRadius: 10, fontSize: 16, fontWeight: 800, fontFamily: 'var(--font-display)', flexShrink: 0 }}>
          {c.letter}
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
            <div style={{ fontSize: 13, fontWeight: 700 }}>{c.name}</div>
            <span className={`badge ${c.status === 'Waitlist' ? 'badge-orange' : 'badge-green'}`} style={{ fontSize: 10 }}>{c.status}</span>
          </div>
          <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginBottom: 6 }}>{c.families} teachers · Thursday</div>
          <div style={{ display: 'flex', gap: 4 }}>
            {c.tags.map((t) => <span key={t} className="badge badge-blue" style={{ fontSize: 10 }}>{t}</span>)}
          </div>
        </div>
      </div>
  )}
  </div>;


// ============ SECTION 9: FAQ ============
const FAQ = () => {
  const faqs = [
  ['Is ClassGenie legal to use in my state?', 'Absolutely. ClassGenie works with every state\'s homeschool laws — we don\'t replace your legal filings, we help you generate the right forms, keep the right records, and stay compliant. We have state-specific document templates for all 50 states.'],
  ['Does it work for multiple kids at different grade levels?', 'That\'s literally what we were built for. Every feature — curriculum, gradebook, transcripts, lesson plans — is multi-student. The differentiation tool takes one lesson and adapts it to each kid\'s level.'],
  ['Can my teen use their own login?', 'Yes. The student portal is included in your subscription. They see their schedule, their assignments, and their grades — you see everything.'],
  ['Will colleges accept the transcripts I generate?', 'Yes. Our transcript format follows the NCAA and Common App standards. We\'ve had students admitted to UT Austin, NYU, BYU, and everywhere in between.'],
  ['How is Pro only $99 a year?', 'That is the Founding Family price, and it stays locked in for as long as you keep your subscription. We believe teaching tools shouldn\'t cost more than your classroom supplies — one plan covers every student on your roster, not per-student pricing.'],
  ['Can I try it before paying?', 'Yes — you can start for free, no credit card required, and test-drive it with your real kids, real curriculum. Upgrade whenever you want everything.'],
  ['What curriculum standards does it align with?', 'Common Core by default, with optional alignment to state standards (TEKS in Texas, etc.), classical/charlotte mason frameworks, and custom scopes.'],
  ['Can I import my existing curriculum?', 'Yes. CSV upload, PDF import (AI parses it), or manual entry. Most users have last year\'s plan in by the end of day one.'],
  ['Does it work on iPad and phones?', 'Yes. The dashboard is fully responsive — moms use it on their phones while kids do math. The student portal works great on iPads.'],
  ['What happens to my data if I cancel?', 'You can export everything — transcripts, grades, lesson plans — as PDF or CSV. We keep your account dormant for 90 days in case you come back.']];

  const [open, setOpen] = useState(0);
  return (
    <section>
      <div className="container" style={{ maxWidth: 820 }}>
        <div className="section-head reveal">
          <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
            <span>🙋‍♀️</span> Real questions from real moms
          </div>
          <h2>Questions teachers <span className="gradient-text">actually ask</span>.</h2>
        </div>
        <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {faqs.map(([q, a], i) =>
          <div key={i} className={`card ${open === i ? 'card-accent accent-purple' : ''}`} style={{ padding: 0, transition: 'all 200ms ease' }}>
              <button
              onClick={() => setOpen(open === i ? -1 : i)}
              style={{
                width: '100%', textAlign: 'left', padding: '20px 24px',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                gap: 16, minHeight: 56, color: 'inherit'
              }}
              aria-expanded={open === i}>
              
                <span style={{ fontSize: 16, fontWeight: 600, fontFamily: 'var(--font-display)' }}>{q}</span>
                <div style={{
                width: 32, height: 32, borderRadius: 8,
                background: open === i ? 'var(--signature-gradient)' : 'var(--bg-subtle)',
                color: open === i ? 'white' : 'var(--text-primary)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0, transition: 'all 200ms ease',
                transform: open === i ? 'rotate(45deg)' : 'none'
              }}>
                  <Icon name="plus" size={16} />
                </div>
              </button>
              {open === i &&
            <div style={{ padding: '0 24px 24px', color: 'var(--text-secondary)', fontSize: 15, lineHeight: 1.7 }}>
                  {a}
                </div>
            }
            </div>
          )}
        </div>
      </div>
    </section>);

};

// ============ SECTION 10: FINAL CTA ============
const FinalCTA = () =>
<section style={{
  background: 'var(--signature-gradient)',
  color: 'white', textAlign: 'center',
  padding: 'clamp(64px, 12vw, 96px) 0',
  position: 'relative',
  overflow: 'hidden'
}}>
    <div style={{
    position: 'absolute', inset: 0,
    background: 'radial-gradient(ellipse at top, rgba(255,255,255,0.2), transparent 60%)',
    pointerEvents: 'none'
  }}></div>
    <div className="container" style={{ position: 'relative', zIndex: 1 }}>
      <h2 style={{ color: 'white', fontSize: 'clamp(30px, 6vw, 65px)', marginBottom: 20, letterSpacing: '-0.03em', whiteSpace: 'pre-line', lineHeight: 1.1 }}>
        {'Stop Googling "3rd grade\nfractions worksheet" at midnight  ☕️'}
      </h2>
      <p style={{ fontSize: 20, opacity: 0.95, maxWidth: 580, margin: '0 auto 36px' }}>
        Start for free. No credit card required.
      </p>
      <a href="https://app.homescholarapp.com/pricing" className="btn btn-white" style={{
      padding: '18px 36px', fontSize: 18, minHeight: 60,
      borderRadius: 999, boxShadow: '0 20px 40px -10px rgba(0,0,0,0.3)'
    }}>
        <span>Start for free</span>
        <Icon name="arrowRight" size={20} style={{ color: 'var(--primary-purple)' }} />
      </a>
      <div style={{ marginTop: 28, fontSize: 14, opacity: 0.85 }}>
        Questions? <a href="mailto:hello@homescholar.app" style={{ color: 'white', textDecoration: 'underline' }}>Laura@homescholar.app</a>
      </div>
    </div>
  </section>;


// ============ DEFAULT COPY ============
const DEFAULT_COPY = {
  heroH1Prefix: 'Teaching is the hardest,',
  heroH1Highlight: 'most beautiful thing you\u2019ll ever do',
  heroH1Suffix: '. Stop doing it alone.',
  heroSub: 'ClassGenie is the team you wish you had, planning your week, prepping your lessons, tracking every student\u2019s progress, and handling the mountain of paperwork so you can be present for the moments that matter.'
};

// ============ HOMEPAGE ============
const Homepage = () => {
  const [tweaks, setTweaks] = useTweaks(/*EDITMODE-BEGIN*/{
    "heroCopyVariant": "default",
    "accentHue": 270,
    "dark": false
  } /*EDITMODE-END*/);

  useReveal();

  // Apply theme
  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.dark ? 'dark' : 'light';
    document.documentElement.style.setProperty('--primary-purple', `hsl(${tweaks.accentHue}, 71%, 60%)`);
    document.documentElement.style.setProperty('--primary-pink', `hsl(${(tweaks.accentHue + 60) % 360}, 75%, 65%)`);
  }, [tweaks.dark, tweaks.accentHue]);

  const copyVariants = {
    default: DEFAULT_COPY,
    playful: {
      heroH1Prefix: 'Teaching, but with',
      heroH1Highlight: 'superpowers',
      heroH1Suffix: '.',
      heroSub: 'AI plans your year, grades your students\' work, and prints the paperwork. You? You get to actually teach.'
    },
    direct: {
      heroH1Prefix: 'Plan, grade, and print',
      heroH1Highlight: 'everything',
      heroH1Suffix: ' — from one dashboard.',
      heroSub: 'Curriculum planner. Gradebook. Transcript generator. 20+ AI tools. Free to start.'
    }
  };
  const copy = copyVariants[tweaks.heroCopyVariant] || DEFAULT_COPY;

  return (
    <>
      <a href="#main" className="skip-link">Skip to content</a>
      <Header transparent={true} currentPage="home" />
      <main id="main">
        <Hero copy={copy} />
        <ProblemSection />
        <SolutionSection />
        <AIToolsSection />
        <HowItWorks />
        <Testimonials />
        <PricingArgument />
        <CoopSection />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />
      <StickyMobileCTA />

      {/* Tweaks Panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Copy">
          <TweakRadio
            label="Hero variant"
            value={tweaks.heroCopyVariant}
            onChange={(v) => setTweaks({ heroCopyVariant: v })}
            options={[
            { value: 'default', label: 'Default (warm + dry)' },
            { value: 'playful', label: 'Playful' },
            { value: 'direct', label: 'Direct' }]
            } />
          
        </TweakSection>
        <TweakSection title="Appearance">
          <TweakSlider
            label="Accent hue"
            value={tweaks.accentHue}
            onChange={(v) => setTweaks({ accentHue: v })}
            min={200} max={340} step={5}
            suffix="°" />
          
          <TweakToggle
            label="Dark mode"
            value={tweaks.dark}
            onChange={(v) => setTweaks({ dark: v })} />
          
        </TweakSection>
      </TweaksPanel>
    </>);

};

ReactDOM.createRoot(document.getElementById('root')).render(<Homepage />);