const { useState, useEffect, useRef, useCallback } = React;

const FLOW_CIUDADANO = [
    { type: "system", text: "📡 Broadcast diario 17:00h — template €0.05" },
    { type: "in", text: "👋 Hola, soy *MadridVOZ*\n\n📍 3 propuestas nuevas en *Chamberí* hoy.\n¿Quieres votar?", btns: ["✅ Ver propuestas", "⏭️ Ahora no"], time: "17:00" },
    { type: "out", text: "✅ Ver propuestas", time: "17:01" },
    { type: "system", text: "✓ Sesión gratuita abierta — 24h sin coste €0" },
    { type: "in", text: "🗳️ *Propuesta #1*\n\nCarril bici en C/ Fuencarral\n(Bilbao → Gran Vía)\n\n👍 *1.247* a favor  👎 213 en contra", btns: ["👍 A favor", "👎 En contra", "➡️ Siguiente"], time: "17:01" },
    { type: "out", text: "👍 A favor", time: "17:01" },
    { type: "in", text: "✅ *Voto registrado*\n🔐 Anónimo y verificado\n\n¿Envías tu propia propuesta?", btns: ["📝 Proponer", "🏠 Menú"], time: "17:01" },
    { type: "out", text: "📝 Proponer", time: "17:02" },
    { type: "in", text: "Escríbeme tu propuesta ✍️\n\nLa IA la clasificará y llegará a *1.247 vecinos* esta tarde.", time: "17:02" },
    { type: "out", text: "Propongo instalar una fuente pública en la Plaza de Olavide, en verano hace mucho calor.", time: "17:03" },
    { type: "in", text: "🤖 IA clasificando…\n\n✅ Categoría: *Urbanismo*\n📍 Plaza Olavide · Chamberí\n\n*#MAD-4021* registrada\nSe envía a 1.247 vecinos a las 19:00h 🚀", time: "17:03" },
];

const FLOW_EMPRESA = [
    { type: "system", text: "🏢 Estudio de mercado — IKEA España · Panel Vallecas" },
    { type: "in", text: "📊 *Consulta de IKEA España*\n\nPensamos abrir una sección de productos sostenibles en Vallecas.\n\n¿Te interesaría?", btns: ["💚 Sí, mucho", "😐 Indiferente", "❌ No"], time: "10:30" },
    { type: "out", text: "💚 Sí, mucho", time: "10:30" },
    { type: "in", text: "¿Cuánto más pagarías por productos sostenibles?", btns: ["+5%", "+10%", "+20%", "Nada más"], time: "10:31" },
    { type: "out", text: "+10%", time: "10:31" },
    { type: "in", text: "¿Qué categoría te interesa más?", btns: ["🛋️ Muebles", "🍽️ Cocina", "💡 Iluminación", "🌿 Plantas"], time: "10:31" },
    { type: "out", text: "🌿 Plantas", time: "10:31" },
    { type: "in", text: "✅ *Respuesta registrada*\n\nResultados el *15 de marzo*.\n\n_Estudio encargado por IKEA España_", time: "10:32" },
    { type: "system", text: "📈 847 respuestas · 48h · Coste total: €180 · Informe IA generado" },
];

const SCENES = [
    { id: "intro", duration: 3500 },
    { id: "problem", duration: 4000 },
    { id: "chat1", duration: 0 },
    { id: "callout", duration: 3500 },
    { id: "chat2", duration: 0 },
    { id: "metrics", duration: 5000 },
    { id: "outro", duration: 0 },
];

function TypingBubble() {
    return (
        <div style={{ alignSelf: "flex-start", marginBottom: 2 }}>
            <div style={{
                background: "#202C33", borderRadius: "8px 8px 8px 2px",
                padding: "12px 14px", display: "flex", gap: 5, alignItems: "center"
            }}>
                {[0, 1, 2].map(i => (
                    <div key={i} style={{
                        width: 7, height: 7, borderRadius: "50%", background: "#8696A0",
                        animation: `tdot 1.2s ${i * 0.2}s ease infinite`
                    }} />
                ))}
            </div>
        </div>
    );
}

