import React, { useRef, useState, useEffect } from "react";
import { Check, BookOpen, Lightbulb, Zap, Star, BarChart3 } from "lucide-react";
import { PracticeFromDataset } from "../../../components/lessons/LessonShell";
import {
  TEXT_STRUCTURE_EASY,
  TEXT_STRUCTURE_MEDIUM,
} from "../../../data/rw/text-structure-purpose";
import EvidenceHunterWidget, {
  type EvidenceExercise,
} from "../../../components/lessons/EvidenceHunterWidget";
import DataClaimWidget, {
  type DataExercise,
} from "../../../components/lessons/DataClaimWidget";
import RevealCardGrid from "../../../components/lessons/RevealCardGrid";
import useScrollReveal from "../../../components/lessons/useScrollReveal";

interface LessonProps {
  onFinish?: () => void;
}

const EVIDENCE_EXERCISES: EvidenceExercise[] = [
  {
    question: "What is the main point of this passage?",
    passage: [
      "Scientists have long assumed that deep-sea creatures live in perpetual darkness.",
      "However, a 2023 study by marine biologist Dr. Yuen found bioluminescent signals in fish previously believed to be blind.",
      "The fish not only detect light but appear to use it for communication.",
      "These findings suggest that vision may be far more widespread in the deep ocean than previously thought.",
      "Future expeditions will need to reconsider how they classify deep-sea species.",
    ],
    evidenceIndex: 3,
    explanation:
      'Sentence 4 states the "So What" — the surprising new conclusion about how widespread vision is. It is the main point, not a supporting detail. The word "suggest" introduces the author\'s key takeaway.',
  },
  {
    question:
      "Which sentence best identifies the author's PRIMARY PURPOSE in writing this passage?",
    passage: [
      "The Harlem Renaissance of the 1920s produced some of the most innovative jazz in American history.",
      "Composers like Duke Ellington and Louis Armstrong transformed the harmonic language of popular music.",
      "Yet historians have traditionally focused on the literary figures of this era while neglecting the musicians.",
      "This essay argues that jazz musicians were the true cultural architects of the Harlem Renaissance.",
      "By examining their influence on poetry and visual art, we can restore them to their rightful place in history.",
    ],
    evidenceIndex: 3,
    explanation:
      'Sentence 4 contains the thesis — "This essay argues" is a classic purpose-signaling phrase that tells you both the PURPOSE (to argue) and the CLAIM (jazz musicians were the true architects). The other sentences provide context or support.',
  },
];

