import { useState, useEffect, useRef } from "react";

// ── Data ─────────────────────────────────────────────────────────────────────
const SLIDES = [
  {
    id: 0, type: "cover",
    title: "الماء",
    sub: "أصغر جزيئة تحمل سر الحياة",
    grade: "كيمياء | الثاني متوسط",
    accent: "#38bdf8",
  },
  {
    id: 1, type: "wonder",
    q: "لو لم يطفُ الجليد...",
    body: "كانت البحيرات ستتجمّد من القاع إلى السطح، وتنقرض كل الأسماك، ويختل المناخ كله.",
    punchline: "خاصية واحدة في الماء أنقذت الحياة على الأرض.",
    accent: "#818cf8",
  },
  {
    id: 2, type: "molecule",
    title: "تركيب H₂O",
    facts: [
      { label: "ذرات هيدروجين", val: "٢", color: "#38bdf8" },
      { label: "ذرة أكسجين", val: "١", color: "#f87171" },
      { label: "زاوية الرابطة", val: "104.5°", color: "#a78bfa" },
    ],
    note: "الزاوية غير المنتظمة هي سبب كل خصائص الماء العجيبة",
    accent: "#38bdf8",
  },
  {
    id: 3, type: "polarity",
    title: "الجزيئة القطبية",
    body: "الأكسجين يشدّ الإلكترونات نحوه أكثر من الهيدروجين، فتنشأ شحنة سالبة عند الأكسجين وموجبة عند الهيدروجين.",
    effect: "هذا يجعل الماء مذيباً خارقاً — يُذيب السكر والملح والأحماض والقواعد.",
    accent: "#f59e0b",
  },
  {
    id: 4, type: "states",
    title: "الحالات الثلاث",
    states: [
      { name: "صلب — جليد", temp: "< 0°م", desc: "ذرات مرتّبة في شبكة بلّورية، كثافته أقل من السائل", icon: "🧊", color: "#7dd3fc" },
      { name: "سائل — ماء", temp: "0° — 100°م", desc: "ذرات تتحرك بحرية، يأخذ شكل إنائه", icon: "💧", color: "#38bdf8" },
      { name: "غازي — بخار", temp: "> 100°م", desc: "ذرات تتفرق وتملأ الفراغ، لا شكل ثابت", icon: "🌫️", color: "#94a3b8" },
    ],
    accent: "#0ea5e9",
  },
  {
    id: 5, type: "cycle",
    title: "دورة الماء في الطبيعة",
    steps: [
      { icon: "☀️", label: "تبخّر", desc: "الشمس تسخّن الماء فيتحول لبخار" },
      { icon: "☁️", label: "تكاثف", desc: "البخار يبرد ويتحول لقطرات في السحاب" },
      { icon: "🌧️", label: "تساقط", desc: "المطر والثلج يعودان للأرض" },
      { icon: "🏔️", label: "جريان", desc: "الماء يجري في الأنهار ويتسرب للأرض" },
    ],
    accent: "#34d399",
  },
  {
    id: 6, type: "properties",
    title: "خصائص لا مثيل لها",
    props: [
      { icon: "🧊", title: "الجليد أخف من الماء", body: "الشبكة البلّورية للجليد أكثر تباعداً، لذا كثافته أقل ويطفو" },
      { icon: "🫧", title: "توتر سطحي عالٍ", body: "جزيئات الماء تتجاذب مع بعضها فتكوّن سطحاً كالغشاء — لذا البعوض يمشي فوقه!" },
      { icon: "🌡️", title: "سعة حرارية عالية", body: "يحتاج وقتاً طويلاً ليسخن ويبرد، لذا البحار تلطّف المناخ" },
      { icon: "⚡", title: "الماء النقي عازل", body: "الكهرباء تنتقل عبر الأملاح المذابة لا الماء نفسه" },
    ],
    accent: "#f97316",
  },
  {
    id: 7, type: "quiz",
    title: "تحدّ سريع!",
    qs: [
      { q: "لماذا الجليد يطفو فوق الماء؟", opts: ["لأنه بارد", "كثافته أقل من الماء السائل", "لأنه صلب", "لأن الماء ثقيل"], ans: 1 },
      { q: "ما زاوية الرابطة في جزيئة الماء؟", opts: ["90°", "180°", "104.5°", "120°"], ans: 2 },
      { q: "الماء النقي موصل للكهرباء؟", opts: ["نعم دائماً", "لا، هو عازل", "أحياناً", "فقط عند 0°م"], ans: 1 },
    ],
    accent: "#a855f7",
  },
  {
    id: 8, type: "summary",
    title: "خلاصة",
    points: [
      "H₂O: ذرتا هيدروجين + ذرة أكسجين بزاوية 104.5°",
      "القطبية تجعله مذيباً خارقاً",
      "ثلاث حالات: صلبة، سائلة، غازية",
      "الجليد يطفو لأن كثافته أقل من الماء السائل",
      "سعته الحرارية العالية تُنظّم مناخ الأرض",
    ],
    accent: "#38bdf8",
  },
];

