import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Book, Calculator, Grid, Move, ChevronRight, Menu, X, CheckCircle, Info, Target, Layers, Box } from 'lucide-react';

// --- Math Rendering Helper ---
// Upgraded to handle specific LaTeX patterns used in this curriculum
const MathTx = ({ children, block = false }) => {
if (typeof children !== 'string') return null;

let html = children;

// 1. Basic Symbols
html = html
.replace(/\\cdot/g, '·')
.replace(/\\times/g, '×')
.replace(/\\theta/g, 'θ')
.replace(/\\pi/g, 'π')
.replace(/\\lambda/g, 'λ')
.replace(/\\mu/g, 'μ')
.replace(/\\alpha/g, 'α')
.replace(/\\beta/g, 'β');

// 2. Vectors \vec{x} -> Bold Italic with color (Darkened for visibility)
html = html.replace(/\\vec\{([a-zA-Z0-9]+)\}/g, '<b class="font-serif italic text-blue-800">$1</b>');

// 3. Hats \hat{x} -> x with a hat
html = html.replace(/\\hat\{([a-zA-Z0-9]+)\}/g, '<span class="relative inline-block"><span class="absolute -top-1.5 left-0 w-full text-center text-xs opacity-100 font-bold">^</span><span>$1</span></span>');

// 4. Square roots \sqrt{...}
html = html.replace(/\\sqrt\{([^}]+)\}/g, '&radic;<span class="border-t border-slate-900 px-0.5">$1</span>');

// 5. Fractions \frac{a}{b}
html = html.replace(/\\frac\{([^}]+)\}\{([^}]+)\}/g,
'<span class="inline-block align-middle text-center mx-1"><span class="block border-b border-slate-900 text-xs px-1 leading-tight">$1</span><span class="block text-xs px-1 leading-tight">$2</span></span>');

// 6. Binomials/Vectors \binom{a}{b} or \binom{a}{b\\ c}
// Handles 2D and 3D vectors
html = html.replace(/\\binom\{([^}]+)\}\{([^}]+)\}/g, (match, top, bottom) => {
// Handle the 3D case where bottom contains split \\
const bottomParts = bottom.split('\\\\');
const rows = [top, ...bottomParts];
const rowHtml = rows.map(r => `<span class="block text-center leading-tight py-0.5 text-slate-900">${r.trim()}</span>`).join('');

return `<span class="inline-block align-middle mx-1 border-l border-r border-slate-900 rounded-sm px-1 py-0.5 bg-slate-100 text-sm font-medium" style="border-radius: 8px;">${rowHtml}</span>`;
});

// 7. Matrices/Determinants \begin{vmatrix}...\end{vmatrix}
html = html.replace(/\\begin\{vmatrix\}([\s\S]*?)\\end\{vmatrix\}/g, (match, content) => {
const rows = content.split('\\\\').map(row => {
const cells = row.split('&').map(cell => `<td class="p-1 text-center min-w-[20px] text-slate-900">${cell.trim()}</td>`).join('');
return `<tr>${cells}</tr>`;
});
return `<table class="inline-table border-l-2 border-r-2 border-slate-900 mx-1 border-collapse text-xs"><tbody>${rows.join('')}</tbody></table>`;
});

// 8. Subscripts/Superscripts
html = html.replace(/\^([0-9a-z]+)/g, '<sup class="text-[0.7em]">$1</sup>');
html = html.replace(/_([0-9a-z]+)/g, '<sub class="text-[0.7em]">$1</sub>');

return (
<span
        className={`${block ? 'block text-center my-4 text-xl overflow-x-auto' : 'inline-block align-baseline'} font-serif text-slate-900 font-medium`}
dangerouslySetInnerHTML={{ __html: html }}
/>
);
};

// --- Interactive Components ---

