// HomeScholar 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" style={{ marginBottom: 20 }}>
            <span style={{ color: 'var(--primary-purple)' }}>✨</span>
            Built by a homeschool mom, for homeschool moms
          </div>
          <h1 style={{
            fontSize: 'clamp(40px, 6vw, 72px)',
            lineHeight: 1.05,
            marginBottom: 20,
            letterSpacing: '-0.03em',
          }}>
            {copy.heroH1Prefix} <span className="gradient-text">{copy.heroH1Highlight}</span> {copy.heroH1Suffix}
          </h1>
          <p style={{ fontSize: 20, lineHeight: 1.5, color: 'var(--text-secondary)', marginBottom: 32, maxWidth: 560 }}>
            {copy.heroSub}
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginBottom: 28 }}>
            <a href="pricing.html" className="btn btn-gradient btn-full btn-md-auto" style={{ minHeight: 56, fontSize: 16 }}>
              Start 7-day free trial <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</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 in all 50 states</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)' }}>
    <div className="container">
      <div style={{ maxWidth: 720, marginBottom: 48 }} className="reveal">
        <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
          <span style={{ color: 'var(--warning-red)' }}>😮‍💨</span>
          The reality of homeschooling
        </div>
        <h2 style={{ fontSize: 'clamp(32px, 5vw, 56px)', letterSpacing: '-0.03em' }}>
          You didn't start homeschooling to <span style={{ color: 'var(--warning-red)' }}>drown in paperwork</span>.
        </h2>
      </div>
      <div className="grid grid-3 reveal">
        <ProblemCard
          color="red"
          icon="calendar"
          emoji="🗓️"
          title="Planning eats your weekends"
          description="You spend Sundays cobbling together next week's lessons from seventeen browser tabs, three Pinterest boards, and one half-finished Google Doc."
        />
        <ProblemCard
          color="orange"
          icon="edit"
          emoji="✏️"
          title="Grading eats your evenings"
          description="Stacks of worksheets pile up because grading one kid takes an hour. Then you start the second kid's stack. Then it's 11pm."
        />
        <ProblemCard
          color="purple"
          icon="document"
          emoji="📋"
          title="Paperwork eats your sanity"
          description="Every state has different forms. Every college wants a different transcript. You're a parent and a secretary and a principal — at once."
        />
      </div>
    </div>
  </section>
);

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: SOLUTION ============
const SolutionSection = () => (
  <section id="features">
    <div className="container">
      <div className="section-head reveal">
        <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
          <span style={{ color: 'var(--primary-blue)' }}>🏡</span>
          Everything in one place
        </div>
        <h2>Meet your new <span className="gradient-text">homeschool team</span>.</h2>
        <p>One login. Every tool you need. One price that's less than two coffees a month.</p>
      </div>
      <div className="grid grid-3 reveal">
        <FeatureCard icon="map" color="blue" title="Curriculum Planner" description="Map your whole year in a drag-and-drop timeline. AI drafts it in minutes; you fine-tune in an afternoon." href="homeschool-curriculum-planner.html" />
        <FeatureCard icon="sparkles" color="purple" title="20+ AI Tools" description="Lesson plans, worksheets, IEPs, quizzes, games — all generated in seconds, tailored to your kid." href="ai-tools.html" />
        <FeatureCard icon="chart" color="green" title="Gradebook" description="Enter grades once, track trends automatically. AI flags kids who are sliding before you notice." href="homeschool-gradebook.html" />
        <FeatureCard icon="graduation" color="blue" title="Transcripts & Reports" description="College-ready transcripts and professional report cards in two clicks. GPA calculated automatically." href="homeschool-transcripts-and-report-cards.html" />
        <FeatureCard icon="users" color="pink" title="Co-op Hub" description="Running a co-op? Manage members, invite codes, roles, and shared resources in one place." href="homeschool-co-op-management.html" />
        <FeatureCard icon="user" color="orange" title="Student Portal" description="Your teen logs in with their own credentials. Sees their work, their schedule, their grades." href="for-students.html" />
      </div>
    </div>
  </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+ AI generators, <span className="gradient-text">included</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" 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) { section .container > div:nth-child(2) { grid-template-columns: repeat(3, 1fr) !important; } }
        @media (min-width: 1024px) { section .container > div:nth-child(2) { 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 HomeScholar.
          </div>
          <a href="#" className="btn btn-gradient" style={{ fontSize: 13, padding: '8px 14px', minHeight: 0 }}>
            Try free for 7 days
          </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">
    <div className="container">
      <div className="section-head reveal">
        <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
          <span style={{ color: 'var(--success-green)' }}>⚡</span>
          Up and running in an afternoon
        </div>
        <h2>Three steps to a <span className="gradient-text">fully-planned year</span>.</h2>
      </div>
      <div className="steps-grid reveal" style={{ display: 'grid', gap: 24 }}>
        {[
          { n: '1', title: 'Add your students', desc: 'Set up profiles with learning styles and grade levels. Takes about five minutes per kid.', mock: 'students', color: 'blue' },
          { n: '2', title: 'Build your year', desc: 'AI drafts your curriculum in minutes. Fine-tune in the drag-and-drop planner.', mock: 'curriculum', color: 'purple' },
          { n: '3', title: 'Teach, grade, generate', desc: 'Pull up any worksheet. Grade any assignment. Print any legal document on demand.', mock: 'ai-tools', color: 'pink' },
        ].map(step => (
          <div key={step.n} className="card" style={{ padding: 0, overflow: 'hidden' }}>
            <StepMock type={step.mock} />
            <div style={{ padding: '20px 24px 24px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 10,
                  background: 'var(--signature-gradient)',
                  color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 800, fontSize: 15, fontFamily: 'var(--font-display)',
                }}>
                  {step.n}
                </div>
                <h3 style={{ fontSize: 20 }}>{step.title}</h3>
              </div>
              <p style={{ color: 'var(--text-secondary)', fontSize: 15 }}>{step.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
    <style>{`
      @media (min-width: 900px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
    `}</style>
  </section>
);

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. HomeScholar 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: PRICING ARGUMENT ============
const PricingArgument = () => (
  <section>
    <div className="container">
      <div className="section-head reveal">
        <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
          <span>💸</span> Stop paying five times
        </div>
        <h2>Replace five subscriptions <span className="gradient-text">with one</span>.</h2>
      </div>
      <div className="pricing-compare reveal" style={{ display: 'grid', gap: 24, alignItems: 'start' }}>
        {/* Old way */}
        <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: 16 }}>The old way</div>
          {[
            ['Homeschool planner', '$15'],
            ['Gradebook tool', '$10'],
            ['Transcript service', '$20'],
            ['Lesson plan subscription', '$30'],
            ['Legal doc generator', '$15'],
          ].map(([l, p]) => (
            <div key={l} style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 0', borderBottom: '1px solid var(--border-subtle)', fontSize: 15 }}>
              <span style={{ color: 'var(--text-secondary)', textDecoration: 'line-through' }}>{l}</span>
              <span style={{ fontWeight: 600, color: 'var(--text-secondary)' }}>{p}/mo</span>
            </div>
          ))}
          <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 20, fontSize: 18, fontWeight: 800 }}>
            <span>Total</span>
            <span style={{ color: 'var(--warning-red)' }}>$90/month</span>
          </div>
        </div>
        {/* HomeScholar */}
        <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' }}>Everything, one price</span>
            </div>
            {[
              ['All five tools above', true],
              ['20+ AI generators', true],
              ['Co-op hub', true],
              ['Student portal', true],
              ['State legal documents', true],
            ].map(([l]) => (
              <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderBottom: '1px solid var(--border-subtle)', fontSize: 15 }}>
                <Icon name="check" size={18} style={{ color: 'var(--success-green)' }} />
                <span>{l}</span>
              </div>
            ))}
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, paddingTop: 20 }}>
              <span style={{ fontSize: 48, fontWeight: 800, fontFamily: 'var(--font-display)' }} className="gradient-text">$14.99</span>
              <span style={{ color: 'var(--text-secondary)' }}>/month</span>
            </div>
            <a href="pricing.html" className="btn btn-gradient btn-full" style={{ marginTop: 20, minHeight: 52 }}>
              Start free trial
            </a>
          </div>
        </div>
      </div>
      <div style={{ textAlign: 'center', marginTop: 40 }} className="reveal">
        <h3 style={{ fontSize: 'clamp(28px, 4vw, 40px)' }}>Save over <span className="gradient-text">$900 a year</span>.</h3>
      </div>
    </div>
    <style>{`
      @media (min-width: 768px) { .pricing-compare { grid-template-columns: 1fr 1fr; } }
    `}</style>
  </section>
);