// ── Animated Molecule ─────────────────────────────────────────────────────────
function WaterMolecule({ size = 200 }) {
  const [angle, setAngle] = useState(0);
  useEffect(() => {
    let raf;
    const tick = () => { setAngle(a => a + 0.4); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const cx = size / 2, cy = size / 2;
  const r = size * 0.22;
  const bondLen = size * 0.28;
  const rad = (104.5 / 2) * (Math.PI / 180);

  const h1x = cx + bondLen * Math.cos(Math.PI / 2 + rad);
  const h1y = cy - bondLen * Math.sin(Math.PI / 2 + rad);
  const h2x = cx + bondLen * Math.cos(Math.PI / 2 - rad);
  const h2y = cy - bondLen * Math.sin(Math.PI / 2 - rad);

  const pulse = 1 + 0.03 * Math.sin(angle * 0.05);

  return (
    <svg width={size} height={size} style={{ filter: "drop-shadow(0 0 18px #38bdf840)" }}>
      {/* bonds */}
      <line x1={cx} y1={cy} x2={h1x} y2={h1y} stroke="#94a3b8" strokeWidth={size * 0.022} strokeLinecap="round" />
      <line x1={cx} y1={cy} x2={h2x} y2={h2y} stroke="#94a3b8" strokeWidth={size * 0.022} strokeLinecap="round" />
      {/* O */}
      <circle cx={cx} cy={cy} r={r * pulse} fill="#ef4444" opacity={0.9} />
      <circle cx={cx} cy={cy} r={r * pulse * 0.55} fill="#fca5a5" opacity={0.4} />
      <text x={cx} y={cy + size * 0.03} textAnchor="middle" dominantBaseline="middle"
        fill="white" fontSize={size * 0.11} fontWeight="900">O</text>
      {/* H1 */}
      <circle cx={h1x} cy={h1y} r={r * 0.65 * pulse} fill="#38bdf8" opacity={0.9} />
      <text x={h1x} y={h1y + size * 0.02} textAnchor="middle" dominantBaseline="middle"
        fill="white" fontSize={size * 0.09} fontWeight="900">H</text>
      {/* H2 */}
      <circle cx={h2x} cy={h2y} r={r * 0.65 * pulse} fill="#38bdf8" opacity={0.9} />
      <text x={h2x} y={h2y + size * 0.02} textAnchor="middle" dominantBaseline="middle"
        fill="white" fontSize={size * 0.09} fontWeight="900">H</text>
      {/* angle arc */}
      <path
        d={`M ${cx + 28 * Math.cos(Math.PI / 2 + rad)} ${cy - 28 * Math.sin(Math.PI / 2 + rad)}
            A 28 28 0 0 1 ${cx + 28 * Math.cos(Math.PI / 2 - rad)} ${cy - 28 * Math.sin(Math.PI / 2 - rad)}`}
        fill="none" stroke="#a78bfa" strokeWidth="1.5" strokeDasharray="3 3" />
    </svg>
  );
}

// ── Wave background ───────────────────────────────────────────────────────────
function Waves({ color }) {
  const [t, setT] = useState(0);
  useEffect(() => {
    let raf;
    const tick = () => { setT(p => p + 0.015); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const W = 400, H = 80;
  const wave = (offset, amp) => {
    let d = `M0,${H}`;
    for (let x = 0; x <= W; x += 8) {
      const y = H / 2 + amp * Math.sin((x / W) * 4 * Math.PI + t + offset);
      d += ` L${x},${y}`;
    }
    return d + ` L${W},${H} Z`;
  };

  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none"
      style={{ position: "absolute", bottom: 0, left: 0, right: 0, width: "100%", height: "60px", opacity: 0.15 }}>
      <path d={wave(0, 12)} fill={color} />
      <path d={wave(1.5, 8)} fill={color} opacity={0.6} />
    </svg>
  );
}

// ── Main Component ────────────────────────────────────────────────────────────
export default function WaterLesson() {
  const [cur, setCur] = useState(0);
  const [visible, setVisible] = useState(true);
  const [quizState, setQuizState] = useState({ idx: 0, selected: null, score: 0, done: false });

  const slide = SLIDES[cur];

  const go = (dir) => {
    const next = cur + dir;
    if (next < 0 || next >= SLIDES.length) return;
    setVisible(false);
    setTimeout(() => { setCur(next); setVisible(true); setQuizState({ idx: 0, selected: null, score: 0, done: false }); }, 220);
  };

  const pickAnswer = (i) => {
    if (quizState.selected !== null) return;
    const correct = i === SLIDES[cur].qs[quizState.idx].ans;
    const newScore = quizState.score + (correct ? 1 : 0);
    setQuizState(s => ({ ...s, selected: i, score: newScore }));
    setTimeout(() => {
      const nextIdx = quizState.idx + 1;
      if (nextIdx >= SLIDES[cur].qs.length) {
        setQuizState(s => ({ ...s, done: true, score: newScore }));
      } else {
        setQuizState(s => ({ ...s, idx: nextIdx, selected: null }));
      }
    }, 900);
  };

  return (
    <div dir="rtl" style={{ fontFamily: "'Segoe UI', Tahoma, sans-serif", minHeight: "100vh", display: "flex", flexDirection: "column", background: "#0a1628", color: "white", position: "relative", overflow: "hidden" }}>

      {/* Progress bar */}
      <div style={{ height: 3, background: "#1e293b" }}>
        <div style={{ height: "100%", width: `${((cur + 1) / SLIDES.length) * 100}%`, background: slide.accent, transition: "width 0.5s ease" }} />
      </div>

      {/* Top bar */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 20px" }}>
        <span style={{ fontSize: 12, color: "#475569" }}>{cur + 1} / {SLIDES.length}</span>
        <span style={{ fontSize: 11, color: "#475569", background: "#1e293b", padding: "4px 12px", borderRadius: 99 }}>كيمياء | ثاني متوسط</span>
      </div>

      {/* Slide */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "16px 20px", opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(16px)", transition: "all 0.25s ease", position: "relative" }}>

        {/* COVER */}
        {slide.type === "cover" && (
          <div style={{ textAlign: "center", maxWidth: 360 }}>
            <div style={{ marginBottom: 24 }}><WaterMolecule size={180} /></div>
            <div style={{ fontSize: 11, letterSpacing: 4, color: "#475569", marginBottom: 8, textTransform: "uppercase" }}>{slide.grade}</div>
            <h1 style={{ fontSize: 52, fontWeight: 900, margin: "0 0 8px", color: slide.accent, lineHeight: 1 }}>{slide.title}</h1>
            <p style={{ color: "#64748b", fontSize: 16, margin: "0 0 28px" }}>{slide.sub}</p>
            <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>
              {["تركيب H₂O", "الحالات الثلاث", "القطبية", "دورة الماء", "الخصائص"].map(t => (
                <span key={t} style={{ fontSize: 11, padding: "4px 12px", borderRadius: 99, border: "1px solid #1e3a5f", color: "#64748b" }}>{t}</span>
              ))}
            </div>
          </div>
        )}

        {/* WONDER */}
        {slide.type === "wonder" && (
          <div style={{ maxWidth: 360, textAlign: "center" }}>
            <div style={{ fontSize: 56, marginBottom: 20 }}>🤔</div>
            <h2 style={{ fontSize: 26, fontWeight: 800, color: slide.accent, marginBottom: 16 }}>{slide.q}</h2>
            <p style={{ color: "#94a3b8", fontSize: 15, lineHeight: 1.7, marginBottom: 20, padding: "16px 20px", background: "#0f172a", borderRadius: 16, border: "1px solid #1e293b" }}>{slide.body}</p>
            <div style={{ fontSize: 14, fontWeight: 600, color: "#e2e8f0", background: `${slide.accent}18`, border: `1px solid ${slide.accent}40`, padding: "12px 20px", borderRadius: 12 }}>
              💡 {slide.punchline}
            </div>
          </div>
        )}

        {/* MOLECULE */}
        {slide.type === "molecule" && (
          <div style={{ maxWidth: 360, width: "100%", textAlign: "center" }}>
            <h2 style={{ fontSize: 26, fontWeight: 800, color: slide.accent, marginBottom: 20 }}>{slide.title}</h2>
            <div style={{ display: "flex", justifyContent: "center", marginBottom: 20 }}><WaterMolecule size={200} /></div>
            <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
              {slide.facts.map((f, i) => (
                <div key={i} style={{ flex: 1, padding: "12px 8px", background: "#0f172a", borderRadius: 14, border: `1px solid ${f.color}30` }}>
                  <div style={{ fontSize: 22, fontWeight: 900, color: f.color }}>{f.val}</div>
                  <div style={{ fontSize: 10, color: "#64748b", marginTop: 4 }}>{f.label}</div>
                </div>
              ))}
            </div>
            <p style={{ fontSize: 12, color: "#64748b", fontStyle: "italic" }}>{slide.note}</p>
          </div>
        )}

        {/* POLARITY */}
        {slide.type === "polarity" && (
          <div style={{ maxWidth: 360, textAlign: "center" }}>
            <div style={{ fontSize: 56, marginBottom: 16 }}>🔋</div>
            <h2 style={{ fontSize: 24, fontWeight: 800, color: slide.accent, marginBottom: 16 }}>{slide.title}</h2>
            {/* polarity diagram */}
            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 0, marginBottom: 20, padding: "16px", background: "#0f172a", borderRadius: 16, border: "1px solid #1e293b" }}>
              <div style={{ textAlign: "center" }}>
                <div style={{ width: 44, height: 44, borderRadius: "50%", background: "#38bdf8", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 900, fontSize: 16 }}>H</div>
                <div style={{ fontSize: 10, color: "#38bdf8", marginTop: 4 }}>δ⁺</div>
              </div>
              <div style={{ width: 30, height: 2, background: "#475569", margin: "0 4px" }} />
              <div style={{ textAlign: "center" }}>
                <div style={{ width: 56, height: 56, borderRadius: "50%", background: "#ef4444", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 900, fontSize: 20 }}>O</div>
                <div style={{ fontSize: 10, color: "#ef4444", marginTop: 4 }}>δ⁻</div>
              </div>
              <div style={{ width: 30, height: 2, background: "#475569", margin: "0 4px" }} />
              <div style={{ textAlign: "center" }}>
                <div style={{ width: 44, height: 44, borderRadius: "50%", background: "#38bdf8", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 900, fontSize: 16 }}>H</div>
                <div style={{ fontSize: 10, color: "#38bdf8", marginTop: 4 }}>δ⁺</div>
              </div>
            </div>
            <p style={{ color: "#94a3b8", fontSize: 14, lineHeight: 1.7, marginBottom: 14 }}>{slide.body}</p>
            <div style={{ fontSize: 13, color: "#e2e8f0", background: `${slide.accent}18`, border: `1px solid ${slide.accent}40`, padding: "12px 16px", borderRadius: 12 }}>
              ✨ {slide.effect}
            </div>
          </div>
        )}

        {/* STATES */}
        {slide.type === "states" && (
          <div style={{ maxWidth: 380, width: "100%" }}>
            <h2 style={{ textAlign: "center", fontSize: 24, fontWeight: 800, color: slide.accent, marginBottom: 18 }}>{slide.title}</h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {slide.states.map((s, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 16px", background: "#0f172a", borderRadius: 14, border: `1px solid ${s.color}30` }}>
                  <div style={{ fontSize: 36, flexShrink: 0 }}>{s.icon}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 700, fontSize: 15, color: s.color }}>{s.name}</div>
                    <div style={{ fontSize: 11, color: "#475569", marginBottom: 4 }}>{s.temp}</div>
                    <div style={{ fontSize: 12, color: "#64748b" }}>{s.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* CYCLE */}
        {slide.type === "cycle" && (
          <div style={{ maxWidth: 360, width: "100%" }}>
            <h2 style={{ textAlign: "center", fontSize: 24, fontWeight: 800, color: slide.accent, marginBottom: 20 }}>{slide.title}</h2>
            <div style={{ position: "relative" }}>
              {slide.steps.map((s, i) => (
                <div key={i} style={{ display: "flex", gap: 14, marginBottom: i < slide.steps.length - 1 ? 0 : 0 }}>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                    <div style={{ width: 44, height: 44, borderRadius: "50%", background: `${slide.accent}20`, border: `2px solid ${slide.accent}50`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, flexShrink: 0 }}>{s.icon}</div>
                    {i < slide.steps.length - 1 && <div style={{ width: 2, flex: 1, minHeight: 24, background: `${slide.accent}30`, margin: "4px 0" }} />}
                  </div>
                  <div style={{ paddingBottom: i < slide.steps.length - 1 ? 20 : 0, paddingTop: 8 }}>
                    <div style={{ fontWeight: 700, fontSize: 15, color: slide.accent }}>{s.label}</div>
                    <div style={{ fontSize: 12, color: "#64748b", lineHeight: 1.5 }}>{s.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* PROPERTIES */}
        {slide.type === "properties" && (
          <div style={{ maxWidth: 380, width: "100%" }}>
            <h2 style={{ textAlign: "center", fontSize: 24, fontWeight: 800, color: slide.accent, marginBottom: 16 }}>{slide.title}</h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {slide.props.map((p, i) => (
                <div key={i} style={{ padding: "14px 16px", background: "#0f172a", borderRadius: 14, border: "1px solid #1e293b", display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{ fontSize: 28, flexShrink: 0 }}>{p.icon}</span>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 14, color: "#e2e8f0", marginBottom: 4 }}>{p.title}</div>
                    <div style={{ fontSize: 12, color: "#64748b", lineHeight: 1.6 }}>{p.body}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* QUIZ */}
        {slide.type === "quiz" && (
          <div style={{ maxWidth: 360, width: "100%", textAlign: "center" }}>
            <div style={{ fontSize: 48, marginBottom: 8 }}>🏆</div>
            <h2 style={{ fontSize: 22, fontWeight: 800, color: slide.accent, marginBottom: 4 }}>{slide.title}</h2>

            {!quizState.done ? (
              <>
                <div style={{ fontSize: 11, color: "#475569", marginBottom: 16 }}>سؤال {quizState.idx + 1} من {slide.qs.length}</div>
                <p style={{ fontSize: 15, color: "#e2e8f0", marginBottom: 16, padding: "14px 16px", background: "#0f172a", borderRadius: 14, border: "1px solid #1e293b" }}>
                  {slide.qs[quizState.idx].q}
                </p>
                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  {slide.qs[quizState.idx].opts.map((opt, i) => {
                    const isAns = i === slide.qs[quizState.idx].ans;
                    const isPicked = quizState.selected === i;
                    let bg = "#0f172a", border = "#1e293b", color = "#94a3b8";
                    if (quizState.selected !== null) {
                      if (isAns) { bg = "#052e16"; border = "#16a34a"; color = "#4ade80"; }
                      else if (isPicked) { bg = "#1c0a0a"; border = "#dc2626"; color = "#f87171"; }
                    }
                    return (
                      <button key={i} onClick={() => pickAnswer(i)}
                        style={{ padding: "12px 16px", borderRadius: 12, border: `1.5px solid ${border}`, background: bg, color, fontSize: 14, fontWeight: 600, cursor: "pointer", textAlign: "right", transition: "all 0.2s", fontFamily: "inherit" }}>
                        {opt} {quizState.selected !== null && isAns ? "✓" : ""}
                      </button>
                    );
                  })}
                </div>
              </>
            ) : (
              <div style={{ textAlign: "center" }}>
                <div style={{ fontSize: 64, marginBottom: 12 }}>
                  {quizState.score === slide.qs.length ? "🥇" : quizState.score >= 2 ? "🥈" : "💪"}
                </div>
                <div style={{ fontSize: 32, fontWeight: 900, color: slide.accent, marginBottom: 8 }}>
                  {quizState.score} / {slide.qs.length}
                </div>
                <div style={{ color: "#64748b", fontSize: 15 }}>
                  {quizState.score === slide.qs.length ? "ممتاز! إجابات كلها صح 🎉" : quizState.score >= 2 ? "جيد جداً، قريب من المثالية!" : "راجع الدرس وحاول مرة ثانية!"}
                </div>
              </div>
            )}
          </div>
        )}

        {/* SUMMARY */}
        {slide.type === "summary" && (
          <div style={{ maxWidth: 360, width: "100%", textAlign: "center" }}>
            <div style={{ fontSize: 48, marginBottom: 12 }}>📚</div>
            <h2 style={{ fontSize: 24, fontWeight: 800, color: slide.accent, marginBottom: 20 }}>{slide.title}</h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, textAlign: "right" }}>
              {slide.points.map((p, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 14px", background: "#0f172a", borderRadius: 12, border: "1px solid #1e293b" }}>
                  <div style={{ width: 26, height: 26, borderRadius: "50%", background: slide.accent, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 900, flexShrink: 0, color: "#0a1628" }}>{i + 1}</div>
                  <span style={{ color: "#94a3b8", fontSize: 13 }}>{p}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 20, fontSize: 22 }}>💧 الماء = الحياة</div>
          </div>
        )}
      </div>

      {/* Wave decoration */}
      <Waves color={slide.accent} />

      {/* Navigation */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 20px 20px", position: "relative", zIndex: 2 }}>
        <button onClick={() => go(-1)} disabled={cur === 0}
          style={{ padding: "8px 18px", borderRadius: 99, background: "#1e293b", border: "1px solid #334155", color: cur === 0 ? "#334155" : "#94a3b8", fontSize: 13, fontWeight: 700, cursor: cur === 0 ? "default" : "pointer", fontFamily: "inherit" }}>
          ← السابق
        </button>

        <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
          {SLIDES.map((_, i) => (
            <button key={i} onClick={() => { setVisible(false); setTimeout(() => { setCur(i); setVisible(true); }, 220); }}
              style={{ borderRadius: 99, height: 7, width: i === cur ? 22 : 7, background: i === cur ? slide.accent : "#1e293b", border: "none", cursor: "pointer", transition: "all 0.3s ease", padding: 0 }} />
          ))}
        </div>

        <button onClick={() => go(1)} disabled={cur === SLIDES.length - 1}
          style={{ padding: "8px 18px", borderRadius: 99, background: cur === SLIDES.length - 1 ? "#1e293b" : slide.accent, border: "none", color: cur === SLIDES.length - 1 ? "#334155" : "#0a1628", fontSize: 13, fontWeight: 700, cursor: cur === SLIDES.length - 1 ? "default" : "pointer", fontFamily: "inherit" }}>
          التالي ←
        </button>
      </div>
    </div>
  );
}