const VectorAdditionVisualizer = () => {
const [v1, setV1] = useState({ x: 3, y: 1 });
const [v2, setV2] = useState({ x: 1, y: 3 });

const gridSize = 20;
const scale = 30;
const origin = { x: 50, y: 250 };

const r1 = { x: v1.x * scale, y: -v1.y * scale };
const r2 = { x: v2.x * scale, y: -v2.y * scale };
const res = { x: r1.x + r2.x, y: r1.y + r2.y };

return (
<div className="bg-white p-4 rounded-lg shadow-sm border border-slate-300 my-6">
    <h3 className="font-bold text-slate-900 mb-2 flex items-center gap-2">
        <Move size={18} /> Interactive Vector Addition
    </h3>
    <div className="flex flex-wrap gap-4 mb-4 text-slate-900 font-medium">
        <div className="flex items-center gap-2">
            <span className="font-serif font-bold text-blue-700">a</span>
            <label>x:</label>
            <input type="number" value={v1.x} onChange={e => setV1({...v1, x: Number(e.target.value)})} className="w-16 p-1 border border-slate-400 rounded text-slate-900 bg-white" />
            <label>y:</label>
            <input type="number" value={v1.y} onChange={e => setV1({...v1, y: Number(e.target.value)})} className="w-16 p-1 border border-slate-400 rounded text-slate-900 bg-white" />
        </div>
        <div className="flex items-center gap-2">
            <span className="font-serif font-bold text-red-700">b</span>
            <label>x:</label>
            <input type="number" value={v2.x} onChange={e => setV2({...v2, x: Number(e.target.value)})} className="w-16 p-1 border border-slate-400 rounded text-slate-900 bg-white" />
            <label>y:</label>
            <input type="number" value={v2.y} onChange={e => setV2({...v2, y: Number(e.target.value)})} className="w-16 p-1 border border-slate-400 rounded text-slate-900 bg-white" />
        </div>
    </div>

    <div className="relative h-64 bg-slate-50 rounded border border-slate-300 overflow-hidden">
        <svg width="100%" height="100%">
            <defs>
                <marker id="head-blue" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
                    <path d="M0,0 L0,6 L9,3 z" fill="#1d4ed8" />
                </marker>
                <marker id="head-red" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
                    <path d="M0,0 L0,6 L9,3 z" fill="#b91c1c" />
                </marker>
                <marker id="head-purple" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
                    <path d="M0,0 L0,6 L9,3 z" fill="#7e22ce" />
                </marker>
            </defs>

            {/* Grid */}
            <pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse">
                <path d="M 30 0 L 0 0 0 30" fill="none" stroke="#cbd5e1" strokeWidth="1"/>
            </pattern>
            <rect width="100%" height="100%" fill="url(#grid)" />

            {/* Vectors */}
            {/* Vector A */}
            <line x1={origin.x} y1={origin.y} x2={origin.x + r1.x} y2={origin.y + r1.y} stroke="#1d4ed8" strokeWidth="3" markerEnd="url(#head-blue)" />
            <text x={origin.x + r1.x / 2} y={origin.y + r1.y / 2 - 10} className="font-bold fill-blue-800 text-lg">a</text>

            {/* Vector B (placed at tip of A) */}
            <line x1={origin.x + r1.x} y1={origin.y + r1.y} x2={origin.x + res.x} y2={origin.y + res.y} stroke="#b91c1c" strokeWidth="3" markerEnd="url(#head-red)" strokeDasharray="5,5" />
            <text x={origin.x + r1.x + r2.x/2} y={origin.y + r1.y + r2.y/2 - 10} className="font-bold fill-red-800 text-lg">b</text>

            {/* Resultant */}
            <line x1={origin.x} y1={origin.y} x2={origin.x + res.x} y2={origin.y + res.y} stroke="#7e22ce" strokeWidth="4" markerEnd="url(#head-purple)" />
            <text x={origin.x + res.x/2 + 10} y={origin.y + res.y/2 + 20} className="font-bold fill-purple-800 text-lg">a + b</text>

        </svg>
    </div>
    <p className="text-base text-slate-800 mt-2 text-center font-medium">
        Resultant: <MathTx>{`\\vec{r} = \\binom{${v1.x + v2.x}}{${v1.y + v2.y}}`}</MathTx>
    </p>
</div>
);
};