// ============ SECTION 8: CO-OP ============
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 co-op directors
          </div>
          <h2 style={{ fontSize: 'clamp(32px, 5vw, 48px)', marginBottom: 20 }}>
            Running a <span className="gradient-text">homeschool co-op</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 co-op 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 co-ops <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 }}>Co-op 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 Classical Co-op', tags: ['Classical', 'K-12'], status: 'Waitlist', families: 62 },
      { letter: 'T', color: 'orange', name: 'Tiny Explorers Preschool', tags: ['Preschool', 'Play-Based'], status: 'Accepting', families: 18 },
      { letter: 'A', color: 'green', name: 'Austin Homeschool Athletics', tags: ['Sports', 'All Ages'], status: 'Accepting', families: 120 },
      { letter: 'G', color: 'purple', name: 'Grace Community Tutorial', tags: ['Accredited', 'Tutorial'], 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} families · 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 HomeScholar legal to use in my state?', 'Absolutely. HomeScholar 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 this only $14.99/month?', 'Because we believe homeschool tools shouldn\'t cost more than the curriculum. One subscription covers your whole family — not per-student pricing.'],
    ['Do you offer a free trial?', 'Yes — 7 days, no credit card required. You can test-drive every feature with your real kids, real curriculum.'],
    ['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 homeschool moms <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: '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 }}>
      <div style={{ fontSize: 48, marginBottom: 20 }}>☕️</div>
      <h2 style={{ color: 'white', fontSize: 'clamp(40px, 7vw, 80px)', marginBottom: 20, letterSpacing: '-0.03em' }}>
        Get your weekends back.
      </h2>
      <p style={{ fontSize: 20, opacity: 0.95, maxWidth: 580, margin: '0 auto 36px' }}>
        Start your 7-day free trial. No credit card required.
      </p>
      <a href="pricing.html" 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 free trial</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' }}>hello@homescholar.app</a>
      </div>
    </div>
  </section>
);

// ============ DEFAULT COPY ============
const DEFAULT_COPY = {
  heroH1Prefix: 'The AI homeschool platform that does the',
  heroH1Highlight: 'planning, grading, and paperwork',
  heroH1Suffix: 'for you.',
  heroSub: 'Curriculum, gradebook, transcripts, IEPs, and 20+ AI generators — all in one place. Less than two coffees a month.',
};

// ============ 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: 'Homeschooling, but with',
      heroH1Highlight: 'superpowers',
      heroH1Suffix: '.',
      heroSub: 'AI plans your year, grades your kids\' 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. $14.99/month.',
    },
  };
  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 />);
