const { useState, useEffect, useRef } = React;

// =========================================================
// DATA
// =========================================================
const SERVICIOS = [
  { num: "01", name: "Diseño web", desc: "Webs corporativas, landings y portfolios diseñados a medida. Cada pixel cuenta una parte de tu historia.", href: "#contacto" },
  { num: "02", name: "Tiendas online", desc: "E-commerce listos para vender desde el día uno. Shopify, WooCommerce o lo que mejor encaje contigo.", href: "#contacto" },
  { num: "03", name: "Mantenimiento", desc: "Actualizaciones, copias de seguridad, mejoras de velocidad y soporte continuo. Desde 29 €/mes — ver packs completos.", href: "Mantenimiento.html" },
  { num: "04", name: "Marca personal", desc: "Web + identidad para autónomos y profesionales que quieren destacar y convertir visitas en clientes.", href: "#contacto" },
  { num: "05", name: "SEO & contenido", desc: "Posicionamiento orgánico, redacción con IA y estrategia de contenidos para crecer mes a mes.", href: "#contacto" },
  { num: "06", name: "Automatizaciones", desc: "Formularios, CRMs, chatbots y flujos que ahorran horas a tu equipo cada semana.", href: "#contacto" },
];

const PROCESO = [
  { step: "01", title: "Briefing", desc: "30 minutos para entender tu negocio, tu cliente y dónde quieres estar en 12 meses.", time: "Día 1" },
  { step: "02", title: "Estrategia + diseño", desc: "Arquitectura, copys con IA y maqueta visual. Validamos antes de tocar código.", time: "Días 2 – 5" },
  { step: "03", title: "Construcción", desc: "Desarrollamos la web con herramientas asistidas por IA. Rápido, sin perder el detalle.", time: "Días 6 – 12" },
  { step: "04", title: "Lanzamiento", desc: "Test en dispositivos reales, SEO técnico, analítica, formación y al aire.", time: "Día 14" },
];

const PRECIOS = [
  {
    name: "Esencial",
    desc: "Para empezar con una presencia profesional sin complicarte.",
    price: "490",
    period: "pago único",
    features: [
      "Web de 1 página (landing)",
      "Diseño 100 % a medida",
      "Optimizada para móvil",
      "Formulario de contacto",
      "Entrega en 7 días",
    ],
    cta: "Empezar",
    featured: false,
  },
  {
    name: "Negocio",
    desc: "El paquete favorito de autónomos y pequeños negocios.",
    price: "990",
    period: "pago único",
    features: [
      "Hasta 5 páginas",
      "Diseño + copy con IA",
      "SEO técnico básico",
      "Integración WhatsApp y email",
      "Panel para editar tu mismo",
      "Entrega en 14 días",
    ],
    cta: "Quiero esta",
    featured: true,
    tag: "Más elegida",
  },
  {
    name: "Tienda",
    desc: "E-commerce listo para vender, con todo conectado.",
    price: "1.490",
    period: "pago único",
    features: [
      "Tienda online completa",
      "Pasarela de pago y envíos",
      "Hasta 50 productos cargados",
      "Email marketing conectado",
      "Formación 1:1 incluida",
      "Entrega en 21 días",
    ],
    cta: "Vender online",
    featured: false,
  },
];

const TESTIMONIOS = [
  {
    quote: "Tenía la idea desde hacía un año y en menos de dos semanas estaba lanzando mi web. Oumaima entendió el tono que buscaba a la primera.",
    name: "Laura Méndez",
    role: "Fundadora · Casa Aurora",
    initials: "LM",
  },
  {
    quote: "Pasamos de una web hecha en una plantilla a algo que de verdad parece nuestro. Y lo notamos en las reservas del primer mes.",
    name: "Daniel Roca",
    role: "Co-fundador · Cabaña Norte",
    initials: "DR",
  },
  {
    quote: "Lo mejor no es solo cómo quedó, sino lo rápido y claro que fue todo el proceso. Nada de meses esperando revisiones.",
    name: "Mireia Solé",
    role: "Coach · Mireia Solé Studio",
    initials: "MS",
  },
  {
    quote: "Cada mes me manda un pequeño informe de la web y mejoras. Es como tener un equipo técnico pero sin la factura de un equipo técnico.",
    name: "Carlos Iniesta",
    role: "Asesor fiscal · Iniesta & Co.",
    initials: "CI",
  },
];