function ChatBubble({ msg, visible }) {
    const isIn = msg.type === "in";
    const isSystem = msg.type === "system";

    if (isSystem) {
        return (
            <div style={{
                alignSelf: "center", background: "#182229",
                padding: "5px 12px", borderRadius: 8,
                fontSize: 11, color: "#8696A0", textAlign: "center",
                maxWidth: "85%", margin: "4px 0",
                opacity: visible ? 1 : 0, transition: "opacity 0.4s ease",
                transform: visible ? "translateY(0)" : "translateY(6px)",
            }}>
                {msg.text}
            </div>
        );
    }

    const parseText = (t) => t.replace(/\*(.*?)\*/g, '<strong>$1</strong>').replace(/_(.*?)_/g, '<em style="color:#8696A0">$1</em>').replace(/\n/g, '<br>');

    return (
        <div style={{
            alignSelf: isIn ? "flex-start" : "flex-end",
            maxWidth: "82%",
            opacity: visible ? 1 : 0,
            transform: visible ? "translateY(0)" : "translateY(8px)",
            transition: "opacity 0.35s ease, transform 0.35s ease",
        }}>
            <div style={{
                background: isIn ? "#202C33" : "#005C4B",
                borderRadius: isIn ? "8px 8px 8px 2px" : "8px 8px 2px 8px",
                padding: msg.btns ? "8px 12px 0" : "8px 12px 6px",
                color: "#E9EDEF", fontSize: 13.5, lineHeight: 1.5,
                position: "relative",
            }}>
                <span dangerouslySetInnerHTML={{ __html: parseText(msg.text) }} />
                {msg.time && (
                    <span style={{ fontSize: 10, color: "#8696A0", float: "right", marginLeft: 8, marginTop: 3 }}>
                        {msg.time}{!isIn && <span style={{ color: "#53BDEB" }}> ✓✓</span>}
                    </span>
                )}
                {msg.btns && (
                    <div style={{ borderTop: "1px solid #2A3942", margin: "8px -12px 0", overflow: "hidden", borderRadius: "0 0 8px 8px" }}>
                        {msg.btns.map((b, i) => (
                            <div key={i} style={{
                                padding: "9px 12px", background: i % 2 === 0 ? "#2A3942" : "#263239",
                                fontSize: 13, fontWeight: 600, color: "#53BDEB",
                                textAlign: "center", borderTop: i > 0 ? "1px solid #1a2228" : "none"
                            }}>{b}</div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
}

function WAChat({ flow, accentColor, headerName, headerSub, headerEmoji }) {
    const [visibleMsgs, setVisibleMsgs] = useState([]);
    const [showTyping, setShowTyping] = useState(false);
    const [msgItems, setMsgItems] = useState([]);
    const chatRef = useRef(null);
    const stepRef = useRef(0);

    const scrollBottom = () => {
        setTimeout(() => {
            if (chatRef.current) chatRef.current.scrollTop = chatRef.current.scrollHeight;
        }, 50);
    };

    useEffect(() => {
        const items = flow.map((m, i) => ({ ...m, id: i }));
        setMsgItems(items);
        stepRef.current = 0;

        const delays = [800, 1200, 600, 700, 1300, 600, 1100, 600, 1300, 900, 1200, 800, 1000, 600, 900, 600, 1000];

        function processNext() {
            const idx = stepRef.current;
            if (idx >= items.length) return;
            const msg = items[idx];
            const gap = delays[idx] || 900;

            if (msg.type === "in") {
                setShowTyping(true);
                scrollBottom();
                setTimeout(() => {
                    setShowTyping(false);
                    setVisibleMsgs(v => [...v, { ...msg, show: false }]);
                    setTimeout(() => {
                        setVisibleMsgs(v => v.map((m2, i2) => i2 === v.length - 1 ? { ...m2, show: true } : m2));
                        scrollBottom();
                        stepRef.current++;
                        setTimeout(processNext, gap);
                    }, 100);
                }, 900);
            } else {
                setTimeout(() => {
                    setVisibleMsgs(v => [...v, { ...msg, show: false }]);
                    setTimeout(() => {
                        setVisibleMsgs(v => v.map((m2, i2) => i2 === v.length - 1 ? { ...m2, show: true } : m2));
                        scrollBottom();
                    }, 80);
                    stepRef.current++;
                    setTimeout(processNext, gap);
                }, 200);
            }
        }

        const t = setTimeout(processNext, 300);
        return () => clearTimeout(t);
    }, [flow]);

    return (
        <div style={{ display: "flex", flexDirection: "column", height: "100%", background: "#0B141A" }}>
            {/* Header */}
            <div style={{ background: "#1F2C34", padding: "10px 16px 12px", display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
                <div style={{ width: 40, height: 40, borderRadius: "50%", background: accentColor, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18, flexShrink: 0 }}>{headerEmoji}</div>
                <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 15, fontWeight: 700, color: "#E9EDEF" }}>{headerName} <span style={{ fontSize: 11, color: "#53BDEB" }}>✓</span></div>
                    <div style={{ fontSize: 11, color: "#8696A0", marginTop: 1 }}>{headerSub}</div>
                </div>
                <div style={{ color: "#8696A0", fontSize: 18, letterSpacing: 2 }}>⋮</div>
            </div>

            {/* Chat */}
            <div ref={chatRef} style={{
                flex: 1, overflowY: "auto", padding: "10px 12px 8px",
                display: "flex", flexDirection: "column", gap: 5,
                scrollbarWidth: "thin", scrollbarColor: "#2A3942 transparent"
            }}>
                <div style={{ alignSelf: "center", background: "#182229", padding: "4px 12px", borderRadius: 8, fontSize: 11, color: "#8696A0", marginBottom: 6 }}>
                    Hoy
                </div>
                {visibleMsgs.map((m, i) => (
                    <ChatBubble key={m.id} msg={m} visible={m.show} />
                ))}
                {showTyping && <TypingBubble />}
            </div>

            {/* Input bar */}
            <div style={{ background: "#1F2C34", padding: "8px 12px", display: "flex", gap: 10, alignItems: "center", flexShrink: 0 }}>
                <div style={{ flex: 1, background: "#2A3942", borderRadius: 24, padding: "9px 16px", fontSize: 13, color: "#8696A0", fontFamily: "inherit" }}>Escribe un mensaje</div>
                <div style={{ width: 40, height: 40, borderRadius: "50%", background: accentColor, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 17, flexShrink: 0 }}>🎤</div>
            </div>
        </div>
    );
}

function App() {
    const [scene, setScene] = useState(-1);
    const [playing, setPlaying] = useState(false);
    const [progress, setProgress] = useState(0);
    const [chatKey1, setChatKey1] = useState(0);
    const [chatKey2, setChatKey2] = useState(0);
    const timerRef = useRef(null);

    const totalScenes = SCENES.length;

    const advanceTo = useCallback((idx) => {
        if (idx >= totalScenes) return;
        setScene(idx);
        setProgress(((idx + 1) / totalScenes) * 100);

        const dur = SCENES[idx].duration;
        if (dur > 0) {
            clearTimeout(timerRef.current);
            timerRef.current = setTimeout(() => advanceTo(idx + 1), dur);
        }
        // chat scenes advance automatically via onDone
    }, [totalScenes]);

    useEffect(() => {
        if (playing && scene === -1) advanceTo(0);
    }, [playing]);

    const handlePlay = () => {
        if (!playing) { setPlaying(true); if (scene === -1) advanceTo(0); }
    };

    const handleRestart = () => {
        clearTimeout(timerRef.current);
        setScene(-1); setProgress(0); setPlaying(false);
        setChatKey1(k => k + 1); setChatKey2(k => k + 1);
    };

    const sceneId = scene >= 0 ? SCENES[scene].id : null;

    return (
        <>
            <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500;700&family=DM+Mono:wght@400;500&display=swap');
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background: #000; font-family: 'DM Sans', sans-serif; }
        @keyframes tdot {
          0%,60%,100% { transform: translateY(0); opacity: .6; }
          30% { transform: translateY(-4px); opacity: 1; }
        }
        @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes popIn { 0% { opacity: 0; transform: scale(0.75); } 75% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
        @keyframes ring { 0% { transform: scale(0.5); opacity: 0.7; } 100% { transform: scale(3); opacity: 0; } }
        @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
        .au0 { animation: fadeUp .5s .1s ease both; }
        .au1 { animation: fadeUp .5s .3s ease both; }
        .au2 { animation: fadeUp .5s .5s ease both; }
        .au3 { animation: fadeUp .5s .7s ease both; }
        .au4 { animation: fadeUp .5s .9s ease both; }
        .pop0 { animation: popIn .5s .2s ease both; }
        .pop1 { animation: popIn .5s .5s ease both; }
        .pop2 { animation: popIn .5s .8s ease both; }
        .pop3 { animation: popIn .5s 1.1s ease both; }
        .fi { animation: fadeIn .6s ease both; }
      `}</style>

            <div style={{
                width: "100%", minHeight: "100vh",
                background: "#000",
                display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
                padding: "20px 0 10px",
                gap: 16,
            }}>
                {/* Phone */}
                <div style={{
                    width: 375, height: 720,
                    background: "#0B141A",
                    borderRadius: 36,
                    overflow: "hidden",
                    position: "relative",
                    boxShadow: "0 0 0 10px #111, 0 0 0 11px #222, 0 40px 120px #00000080",
                    flexShrink: 0,
                }}>
                    {/* Notch */}
                    <div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: 120, height: 28, background: "#111", borderRadius: "0 0 18px 18px", zIndex: 100 }} />

                    {/* Status bar */}
                    <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 40, display: "flex", alignItems: "flex-start", justifyContent: "space-between", padding: "6px 20px 0", zIndex: 99 }}>
                        <span style={{ fontSize: 11, color: "#E9EDEF", fontFamily: "'DM Mono'" }}>9:41</span>
                        <span style={{ fontSize: 11, color: "#E9EDEF" }}>▲ 5G 🔋</span>
                    </div>

                    {/* Scenes */}
                    <div style={{ position: "absolute", inset: 0, paddingTop: 40 }}>

                        {/* IDLE / not started */}
                        {scene === -1 && (
                            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", background: "#000", gap: 8 }}>
                                <div style={{ fontSize: 42, fontFamily: "'Syne'", fontWeight: 800, color: "#fff" }}>
                                    Madrid<span style={{ color: "#FFD100" }}>VOZ</span>
                                </div>
                                <div style={{ fontSize: 13, color: "#444", textAlign: "center", lineHeight: 1.5 }}>
                                    Demo interactivo<br />Hackathon INCIBE 2026
                                </div>
                            </div>
                        )}

                        {/* INTRO */}
                        {sceneId === "intro" && (
                            <div key="intro" style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", background: "radial-gradient(ellipse at 50% 40%, #FFD10012 0%, #000 65%)", gap: 0, position: "relative" }}>
                                {[1, 2].map(i => (
                                    <div key={i} style={{ position: "absolute", width: 200, height: 200, borderRadius: "50%", border: `1px solid ${i === 1 ? "#FFD10040" : "#25D36620"}`, animation: `ring 3s ${i === 2 ? "1s" : "0s"} ease-out infinite`, pointerEvents: "none" }} />
                                ))}
                                <div className="au0" style={{ fontFamily: "'Syne'", fontWeight: 800, fontSize: 52, color: "#fff", lineHeight: 1, textAlign: "center", zIndex: 1 }}>
                                    Madrid<span style={{ color: "#FFD100" }}>VOZ</span>
                                </div>
                                <div className="au1" style={{ fontSize: 14, color: "#666", textAlign: "center", lineHeight: 1.6, maxWidth: 260, marginTop: 14, zIndex: 1 }}>
                                    Democracia participativa<br />en el bolsillo de cada ciudadano
                                </div>
                                <div className="au2" style={{ display: "flex", gap: 8, marginTop: 24, zIndex: 1 }}>
                                    {["WhatsApp API", "IA Municipal", "B2G + B2B"].map(t => (
                                        <span key={t} style={{ padding: "4px 10px", borderRadius: 20, fontSize: 10, fontWeight: 700, background: "#25D36620", color: "#25D366", border: "1px solid #25D36640", fontFamily: "'DM Mono'" }}>{t}</span>
                                    ))}
                                </div>
                            </div>
                        )}

                        {/* PROBLEM */}
                        {sceneId === "problem" && (
                            <div key="problem" style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", background: "#050505", gap: 0, padding: "0 28px" }}>
                                <div className="au0" style={{ fontSize: 10, color: "#CC0033", fontFamily: "'DM Mono'", letterSpacing: ".15em", textTransform: "uppercase", marginBottom: 12 }}>EL PROBLEMA</div>
                                <div className="pop0" style={{ fontFamily: "'Syne'", fontWeight: 800, fontSize: 90, color: "#CC0033", lineHeight: 1 }}>1.6%</div>
                                <div className="au1" style={{ fontSize: 14, color: "#8696A0", textAlign: "center", maxWidth: 240, marginTop: 10, lineHeight: 1.5 }}>participan en democracia local<br />en Madrid</div>
                                <div className="au2" style={{ width: "100%", display: "flex", flexDirection: "column", gap: 7, marginTop: 28 }}>
                                    {[
                                        ["Apps con registro", "2–5% uso real", "#444"],
                                        ["Email municipal", "5% apertura", "#555"],
                                        ["Evento presencial", "€42.000 / vez", "#555"],
                                        ["WhatsApp", "98% apertura →", "#25D366"],
                                    ].map(([k, v, c]) => (
                                        <div key={k} style={{ display: "flex", justifyContent: "space-between", background: c === "#25D366" ? "#0d1f13" : "#0f0f0f", border: `1px solid ${c === "#25D366" ? "#25D36630" : "#1a1a1a"}`, borderRadius: 10, padding: "10px 14px", fontSize: 13 }}>
                                            <span style={{ color: "#8696A0" }}>{k}</span>
                                            <strong style={{ color: c, fontFamily: "'DM Mono'", fontSize: 12 }}>{v}</strong>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}

                        {/* CHAT 1 - Ciudadano */}
                        {sceneId === "chat1" && (
                            <div key={`chat1-${chatKey1}`} style={{ height: "100%", display: "flex", flexDirection: "column" }}>
                                <div style={{ padding: "10px 14px 6px", background: "#0B141A", flexShrink: 0 }}>
                                    <span style={{ fontSize: 10, color: "#25D366", fontFamily: "'DM Mono'", letterSpacing: ".12em" }}>DEMO — CIUDADANO PROPONE Y VOTA</span>
                                </div>
                                <WAChat
                                    key={chatKey1}
                                    flow={FLOW_CIUDADANO}
                                    accentColor="#1A5C45"
                                    headerName="MadridVOZ"
                                    headerSub="Cuenta oficial · Chamberí"
                                    headerEmoji="🏛️"
                                />
                            </div>
                        )}

                        {/* CALLOUT */}
                        {sceneId === "callout" && (
                            <div key="callout" style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", background: "#000", position: "relative" }}>
                                <div style={{ position: "absolute", width: 160, height: 160, borderRadius: "50%", border: "1.5px solid #FFD100", animation: "ring 2s ease-out infinite", pointerEvents: "none" }} />
                                <div style={{ position: "absolute", width: 160, height: 160, borderRadius: "50%", border: "1.5px solid #FFD100", animation: "ring 2s .8s ease-out infinite", pointerEvents: "none" }} />
                                <div className="pop0" style={{ fontFamily: "'Syne'", fontWeight: 800, fontSize: 84, color: "#FFD100", lineHeight: 1 }}>€0.003</div>
                                <div className="au1" style={{ fontSize: 13, color: "#666", textAlign: "center", maxWidth: 220, marginTop: 8, lineHeight: 1.6 }}>Coste por ciudadano alcanzado con MadridVOZ</div>
                                <div className="au2" style={{ width: 3, height: 32, background: "#FFD100", margin: "18px auto" }} />
                                <div className="au3" style={{ textAlign: "center", lineHeight: 2, fontSize: 13, color: "#444" }}>
                                    Evento presencial <strong style={{ color: "#CC0033" }}>€85</strong><br />
                                    App móvil <strong style={{ color: "#F97316" }}>€12</strong><br />
                                    Email / SMS <strong style={{ color: "#EAB308" }}>€0.08</strong><br />
                                    <span style={{ color: "#25D366", fontWeight: 800, fontSize: 16 }}>MadridVOZ €0.003 ←</span>
                                </div>
                            </div>
                        )}

                        {/* CHAT 2 - Empresa */}
                        {sceneId === "chat2" && (
                            <div key={`chat2-${chatKey2}`} style={{ height: "100%", display: "flex", flexDirection: "column" }}>
                                <div style={{ padding: "10px 14px 6px", background: "#0B141A", flexShrink: 0 }}>
                                    <span style={{ fontSize: 10, color: "#F59E0B", fontFamily: "'DM Mono'", letterSpacing: ".12em" }}>DEMO — EMPRESA HACE ESTUDIO DE MERCADO</span>
                                </div>
                                <WAChat
                                    key={chatKey2}
                                    flow={FLOW_EMPRESA}
                                    accentColor="#7A5200"
                                    headerName="MadridVOZ Business"
                                    headerSub="Panel B2B · Vallecas"
                                    headerEmoji="🏢"
                                />
                            </div>
                        )}

                        {/* METRICS */}
                        {sceneId === "metrics" && (
                            <div key="metrics" style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", background: "#050505", padding: "0 24px", gap: 0 }}>
                                <div className="au0" style={{ fontFamily: "'Syne'", fontWeight: 800, fontSize: 26, color: "#fff", textAlign: "center", lineHeight: 1.2, marginBottom: 28 }}>
                                    El negocio<br /><span style={{ color: "#FFD100" }}>en números</span>
                                </div>
                                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, width: "100%" }}>
                                    {[
                                        { n: "€2.4M", l: "ARR Año 3 · 40 municipios", c: "#25D366", cls: "pop0", bg: "#0a1f12" },
                                        { n: "90%", l: "Margen estudios B2B", c: "#F59E0B", cls: "pop1", bg: "#1a1200" },
                                        { n: "150×", l: "Más barato que evento presencial", c: "#CC0033", cls: "pop2", bg: "#1a0508" },
                                        { n: "116:1", l: "ROI sobre presupuestos municipales", c: "#FFD100", cls: "pop3", bg: "#14110a" },
                                    ].map(s => (
                                        <div key={s.n} className={s.cls} style={{ background: s.bg, border: `1px solid ${s.c}25`, borderRadius: 16, padding: "18px 14px", textAlign: "center" }}>
                                            <div style={{ fontFamily: "'Syne'", fontWeight: 800, fontSize: 34, color: s.c, lineHeight: 1 }}>{s.n}</div>
                                            <div style={{ fontSize: 11, color: "#8696A0", marginTop: 6, lineHeight: 1.4 }}>{s.l}</div>
                                        </div>
                                    ))}
                                </div>
                                <div className="au4" style={{ marginTop: 24, textAlign: "center" }}>
                                    <div style={{ fontSize: 10, color: "#444", fontFamily: "'DM Mono'", letterSpacing: ".1em" }}>INVERSIÓN SOLICITADA</div>
                                    <div style={{ fontFamily: "'Syne'", fontWeight: 800, fontSize: 44, color: "#fff", lineHeight: 1, marginTop: 4 }}>€430K</div>
                                    <div style={{ fontSize: 11, color: "#555", marginTop: 4 }}>24 meses · Break-even M14</div>
                                </div>
                            </div>
                        )}

                        {/* OUTRO */}
                        {sceneId === "outro" && (
                            <div key="outro" style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", background: "radial-gradient(ellipse at 50% 45%, #FFD10010 0%, #000 60%)", position: "relative" }}>
                                <div style={{ position: "absolute", width: 180, height: 180, borderRadius: "50%", border: "1.5px solid #FFD100", animation: "ring 2.5s ease-out infinite", pointerEvents: "none" }} />
                                <div style={{ position: "absolute", width: 180, height: 180, borderRadius: "50%", border: "1.5px solid #FFD100", animation: "ring 2.5s 1.2s ease-out infinite", pointerEvents: "none" }} />
                                <div className="au0" style={{ fontFamily: "'Syne'", fontWeight: 800, fontSize: 50, color: "#fff", zIndex: 1, lineHeight: 1 }}>
                                    Madrid<span style={{ color: "#FFD100" }}>VOZ</span>
                                </div>
                                <div className="au1" style={{ fontSize: 13, color: "#555", textAlign: "center", maxWidth: 220, marginTop: 12, lineHeight: 1.6, zIndex: 1 }}>
                                    La primera infraestructura de opinión ciudadana sobre WhatsApp
                                </div>
                                <div className="au2" style={{ display: "flex", gap: 8, marginTop: 24, flexWrap: "wrap", justifyContent: "center", zIndex: 1 }}>
                                    {["WhatsApp API ✓", "INCIBE Emprende", "Equipo Amarillo"].map(t => (
                                        <span key={t} style={{ padding: "4px 10px", borderRadius: 20, fontSize: 10, fontWeight: 700, background: "#1a1a1a", color: "#666", border: "1px solid #222", fontFamily: "'DM Mono'" }}>{t}</span>
                                    ))}
                                </div>
                                <div className="au3" style={{ fontSize: 14, color: "#25D366", fontFamily: "'DM Mono'", marginTop: 32, zIndex: 1 }}>madridvoz.es</div>
                            </div>
                        )}
                    </div>

                    {/* Progress bar */}
                    <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 3, background: "#111", zIndex: 200 }}>
                        <div style={{ height: "100%", background: "#FFD100", width: `${progress}%`, transition: "width 0.4s ease" }} />
                    </div>
                </div>

                {/* Controls */}
                <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap", justifyContent: "center" }}>
                    <button onClick={handleRestart} style={{ background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: 24, padding: "8px 20px", color: "#aaa", fontSize: 13, fontWeight: 700, cursor: "pointer", fontFamily: "inherit" }}>
                        ↺ Reiniciar
                    </button>
                    <button onClick={handlePlay} disabled={playing} style={{
                        background: playing ? "#444" : "#FFD100", border: "none",
                        borderRadius: 24, padding: "10px 28px",
                        color: playing ? "#888" : "#000", fontSize: 14, fontWeight: 800,
                        cursor: playing ? "default" : "pointer", fontFamily: "inherit",
                        boxShadow: playing ? "none" : "0 0 24px #FFD10060"
                    }}>
                        {playing ? "▶ Reproduciendo…" : "▶ Play Demo"}
                    </button>
                    {/* Scene nav dots */}
                    <div style={{ display: "flex", gap: 5 }}>
                        {SCENES.map((s, i) => (
                            <div key={i} onClick={() => { clearTimeout(timerRef.current); setScene(i); setProgress(((i + 1) / totalScenes) * 100); }} style={{
                                width: 7, height: 7, borderRadius: "50%",
                                background: scene === i ? "#FFD100" : "#333",
                                cursor: "pointer", transition: ".2s",
                                transform: scene === i ? "scale(1.4)" : "scale(1)"
                            }} />
                        ))}
                    </div>
                </div>

                <div style={{ fontSize: 10, color: "#666", fontFamily: "'DM Mono', monospace", textAlign: "center", marginTop: 10 }}>
                    Para grabar: usa OBS · Loom · Grabación de pantalla iOS/Android
                </div>
            </div>
        </>
    );
}

const rootElement = document.getElementById("root");
if (rootElement) {
    const root = ReactDOM.createRoot(rootElement);
    root.render(<App />);
}