const DotProductVisualizer = () => {
const [angle, setAngle] = useState(45);
const magA = 100;
const magB = 100;

const rad = (angle * Math.PI) / 180;
const dotProduct = (magA/10 * magB/10 * Math.cos(rad)).toFixed(1);

return (
<div className="bg-white p-4 rounded-lg shadow-sm border border-slate-300 my-6">
    <h3 className="font-bold text-slate-900 mb-2 flex items-center gap-2">
        <Target size={18} /> Dot Product & Angles
    </h3>

    <div className="flex flex-col gap-4 mb-4">
        <div className="flex items-center gap-4 text-slate-900">
            <label className="text-sm font-bold">Angle (θ): {angle}°</label>
            <input
                    type="range" min="0" max="180" value={angle}
                    onChange={(e) => setAngle(Number(e.target.value))}
            className="w-full h-2 bg-slate-300 rounded-lg appearance-none cursor-pointer"
            />
        </div>
    </div>

    <div className="flex flex-col md:flex-row gap-8 items-center justify-center">
        <div className="relative w-64 h-64 border border-slate-300 bg-slate-50 rounded-full flex items-center justify-center">
            <svg width="100%" height="100%" viewBox="-120 -120 240 240">
                {/* Vector A (Fixed Horizontal) */}
                <line x1="0" y1="0" x2={magA} y2="0" stroke="#1d4ed8" strokeWidth="4" markerEnd="url(#head-blue)" />

                {/* Vector B (Rotates) */}
                <line x1="0" y1="0" x2={magB * Math.cos(rad)} y2={-magB * Math.sin(rad)} stroke="#b91c1c" strokeWidth="4" markerEnd="url(#head-red)" />

                {/* Angle Arc */}
                <path d={`M 30 0 A 30 30 0 0 0 ${30 * Math.cos(rad)} ${-30 * Math.sin(rad)}`} fill="none" stroke="black" strokeWidth="1.5" />
                <text x="10" y="-10" fontSize="14" fontWeight="bold">θ</text>
            </svg>
        </div>

        <div className="space-y-2 bg-slate-100 p-4 rounded-lg border border-slate-200">
            <p className="font-mono text-sm text-slate-900">|a| = {magA/10}</p>
            <p className="font-mono text-sm text-slate-900">|b| = {magB/10}</p>
            <p className="font-mono text-sm text-slate-900">cos(θ) = {Math.cos(rad).toFixed(3)}</p>
            <div className="h-px bg-slate-300 my-2"></div>
            <p className="font-bold text-lg text-purple-900">
                <MathTx>{`\\vec{a} \\cdot \\vec{b} = `}</MathTx> {dotProduct}
            </p>
            <p className="text-sm text-slate-700 mt-1 font-medium">
                {dotProduct === "0.0" ? "Vectors are PERPENDICULAR (Orthogonal)" : dotProduct > 0 ? "Acute Angle" : "Obtuse Angle"}
            </p>
        </div>
    </div>
</div>
);
};

// --- Content Data ---