const CLIENTES = [
  { name: "Casa Aurora", mark: true },
  { name: "Cabaña Norte", mark: false },
  { name: "Iniesta&Co", mark: true },
  { name: "Mireia Studio", mark: false },
  { name: "Bona Fruita", mark: true },
];

const FAQS = [
  { q: "¿En cuánto tiempo entregáis una web?", a: "Una landing sencilla en 7 días, una web de negocio en 14 y una tienda online en 21. Trabajamos con sprints semanales para que siempre sepas qué se está haciendo y cuándo lo verás." },
  { q: "¿Para qué usáis la inteligencia artificial?", a: "Para acelerar lo aburrido: primeras versiones de copy, organización de contenido, generación de imágenes de apoyo y QA. El diseño, la estrategia y la conversación contigo siempre las hago yo." },
  { q: "¿Puedo editar la web yo después?", a: "Sí. Te dejo un panel sencillo (sin código) donde puedes cambiar textos, imágenes, precios o añadir entradas al blog. Si lo prefieres, lo hago yo dentro del plan de mantenimiento." },
  { q: "¿Qué incluye el mantenimiento?", a: "Actualizaciones, copias de seguridad, monitoreo de seguridad, mejoras de velocidad y hasta 2 horas mensuales de cambios pequeños. Plan desde 49 €/mes." },
  { q: "¿Trabajáis con dominios y hosting?", a: "Sí, lo gestiono todo. Si ya tienes dominio lo migramos sin que pierdas visitas ni emails. Si no lo tienes, te recomiendo opciones y lo configuramos juntos." },
  { q: "¿Y si no me gusta el diseño?", a: "Antes de tocar código validamos una maqueta visual. Si algo no encaja lo ajustamos sin coste hasta que sea exactamente lo que querías." },
];

const POSTS = [
  { tag: "Guía", read: "6 min", title: "Cómo escribir el copy de tu home sin morir en el intento", excerpt: "La fórmula que uso con todos mis clientes para que su web hable claro desde el primer scroll." },
  { tag: "IA", read: "4 min", title: "5 prompts para sacar partido a la IA en tu negocio local", excerpt: "Sin promesas mágicas. Tareas concretas que puedes automatizar esta misma semana." },
  { tag: "Caso", read: "8 min", title: "Caso Casa Aurora: de 0 reservas a llenar todos los fines de semana", excerpt: "Qué cambiamos en su web y por qué los resultados se vieron en menos de 30 días." },
];

