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

const TRIPTICO_URL = "https://rv-ra-scamper.pages.dev/#triptico";

function QRCode({ url, size = 160 }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    // QR generation using qrcode.js via CDN-style inline approach
    // We'll use a public QR API
  }, []);

  const qrApiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodeURIComponent(url)}&bgcolor=ffffff&color=1a2744&margin=10`;

  return (
    <img
      src={qrApiUrl}
      alt="QR Code"
      width={size}
      height={size}
      style={{ borderRadius: 12, border: "3px solid #e8f0fe", display: "block" }}
    />
  );
}

const pautas = [
  {
    num: "01",
    title: "Formato y Montaje",
    color: "#1a2744",
    accent: "#f97316",
    icon: "📐",
    items: [
      { label: "Medidas", text: "100 cm ancho × 70 cm alto — 3 paneles de 33 cm cada uno" },
      { label: "Material", text: "Cartón pluma o foam board de 3mm para colgar" },
      { label: "Orientación", text: "Horizontal. Se lee de izquierda a derecha con el tríptico abierto" },
      { label: "Altura", text: "Información importante entre 90–140 cm del suelo" },
    ],
  },
  {
    num: "02",
    title: "Distribución 30/40/30",
    color: "#14532d",
    accent: "#22c55e",
    icon: "📊",
    panels: [
      {
        pct: "30%",
        label: "Panel Izquierdo",
        sub: "El Problema",
        desc: "Engancha al que pasa caminando. Título grande, contexto en 3 líneas, imagen gancho y dato curioso.",
        color: "#dcfce7",
        border: "#22c55e",
      },
      {
        pct: "40%",
        label: "Panel Central",
        sub: "La Solución",
        desc: "Las 4 claves del Pensamiento Computacional con diagrama de flujo y pseudocódigo principal.",
        color: "#dbeafe",
        border: "#3b82f6",
      },
      {
        pct: "30%",
        label: "Panel Derecho",
        sub: "Impacto y Prueba",
        desc: "Tabla de prueba, conexión con la vida real, conclusión y créditos con QR.",
        color: "#fef9c3",
        border: "#eab308",
      },
    ],
  },
  {
    num: "03",
    title: "5 Reglas de Diseño para Feria",
    color: "#4c1d95",
    accent: "#a855f7",
    icon: "🎨",
    rules: [
      { n: "1", title: "Letra grande, frases cortas", desc: "Título 120pt · Subtítulos 60pt · Texto 28pt mínimo. Si no se lee a 2 metros, no sirve." },
      { n: "2", title: "Menos es más", desc: "Máximo 250 palabras en todo el tríptico. La gente no lee párrafos." },
      { n: "3", title: "Color con intención", desc: "1 color base + 1 para código + 1 para los 'SI'. Fondo blanco o crema." },
      { n: "4", title: "Interactividad análoga", desc: 'Solapa en Panel Central: "Levanta para ver el dato que se guarda". Abajo: salas_vistas = [1,2]. ¡A los jurados les encanta tocar!' },
      { n: "5", title: "Un solo mensaje visual", desc: "El diagrama de flujo debe ser lo más grande del panel central. Es tu evidencia de pensamiento computacional." },
    ],
  },
  {
    num: "04",
    title: "Qué Evitar — Errores que Bajan Puntos",
    color: "#7f1d1d",
    accent: "#ef4444",
    icon: "⚠️",
    errors: [
      "Pegar el texto completo del reto. Nadie lo lee.",
      "Fondos oscuros con letra amarilla. Cansa la vista.",
      "Poner el algoritmo en letra tamaño 12. Si no se ve, es como si no estuviera.",
      "No ensayar el discurso de 1 minuto: «Este es el problema, así lo resolvimos, y aquí la prueba».",
    ],
  },
];

function PautasSection() {
  return (
    <section style={{ background: "linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%)", padding: "80px 0 60px", fontFamily: "'Georgia', serif" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", padding: "0 24px" }}>
        {/* Header */}
        <div style={{ textAlign: "center", marginBottom: 64 }}>
          <span style={{
            display: "inline-block", background: "#f97316", color: "#fff",
            fontFamily: "monospace", fontSize: 12, fontWeight: 700,
            letterSpacing: 3, padding: "6px 18px", borderRadius: 20, marginBottom: 18
          }}>FERIA DE CIENCIA · GRADO 11</span>
          <h2 style={{
            color: "#fff", fontSize: "clamp(28px, 5vw, 48px)", fontWeight: 800,
            margin: "0 0 16px", lineHeight: 1.1
          }}>
            Pautas para el <span style={{ color: "#f97316" }}>Tríptico</span><br />
            <span style={{ color: "#a5b4fc", fontSize: "0.65em", fontWeight: 400 }}>
              "Programa tu Experiencia VR sin Gafas" — Museo de Historia de Cali
            </span>
          </h2>
          <p style={{ color: "#94a3b8", maxWidth: 600, margin: "0 auto", fontSize: 16, lineHeight: 1.7 }}>
            Guía de divulgación científica para crear un tríptico de 1 metro que en <strong style={{ color: "#fff" }}>10 segundos</strong> comunique el reto, la solución y por qué importa.
          </p>
        </div>

        {/* Pauta 1 - Formato */}
        <div style={{ marginBottom: 40, background: "rgba(255,255,255,0.04)", borderRadius: 20, padding: "32px", border: "1px solid rgba(255,255,255,0.1)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 24 }}>
            <span style={{ fontSize: 32 }}>📐</span>
            <div>
              <span style={{ color: "#f97316", fontFamily: "monospace", fontSize: 12, fontWeight: 700, letterSpacing: 2 }}>PAUTA 01</span>
              <h3 style={{ color: "#fff", margin: 0, fontSize: 22 }}>Formato y Montaje</h3>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }}>
            {pautas[0].items.map((item, i) => (
              <div key={i} style={{ background: "rgba(249,115,22,0.1)", border: "1px solid rgba(249,115,22,0.3)", borderRadius: 12, padding: "16px 20px" }}>
                <div style={{ color: "#f97316", fontSize: 11, fontWeight: 700, letterSpacing: 2, marginBottom: 6 }}>{item.label.toUpperCase()}</div>
                <div style={{ color: "#e2e8f0", fontSize: 14, lineHeight: 1.5 }}>{item.text}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Pauta 2 - Distribución */}
        <div style={{ marginBottom: 40, background: "rgba(255,255,255,0.04)", borderRadius: 20, padding: "32px", border: "1px solid rgba(255,255,255,0.1)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 24 }}>
            <span style={{ fontSize: 32 }}>📊</span>
            <div>
              <span style={{ color: "#22c55e", fontFamily: "monospace", fontSize: 12, fontWeight: 700, letterSpacing: 2 }}>PAUTA 02</span>
              <h3 style={{ color: "#fff", margin: 0, fontSize: 22 }}>Distribución de Contenido — Regla 30/40/30</h3>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "3fr 4fr 3fr", gap: 12 }}>
            {pautas[1].panels.map((p, i) => (
              <div key={i} style={{ background: p.color, border: `2px solid ${p.border}`, borderRadius: 14, padding: "20px 16px", textAlign: "center" }}>
                <div style={{ fontSize: 28, fontWeight: 900, color: p.border, marginBottom: 4 }}>{p.pct}</div>
                <div style={{ fontWeight: 700, fontSize: 13, color: "#1e293b", marginBottom: 2 }}>{p.label}</div>
                <div style={{ fontSize: 12, color: p.border, fontWeight: 700, marginBottom: 8 }}>{p.sub}</div>
                <div style={{ fontSize: 12, color: "#334155", lineHeight: 1.5 }}>{p.desc}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: "1fr", gap: 0 }}>
            {[
              { label: "Panel Izquierdo (30%)", detail: "Título 8–10 cm, contexto 3 líneas, plano del museo (Entrada→Sala 1→2→3→Salida), dato: «En Colombia hay 3.2M usuarios de AR. El 68% es para educación»." },
              { label: "Panel Central (40%)", detail: "4 cuadros: Descomposición · Patrones · Abstracción · Algoritmo. Diagrama de flujo con SI…ENTONCES. Solapa interactiva con salas_vistas = [1,2]." },
              { label: "Panel Derecho (30%)", detail: "Tabla de prueba (Entrada→Sala1→Sala3 → «Debes visitar Sala 2 primero»). Conexión Spark AR / Unity. Conclusión. Créditos + QR." },
            ].map((r, i) => (
              <div key={i} style={{ background: "rgba(255,255,255,0.03)", borderLeft: `3px solid ${["#22c55e","#3b82f6","#eab308"][i]}`, padding: "12px 18px", marginTop: 8, borderRadius: "0 8px 8px 0" }}>
                <span style={{ color: ["#22c55e","#3b82f6","#eab308"][i], fontWeight: 700, fontSize: 13 }}>{r.label}: </span>
                <span style={{ color: "#cbd5e1", fontSize: 13 }}>{r.detail}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Pauta 3 - Reglas */}
        <div style={{ marginBottom: 40, background: "rgba(255,255,255,0.04)", borderRadius: 20, padding: "32px", border: "1px solid rgba(255,255,255,0.1)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 24 }}>
            <span style={{ fontSize: 32 }}>🎨</span>
            <div>
              <span style={{ color: "#a855f7", fontFamily: "monospace", fontSize: 12, fontWeight: 700, letterSpacing: 2 }}>PAUTA 03</span>
              <h3 style={{ color: "#fff", margin: 0, fontSize: 22 }}>5 Reglas de Diseño para Feria</h3>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {pautas[2].rules.map((r, i) => (
              <div key={i} style={{ display: "flex", gap: 16, alignItems: "flex-start", background: "rgba(168,85,247,0.08)", border: "1px solid rgba(168,85,247,0.2)", borderRadius: 12, padding: "16px 20px" }}>
                <div style={{ minWidth: 36, height: 36, background: "#a855f7", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontWeight: 900, fontSize: 16, flexShrink: 0 }}>{r.n}</div>
                <div>
                  <div style={{ color: "#e2e8f0", fontWeight: 700, fontSize: 15, marginBottom: 4 }}>{r.title}</div>
                  <div style={{ color: "#94a3b8", fontSize: 13, lineHeight: 1.6 }}>{r.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Pauta 4 - Errores */}
        <div style={{ marginBottom: 0, background: "rgba(255,255,255,0.04)", borderRadius: 20, padding: "32px", border: "1px solid rgba(239,68,68,0.3)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 24 }}>
            <span style={{ fontSize: 32 }}>⚠️</span>
            <div>
              <span style={{ color: "#ef4444", fontFamily: "monospace", fontSize: 12, fontWeight: 700, letterSpacing: 2 }}>PAUTA 04</span>
              <h3 style={{ color: "#fff", margin: 0, fontSize: 22 }}>Errores que Bajan Puntos</h3>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 12 }}>
            {pautas[3].errors.map((e, i) => (
              <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", background: "rgba(239,68,68,0.08)", border: "1px solid rgba(239,68,68,0.25)", borderRadius: 12, padding: "14px 16px" }}>
                <span style={{ color: "#ef4444", fontSize: 18, flexShrink: 0 }}>✗</span>
                <span style={{ color: "#fca5a5", fontSize: 13, lineHeight: 1.5 }}>{e}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 20, background: "rgba(234,179,8,0.1)", border: "1px solid rgba(234,179,8,0.4)", borderRadius: 12, padding: "16px 20px" }}>
            <span style={{ color: "#fbbf24", fontWeight: 700 }}>💡 Tip de experto: </span>
            <span style={{ color: "#fde68a", fontSize: 14 }}>Antes de imprimir, pega todo en borrador y párate a 2 metros. Lo que no entiendas en 15 segundos, cámbialo.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function TripticoSection() {
  const [solapaAbierta, setSolapaAbierta] = useState(false);

  return (
    <section id="triptico" style={{ background: "#f8fafc", padding: "80px 0 80px", fontFamily: "'Georgia', serif" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 24px" }}>

        {/* Header */}
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <span style={{ display: "inline-block", background: "#1a2744", color: "#fff", fontFamily: "monospace", fontSize: 12, fontWeight: 700, letterSpacing: 3, padding: "6px 18px", borderRadius: 20, marginBottom: 18 }}>
            TRÍPTICO · FERIA DE CIENCIA
          </span>
          <h2 style={{ color: "#1a2744", fontSize: "clamp(26px, 4vw, 42px)", fontWeight: 800, margin: "0 0 12px", lineHeight: 1.2 }}>
            Programa tu Museo en<br />
            <span style={{ color: "#f97316" }}>Realidad Aumentada</span>
          </h2>
          <p style={{ color: "#64748b", maxWidth: 550, margin: "0 auto", fontSize: 15, lineHeight: 1.7 }}>
            Tríptico 100×70 cm para la Feria de Ciencia — Institución Educativa Liceo de Cali · Grado 11
          </p>
        </div>

        {/* Tríptico */}
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1.33fr 1fr", gap: 0,
          boxShadow: "0 30px 80px rgba(0,0,0,0.18)", borderRadius: 20, overflow: "hidden",
          border: "2px solid #e2e8f0"
        }}>

          {/* PANEL IZQUIERDO */}
          <div style={{ background: "#fff", padding: "32px 24px", borderRight: "2px solid #e2e8f0", display: "flex", flexDirection: "column", gap: 20 }}>
            {/* Título */}
            <div>
              <h1 style={{ color: "#1a2744", fontSize: "clamp(18px, 2.5vw, 28px)", fontWeight: 900, lineHeight: 1.1, margin: "0 0 8px", textTransform: "uppercase" }}>
                Programa tu<br />Museo en
              </h1>
              <h1 style={{ color: "#f97316", fontSize: "clamp(24px, 3.5vw, 38px)", fontWeight: 900, lineHeight: 1, margin: "0 0 10px", textTransform: "uppercase" }}>
                Realidad<br />Aumentada
              </h1>
              <div style={{ background: "#1a2744", color: "#fff", padding: "8px 14px", borderRadius: 8, fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: 1.5, display: "inline-block" }}>
                Sin gafas, sin computador: solo con lógica
              </div>
            </div>

            {/* Contexto */}
            <div style={{ background: "#f0f4ff", borderRadius: 12, padding: "16px", borderLeft: "4px solid #3b82f6" }}>
              <p style={{ color: "#1e293b", fontSize: 13, lineHeight: 1.7, margin: 0 }}>
                El Museo de Historia de Cali quiere una app AR para guiar visitantes. <strong>El código se dañó.</strong> ¿Puedes reconstruir la lógica que decide qué objeto 3D mostrar?
              </p>
            </div>

            {/* Ruta del Visitante */}
            <div>
              <div style={{ background: "#1a2744", color: "#fff", fontSize: 11, fontWeight: 700, letterSpacing: 2, padding: "6px 12px", borderRadius: "8px 8px 0 0", textAlign: "center" }}>RUTA DEL VISITANTE</div>
              <div style={{ background: "#f8fafc", border: "1px solid #e2e8f0", borderTop: "none", borderRadius: "0 0 10px 10px", padding: "14px 10px" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 4 }}>
                  {["🚪 Entrada", "🏛 Sala 1", "🏺 Sala 2", "⚔️ Sala 3", "🚶 Salida"].map((s, i, arr) => (
                    <div key={i} style={{ display: "flex", alignItems: "center", gap: 4 }}>
                      <div style={{ textAlign: "center" }}>
                        <div style={{ fontSize: 18 }}>{s.split(" ")[0]}</div>
                        <div style={{ fontSize: 9, color: "#64748b", whiteSpace: "nowrap" }}>{s.split(" ").slice(1).join(" ")}</div>
                        <div style={{ fontSize: 14, marginTop: 4 }}>👣</div>
                        <div style={{ fontSize: 14 }}>📱</div>
                      </div>
                      {i < arr.length - 1 && <span style={{ color: "#94a3b8", fontSize: 16, flexShrink: 0 }}>→</span>}
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Dato Curioso */}
            <div style={{ background: "#fffbeb", border: "1px solid #fde68a", borderRadius: 12, padding: "14px" }}>
              <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                <span style={{ fontSize: 22 }}>💡</span>
                <div>
                  <div style={{ color: "#f97316", fontWeight: 700, fontSize: 12, letterSpacing: 1, marginBottom: 4 }}>DATO CURIOSO</div>
                  <p style={{ color: "#92400e", fontSize: 13, margin: 0, lineHeight: 1.5 }}>
                    En Colombia hay <strong>3.2 millones</strong> de usuarios de AR.<br />
                    El <strong>68%</strong> es para educación.
                  </p>
                  <p style={{ color: "#a16207", fontSize: 10, margin: "6px 0 0" }}>Fuente: Statista 2024</p>
                </div>
              </div>
            </div>

            {/* Museo logo area */}
            <div style={{ marginTop: "auto", borderTop: "1px solid #e2e8f0", paddingTop: 14, display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ fontSize: 28 }}>🏛️</span>
              <span style={{ color: "#1a2744", fontSize: 12, fontWeight: 700, lineHeight: 1.3 }}>Museo de Historia<br />de Cali</span>
            </div>
          </div>

          {/* PANEL CENTRAL */}
          <div style={{ background: "#1a2744", padding: "28px 22px", display: "flex", flexDirection: "column", gap: 18 }}>
            <div style={{ textAlign: "center" }}>
              <div style={{ color: "#fff", fontSize: "clamp(14px, 2vw, 20px)", fontWeight: 900, textTransform: "uppercase", letterSpacing: 1, lineHeight: 1.2 }}>
                Las 4 Claves del<br />
                <span style={{ color: "#f97316" }}>Pensamiento Computacional</span>
              </div>
            </div>

            {/* 4 cuadros */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              {[
                { icon: "🧩", letter: "D", title: "Descomposición", text: "Partimos en 3: detectar sala, controlar secuencia, guardar estados.", bg: "#dcfce7", border: "#22c55e", txt: "#14532d" },
                { icon: "🔍", letter: "P", title: "Patrones", text: "Para ver Sala N, siempre debes haber visto Sala N-1.", bg: "#dbeafe", border: "#3b82f6", txt: "#1e3a8a" },
                { icon: "📦", letter: "A", title: "Abstracción", text: "Solo necesitamos: sala_actual, salas_vistas, tiempo_quieto.", bg: "#fef9c3", border: "#eab308", txt: "#713f12" },
                { icon: "🗂️", letter: "Alg", title: "Algoritmo", text: "Diagrama de flujo con SI…ENTONCES que cumple las 5 reglas.", bg: "#fce7f3", border: "#ec4899", txt: "#831843" },
              ].map((c, i) => (
                <div key={i} style={{ background: c.bg, border: `2px solid ${c.border}`, borderRadius: 12, padding: "12px 10px" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
                    <span style={{ fontSize: 20 }}>{c.icon}</span>
                    <span style={{ color: c.txt, fontWeight: 900, fontSize: 12, textTransform: "uppercase", letterSpacing: 0.5 }}>{c.title}</span>
                  </div>
                  <p style={{ color: c.txt, fontSize: 11, margin: 0, lineHeight: 1.5 }}>{c.text}</p>
                </div>
              ))}
            </div>

            {/* Diagrama de flujo */}
            <div style={{ background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.15)", borderRadius: 14, padding: "14px 12px" }}>
              <div style={{ color: "#fff", fontWeight: 800, fontSize: 11, letterSpacing: 1.5, textAlign: "center", marginBottom: 14, textTransform: "uppercase" }}>
                Diagrama de Flujo — Lógica de la App AR
              </div>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, fontSize: 11 }}>
                {/* Flowchart visual */}
                <div style={{ background: "#22c55e", color: "#fff", borderRadius: "50%", padding: "6px 16px", fontWeight: 700, fontSize: 12 }}>INICIO</div>
                <div style={{ color: "#94a3b8", fontSize: 16 }}>↓</div>
                <div style={{ background: "#3b82f6", color: "#fff", borderRadius: 8, padding: "8px 14px", textAlign: "center", fontSize: 11, width: "80%" }}>1. Iniciar app y activar cámara</div>
                <div style={{ color: "#94a3b8", fontSize: 16 }}>↓</div>
                <div style={{ background: "#fde68a", color: "#1e293b", borderRadius: 8, padding: "8px 14px", textAlign: "center", fontSize: 11, width: "80%", fontStyle: "italic" }}>¿La cámara funciona?</div>
                <div style={{ display: "flex", gap: 20, alignItems: "flex-start", width: "90%" }}>
                  <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
                    <div style={{ color: "#ef4444", fontSize: 10, fontWeight: 700 }}>NO →</div>
                    <div style={{ background: "#ef4444", color: "#fff", borderRadius: 8, padding: "5px 8px", fontSize: 10, textAlign: "center" }}>Mostrar error y cerrar</div>
                    <div style={{ background: "#ef4444", color: "#fff", borderRadius: "50%", padding: "4px 10px", fontSize: 11, fontWeight: 700 }}>FIN</div>
                  </div>
                  <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
                    <div style={{ color: "#22c55e", fontSize: 10, fontWeight: 700 }}>SÍ ↓</div>
                    <div style={{ background: "#3b82f6", color: "#fff", borderRadius: 8, padding: "5px 8px", fontSize: 10, textAlign: "center" }}>2. Escanear marcadores</div>
                    <div style={{ background: "#fde68a", color: "#1e293b", borderRadius: 8, padding: "5px 8px", fontSize: 10, textAlign: "center", fontStyle: "italic" }}>¿Se detectó marcador?</div>
                    <div style={{ background: "#3b82f6", color: "#fff", borderRadius: 8, padding: "5px 8px", fontSize: 10, textAlign: "center" }}>3. Identificar sala</div>
                    <div style={{ background: "#22c55e", color: "#fff", borderRadius: 8, padding: "5px 8px", fontSize: 10, textAlign: "center" }}>4. Mostrar objeto 3D + info</div>
                    <div style={{ background: "#fde68a", color: "#1e293b", borderRadius: 8, padding: "5px 8px", fontSize: 10, textAlign: "center", fontStyle: "italic" }}>¿Usuario interactúa?</div>
                    <div style={{ background: "#a855f7", color: "#fff", borderRadius: 8, padding: "5px 8px", fontSize: 10, textAlign: "center" }}>Ejecutar acción (rotar/ampliar/audio)</div>
                  </div>
                </div>
              </div>
            </div>

            {/* Solapa interactiva */}
            <div
              onClick={() => setSolapaAbierta(!solapaAbierta)}
              style={{
                background: solapaAbierta ? "#f0fdf4" : "#1e40af",
                border: `2px dashed ${solapaAbierta ? "#22c55e" : "#93c5fd"}`,
                borderRadius: 12, padding: "14px", cursor: "pointer",
                transition: "all 0.3s ease", textAlign: "center"
              }}
            >
              {!solapaAbierta ? (
                <div>
                  <div style={{ color: "#fff", fontSize: 11, fontWeight: 700, marginBottom: 4 }}>👆 LEVANTA PARA VER EL DATO QUE SE GUARDA</div>
                  <div style={{ color: "#93c5fd", fontSize: 11 }}>(toca aquí)</div>
                </div>
              ) : (
                <div>
                  <div style={{ color: "#14532d", fontSize: 13, fontWeight: 700, marginBottom: 6 }}>Dato guardado en memoria:</div>
                  <code style={{ background: "#dcfce7", color: "#14532d", padding: "6px 14px", borderRadius: 8, fontSize: 15, fontWeight: 700, border: "1px solid #22c55e" }}>
                    salas_vistas = [1, 2]
                  </code>
                </div>
              )}
            </div>
          </div>

          {/* PANEL DERECHO */}
          <div style={{ background: "#fff", padding: "28px 22px", borderLeft: "2px solid #e2e8f0", display: "flex", flexDirection: "column", gap: 18 }}>

            {/* Funciona */}
            <div>
              <div style={{ background: "#22c55e", color: "#fff", padding: "10px 14px", borderRadius: "10px 10px 0 0", fontWeight: 800, fontSize: 14, textTransform: "uppercase", letterSpacing: 1 }}>
                ¿Funciona? Lo Probamos Así
              </div>
              <div style={{ border: "2px solid #22c55e", borderTop: "none", borderRadius: "0 0 10px 10px", padding: 16 }}>
                <div style={{ fontSize: 11, color: "#64748b", marginBottom: 10, fontWeight: 700 }}>CASO DE PRUEBA #1</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 12 }}>
                  <div style={{ background: "#f8fafc", borderRadius: 8, padding: "8px 10px" }}>
                    <div style={{ fontSize: 10, color: "#64748b", fontWeight: 700, marginBottom: 4 }}>Si el usuario hace:</div>
                    <div style={{ fontSize: 12, color: "#1e293b", fontWeight: 600, lineHeight: 1.6 }}>
                      Entrada → Sala 1<br />
                      <span style={{ color: "#ef4444" }}>→ Sala 3</span><br />
                      <span style={{ fontSize: 10, color: "#64748b" }}>(salta la Sala 2)</span>
                    </div>
                    <div style={{ marginTop: 6, fontSize: 18, textAlign: "center" }}>🚪→🏛️→⚔️</div>
                  </div>
                  <div style={{ background: "#fef2f2", border: "1px solid #fca5a5", borderRadius: 8, padding: "8px 10px" }}>
                    <div style={{ fontSize: 10, color: "#64748b", fontWeight: 700, marginBottom: 4 }}>El sistema responde:</div>
                    <div style={{ fontSize: 11, color: "#dc2626", fontWeight: 700, lineHeight: 1.5 }}>
                      "Debes visitar<br />Sala 2 primero".<br />Evita saltos.
                    </div>
                    <div style={{ textAlign: "center", fontSize: 22, marginTop: 6 }}>⚠️</div>
                  </div>
                </div>
              </div>
            </div>

            {/* Conexión vida real */}
            <div style={{ background: "#f0f9ff", border: "1px solid #7dd3fc", borderRadius: 12, padding: "14px" }}>
              <div style={{ color: "#0369a1", fontWeight: 800, fontSize: 12, textTransform: "uppercase", letterSpacing: 1, marginBottom: 8 }}>
                🌐 Conexión con la Vida Real
              </div>
              <p style={{ color: "#0c4a6e", fontSize: 12, margin: 0, lineHeight: 1.6 }}>
                Esta misma lógica la usan <strong>Spark AR</strong> y <strong>Unity</strong>. Solo cambian "marcador en el piso" por "coordenadas GPS". El <strong style={{ color: "#1a2744" }}>SI…ENTONCES</strong> es igual.
              </p>
            </div>

            {/* Conclusión */}
            <div style={{ background: "#4c1d95", borderRadius: 12, padding: "14px 16px" }}>
              <div style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
                <span style={{ fontSize: 22, flexShrink: 0 }}>✅</span>
                <div>
                  <div style={{ color: "#e9d5ff", fontWeight: 800, fontSize: 12, textTransform: "uppercase", letterSpacing: 1, marginBottom: 6 }}>Conclusión</div>
                  <p style={{ color: "#f3e8ff", fontSize: 13, margin: 0, lineHeight: 1.6 }}>
                    La lógica no necesita gafas. Con papel y lápiz diseñamos la base de cualquier app AR.
                  </p>
                </div>
              </div>
            </div>

            {/* Créditos */}
            <div style={{ background: "#f8fafc", border: "1px solid #e2e8f0", borderRadius: 12, padding: "14px" }}>
              <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                <div style={{ flex: 1 }}>
                  <div style={{ color: "#1a2744", fontWeight: 700, fontSize: 11, textTransform: "uppercase", letterSpacing: 1, marginBottom: 8 }}>👥 Créditos</div>
                  {["Julián Arenas", "Emanuel González", "Juan Balcázar", "Jhon Robledo", "Justin Altamirano", "Jimmy Galeano"].map((n, i) => (
                    <div key={i} style={{ color: "#334155", fontSize: 11, lineHeight: 1.8 }}>• {n}</div>
                  ))}
                  <div style={{ marginTop: 8, color: "#64748b", fontSize: 10, lineHeight: 1.5 }}>
                    Grado 11<br />Institución Educativa Liceo de Cali
                  </div>
                </div>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
                  <QRCode url={TRIPTICO_URL} size={90} />
                  <div style={{ color: "#64748b", fontSize: 9, textAlign: "center", lineHeight: 1.3 }}>
                    Escanea para ver el<br />pseudocódigo completo
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* QR grande para compartir el tríptico */}
        <div style={{ marginTop: 60, textAlign: "center" }}>
          <div style={{ display: "inline-block", background: "#fff", borderRadius: 24, padding: "40px 52px", boxShadow: "0 20px 60px rgba(0,0,0,0.12)", border: "1px solid #e2e8f0" }}>
            <div style={{ color: "#1a2744", fontWeight: 800, fontSize: 18, marginBottom: 6 }}>
              📱 Escanea para ver el Tríptico
            </div>
            <div style={{ color: "#64748b", fontSize: 13, marginBottom: 24 }}>
              Abre el tríptico en cualquier celular desde la cámara
            </div>
            <div style={{ display: "flex", justifyContent: "center", marginBottom: 18 }}>
              <QRCode url={TRIPTICO_URL} size={200} />
            </div>
            <div style={{ background: "#f8fafc", borderRadius: 10, padding: "10px 20px", display: "inline-block" }}>
              <code style={{ color: "#1a2744", fontSize: 13, fontWeight: 600 }}>{TRIPTICO_URL}</code>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default function App() {
  const [activeTab, setActiveTab] = useState("pautas");

  return (
    <div style={{ fontFamily: "'Georgia', serif", background: "#0f172a", minHeight: "100vh" }}>

      {/* Nav sticky */}
      <nav style={{
        position: "sticky", top: 0, zIndex: 100,
        background: "rgba(15,23,42,0.95)", backdropFilter: "blur(12px)",
        borderBottom: "1px solid rgba(255,255,255,0.08)", padding: "0 24px"
      }}>
        <div style={{ maxWidth: 1100, margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "space-between", height: 60 }}>
          <div style={{ color: "#fff", fontWeight: 800, fontSize: 16 }}>
            🥽 <span style={{ color: "#f97316" }}>RV</span> & <span style={{ color: "#a855f7" }}>RA</span>
            <span style={{ color: "#64748b", fontWeight: 400, fontSize: 13, marginLeft: 10 }}>Grado 11</span>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            {[
              { id: "pautas", label: "📋 Pautas", color: "#f97316" },
              { id: "triptico", label: "🗂️ Tríptico", color: "#22c55e" },
            ].map(tab => (
              <button
                key={tab.id}
                onClick={() => {
                  setActiveTab(tab.id);
                  document.getElementById(tab.id === "triptico" ? "triptico" : "pautas-section")?.scrollIntoView({ behavior: "smooth" });
                }}
                style={{
                  background: activeTab === tab.id ? tab.color : "transparent",
                  color: activeTab === tab.id ? "#fff" : "#94a3b8",
                  border: `1px solid ${activeTab === tab.id ? tab.color : "rgba(255,255,255,0.15)"}`,
                  borderRadius: 8, padding: "7px 18px", fontSize: 13,
                  cursor: "pointer", fontWeight: 600, transition: "all 0.2s"
                }}
              >
                {tab.label}
              </button>
            ))}
          </div>
        </div>
      </nav>

      {/* Hero */}
      <div style={{ background: "linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #0f172a 100%)", padding: "80px 24px 60px", textAlign: "center" }}>
        <div style={{ maxWidth: 700, margin: "0 auto" }}>
          <div style={{ display: "inline-block", background: "rgba(249,115,22,0.15)", border: "1px solid rgba(249,115,22,0.4)", color: "#f97316", fontSize: 12, fontWeight: 700, letterSpacing: 2, padding: "6px 18px", borderRadius: 20, marginBottom: 24 }}>
            FERIA DE CIENCIA · MUSEO DE HISTORIA DE CALI
          </div>
          <h1 style={{ color: "#fff", fontSize: "clamp(32px, 6vw, 60px)", fontWeight: 900, margin: "0 0 20px", lineHeight: 1.1 }}>
            Programa tu Experiencia<br />
            <span style={{ color: "#f97316" }}>VR sin Gafas</span>
          </h1>
          <p style={{ color: "#94a3b8", fontSize: 16, lineHeight: 1.7, maxWidth: 500, margin: "0 auto 36px" }}>
            Tríptico de 1 metro para la Feria de Ciencia: pensamiento computacional aplicado a la Realidad Aumentada.
          </p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <button
              onClick={() => document.getElementById("pautas-section")?.scrollIntoView({ behavior: "smooth" })}
              style={{ background: "rgba(255,255,255,0.08)", color: "#fff", border: "1px solid rgba(255,255,255,0.2)", borderRadius: 10, padding: "12px 26px", fontSize: 14, cursor: "pointer", fontWeight: 600 }}>
              📋 Ver Pautas
            </button>
            <button
              onClick={() => document.getElementById("triptico")?.scrollIntoView({ behavior: "smooth" })}
              style={{ background: "#f97316", color: "#fff", border: "none", borderRadius: 10, padding: "12px 26px", fontSize: 14, cursor: "pointer", fontWeight: 700, boxShadow: "0 4px 20px rgba(249,115,22,0.4)" }}>
              🗂️ Ver Tríptico ↓
            </button>
          </div>
        </div>
      </div>

      {/* Pautas */}
      <div id="pautas-section">
        <PautasSection />
      </div>

      {/* Tríptico */}
      <TripticoSection />

    </div>
  );
}