// Three mini demo previews — accurate snapshots of the real demo sites.
// Each card shows the actual hero of its demo so what you see is what you get.

const { useEffect, useState, useRef } = React;

// ============ Restaurant: "Fuego & Sal" ============
function DemoRestaurant({ active }) {
  return (
    <div style={{
      width: "100%", height: "100%",
      background: "#1a0e08",
      color: "#f8e6c8",
      fontFamily: "Inter, system-ui, sans-serif",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* ember glow */}
      <div style={{
        position: "absolute", right: -80, top: "20%",
        width: 280, height: 280,
        background: "radial-gradient(circle, rgba(232,156,74,0.35), transparent 70%)",
        filter: "blur(30px)",
        transform: active ? "scale(1.15)" : "scale(1)",
        transition: "transform 1.4s cubic-bezier(0.2,0.8,0.2,1)",
      }} />

      {/* nav */}
      <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "center", padding: "11px 18px", borderBottom: "1px solid rgba(248,230,200,0.1)" }}>
        <span style={{ fontFamily: "'Fraunces', serif", fontStyle: "italic", fontSize: 15, letterSpacing: "-0.02em" }}>
          Fuego <span style={{ color: "#e89c4a" }}>&amp;</span> Sal
        </span>
        <span style={{ display: "flex", gap: 10, fontSize: 8, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(248,230,200,0.6)" }}>
          <span>Carta</span><span>Reservas</span><span>Visítanos</span>
        </span>
        <span style={{ background: "#e89c4a", color: "#2a1410", padding: "5px 10px", borderRadius: 999, fontSize: 8, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase" }}>Reservar</span>
      </div>

      {/* hero */}
      <div style={{ position: "relative", padding: "26px 18px 0" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 8, letterSpacing: "0.25em", textTransform: "uppercase", color: "#e89c4a", marginBottom: 12 }}>
          <span style={{ width: 4, height: 4, borderRadius: "50%", background: "#e89c4a", boxShadow: "0 0 6px #e89c4a" }} />
          EST. 2019 · VALPARAÍSO, CHILE
        </div>
        <div style={{ fontFamily: "'Fraunces', serif", fontSize: 38, lineHeight: 0.88, letterSpacing: "-0.04em" }}>
          <span style={{ fontStyle: "italic" }}>Cocina</span><br/>
          al <span style={{ color: "#e89c4a", fontWeight: 500 }}>carbón</span>,<br/>
          <span style={{ fontStyle: "italic" }}>frente</span> al <span style={{ color: "#e89c4a", fontWeight: 500 }}>mar</span>.
        </div>
      </div>

      {/* CTAs at bottom */}
      <div style={{ position: "absolute", bottom: 14, left: 18, right: 18, display: "flex", gap: 8 }}>
        <span style={{ background: "#e89c4a", color: "#2a1410", padding: "8px 14px", borderRadius: 999, fontSize: 9, fontWeight: 600 }}>Reservar mesa →</span>
        <span style={{ border: "1px solid rgba(248,230,200,0.25)", padding: "8px 14px", borderRadius: 999, fontSize: 9 }}>Ver la carta</span>
      </div>
    </div>
  );
}

// ============ Mining: "Cordillera Norte" ============
function DemoMining({ active }) {
  const [val, setVal] = useState(145);
  useEffect(() => {
    if (!active) return;
    const id = setInterval(() => setVal(v => 140 + Math.round(Math.random() * 12)), 1400);
    return () => clearInterval(id);
  }, [active]);

  return (
    <div style={{
      width: "100%", height: "100%",
      background: "#f1ede4",
      color: "#1a1d1c",
      fontFamily: "Inter, system-ui, sans-serif",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* topbar */}
      <div style={{ background: "#1a1d1c", color: "rgba(255,255,255,0.7)", padding: "5px 18px", display: "flex", justifyContent: "space-between", fontSize: 8, letterSpacing: "0.15em", textTransform: "uppercase" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5, color: "#6dffae" }}>
          <span style={{ width: 4, height: 4, borderRadius: "50%", background: "#6dffae" }} /> En operación · 24/7
        </span>
        <span>Antofagasta · 1,200 m</span>
      </div>

      {/* nav */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 18px", borderBottom: "1px solid rgba(0,0,0,0.08)" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, fontWeight: 700, letterSpacing: "-0.01em" }}>
          <span style={{ width: 18, height: 18, background: "#1a1d1c", color: "#f1ede4", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 10 }}>◆</span>
          CORDILLERA NORTE
        </span>
        <span style={{ display: "flex", gap: 10, fontSize: 9, color: "rgba(26,29,28,0.6)" }}>
          <span>Operaciones</span><span>ESG</span><span>Inversores</span>
        </span>
      </div>

      {/* breadcrumb */}
      <div style={{ padding: "16px 18px 0", fontFamily: "'JetBrains Mono', monospace", fontSize: 8, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(26,29,28,0.5)" }}>
        EST. 2014 — 12 AÑOS DE OPERACIÓN
      </div>

      {/* h1 */}
      <div style={{ padding: "8px 18px 0", fontFamily: "'Newsreader', 'Times New Roman', serif", fontSize: 32, lineHeight: 0.95, letterSpacing: "-0.03em", fontWeight: 400 }}>
        Cobre extraído<br/>con <span style={{ fontStyle: "italic", color: "#b8632e" }}>responsabilidad</span>.
      </div>

      {/* data strip */}
      <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, background: "#1a1d1c", color: "white", padding: "12px 18px", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
        <div>
          <div style={{ fontSize: 7, letterSpacing: "0.15em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)", marginBottom: 4 }}>Producción 2025</div>
          <div style={{ fontFamily: "'Newsreader', serif", fontSize: 22, lineHeight: 1, letterSpacing: "-0.03em", fontVariantNumeric: "tabular-nums" }}>
            {val}<span style={{ fontSize: "0.5em", color: "rgba(255,255,255,0.6)" }}> kt</span>
          </div>
        </div>
        <div>
          <div style={{ fontSize: 7, letterSpacing: "0.15em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)", marginBottom: 4 }}>Uptime</div>
          <div style={{ fontFamily: "'Newsreader', serif", fontSize: 22, lineHeight: 1, letterSpacing: "-0.03em" }}>99.4<span style={{ fontSize: "0.5em" }}>%</span></div>
        </div>
        <div>
          <div style={{ fontSize: 7, letterSpacing: "0.15em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)", marginBottom: 4 }}>H₂O reciclada</div>
          <div style={{ fontFamily: "'Newsreader', serif", fontSize: 22, lineHeight: 1, letterSpacing: "-0.03em" }}>82<span style={{ fontSize: "0.5em" }}>%</span></div>
        </div>
      </div>
    </div>
  );
}

// ============ Supermarket: "Mercado Andes" ============
function DemoMarket({ active }) {
  const [cart, setCart] = useState(3);
  useEffect(() => {
    if (!active) return;
    const id = setInterval(() => setCart(c => (c % 9) + 1), 1800);
    return () => clearInterval(id);
  }, [active]);

  const products = [
    { n: "Palta Hass", p: "1.290", c: "#3a5a2a" },
    { n: "Pan amasado", p: "890", c: "#c89a5a" },
    { n: "Leche entera", p: "1.450", c: "#e8e4dc" },
    { n: "Tomates", p: "990", c: "#c0392b" },
  ];

  return (
    <div style={{
      width: "100%", height: "100%",
      background: "#fffdf6",
      color: "#1a1410",
      fontFamily: "Inter, system-ui, sans-serif",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* top bar */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "9px 16px", background: "#1a4d2e", color: "#fffdf6", fontSize: 11 }}>
        <span style={{ fontWeight: 700, letterSpacing: "-0.01em" }}>🌽 mercado andes</span>
        <span style={{ background: "#ffd400", color: "#1a4d2e", padding: "2px 8px", borderRadius: 999, fontSize: 9, fontWeight: 700 }}>
          🛒 {cart}
        </span>
      </div>

      {/* deal banner */}
      <div style={{ background: "#ffd400", padding: "7px 16px", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 10 }}>
        <span style={{ fontWeight: 700, letterSpacing: "-0.01em" }}>Ofertas — hasta 40% OFF</span>
        <span style={{ fontFamily: "monospace", fontSize: 9 }}>02d 14h 23m</span>
      </div>

      {/* hero copy */}
      <div style={{ padding: "16px 16px 0" }}>
        <div style={{ fontSize: 28, fontWeight: 800, lineHeight: 0.95, letterSpacing: "-0.03em", color: "#1a4d2e" }}>
          Frescos cada<br/>mañana.
        </div>
        <div style={{ fontSize: 10, color: "rgba(26,20,16,0.6)", marginTop: 6 }}>Despacho a domicilio en 2 horas.</div>
      </div>

      {/* product strip */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 6, padding: "14px 16px 0" }}>
        {products.map((p, i) => (
          <div key={p.n} style={{
            background: "white",
            border: "1px solid rgba(0,0,0,0.06)",
            borderRadius: 8,
            padding: 6,
            transform: active ? `translateY(${[0,-3,0,-3][i]}px)` : "none",
            transition: "transform 0.6s cubic-bezier(0.2,0.8,0.2,1)",
            transitionDelay: `${i*0.08}s`,
          }}>
            <div style={{
              width: "100%", aspectRatio: "1",
              borderRadius: 6,
              background: `radial-gradient(circle at 30% 30%, ${p.c}, ${p.c}aa)`,
              marginBottom: 4,
            }} />
            <div style={{ fontSize: 8, fontWeight: 600, lineHeight: 1.1 }}>{p.n}</div>
            <div style={{ fontSize: 10, fontWeight: 800, color: "#1a4d2e", marginTop: 1 }}>${p.p}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.DemoRestaurant = DemoRestaurant;
window.DemoMining = DemoMining;
window.DemoMarket = DemoMarket;