const GRAPH_EXERCISES: DataExercise[] = [
  {
    title: "Bar — Book Format Preferences",
    chart: {
      type: "bar",
      title: "Preferred Reading Format by Age Group (% of respondents)",
      yLabel: "% of respondents",
      xLabel: "Age Group",
      unit: "%",
      source: "National Reading Survey, 2023",
      series: [
        {
          name: "Print Books",
          data: [
            { label: "18–24", value: 32 },
            { label: "25–34", value: 41 },
            { label: "35–49", value: 55 },
            { label: "50–64", value: 68 },
            { label: "65+", value: 78 },
          ],
        },
        {
          name: "E-books",
          data: [
            { label: "18–24", value: 48 },
            { label: "25–34", value: 39 },
            { label: "35–49", value: 30 },
            { label: "50–64", value: 22 },
            { label: "65+", value: 12 },
          ],
        },
      ],
    },
    claims: [
      {
        text: "Preference for print books increases with age across all groups shown.",
        verdict: "supported",
        explanation:
          "Print preference rises at each age bracket: 32% → 41% → 55% → 68% → 78%. Every step increases, so this is directly supported.",
      },
      {
        text: "Adults aged 65+ prefer print books because they find e-readers difficult to use.",
        verdict: "neither",
        explanation:
          "The graph shows WHAT people prefer, not WHY. Difficulty with e-readers is a plausible explanation, but nothing in the data addresses reasons for preference.",
      },
      {
        text: "E-books are more popular than print books among every age group under 35.",
        verdict: "contradicted",
        explanation:
          'Ages 18–24: E-books (48%) > Print (32%) — true. But ages 25–34: E-books (39%) < Print (41%) — false. Since the claim says "every age group under 35," one counterexample is enough to contradict it. Always check ALL data points when a claim uses "every" or "all."',
      },
    ],
  },
  {
    title: "Line — Library Visits",
    chart: {
      type: "line",
      title: "Monthly Library Visits per Capita (2018–2023)",
      yLabel: "Visits per capita",
      xLabel: "Year",
      unit: "",
      source: "American Library Association Annual Report",
      series: [
        {
          name: "In-Person Visits",
          data: [
            { label: "2018", value: 4.2 },
            { label: "2019", value: 4.0 },
            { label: "2020", value: 1.1 },
            { label: "2021", value: 2.3 },
            { label: "2022", value: 3.1 },
            { label: "2023", value: 3.4 },
          ],
        },
        {
          name: "Digital Access",
          data: [
            { label: "2018", value: 1.8 },
            { label: "2019", value: 2.1 },
            { label: "2020", value: 5.6 },
            { label: "2021", value: 4.9 },
            { label: "2022", value: 4.5 },
            { label: "2023", value: 4.3 },
          ],
        },
      ],
    },
    claims: [
      {
        text: "Digital access surpassed in-person visits starting in 2020 and remained higher through 2023.",
        verdict: "supported",
        explanation:
          "In 2020, Digital (5.6) > In-Person (1.1). This pattern continues: 2021 (4.9 > 2.3), 2022 (4.5 > 3.1), 2023 (4.3 > 3.4). Directly supported throughout every year from 2020 onward.",
      },
      {
        text: "The pandemic caused the decline in in-person library visits in 2020.",
        verdict: "neither",
        explanation:
          "The graph shows a sharp drop in in-person visits in 2020, but the data itself does not identify the CAUSE. While the pandemic is a plausible explanation, the graph provides no information about causes — only trends.",
      },
      {
        text: "In-person visits in 2023 had fully recovered to pre-2020 levels.",
        verdict: "contradicted",
        explanation:
          "2023 in-person visits = 3.4. Pre-2020 levels were 4.2 (2018) and 4.0 (2019). Since 3.4 < 4.0, visits had NOT fully recovered. Directly contradicted.",
      },
    ],
  },
];

const FUNCTION_WORDS = [
  {
    label: "Positive / Supportive",
    content:
      "advance, affirm, bolster, defend, exemplify, illustrate, provide evidence for, substantiate, praise, propose, support",
  },
  {
    label: "Negative / Critical",
    content:
      "challenge, contradict, criticize, debate, deny, dismiss, question, refute, undermine, warn, raise concerns about",
  },
  {
    label: "Neutral — Describe",
    content:
      "characterize, convey, depict, describe, discuss, dramatize, portray, present, represent, show, trace",
  },
  {
    label: "Neutral — Emphasize",
    content:
      "call attention to, emphasize, highlight, reinforce, reiterate, underscore",
  },
  {
    label: "Neutral — Explain",
    content:
      "account for, clarify, define, explicate, explain, identify, indicate, specify",
  },
  {
    label: "Neutral — Analyze",
    content:
      "analyze, consider, develop, explore, hypothesize, imply, reflect on, speculate, suggest",
  },
  {
    label: "Compare / Contrast",
    content: "compare, contrast, distinguish between, draw a parallel between",
  },
  {
    label: "Qualify",
    content:
      "acknowledge, concede, downplay, minimize, qualify — note: qualify means limit or refine, not verify",
  },
];

const WRONG_ANSWER_PATTERNS = [
  {
    label: "Off-topic",
    content:
      "Mentions something real but not discussed in the passage or relevant lines",
  },
  {
    label: "Too broad",
    content:
      "Passage discusses one specific thing; answer generalizes to the whole category",
  },
  {
    label: "Too extreme",
    content:
      "Includes words like always, never, only, completely, impossible, proven",
  },
  {
    label: "Half-right, half-wrong",
    content:
      "Contains accurate language but also one incorrect element — one wrong word kills the whole answer",
  },
  {
    label: "Could be true",
    content:
      "Plausible or factually accurate, but not supported by the specific passage",
  },
  {
    label: "Passage-true but not local",
    content:
      "Accurate for the passage as a whole but not for the specific lines referenced",
  },
];