const topics = [
{
id: 'intro',
title: '1. Introduction to Vectors',
level: 'IGCSE',
content: (
<div className="space-y-6">
    <section>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">Scalars vs Vectors</h2>
        <p className="text-slate-800 mb-4 leading-relaxed">
            In physics and mathematics, quantities are classified into two types:
        </p>
        <div className="grid md:grid-cols-2 gap-6">
            <div className="bg-orange-50 p-6 rounded-xl border border-orange-200">
                <h3 className="font-bold text-orange-900 mb-2">Scalars</h3>
                <p className="text-sm text-orange-800 font-medium mb-4">Quantities with MAGNITUDE only.</p>
                <ul className="list-disc list-inside text-sm text-slate-800 space-y-1">
                    <li>Mass (kg)</li>
                    <li>Time (s)</li>
                    <li>Distance (m)</li>
                    <li>Speed (m/s)</li>
                </ul>
            </div>
            <div className="bg-blue-50 p-6 rounded-xl border border-blue-200">
                <h3 className="font-bold text-blue-900 mb-2">Vectors</h3>
                <p className="text-sm text-blue-800 font-medium mb-4">Quantities with both MAGNITUDE and DIRECTION.</p>
                <ul className="list-disc list-inside text-sm text-slate-800 space-y-1">
                    <li>Force (N)</li>
                    <li>Displacement (m)</li>
                    <li>Velocity (m/s)</li>
                    <li>Acceleration (m/s²)</li>
                </ul>
            </div>
        </div>
    </section>

    <section>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">Notation</h2>
        <p className="text-slate-800 leading-relaxed">
            We represent vectors geometrically as arrows. The length represents the magnitude, and the arrow points in the direction.
        </p>
        <div className="mt-4 p-4 bg-slate-100 border border-slate-200 rounded-lg">
            <p className="mb-2 text-slate-900"><strong>Forms:</strong></p>
            <ul className="space-y-2 font-mono text-sm text-slate-800">
                <li className="flex items-center gap-3"><span className="w-24 font-bold text-slate-900">Column:</span> <MathTx>{`\\binom{x}{y}`}</MathTx> or <MathTx>{`\\binom{x}{y\\\\ z}`}</MathTx></li>
                <li className="flex items-center gap-3"><span className="w-24 font-bold text-slate-900">Component:</span> <MathTx>{`x\\vec{i} + y\\vec{j}`}</MathTx></li>
                <li className="flex items-center gap-3"><span className="w-24 font-bold text-slate-900">Geometric:</span> <MathTx>{`\\vec{AB}`}</MathTx> (From point A to B)</li>
            </ul>
        </div>
    </section>
</div>
)
},
{
id: 'arithmetic',
title: '2. Vector Arithmetic',
level: 'IGCSE',
content: (
<div className="space-y-6">
    <section>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">Addition & Subtraction</h2>
        <p className="text-slate-800 mb-4 leading-relaxed">
            <strong>Geometrically:</strong> Use the "Triangle Law" (Head-to-Tail). To add <MathTx>{'\\vec{a}'}</MathTx> and <MathTx>{'\\vec{b}'}</MathTx>, place the tail of <MathTx>{'\\vec{b}'}</MathTx> at the head of <MathTx>{'\\vec{a}'}</MathTx>. The resultant connects the start to the finish.
        </p>
        <p className="text-slate-800 mb-4 leading-relaxed">
            <strong>Algebraically:</strong> Simply add corresponding components.
        </p>
        <div className="bg-slate-100 p-4 rounded border-l-4 border-blue-600 font-mono text-sm mb-6 shadow-sm">
            <MathTx block>{`\\binom{a_1}{a_2} + \\binom{b_1}{b_2} = \\binom{a_1 + b_1}{a_2 + b_2}`}</MathTx>
        </div>
        <VectorAdditionVisualizer />
    </section>

    <section>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">Scalar Multiplication</h2>
        <p className="text-slate-800 mb-2 leading-relaxed">
            Multiplying a vector by a scalar (number) <MathTx>{'k'}</MathTx> scales its magnitude.
        </p>
        <ul className="list-disc list-inside text-slate-800 space-y-2 ml-4">
            <li>If <MathTx>{'k > 1'}</MathTx>, it stretches.</li>
            <li>If <MathTx>{'0 < k < 1'}</MathTx>, it shrinks.</li>
            <li>If <MathTx>{'k < 0'}</MathTx>, it reverses direction.</li>
        </ul>
    </section>
</div>
)
},
{
id: 'magnitude',
title: '3. Magnitude & Unit Vectors',
level: 'IB SL',
content: (
<div className="space-y-6">
    <section>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">Magnitude</h2>
        <p className="text-slate-800 mb-4 leading-relaxed">
            The magnitude (length) of a vector is denoted by <MathTx>{'|\\vec{v}|'}</MathTx>. In 2D and 3D, it is calculated using the Pythagorean theorem.
        </p>
        <div className="grid md:grid-cols-2 gap-4">
            <div className="bg-white p-4 border border-slate-300 rounded shadow-sm">
                <h4 className="font-bold text-center mb-2 text-slate-900">2D Space</h4>
                <MathTx block>{`|\\vec{v}| = \\sqrt{x^2 + y^2}`}</MathTx>
            </div>
            <div className="bg-white p-4 border border-slate-300 rounded shadow-sm">
                <h4 className="font-bold text-center mb-2 text-slate-900">3D Space</h4>
                <MathTx block>{`|\\vec{v}| = \\sqrt{x^2 + y^2 + z^2}`}</MathTx>
            </div>
        </div>
    </section>

    <section>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">Unit Vectors</h2>
        <p className="text-slate-800 mb-4 leading-relaxed">
            A unit vector <MathTx>{'\\hat{u}'}</MathTx> has a magnitude of 1. It is often used to specify direction purely.
            To find a unit vector in the direction of <MathTx>{'\\vec{v}'}</MathTx>:
        </p>
        <div className="bg-slate-900 text-white p-4 rounded text-center shadow-lg">
            <MathTx>{`\\hat{u} = \\frac{\\vec{v}}{|\\vec{v}|}`}</MathTx>
        </div>
        <p className="text-sm text-slate-600 mt-4 font-medium">
            <strong>Standard Basis Vectors:</strong><br/>
            <MathTx>{'\\vec{i} = \\binom{1}{0},\\ \\vec{j} = \\binom{0}{1}'}</MathTx> (2D)<br/>
            <MathTx>{'\\vec{k} = \\binom{0}{0\\\\ 1}'}</MathTx> (added for 3D)
        </p>
    </section>
</div>
)
},
{
id: 'dot_product',
title: '4. The Dot Product (Scalar Product)',
level: 'IB SL',
content: (
<div className="space-y-6">
    <section>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">Definition</h2>
        <p className="text-slate-800 mb-4 leading-relaxed">
            The dot product takes two vectors and returns a <strong>scalar</strong>. It tells us how much one vector points in the direction of another.
        </p>
        <div className="bg-indigo-50 border-l-4 border-indigo-600 p-4">
            <p className="font-bold text-indigo-900">Algebraic Definition:</p>
            <MathTx block>{`\\vec{a} \\cdot \\vec{b} = a_1b_1 + a_2b_2 + a_3b_3`}</MathTx>
        </div>
        <div className="bg-indigo-50 border-l-4 border-indigo-600 p-4 mt-4">
            <p className="font-bold text-indigo-900">Geometric Definition:</p>
            <MathTx block>{`\\vec{a} \\cdot \\vec{b} = |\\vec{a}| |\\vec{b}| \\cos(\\theta)`}</MathTx>
        </div>
    </section>

    <section>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">Key Properties</h2>
        <ul className="space-y-3">
            <li className="flex items-start gap-2">
                <CheckCircle size={20} className="text-green-600 mt-1 shrink-0" />
                <span className="text-slate-800">If <MathTx>{'\\vec{a} \\cdot \\vec{b} = 0'}</MathTx>, the vectors are <strong>Perpendicular</strong> (Orthogonal).</span>
            </li>
            <li className="flex items-start gap-2">
                <CheckCircle size={20} className="text-green-600 mt-1 shrink-0" />
                <span className="text-slate-800">If <MathTx>{'\\vec{a} \\cdot \\vec{b} = |\\vec{a}||\\vec{b}|'}</MathTx>, they are parallel (same direction).</span>
            </li>
            <li className="flex items-start gap-2">
                <CheckCircle size={20} className="text-green-600 mt-1 shrink-0" />
                <span className="text-slate-800">Used to find the angle between two vectors: <MathTx>{`\\cos(\\theta) = \\frac{\\vec{a} \\cdot \\vec{b}}{|\\vec{a}||\\vec{b}|}`}</MathTx></span>
            </li>
        </ul>
        <DotProductVisualizer />
    </section>
</div>
)
},
{
id: 'lines',
title: '5. Vector Equation of Lines',
level: 'IB SL',
content: (
<div className="space-y-6">
    <section>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">The Formula</h2>
        <p className="text-slate-800 mb-4 leading-relaxed">
            Unlike <MathTx>{'y = mx + c'}</MathTx> in 2D, vector equations work in 2D and 3D. A line is defined by a fixed point <MathTx>{'\\vec{a}'}</MathTx> and a direction vector <MathTx>{'\\vec{b}'}</MathTx>.
        </p>
        <div className="bg-slate-900 text-white p-6 rounded-lg text-center font-mono text-xl shadow-lg">
            <MathTx>{'r = a + tb'}</MathTx>
        </div>
        <div className="grid grid-cols-3 gap-4 mt-4 text-center text-sm">
            <div className="p-3 bg-slate-200 rounded text-slate-900">
                <strong>r</strong><br/>General point <MathTx>{'\\binom{x}{y}'}</MathTx>
            </div>
            <div className="p-3 bg-slate-200 rounded text-slate-900">
                <strong>a</strong><br/>Position vector of fixed point
            </div>
            <div className="p-3 bg-slate-200 rounded text-slate-900">
                <strong>b</strong><br/>Direction vector
            </div>
        </div>
    </section>

    <section>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">Relationship between Lines</h2>
        <div className="overflow-x-auto border rounded-lg border-slate-300">
            <table className="w-full text-left text-sm text-slate-800">
                <thead className="bg-slate-100 text-slate-900 uppercase font-bold border-b border-slate-300">
                <tr>
                    <th className="px-4 py-3">Relationship</th>
                    <th className="px-4 py-3">Condition</th>
                    <th className="px-4 py-3">Angle?</th>
                </tr>
                </thead>
                <tbody className="divide-y divide-slate-300">
                <tr>
                    <td className="px-4 py-3 font-bold">Parallel</td>
                    <td className="px-4 py-3">Direction vectors are scalar multiples: <MathTx>{'\\vec{b_1} = k\\vec{b_2}'}</MathTx></td>
                    <td className="px-4 py-3">0°</td>
                </tr>
                <tr>
                    <td className="px-4 py-3 font-bold">Intersecting</td>
                    <td className="px-4 py-3">Unique solution for <MathTx>{'s'}</MathTx> and <MathTx>{'t'}</MathTx> in <MathTx>{'a_1 + t\\vec{b_1} = a_2 + s\\vec{b_2}'}</MathTx></td>
                    <td className="px-4 py-3">Calculable via dot product</td>
                </tr>
                <tr>
                    <td className="px-4 py-3 font-bold">Skew (3D only)</td>
                    <td className="px-4 py-3">Not parallel AND no intersection point.</td>
                    <td className="px-4 py-3">N/A</td>
                </tr>
                </tbody>
            </table>
        </div>
    </section>
</div>
)
},
{
id: 'cross_product',
title: '6. The Cross Product',
level: 'IB HL',
content: (
<div className="space-y-6">
    <section>
        <div className="inline-block px-3 py-1 bg-purple-100 text-purple-900 border border-purple-200 rounded-full text-xs font-bold mb-4">HL ONLY</div>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">Definition</h2>
        <p className="text-slate-800 mb-4 leading-relaxed">
            The cross product <MathTx>{'\\vec{a} \\times \\vec{b}'}</MathTx> results in a <strong>Vector</strong> that is perpendicular to both <MathTx>{'\\vec{a}'}</MathTx> and <MathTx>{'\\vec{b}'}</MathTx>.
        </p>
        <div className="bg-slate-100 p-4 rounded font-mono text-sm border border-slate-300">
            <MathTx block>{`\\vec{a} \\times \\vec{b} = \\begin{vmatrix} i & j & k \\\\ a_1 & a_2 & a_3 \\\\ b_1 & b_2 & b_3 \\end{vmatrix}`}</MathTx>
            <MathTx block>{`= \\binom{a_2b_3 - a_3b_2}{a_3b_1 - a_1b_3 \\\\ a_1b_2 - a_2b_1}`}</MathTx>
        </div>
    </section>

    <section>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">Applications</h2>
        <ul className="space-y-4 text-slate-800">
            <li className="bg-white p-4 border border-slate-300 rounded-lg shadow-sm">
                <strong className="text-indigo-800">Normal Vector:</strong> Finding a vector perpendicular to a plane (essential for plane equations).
            </li>
            <li className="bg-white p-4 border border-slate-300 rounded-lg shadow-sm">
                <strong className="text-indigo-800">Area of Triangle:</strong> <MathTx>{`Area = \\frac{1}{2} |\\vec{a} \\times \\vec{b}|`}</MathTx>
            </li>
            <li className="bg-white p-4 border border-slate-300 rounded-lg shadow-sm">
                <strong className="text-indigo-800">Geometric Magnitude:</strong> <MathTx>{`|\\vec{a} \\times \\vec{b}| = |\\vec{a}||\\vec{b}|\\sin(\\theta)`}</MathTx>
            </li>
        </ul>
    </section>
</div>
)
},
{
id: 'planes',
title: '7. Vector Equation of Planes',
level: 'IB HL',
content: (
<div className="space-y-6">
    <section>
        <div className="inline-block px-3 py-1 bg-purple-100 text-purple-900 border border-purple-200 rounded-full text-xs font-bold mb-4">HL ONLY</div>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">Scalar Equation</h2>
        <p className="text-slate-800 mb-4 leading-relaxed">
            A plane is defined by a point <MathTx>{'\\vec{a}'}</MathTx> and a normal vector <MathTx>{'\\vec{n}'}</MathTx> (perpendicular to the plane).
        </p>
        <div className="bg-slate-900 text-white p-6 rounded-lg text-center font-mono text-xl shadow-lg mb-6">
            <MathTx>{'r \\cdot n = a \\cdot n'}</MathTx>
        </div>
        <p className="text-slate-800">
            This expands to the Cartesian form: <MathTx>{'ax + by + cz = d'}</MathTx>, where <MathTx>{'\\binom{a}{b\\\\ c}'}</MathTx> is the normal vector.
        </p>
    </section>

    <section>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">Parametric Form</h2>
        <p className="text-slate-800 mb-4 leading-relaxed">
            Alternatively, using two non-parallel direction vectors <MathTx>{'\\vec{u}'}</MathTx> and <MathTx>{'\\vec{v}'}</MathTx> on the plane:
        </p>
        <div className="bg-slate-100 p-4 rounded text-center border border-slate-300">
            <MathTx>{'r = a + \\lambda \\vec{u} + \\mu \\vec{v}'}</MathTx>
        </div>
    </section>

    <section>
        <h2 className="text-2xl font-bold text-slate-900 mb-4">Intersection of Planes</h2>
        <p className="text-slate-800 mb-2 leading-relaxed">
            The intersection of two non-parallel planes is a <strong>Line</strong>.
        </p>
        <p className="text-slate-700 text-sm italic font-medium">
            Strategy: The direction of the line of intersection is <MathTx>{'\\vec{n_1} \\times \\vec{n_2}'}</MathTx>.
        </p>
    </section>
</div>
)
}
];