// =========================================================
// CURSOR
// =========================================================
function useCursor(enabled) {
  useEffect(() => {
    const cursor = document.getElementById("weblume-cursor");
    const dot = document.getElementById("weblume-cursor-dot");
    if (!cursor || !dot) return;

    let mx = window.innerWidth / 2, my = window.innerHeight / 2;
    let cx = mx, cy = my;
    let raf;

    const onMove = (e) => { mx = e.clientX; my = e.clientY; dot.style.transform = `translate(${mx}px, ${my}px) translate(-50%, -50%)`; };
    const tick = () => {
      cx += (mx - cx) * 0.18;
      cy += (my - cy) * 0.18;
      cursor.style.transform = `translate(${cx}px, ${cy}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };

    const onOver = (e) => {
      const t = e.target.closest("a, button, .servicio, .testi, .post, .plan, .faq-item, input, textarea, label, .chip");
      if (t) cursor.classList.add("hover"); else cursor.classList.remove("hover");
    };

    document.addEventListener("mousemove", onMove);
    document.addEventListener("mouseover", onOver);
    raf = requestAnimationFrame(tick);
    return () => {
      document.removeEventListener("mousemove", onMove);
      document.removeEventListener("mouseover", onOver);
      cancelAnimationFrame(raf);
    };
  }, []);

  useEffect(() => {
    document.body.classList.toggle("no-custom-cursor", !enabled);
  }, [enabled]);
}

// =========================================================
// SCROLL REVEAL
// =========================================================
function useReveal() {
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// =========================================================
// NAV
// =========================================================
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"top " + (scrolled ? "scrolled" : "")}>
      <a href="#top" className="logo"><span>Weblume</span><span className="dot"></span></a>
      <ul>
        <li><a href="#servicios">Servicios</a></li>
        <li><a href="#proceso">Proceso</a></li>
        <li><a href="#precios">Precios</a></li>
        <li><a href="Mantenimiento.html">Mantenimiento</a></li>
        <li><a href="#testimonios">Clientes</a></li>
        <li><a href="#quienes">Quiénes somos</a></li>
        <li><a href="#blog">Blog</a></li>
      </ul>
      <a href="#contacto" className="cta">Hablemos →</a>
    </nav>
  );
}

// =========================================================
// HERO
// =========================================================
function Hero() {
  const today = new Date();
  const fecha = today.toLocaleDateString("es-ES", { year: "numeric", month: "long", day: "2-digit" });
  return (
    <header className="hero" id="top">
      <div className="wrap">
        <div className="meta-row mono">
          <span>EST. 2024 — ESPAÑA / REMOTO</span>
          <span>ÍNDICE — 01 / 06</span>
          <span>{fecha.toUpperCase()}</span>
        </div>
        <h1 className="reveal">
          Webs con <span className="em">luz</span>,<br />
          construidas con <span className="em">IA</span>,<br />
          listas en <span className="strike">meses</span> días.
        </h1>
        <div className="sub">
          <p className="reveal">
            Ayudamos a autónomos, pequeños negocios y marcas personales a tener una web profesional y lista para captar clientes en cuestión de días, no meses.
          </p>
          <div className="ctas reveal">
            <a href="#contacto" className="btn-primary">Quiero mi web <Arrow /></a>
            <a href="#precios" className="btn-secondary">Ver precios</a>
          </div>
        </div>
      </div>
    </header>
  );
}

function Arrow() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M1 13L13 1M13 1H4M13 1V10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}

// =========================================================
// MARQUEE
// =========================================================
function Marquee() {
  const items = ["Diseño web", "Tiendas online", "Mantenimiento", "Marca personal", "SEO con IA", "Automatizaciones"];
  const row = items.concat(items);
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row.map((it, i) => <span key={i}>{it}</span>)}
      </div>
      <div className="marquee-track" aria-hidden="true">
        {row.map((it, i) => <span key={"b"+i}>{it}</span>)}
      </div>
    </div>
  );
}

// =========================================================
// SECTION HEAD
// =========================================================
function SectionHead({ num, eyebrow, children }) {
  return (
    <div className="section-head">
      <div className="num mono">
        <div>{num}</div>
        <div style={{ marginTop: 8 }}>{eyebrow}</div>
      </div>
      <h2 className="reveal">{children}</h2>
    </div>
  );
}

// =========================================================
// SERVICIOS
// =========================================================
function Servicios() {
  return (
    <section className="block" id="servicios">
      <div className="wrap">
        <SectionHead num="§ 02" eyebrow="SERVICIOS">
          Todo lo que tu web necesita, <span className="em">en un mismo sitio</span>.
        </SectionHead>
        <div className="servicios-list reveal">
          {SERVICIOS.map(s => (
            <a href={s.href} className="servicio" key={s.num}>
              <div className="num mono">{s.num}</div>
              <div className="name">{s.name}</div>
              <div className="desc">{s.desc}</div>
              <span className="servicio-arrow">→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// =========================================================
// PROCESO
// =========================================================
function Proceso() {
  return (
    <section className="block" id="proceso">
      <div className="wrap">
        <SectionHead num="§ 03" eyebrow="CÓMO TRABAJAMOS">
          De la idea al lanzamiento, <span className="em">en 14 días</span>.
        </SectionHead>
        <div className="proceso-grid reveal">
          {PROCESO.map(p => (
            <div className="paso" key={p.step}>
              <div className="step mono">PASO {p.step}</div>
              <div className="title">{p.title}</div>
              <div className="desc">{p.desc}</div>
              <div className="time mono">{p.time}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =========================================================
// PRECIOS
// =========================================================
function Precios() {
  return (
    <section className="block" id="precios">
      <div className="wrap">
        <SectionHead num="§ 04" eyebrow="PRECIOS">
          Paquetes claros. <span className="em">Sin sorpresas</span>.
        </SectionHead>
        <div className="precios-grid reveal">
          {PRECIOS.map(p => (
            <div className={"plan " + (p.featured ? "featured" : "")} key={p.name}>
              {p.tag ? <span className="tag hot mono">{p.tag}</span> : <span className="tag mono">{p.featured ? "—" : "Esencial"}</span>}
              <div className="plan-name">{p.name}</div>
              <div className="plan-desc">{p.desc}</div>
              <div className="price"><span className="currency">€</span>{p.price}</div>
              <div className="price-label mono">{p.period}</div>
              <ul className="plan-features">
                {p.features.map((f, i) => (
                  <li className="plan-feat" key={i}>
                    <span className="check"></span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <a href="#contacto" className="plan-cta">{p.cta} →</a>
            </div>
          ))}
        </div>
        <p className="mono" style={{ marginTop: 32, fontSize: 12, color: "var(--ink-soft)", textAlign: "center" }}>
          ¿Necesitas algo más a medida? Habla conmigo y lo ajustamos.
        </p>
      </div>
    </section>
  );
}

// =========================================================
// TESTIMONIOS
// =========================================================
function Testimonios() {
  return (
    <section className="block" id="testimonios">
      <div className="wrap">
        <SectionHead num="§ 05" eyebrow="CLIENTES & TESTIMONIOS">
          Negocios reales que ya <span className="em">brillan online</span>.
        </SectionHead>
        <div className="testi-grid reveal">
          {TESTIMONIOS.map((t, i) => (
            <div className="testi" key={i}>
              <blockquote>{t.quote}</blockquote>
              <div className="who">
                <div className="avatar">{t.initials}</div>
                <div className="who-meta">
                  <div className="name">{t.name}</div>
                  <div className="role mono">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="clientes-row reveal">
          {CLIENTES.map((c, i) => (
            <div className="cliente-logo" key={i}>
              {c.mark ? <span className="mark"></span> : null}
              {c.name}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =========================================================
// QUIÉNES SOMOS
// =========================================================
function Quienes() {
  return (
    <section className="block" id="quienes">
      <div className="wrap">
        <SectionHead num="§ 06" eyebrow="QUIÉNES SOMOS">
          Detrás de Weblume hay <span className="em">una persona</span>, no una agencia gigante.
        </SectionHead>
        <div className="quienes">
          <div className="portrait reveal">
            <img src="retrato-oumaima.svg" alt="Ilustración de Oumaima Erraji, fundadora de Weblume" />
            <span className="badge mono">FUNDADORA</span>
          </div>
          <div className="bio reveal">
            <p>
              Soy <strong>Oumaima Erraji</strong>, emprendedora y creadora de páginas web con inteligencia artificial.
            </p>
            <p>
              Ayudo a autónomos, pequeños negocios y marcas personales a tener una web profesional, moderna y lista para captar clientes desde el primer día.
            </p>
            <p>
              Me gusta trabajar de forma cercana, rápida y práctica, cuidando tanto el diseño como el mensaje para que cada proyecto transmita confianza desde el primer momento.
            </p>
            <div className="stats">
              <div className="stat"><div className="num"><Counter to={40} suffix="+" /></div><div className="lbl mono">PROYECTOS LANZADOS</div></div>
              <div className="stat"><div className="num"><Counter to={14} suffix="d" /></div><div className="lbl mono">ENTREGA MEDIA</div></div>
              <div className="stat"><div className="num"><Counter to={98} suffix="%" /></div><div className="lbl mono">CLIENTES CONTENTOS</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Counter({ to, suffix = "" }) {
  const [n, setN] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        const dur = 1200; const start = performance.now();
        const step = (now) => {
          const t = Math.min(1, (now - start) / dur);
          const eased = 1 - Math.pow(1 - t, 3);
          setN(Math.round(to * eased));
          if (t < 1) requestAnimationFrame(step);
        };
        requestAnimationFrame(step);
        io.disconnect();
      }
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to]);
  return <span ref={ref}>{n}{suffix}</span>;
}

// =========================================================
// FAQ
// =========================================================
function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="block" id="faq">
      <div className="wrap">
        <SectionHead num="§ 07" eyebrow="PREGUNTAS FRECUENTES">
          Lo que casi todo el mundo <span className="em">quiere saber</span>.
        </SectionHead>
        <div className="faq-list reveal">
          {FAQS.map((f, i) => (
            <div className={"faq-item " + (open === i ? "open" : "")} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="q-num mono">{String(i + 1).padStart(2, "0")}</div>
              <div>
                <div className="q">{f.q}</div>
                <div className="a">{f.a}</div>
              </div>
              <div className="toggle"></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =========================================================
// BLOG
// =========================================================
function Blog() {
  return (
    <section className="block" id="blog">
      <div className="wrap">
        <SectionHead num="§ 08" eyebrow="BLOG & RECURSOS">
          Aprende a hacer crecer tu web <span className="em">sin complicarte</span>.
        </SectionHead>
        <div className="blog-grid reveal">
          {POSTS.map((p, i) => (
            <a href="#contacto" className="post" key={i}>
              <div className="post-img"></div>
              <div className="post-meta mono">
                <span>{p.tag}</span><span className="dot">•</span><span>{p.read} lectura</span>
              </div>
              <div className="post-title">{p.title}</div>
              <div className="post-excerpt">{p.excerpt}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// =========================================================
// CONTACTO
// =========================================================
function Contacto() {
  const [form, setForm] = useState({ nombre: "", email: "", empresa: "", presupuesto: "", mensaje: "" });
  const [servicios, setServicios] = useState([]);
  const [toast, setToast] = useState("");

  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const toggle = (s) => setServicios(arr => arr.includes(s) ? arr.filter(x => x !== s) : [...arr, s]);

  const submit = (e) => {
    e.preventDefault();
    if (!form.nombre || !form.email || !form.mensaje) {
      setToast("Faltan campos por rellenar"); setTimeout(() => setToast(""), 2500);
      return;
    }
    const subject = encodeURIComponent(`Nuevo proyecto: ${form.nombre} (${form.empresa || "sin empresa"})`);
    const lines = [
      `Nombre: ${form.nombre}`,
      `Email: ${form.email}`,
      `Empresa: ${form.empresa || "—"}`,
      `Presupuesto: ${form.presupuesto || "—"}`,
      `Servicios de interés: ${servicios.join(", ") || "—"}`,
      ``,
      `Mensaje:`,
      form.mensaje,
    ];
    const body = encodeURIComponent(lines.join("\n"));
    window.location.href = `mailto:errajioumaima@gmail.com?subject=${subject}&body=${body}`;
    setToast("Abriendo tu correo…"); setTimeout(() => setToast(""), 3000);
  };

  const SERVICES_LIST = ["Web nueva", "Rediseño", "Tienda online", "Mantenimiento", "Marca personal", "SEO"];
  const PRESUPUESTOS = ["< 500 €", "500 – 1.000 €", "1.000 – 2.000 €", "> 2.000 €"];

  return (
    <section className="block" id="contacto">
      <div className="wrap">
        <SectionHead num="§ 09" eyebrow="CONTACTO">
          Cuéntame tu proyecto. Te <span className="em">respondo en 24h</span>.
        </SectionHead>
        <div className="contacto">
          <div className="lead">
            <h3 className="reveal">
              ¿Listos para darle <span className="em">luz</span> a tu próximo proyecto?
            </h3>
            <div className="channels reveal">
              <div className="ch"><span className="lbl mono">EMAIL</span><span className="val">errajioumaima@gmail.com</span></div>
              <div className="ch"><span className="lbl mono">HORARIO</span><span className="val">Lun – Vie · 09:00 – 19:00 (CET)</span></div>
              <div className="ch"><span className="lbl mono">UBICACIÓN</span><span className="val">España · trabajamos en remoto</span></div>
            </div>
          </div>
          <form className="contacto-form reveal" onSubmit={submit}>
            <div className="row">
              <div className="field">
                <label>Nombre *</label>
                <input type="text" value={form.nombre} onChange={set("nombre")} placeholder="Tu nombre" required />
              </div>
              <div className="field">
                <label>Email *</label>
                <input type="email" value={form.email} onChange={set("email")} placeholder="tu@email.com" required />
              </div>
            </div>
            <div className="field">
              <label>Empresa / negocio</label>
              <input type="text" value={form.empresa} onChange={set("empresa")} placeholder="Opcional" />
            </div>
            <div className="field">
              <label>¿Qué necesitas?</label>
              <div className="chips">
                {SERVICES_LIST.map(s => (
                  <button type="button" key={s} className={"chip " + (servicios.includes(s) ? "on" : "")} onClick={() => toggle(s)}>{s}</button>
                ))}
              </div>
            </div>
            <div className="field">
              <label>Presupuesto orientativo</label>
              <div className="chips">
                {PRESUPUESTOS.map(p => (
                  <button type="button" key={p} className={"chip " + (form.presupuesto === p ? "on" : "")} onClick={() => setForm(f => ({ ...f, presupuesto: f.presupuesto === p ? "" : p }))}>{p}</button>
                ))}
              </div>
            </div>
            <div className="field">
              <label>Cuéntame tu proyecto *</label>
              <textarea value={form.mensaje} onChange={set("mensaje")} placeholder="¿Qué tienes en mente? Cuanto más concreto, mejor." required></textarea>
            </div>
            <button type="submit" className="submit">Enviar mensaje <Arrow /></button>
            <span className="note mono">Al enviar abriremos tu app de correo con todo listo para errajioumaima@gmail.com</span>
          </form>
        </div>
      </div>
      {toast ? <div className="toast">{toast}</div> : null}
    </section>
  );
}

// =========================================================
// FOOTER
// =========================================================
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="grid">
          <div className="brand">Weblume<span className="dot">.</span></div>
          <div className="col">
            <h5>Navegación</h5>
            <ul>
              <li><a href="#servicios">Servicios</a></li>
              <li><a href="#proceso">Proceso</a></li>
              <li><a href="#precios">Precios</a></li>
              <li><a href="Mantenimiento.html">Mantenimiento</a></li>
              <li><a href="#testimonios">Clientes</a></li>
              <li><a href="#quienes">Quiénes somos</a></li>
            </ul>
          </div>
          <div className="col">
            <h5>Contacto</h5>
            <ul>
              <li><a href="mailto:errajioumaima@gmail.com">errajioumaima@gmail.com</a></li>
              <li><a href="#contacto">Formulario</a></li>
              <li><a href="#">LinkedIn</a></li>
              <li><a href="#">Instagram</a></li>
            </ul>
          </div>
          <div className="col">
            <h5>Legal</h5>
            <ul>
              <li><a href="AvisoLegal.html">Aviso legal</a></li>
              <li><a href="Privacidad.html">Privacidad</a></li>
              <li><a href="Cookies.html">Cookies</a></li>
            </ul>
          </div>
        </div>
        <div className="legal">
          <span>© 2026 WEBLUME · BILBAO</span>
          <span>HECHO CON ☕ + IA EN ESPAÑA</span>
        </div>
      </div>
    </footer>
  );
}

// =========================================================
// COOKIE BANNER
// =========================================================
const COOKIE_KEY = "weblume_cookie_consent";

function CookieBanner() {
  const [visible, setVisible] = useState(false);
  const [animIn, setAnimIn] = useState(false);
  const [decided, setDecided] = useState(true); // assume decided until we check storage

  useEffect(() => {
    try {
      const prev = localStorage.getItem(COOKIE_KEY);
      if (!prev) {
        setDecided(false);
        // small delay so it doesn't fight the hero reveal
        setTimeout(() => { setVisible(true); requestAnimationFrame(() => setAnimIn(true)); }, 900);
      } else {
        setDecided(true);
      }
    } catch (e) {
      setDecided(false);
      setVisible(true); setAnimIn(true);
    }
  }, []);

  const decide = (choice) => {
    try {
      localStorage.setItem(COOKIE_KEY, JSON.stringify({ choice, ts: Date.now() }));
    } catch (e) {}
    setAnimIn(false);
    setTimeout(() => { setVisible(false); setDecided(true); }, 400);
  };

  const reopen = () => {
    setDecided(false);
    setVisible(true);
    requestAnimationFrame(() => setAnimIn(true));
  };

  return (
    <>
      {visible ? (
        <div className={"ck-banner " + (animIn ? "in" : "")} role="dialog" aria-label="Aviso de cookies">
          <div className="ck-text">
            <div className="ck-icon">🍪</div>
            <div>
              <h4>Usamos cookies</h4>
              <p>
                Usamos cookies técnicas (necesarias) y, con tu permiso, analíticas para entender cómo se usa la web.
                Puedes consultar nuestra <a href="Cookies.html">Política de Cookies</a>.
              </p>
            </div>
          </div>
          <div className="ck-actions">
            <button type="button" onClick={() => decide("reject")}>Rechazar</button>
            <button type="button" className="primary" onClick={() => decide("accept")}>Aceptar</button>
          </div>
        </div>
      ) : null}
      {decided && !visible ? (
        <button type="button" className="ck-reopen" onClick={reopen} aria-label="Configurar cookies" title="Configurar cookies">🍪</button>
      ) : null}
    </>
  );
}
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "cream",
  "cursor": true,
  "italicAccent": true
}/*EDITMODE-END*/;

function Tweaks({ onTweak }) {
  const { TweaksPanel, useTweaks, TweakSection, TweakSelect, TweakToggle } = window;
  if (!TweaksPanel) return null;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.setAttribute("data-palette", t.palette);
    onTweak({ cursor: t.cursor });
  }, [t.palette, t.cursor, onTweak]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Paleta">
        <TweakSelect
          label="Tono"
          value={t.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "cream", label: "Crema · Terracota" },
            { value: "ink", label: "Crema · Negro" },
            { value: "forest", label: "Crema · Bosque" },
            { value: "night", label: "Modo noche" },
          ]}
        />
      </TweakSection>
      <TweakSection label="Interacción">
        <TweakToggle label="Cursor personalizado" value={t.cursor} onChange={(v) => setTweak("cursor", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// =========================================================
// APP
// =========================================================
function App() {
  const [cursorOn, setCursorOn] = useState(!!TWEAK_DEFAULTS.cursor);

  useCursor(cursorOn);
  useReveal();

  const handleTweak = React.useCallback((edits) => {
    if ("cursor" in edits) setCursorOn(!!edits.cursor);
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <Servicios />
      <Proceso />
      <Precios />
      <Testimonios />
      <Quienes />
      <FAQ />
      <Blog />
      <Contacto />
      <Footer />
      <Tweaks onTweak={handleTweak} />
      <CookieBanner />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);