const EBRWTextStructurePurposeLesson: React.FC<LessonProps> = ({
  onFinish,
}) => {
  const [activeSection, setActiveSection] = useState(0);
  const sectionsRef = useRef<(HTMLElement | null)[]>([]);

  useEffect(() => {
    const observers: IntersectionObserver[] = [];
    sectionsRef.current.forEach((el, idx) => {
      if (!el) return;
      const obs = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting) setActiveSection(idx);
        },
        { threshold: 0.3 },
      );
      obs.observe(el);
      observers.push(obs);
    });
    return () => observers.forEach((o) => o.disconnect());
  }, []);

  useScrollReveal();

  const scrollToSection = (index: number) => {
    setActiveSection(index);
    sectionsRef.current[index]?.scrollIntoView({ behavior: "smooth" });
  };

  const SectionMarker = ({
    index,
    title,
    icon: Icon,
  }: {
    index: number;
    title: string;
    icon: React.ElementType;
  }) => {
    const isActive = activeSection === index;
    const isPast = activeSection > index;
    return (
      <button
        onClick={() => scrollToSection(index)}
        className={`flex items-center gap-3 p-3 w-full rounded-lg text-left transition-all ${isActive ? "bg-fuchsia-50" : "hover:bg-slate-50"}`}
      >
        <div
          className={`w-8 h-8 rounded-full flex items-center justify-center shrink-0
          ${isActive ? "bg-fuchsia-600 text-white" : isPast ? "bg-fuchsia-400 text-white" : "bg-slate-200 text-slate-500"}`}
        >
          {isPast ? (
            <Check className="w-4 h-4" />
          ) : (
            <Icon className="w-4 h-4" />
          )}
        </div>
        <p
          className={`text-sm font-bold ${isActive ? "text-fuchsia-900" : "text-slate-600"}`}
        >
          {title}
        </p>
      </button>
    );
  };

  return (
    <div className="flex flex-col lg:flex-row min-h-screen">
      <aside className="w-full lg:w-64 lg:fixed lg:top-14 lg:bottom-0 lg:overflow-y-auto p-4 border-r border-slate-200 bg-slate-50 z-0 hidden lg:block">
        <nav className="space-y-2 pt-6">
          <SectionMarker
            index={0}
            title="Pronouns &amp; Main Point"
            icon={BookOpen}
          />
          <SectionMarker
            index={1}
            title="Old/New &amp; Passage Types"
            icon={Star}
          />
          <SectionMarker
            index={2}
            title="Function &amp; Evidence"
            icon={BarChart3}
          />
          <SectionMarker index={3} title="Passage Hunter" icon={Lightbulb} />
          <SectionMarker index={4} title="Practice Questions" icon={Zap} />
        </nav>
      </aside>

      <div className="flex-1 lg:ml-64 md:p-12 w-full mx-auto">
        {/* ── SECTION 0: PRONOUNS & MAIN POINT ── */}
        <section
          ref={(el) => {
            sectionsRef.current[0] = el;
          }}
          className="min-h-screen flex flex-col justify-center mb-24 pt-20 lg:pt-0"
        >
          <div className="inline-flex items-center gap-2 bg-fuchsia-100 text-fuchsia-700 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider mb-4 w-fit">
            Craft &amp; Structure — Domain 1
          </div>
          <h2 className="text-4xl font-extrabold text-slate-900 mb-2">
            Text Structure &amp; Purpose
          </h2>
          <p className="text-lg text-slate-500 mb-8">
            Understanding not just what a passage says but how it is organized
            and why — the two foundational skills are tracking references and
            finding the main point.
          </p>

          {/* Pronouns & Compression Nouns */}
          <div className="bg-fuchsia-50 border border-fuchsia-200 rounded-2xl p-6 mb-8 space-y-4 scroll-reveal">
            <h3 className="text-lg font-bold text-fuchsia-900">
              Pronouns &amp; Compression Nouns
            </h3>
            <p className="text-sm text-slate-700">
              SAT passages routinely use pronouns (it, they, this, that, these)
              and abstract "compression" nouns (phenomenon, claim, notion,
              approach) to refer back to ideas already introduced. Inability to
              trace these references is a major source of comprehension error.
            </p>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="bg-white border border-fuchsia-200 rounded-xl p-4">
                <p className="font-bold text-fuchsia-800 text-sm mb-2">
                  Pronoun Rules
                </p>
                <ul className="space-y-1">
                  {[
                    "Always back up to find the referent — it may be in a previous sentence or paragraph.",
                    "Match singular pronouns to singular referents; plural pronouns to plural referents.",
                    "When multiple nouns of the same type appear, a pronoun becomes ambiguous — re-read carefully.",
                    "It and its can refer to different nouns in the same paragraph — track each separately.",
                  ].map((r) => (
                    <li
                      key={r}
                      className="flex items-start gap-2 text-xs text-slate-600"
                    >
                      <span className="text-fuchsia-500 shrink-0 mt-0.5">
                        •
                      </span>
                      {r}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="bg-white border border-fuchsia-200 rounded-xl p-4">
                <p className="font-bold text-fuchsia-800 text-sm mb-2">
                  Compression Nouns
                </p>
                <p className="text-xs text-slate-600 mb-2">
                  Words like{" "}
                  <em>
                    phenomenon, observation, claim, assertion, notion, approach,
                    finding
                  </em>{" "}
                  compress an entire idea into one phrase.
                </p>
                <ul className="space-y-1">
                  {[
                    '"this + noun": "this enhanced convenience" compresses the entire previous sentence.',
                    '"the former / the latter": former = first mentioned; latter = last mentioned.',
                    "The referent may be 3–5 lines before the compression noun — always read backwards.",
                  ].map((r) => (
                    <li
                      key={r}
                      className="flex items-start gap-2 text-xs text-slate-600"
                    >
                      <span className="text-fuchsia-500 shrink-0 mt-0.5">
                        •
                      </span>
                      {r}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
            <div className="bg-fuchsia-100 border border-fuchsia-200 rounded-xl p-4">
              <p className="text-sm text-slate-700">
                <span className="font-bold text-fuchsia-800">Strategy: </span>
                When you encounter a pronoun or compression noun, stop. Back up
                to the beginning of the sentence where the referent was
                introduced. Never start reading mid-sentence when searching for
                a referent.
              </p>
            </div>
          </div>

          {/* Topics & Main Point */}
          <div className="rounded-2xl p-6 mb-8 bg-white border border-slate-200 space-y-4 scroll-reveal stagger-1">
            <h3 className="text-lg font-bold text-slate-900">
              Identifying Topics and Main Points
            </h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="bg-slate-50 border border-slate-200 rounded-xl p-4">
                <p className="font-bold text-slate-700 text-sm mb-1">
                  The Topic
                </p>
                <p className="text-xs text-slate-600 mb-2">
                  The primary subject or focus of the passage — the person,
                  thing, or idea it centers on. Typically appears in the first
                  sentence or two.
                </p>
                <p className="text-xs text-slate-500 italic">
                  Correct answers to main-idea questions always refer to the
                  topic. Many wrong answers are wrong specifically because they
                  are off-topic.
                </p>
              </div>
              <div className="bg-fuchsia-50 border border-fuchsia-200 rounded-xl p-4">
                <p className="font-bold text-fuchsia-800 text-sm mb-1">
                  The Main Point
                </p>
                <p className="text-xs text-slate-600 mb-2">
                  The primary argument the author wants to convey. It answers:{" "}
                  <em>so what?</em> It tells us why the topic matters.
                </p>
                <div className="flex items-center gap-2 mt-2">
                  <span className="text-xs bg-fuchsia-600 text-white px-2 py-0.5 rounded font-bold">
                    Topic + So What? = Main Point
                  </span>
                </div>
              </div>
            </div>
            <div className="bg-white border border-slate-200 rounded-xl p-4">
              <p className="font-bold text-slate-700 text-sm mb-2">
                Where to Find the Main Point
              </p>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                {[
                  "Most commonly in the first sentence or two",
                  "Often restated or reinforced in the last sentence",
                  "Signaled by: the point is, key, central, essential, significant, or italics",
                  "Often located near dashes, colons, or major transitions (however, therefore, in fact)",
                ].map((p) => (
                  <div
                    key={p}
                    className="flex items-start gap-2 text-xs text-slate-600"
                  >
                    <span className="text-fuchsia-500 shrink-0 mt-0.5">✓</span>
                    {p}
                  </div>
                ))}
              </div>
            </div>
            <div className="bg-slate-50 border border-slate-200 rounded-lg p-3">
              <p className="text-xs text-slate-600">
                <span className="font-bold text-slate-800">
                  What to write down:{" "}
                </span>
                A 3–6 word compressed summary on scratch paper. Example: "New
                evidence overturns Clovis theory." This prevents you from
                forgetting the point when navigating confusing answer choices.
              </p>
            </div>
          </div>
        </section>

        {/* ── SECTION 1: OLD/NEW & PASSAGE TYPES ── */}
        <section
          ref={(el) => {
            sectionsRef.current[1] = el;
          }}
          className="min-h-screen flex flex-col justify-center mb-24"
        >
          <h2 className="text-4xl font-extrabold text-slate-900 mb-2">
            Old/New &amp; Passage Types
          </h2>
          <p className="text-lg text-slate-500 mb-8">
            The most important structural pattern in SAT science passages — and
            how main points differ across fiction, non-fiction, and poetry.
          </p>

          {/* Old/New Framework */}
          <div className="bg-fuchsia-50 border border-fuchsia-200 rounded-2xl p-6 mb-8 space-y-4 scroll-reveal">
            <h3 className="text-lg font-bold text-fuchsia-900">
              The Old Idea / New Idea Framework
            </h3>
            <p className="text-sm text-slate-700">
              One of the most important structural patterns in SAT passages:
              people used to believe X, but new evidence shows Y is actually
              true. Recognizing old-idea signals allows you to predict the main
              point before the author states it.
            </p>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="bg-white border border-slate-200 rounded-xl p-4">
                <p className="font-bold text-red-700 text-sm mb-2">
                  Old Idea Signal Phrases
                </p>
                <ul className="space-y-1">
                  {[
                    '"Some / many (scientists) believe..." — "some" especially implies the author disagrees',
                    '"It is commonly thought that..." / "Accepted wisdom holds that..."',
                    '"Traditionally it was believed..." / "For decades, scientists thought..."',
                    '"In the past..."',
                  ].map((s) => (
                    <li
                      key={s}
                      className="text-xs text-slate-600 flex items-start gap-1"
                    >
                      <span className="shrink-0">•</span>
                      {s}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="bg-white border border-slate-200 rounded-xl p-4">
                <p className="font-bold text-green-700 text-sm mb-2">
                  New Idea Signal Phrases
                </p>
                <ul className="space-y-1">
                  {[
                    "However, but in fact, actually, in reality",
                    '"It now seems / researchers now think..."',
                    '"Recently, it has been found that..." / "New research suggests..."',
                    '"But is it really the case that...?" (rhetorical question)',
                  ].map((s) => (
                    <li
                      key={s}
                      className="text-xs text-slate-600 flex items-start gap-1"
                    >
                      <span className="shrink-0">•</span>
                      {s}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
            <div className="bg-fuchsia-900 text-white rounded-xl p-4">
              <p className="font-bold text-sm mb-1">Strategy</p>
              <p className="text-xs text-fuchsia-100">
                Write <em>Old = [3-word summary] | New = [3-word summary]</em>{" "}
                on scratch paper before answering questions. The main point is
                almost always the NEW idea. If you identify the old idea, you
                can predict the new idea before reading it.
              </p>
            </div>
          </div>

          {/* Passage Types */}
          <div className="rounded-2xl p-6 mb-8 bg-white border border-slate-200 space-y-4 scroll-reveal stagger-1">
            <h3 className="text-lg font-bold text-slate-900">
              Main Point for Different Passage Types
            </h3>
            <div className="space-y-3">
              <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 card-tilt">
                <p className="font-bold text-slate-700 text-sm mb-1">
                  Non-Fiction (Science, Social Science, Humanities)
                </p>
                <p className="text-xs text-slate-600">
                  Main points are usually stated directly, often in the first
                  and last sentences. The old idea / new idea framework applies
                  most frequently here.
                </p>
              </div>
              <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 card-tilt">
                <p className="font-bold text-slate-700 text-sm mb-2">
                  Fiction Passages
                </p>
                <p className="text-xs text-slate-600 mb-2">
                  Fiction passages do not make arguments but focus on particular
                  traits, qualities, or situations of characters or places. Key
                  information tends to appear at the beginning and end of the
                  excerpt.
                </p>
                <ul className="space-y-1">
                  {[
                    "Do not interpret or speculate beyond what is literally stated.",
                    "Focus on the literal actions of characters and the specific words describing them.",
                    "Pay attention to unusual punctuation, strong language, and major transitions.",
                    "Characters' speech often signals the key idea, especially near the end.",
                  ].map((r) => (
                    <li
                      key={r}
                      className="flex items-start gap-2 text-xs text-slate-500"
                    >
                      <span className="text-fuchsia-400 shrink-0 mt-0.5">
                        •
                      </span>
                      {r}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 card-tilt">
                <p className="font-bold text-slate-700 text-sm mb-2">
                  Poetry Passages
                </p>
                <p className="text-xs text-slate-600 mb-2">
                  The literal meaning may be conveyed indirectly through images
                  or metaphors, but students must stay within the bounds of the
                  poem and avoid over-interpretation.
                </p>
                <ul className="space-y-1">
                  {[
                    "Identify the two main sections (often divided at the midpoint).",
                    "Determine what each section is about at the most literal level.",
                    "Look for the contrast or development between sections — that relationship usually contains the main idea.",
                    "Avoid attributing complex philosophical meaning unless unambiguously supported by specific words.",
                  ].map((r) => (
                    <li
                      key={r}
                      className="flex items-start gap-2 text-xs text-slate-500"
                    >
                      <span className="text-fuchsia-400 shrink-0 mt-0.5">
                        •
                      </span>
                      {r}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </section>

        {/* ── SECTION 2: FUNCTION, EVIDENCE & GRAPHS ── */}
        <section
          ref={(el) => {
            sectionsRef.current[2] = el;
          }}
          className="min-h-screen flex flex-col justify-center mb-24"
        >
          <h2 className="text-4xl font-extrabold text-slate-900 mb-2">
            Function, Evidence &amp; Graphs
          </h2>
          <p className="text-lg text-slate-500 mb-8">
            Three advanced question types — all require identifying the claim
            precisely before answering, then playing positive/negative to
            eliminate.
          </p>

          {/* Reading for Function */}
          <div className="bg-fuchsia-50 border border-fuchsia-200 rounded-2xl p-6 mb-8 space-y-4 scroll-reveal">
            <h3 className="text-lg font-bold text-fuchsia-900">
              Reading for Function
            </h3>
            <p className="text-sm text-slate-700">
              Function questions ask not <em>what</em> a sentence says but{" "}
              <em>why</em> it says it — what rhetorical role that content plays.
            </p>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="bg-white border border-fuchsia-100 rounded-xl p-4">
                <p className="font-bold text-fuchsia-800 text-sm mb-2">
                  Main Point vs. Primary Purpose
                </p>
                <div className="space-y-2">
                  <div>
                    <p className="text-xs font-bold text-fuchsia-700">
                      Main Point
                    </p>
                    <p className="text-xs text-slate-600">
                      The central CLAIM — what the author is arguing. Usually
                      stated directly.
                    </p>
                  </div>
                  <div>
                    <p className="text-xs font-bold text-fuchsia-700">
                      Primary Purpose
                    </p>
                    <p className="text-xs text-slate-600">
                      The rhetorical GOAL — what the author is doing
                      (explaining, emphasizing, arguing). Often more general or
                      abstract.
                    </p>
                  </div>
                </div>
              </div>
              <div className="bg-white border border-fuchsia-100 rounded-xl p-4">
                <p className="font-bold text-fuchsia-800 text-sm mb-2">
                  5-Step Method for Function Questions
                </p>
                <ol className="space-y-1">
                  {[
                    "Determine whether the question asks about a sentence or the whole passage.",
                    "Read one to two sentences before and after the underlined portion.",
                    "Ask: What point is this sentence supporting?",
                    "Play positive/negative — eliminate answers with the wrong charge.",
                    "Match the remaining choice to what the passage is actually doing.",
                  ].map((step, i) => (
                    <li
                      key={i}
                      className="flex items-start gap-2 text-xs text-slate-600"
                    >
                      <span className="w-4 h-4 rounded-full bg-fuchsia-600 text-white flex items-center justify-center text-xs shrink-0 mt-0.5">
                        {i + 1}
                      </span>
                      {step}
                    </li>
                  ))}
                </ol>
              </div>
            </div>
            <RevealCardGrid
              cards={FUNCTION_WORDS}
              columns={2}
              accentColor="fuchsia"
            />
            <div className="bg-red-50 border border-red-200 rounded-lg p-3">
              <p className="text-xs text-red-800">
                Eliminate extreme verbs immediately:{" "}
                <em>prove, celebrate, condemn, discredit, mock, scoff at</em>.
                Passages almost never contain sufficient evidence to
                definitively prove or disprove anything.
              </p>
            </div>
          </div>

          {/* Text Completions & Support/Undermine */}
          <div className="rounded-2xl p-6 mb-8 bg-white border border-slate-200 space-y-4 scroll-reveal stagger-1">
            <h3 className="text-lg font-bold text-slate-900">
              Text Completions &amp; Support / Undermine
            </h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="bg-fuchsia-50 border border-fuchsia-200 rounded-xl p-4">
                <p className="font-bold text-fuchsia-800 text-sm mb-2">
                  Text Completions
                </p>
                <p className="text-xs text-slate-600 mb-2">
                  All necessary information is present in the passage. The
                  inference required is small — resist speculation.
                </p>
                <ol className="space-y-1">
                  {[
                    "Carefully read the claim just before the blank.",
                    "Restate it in your own words (3–6 words).",
                    "Work out the single most logical implication.",
                    "Find the answer that matches — possibly rephrased.",
                  ].map((s, i) => (
                    <li key={i} className="flex gap-2 text-xs text-slate-700">
                      <span className="w-4 h-4 rounded-full bg-fuchsia-600 text-white flex items-center justify-center text-xs shrink-0">
                        {i + 1}
                      </span>
                      {s}
                    </li>
                  ))}
                </ol>
              </div>
              <div className="bg-fuchsia-50 border border-fuchsia-200 rounded-xl p-4">
                <p className="font-bold text-fuchsia-800 text-sm mb-2">
                  Support &amp; Undermine
                </p>
                <p className="text-xs text-slate-600 mb-2">
                  Students must identify statements that strengthen or weaken a
                  given claim. These tend to appear among the hardest questions.
                </p>
                <ol className="space-y-1">
                  {[
                    "Identify and paraphrase the claim precisely.",
                    "Predict upfront what kind of information would support or weaken it.",
                    "Match your prediction — wrong answers will be off-topic or address a different claim.",
                  ].map((s, i) => (
                    <li key={i} className="flex gap-2 text-xs text-slate-700">
                      <span className="w-4 h-4 rounded-full bg-fuchsia-600 text-white flex items-center justify-center text-xs shrink-0">
                        {i + 1}
                      </span>
                      {s}
                    </li>
                  ))}
                </ol>
              </div>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="bg-green-50 border border-green-200 rounded-xl p-4">
                <p className="font-bold text-green-800 text-sm mb-1">Support</p>
                <p className="text-xs text-slate-600">
                  Correct answer provides evidence consistent with the claim —
                  same entities or phenomena, results in the same direction. Not
                  off-topic, not tangential.
                </p>
              </div>
              <div className="bg-red-50 border border-red-200 rounded-xl p-4">
                <p className="font-bold text-red-800 text-sm mb-1">Undermine</p>
                <p className="text-xs text-slate-600">
                  Correct answer contradicts or weakens the claim. Most common
                  pattern: claim says "X causes Y"; correct answer shows X is
                  present but Y did not follow.
                </p>
              </div>
            </div>
          </div>

          {/* Graphs & Answer Patterns */}
          <div className="bg-fuchsia-50 border border-fuchsia-200 rounded-2xl p-6 mb-8 space-y-4 scroll-reveal stagger-2">
            <h3 className="text-lg font-bold text-fuchsia-900">
              Graphs, Charts &amp; Wrong Answer Patterns
            </h3>
            <p className="text-sm text-slate-700">
              Graph-based questions follow predictable patterns and can often be
              answered without extensively examining the graph.
            </p>
            <div className="space-y-2">
              {[
                {
                  step: 1,
                  text: "Read the passage first — especially the last sentence. This states the claim.",
                },
                {
                  step: 2,
                  text: "Read the question carefully to identify the exact focus.",
                },
                {
                  step: 3,
                  text: "Eliminate answer choices using the passage before looking at the graph.",
                },
                {
                  step: 4,
                  text: "Confirm the remaining option against the graph.",
                },
              ].map((s) => (
                <div
                  key={s.step}
                  className="flex gap-3 bg-white border border-fuchsia-100 rounded-lg p-3"
                >
                  <span className="w-5 h-5 rounded-full bg-fuchsia-600 text-white flex items-center justify-center text-xs font-bold shrink-0">
                    {s.step}
                  </span>
                  <p className="text-xs text-slate-700">{s.text}</p>
                </div>
              ))}
            </div>
            <RevealCardGrid
              cards={WRONG_ANSWER_PATTERNS}
              columns={2}
              accentColor="fuchsia"
            />
          </div>

          {/* Graph Practice */}
          <div className="rounded-2xl p-6 mb-8 bg-white border border-slate-200 space-y-4">
            <h3 className="text-lg font-bold text-slate-900">
              Graph Practice — Evaluate Claims Against Data
            </h3>
            <p className="text-sm text-slate-600">
              Apply the 4-step process: read the claim, extract criteria, check
              the graph, and judge whether the data supports, contradicts, or
              neither proves the claim.
            </p>
            <DataClaimWidget
              exercises={GRAPH_EXERCISES}
              accentColor="fuchsia"
            />
          </div>

          <div className="bg-fuchsia-900 text-white rounded-2xl p-5 mb-8 scroll-reveal-scale golden-rule-glow">
            <p className="font-bold mb-1">Golden Rule</p>
            <p className="text-sm text-fuchsia-100">
              The main point is almost always the sentence that introduces NEW
              information — look for signal words like "however," "but," or "in
              contrast." The OLD information (background, history, common
              belief) is context, not the point. For function questions: play
              positive/negative first, then match the function verb to what the
              passage is actually doing.
            </p>
          </div>
        </section>

        {/* ── SECTION 3: WIDGET ── */}
        <section
          ref={(el) => {
            sectionsRef.current[3] = el;
          }}
          className="min-h-screen flex flex-col justify-center mb-24"
        >
          <h2 className="text-4xl font-extrabold text-slate-900 mb-2">
            Passage Hunter
          </h2>
          <p className="text-lg text-slate-500 mb-8">
            Click the sentence that best answers each question. Look for the "So
            What" and purpose signal words.
          </p>
          <EvidenceHunterWidget
            exercises={EVIDENCE_EXERCISES}
            accentColor="fuchsia"
          />
        </section>

        {/* ── SECTION 4: PRACTICE ── */}
        <section
          ref={(el) => {
            sectionsRef.current[4] = el;
          }}
          className="min-h-screen flex flex-col justify-center mb-24"
        >
          <h2 className="text-4xl font-extrabold text-slate-900 mb-6">
            Practice Questions
          </h2>
          {TEXT_STRUCTURE_EASY.slice(0, 2).map((q) => (
            <PracticeFromDataset key={q.id} question={q} color="fuchsia" />
          ))}
          {TEXT_STRUCTURE_MEDIUM.slice(0, 1).map((q) => (
            <PracticeFromDataset key={q.id} question={q} color="fuchsia" />
          ))}
          <div className="mt-8 text-center">
            <button
              onClick={onFinish}
              className="px-6 py-3 bg-fuchsia-900 text-white font-bold rounded-full hover:bg-fuchsia-700 transition-colors"
            >
              Finish Lesson ✓
            </button>
          </div>
        </section>
      </div>
    </div>
  );
};

export default EBRWTextStructurePurposeLesson;