// --- Main Application Component ---

const App = () => {
const [activeTopicId, setActiveTopicId] = useState('intro');
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const scrollRef = useRef(null);

const activeTopic = topics.find(t => t.id === activeTopicId) || topics[0];

const handleNav = (id) => {
setActiveTopicId(id);
setMobileMenuOpen(false);
if(scrollRef.current) scrollRef.current.scrollTop = 0;
};

return (
<div className="flex h-screen bg-slate-50 font-sans text-slate-900 overflow-hidden">

    {/* Sidebar Navigation */}
    <aside className={`fixed inset-y-0 left-0 z-50 w-64 bg-slate-900 text-slate-100 transform transition-transform duration-300 ease-in-out ${mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'} md:translate-x-0 md:static md:shrink-0`}>
    <div className="p-6 border-b border-slate-700 flex justify-between items-center">
        <div className="flex items-center gap-2 text-white font-bold text-xl">
            <Layers className="text-blue-400" />
            <span>VectorMastery</span>
        </div>
        <button onClick={() => setMobileMenuOpen(false)} className="md:hidden text-slate-300 hover:text-white">
        <X />
        </button>
    </div>

    <nav className="p-4 space-y-2 overflow-y-auto h-[calc(100vh-80px)]">
        <div className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 px-3">Curriculum Modules</div>
        {topics.map(topic => (
        <button
                key={topic.id}
                onClick={() => handleNav(topic.id)}
        className={`w-full text-left px-4 py-3 rounded-lg text-sm transition-colors duration-200 flex items-center justify-between group ${activeTopicId === topic.id ? 'bg-blue-600 text-white shadow-lg' : 'text-slate-200 hover:bg-slate-800 hover:text-white'}`}
        >
        <span className="truncate">{topic.title}</span>
        {activeTopicId === topic.id && <ChevronRight size={16} />}
        {topic.level.includes('HL') && activeTopicId !== topic.id && <span className="text-[10px] bg-purple-900 text-purple-200 px-1.5 py-0.5 rounded ml-2 border border-purple-700">HL</span>}
        </button>
        ))}

        <div className="mt-8 p-4 bg-slate-800 rounded-lg border border-slate-700">
            <h4 className="text-white font-bold text-sm mb-2 flex items-center gap-2"><Book size={14}/> Exam Tip</h4>
            <p className="text-xs text-slate-300 leading-relaxed">
                In IB exams, always check if your calculator is in Degrees or Radians mode when calculating angles between vectors.
            </p>
        </div>
    </nav>
    </aside>

    {/* Main Content Area */}
    <div className="flex-1 flex flex-col min-w-0 h-full relative">

        {/* Mobile Header */}
        <header className="bg-white border-b border-slate-200 p-4 flex items-center md:hidden">
            <button onClick={() => setMobileMenuOpen(true)} className="mr-4 text-slate-700">
            <Menu />
            </button>
            <span className="font-bold text-slate-900">VectorMastery</span>
        </header>

        {/* Scrollable Content */}
        <main ref={scrollRef} className="flex-1 overflow-y-auto p-4 md:p-8 lg:p-12 scroll-smooth">
            <div className="max-w-4xl mx-auto pb-20">

                {/* Topic Header */}
                <div className="mb-8">
                    <div className="flex items-center gap-3 mb-2">
                        <span className={`px-3 py-1 rounded-full text-xs font-bold tracking-wide border ${activeTopic.level.includes('HL') ? 'bg-purple-100 text-purple-900 border-purple-200' : 'bg-blue-100 text-blue-900 border-blue-200'}`}>
                        {activeTopic.level}
                        </span>
                        <span className="text-slate-500 text-sm font-medium uppercase tracking-wide">Mathematics</span>
                    </div>
                    <h1 className="text-3xl md:text-4xl font-extrabold text-slate-900 tracking-tight">
                        {activeTopic.title.split('. ')[1]}
                    </h1>
                </div>

                {/* Content Injection */}
                <div className="prose prose-slate max-w-none prose-lg prose-headings:font-bold prose-h2:text-2xl prose-h2:mt-8 prose-p:leading-relaxed prose-li:text-slate-800">
                    {activeTopic.content}
                </div>

                {/* Knowledge Check / Mini Quiz */}
                <div className="mt-16 border-t border-slate-200 pt-8">
                    <h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-slate-900">
                        <Box size={24} className="text-blue-600"/> Quick Check
                    </h3>
                    <div className="bg-white border border-slate-300 rounded-xl p-6 shadow-sm">
                        <p className="font-bold text-slate-900 mb-4 text-lg">
                            Which of the following is true if <MathTx>{'\\vec{a} \\cdot \\vec{b} = 0'}</MathTx>?
                        </p>
                        <div className="space-y-3">
                            {['Vectors are parallel', 'Vectors are perpendicular', 'Vectors are equal', 'One vector is zero (necessarily)'].map((opt, i) => (
                            <button key={i} className="w-full text-left p-4 rounded border border-slate-200 hover:bg-blue-50 hover:border-blue-300 transition-colors text-base text-slate-800 font-medium flex items-center gap-3 group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <span className="w-8 h-8 rounded-full border border-slate-300 flex items-center justify-center text-sm font-bold text-slate-500 group-hover:bg-blue-600 group-hover:text-white group-hover:border-blue-600 transition-colors">{String.fromCharCode(65+i)}</span>
                                {opt}
                            </button>
                            ))}
                        </div>
                        <div className="mt-4 p-4 bg-blue-50 text-blue-900 text-sm rounded flex items-start gap-2 border border-blue-100">
                            <Info size={16} className="mt-0.5 shrink-0 text-blue-700"/>
                            <span className="font-medium">Self-Check: Recall that a dot product of zero implies orthogonality (90° angle), provided neither vector has zero magnitude.</span>
                        </div>
                    </div>
                </div>

                {/* Navigation Footer */}
                <div className="flex justify-between mt-12 pt-6 border-t border-slate-200">
                    <button
                            disabled={activeTopicId === topics[0].id}
                    onClick={() => {
                    const idx = topics.findIndex(t => t.id === activeTopicId);
                    if (idx > 0) handleNav(topics[idx - 1].id);
                    }}
                    className={`px-4 py-2 rounded font-medium text-sm ${activeTopicId === topics[0].id ? 'text-slate-400 cursor-not-allowed' : 'text-blue-700 hover:bg-blue-50 hover:text-blue-800'}`}
                    >
                    &larr; Previous Topic
                    </button>
                    <button
                            disabled={activeTopicId === topics[topics.length - 1].id}
                    onClick={() => {
                    const idx = topics.findIndex(t => t.id === activeTopicId);
                    if (idx < topics.length - 1) handleNav(topics[idx + 1].id);
                    }}
                    className={`px-4 py-2 rounded font-medium text-sm ${activeTopicId === topics[topics.length - 1].id ? 'text-slate-400 cursor-not-allowed bg-slate-100' : 'bg-blue-700 text-white hover:bg-blue-800 shadow-md hover:shadow-lg transition-all'}`}
                    >
                    Next Topic &rarr;
                    </button>
                </div>

            </div>
        </main>
    </div>
</div>
);
};

export default App;