/* global React, ReactDOM */
const { useState, useEffect } = React;

// ===== Envío de formularios al correo de TURIS =====
// Los formularios entregan los datos a turiscleaningandservices@gmail.com vía Web3Forms
// (sin servidor). PARA ACTIVAR: entra en https://web3forms.com, registra el correo
// turiscleaningandservices@gmail.com, copia el "Access Key" y pégalo abajo.
// Mientras la clave sea el placeholder, el formulario muestra el mensaje de éxito
// (modo demo) pero NO entrega el email.
const WEB3FORMS_ACCESS_KEY = "REEMPLAZAR-CON-ACCESS-KEY-DE-WEB3FORMS";
const TURIS_EMAIL = "turiscleaningandservices@gmail.com";

async function sendToTuris({ subject, fields }) {
  // Devuelve true si se entregó de verdad; false si está en modo demo o falló.
  if (!WEB3FORMS_ACCESS_KEY || WEB3FORMS_ACCESS_KEY.startsWith("REEMPLAZAR")) {
    return false; // modo demo: sin clave configurada
  }
  try {
    const res = await fetch("https://api.web3forms.com/submit", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify({
        access_key: WEB3FORMS_ACCESS_KEY,
        subject,
        from_name: "Web TURIS Cleaning",
        ...fields,
      }),
    });
    const j = await res.json();
    return !!j.success;
  } catch {
    return false;
  }
}

// ===== Icons (Lucide-style, stroke 1.5) =====
const I = {
  arrow: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
  ),
  whatsapp: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.8-.7-1.4-1.6-1.6-1.9-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.3 0-.5 0-.1-.7-1.7-.9-2.3-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3 4.8 4.2.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.3c-1.5 0-2.9-.4-4.2-1.1l-.3-.2-3.1.8.8-3-.2-.3C4.3 15 4 13.5 4 12c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8.3-8 8.3z"/>
    </svg>
  ),
  phone: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 4h4l2 5-2 1a11 11 0 0 0 5 5l1-2 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/>
    </svg>
  ),
  mail: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <path d="M3 7l9 6 9-6"/>
    </svg>
  ),
  menu: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...p}>
      <path d="M4 8h16M4 16h16"/>
    </svg>
  ),
  close: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...p}>
      <path d="M6 6l12 12M18 6L6 18"/>
    </svg>
  ),
  // Service icons (stroke 1.5)
  bed: (p) => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M3 18V8M3 14h18v4M21 14V11a3 3 0 0 0-3-3h-7v6"/>
      <circle cx="7" cy="12" r="2"/>
    </svg>
  ),
  shirt: (p) => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4 7l4-3 2 2h4l2-2 4 3-2 4h-2v9H8v-9H6z"/>
    </svg>
  ),
  package: (p) => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M3 8l9-5 9 5v8l-9 5-9-5z"/>
      <path d="M3 8l9 5 9-5M12 13v8"/>
    </svg>
  ),
  camera: (p) => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4 8h3l2-2h6l2 2h3v11H4z"/>
      <circle cx="12" cy="13" r="3.5"/>
    </svg>
  ),
  car: (p) => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 17h14l-1.5-6.5a2 2 0 0 0-2-1.5h-7a2 2 0 0 0-2 1.5L5 17z"/>
      <circle cx="7.5" cy="17" r="1.5"/>
      <circle cx="16.5" cy="17" r="1.5"/>
    </svg>
  ),
  sparkle: (p) => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 4l1.8 4.7L18.5 10.5l-4.7 1.8L12 17l-1.8-4.7L5.5 10.5l4.7-1.8z"/>
    </svg>
  ),
  wrench: (p) => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M14.7 6.3a4 4 0 0 1 5 5L17 14l-7 7-3-3 7-7z"/>
    </svg>
  ),
  brush: (p) => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M16 3l5 5-11 11H5v-5z"/>
      <path d="M13 6l5 5"/>
    </svg>
  ),
  sofa: (p) => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4 12V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4M2 14a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4H2zM6 18v2M18 18v2"/>
    </svg>
  ),
  flame: (p) => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 22c4 0 7-2.7 7-7 0-3-2-5-3-7 0 3-3 4-3 4 0-3 1-5-2-8 0 5-6 6-6 11 0 4.3 3 7 7 7z"/>
    </svg>
  ),
  pin: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13z"/>
      <circle cx="12" cy="9" r="2.5"/>
    </svg>
  ),
  check: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12l5 5L20 7"/>
    </svg>
  ),
};

// ===== Reveal hook =====
function useReveal() {
  useEffect(() => {
    if (typeof IntersectionObserver === "undefined") {
      document.querySelectorAll(".reveal").forEach(el => el.classList.add("in"));
      return;
    }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    const watch = () => document.querySelectorAll(".reveal:not(.in)").forEach((el) => obs.observe(el));
    watch();
    // Re-renders (p.ej. pantallas exito/error del formulario) crean nodos .reveal
    // nuevos que el observer inicial no conoce: sin esto quedan en opacity 0.
    const mo = new MutationObserver(watch);
    mo.observe(document.getElementById("root"), { childList: true, subtree: true });
    return () => { obs.disconnect(); mo.disconnect(); };
  }, []);
}

// ===== Brand =====
function Brand() {
  return (
    <a className="brand" href="index.html" aria-label="TURIS Cleaning Services — inicio">
      <img className="brand-img" src="assets/turis-logo.png" alt="TURIS Cleaning Services" width="60" height="56"/>
      <span className="brand-word">TURIS<small>Cleaning Services</small></span>
    </a>
  );
}

// ===== Navigation model — solo landing pages separadas =====
function navLinks(page) {
  return [
    { href: "servicios.html", label: "Servicios", active: page === "servicios" },
    { href: "casas.html", label: "Casas", active: page === "casas" },
    { href: "zonas.html", label: "Zonas", active: page === "zonas" },
    { href: "contacto.html", label: "Contacto", active: page === "contacto" },
  ];
}

// ===== Header =====
function Header({ onOpenMenu, page }) {
  const links = navLinks(page);
  return (
    <header className="site-header" id="top">
      <div className="container">
        <div className="nav">
          <Brand/>
          <nav className="nav-links" aria-label="Principal">
            {links.map((l) => (
              <a key={l.label} href={l.href} className={l.active ? "is-active" : ""}>{l.label}</a>
            ))}
          </nav>
          <div className="nav-cta">
            <a className="nav-phone" href="tel:+34644363973" aria-label="Llamar al 644 363 973">
              <I.phone style={{width: 16, height: 16}}/> 644 363 973
            </a>
            <button className="menu-toggle btn btn-outline" onClick={onOpenMenu} aria-label="Abrir menú">
              <I.menu/>
            </button>
          </div>
        </div>
      </div>
    </header>
  );
}

function Drawer({ open, onClose, page }) {
  const links = navLinks(page);
  return (
    <div className={`drawer ${open ? "open" : ""}`} aria-hidden={!open}>
      <div className="drawer-head">
        <Brand/>
        <button className="btn btn-outline" onClick={onClose} aria-label="Cerrar menú"><I.close/></button>
      </div>
      <nav aria-label="Menú móvil">
        {links.map((l) => (
          <a key={l.label} href={l.href} onClick={onClose}>{l.label}</a>
        ))}
      </nav>
      <div style={{marginTop: "auto", paddingTop: 24, display: "flex", flexDirection: "column", gap: 10}}>
        <a href="contacto.html" className="btn btn-primary" style={{justifyContent: "center"}}>
          Pedir presupuesto
        </a>
        <a href="https://wa.me/34644363973" target="_blank" rel="noopener" className="btn btn-whatsapp" style={{justifyContent: "center"}}>
          <I.whatsapp/> Escribir por WhatsApp
        </a>
      </div>
    </div>
  );
}

// ===== Window cleaning animation (replaces hero photo) =====
function WindowScene() {
  return (
    <div className="window-scene" role="img" aria-label="Ilustración animada de una ventana siendo limpiada">
      <div className="window-frame">
        <div className="window-sill" aria-hidden="true"/>
        <div className="window-pane">
          <div className="pane-view"/>
          <div className="pane-fog" style={{"--delay": "0s"}} aria-hidden="true"/>
          <span className="sparkle s1" aria-hidden="true">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v6M12 14v6M4 12h6M14 12h6"/></svg>
          </span>
        </div>
        <div className="window-pane">
          <div className="pane-view"/>
          <div className="pane-fog" style={{"--delay": "2.5s"}} aria-hidden="true"/>
          <span className="sparkle s2" aria-hidden="true">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v6M12 14v6M4 12h6M14 12h6"/></svg>
          </span>
        </div>
        <div className="window-pane">
          <div className="pane-view"/>
          <div className="pane-fog" style={{"--delay": "5s"}} aria-hidden="true"/>
          <span className="sparkle s3" aria-hidden="true">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v6M12 14v6M4 12h6M14 12h6"/></svg>
          </span>
        </div>
        <div className="window-pane">
          <div className="pane-view"/>
          <div className="pane-fog" style={{"--delay": "7.5s"}} aria-hidden="true"/>
          <span className="sparkle s4" aria-hidden="true">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v6M12 14v6M4 12h6M14 12h6"/></svg>
          </span>
        </div>
        <div className="window-cross-v" aria-hidden="true"/>
        <div className="window-cross-h" aria-hidden="true"/>
      </div>

      <div className="sponge" aria-hidden="true">
        <div className="sponge-body"/>
        <div className="sponge-suds"/>
      </div>

      <div className="bubble b1" aria-hidden="true"/>
      <div className="bubble b2" aria-hidden="true"/>
      <div className="bubble b3" aria-hidden="true"/>

      <div className="service-tag">
        <span className="tag-dot" aria-hidden="true"/>
        Servicio entregado · 11:42
      </div>
    </div>
  );
}

// ===== Hero =====
function Hero() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div className="reveal">
            <span className="eyebrow">Limpieza profesional · viviendas turísticas</span>
            <h1 className="h-display hero-title">
              Tu casa siempre lista.<br/>
              <em>Sin que tengas<br/>que estar pendiente.</em>
            </h1>
            <p className="hero-sub">
              Equipo propio que limpia, lava y prepara cada vivienda antes del check-in.
              Reportaje fotográfico de entrada y salida por WhatsApp, y facturación mensual
              con cada ticket detallado.
            </p>
            <div className="hero-actions">
              <a href="contacto.html" className="btn btn-primary">Pedir presupuesto <I.arrow/></a>
              <a href="https://wa.me/34644363973" target="_blank" rel="noopener" className="btn btn-whatsapp">
                <I.whatsapp/> Escribir por WhatsApp
              </a>
            </div>
            <div className="hero-meta-line">
              <div><strong>Equipo propio</strong>cobertura garantizada</div>
              <div><strong>Foto entrada/salida</strong>en cada servicio</div>
              <div><strong>Madrid y alrededores</strong>todos los días del año</div>
            </div>
          </div>
          <div className="hero-visual reveal" style={{transitionDelay: "120ms"}}>
            <WindowScene/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Problem + Promise =====
function Problem() {
  const qs = [
    "Te tocó dejar una limpieza a medias.",
    "Lavandería sin entregar el día del check-in.",
    "Facturas opacas que nunca cuadran.",
  ];
  const [active, setActive] = useState(-1);
  const ref = React.useRef(null);

  useEffect(() => {
    if (!ref.current) return;
    if (typeof IntersectionObserver === "undefined") {
      setActive(qs.length);
      return;
    }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          qs.forEach((_, i) => {
            setTimeout(() => setActive((a) => Math.max(a, i)), 200 + i * 420);
          });
          setTimeout(() => setActive((a) => Math.max(a, qs.length)), 200 + qs.length * 420);
          obs.disconnect();
        }
      });
    }, { threshold: 0.3 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section className="problem" ref={ref}>
      <div className="container">
        <div className="problem-inner">
          <span className="eyebrow problem-eyebrow">Lo que ya conoces</span>
          <ol className="problem-list">
            {qs.map((q, i) => (
              <li className={`problem-q ${active >= i ? "in" : ""}`} key={i}>
                <span className="pq-num">0{i+1}</span>
                <span className="pq-text">{q}</span>
                <span className="pq-mark" aria-hidden="true"><I.check/></span>
              </li>
            ))}
          </ol>
          <div className={`problem-promise ${active >= qs.length ? "in" : ""}`}>
            <div className="promise-divider">Por eso existimos</div>
            <p className="promise-final">
              Tú solo recibes reservas.<br/>
              Del resto, <em>nos ocupamos nosotros</em>.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Servicio base =====
const BASE_SERVICES = [
  { icon: <I.bed/>, name: "Limpieza de interiores y terraza",
    desc: "Suelos, cocina, baños, salón, dormitorios y exterior. Cada estancia revisada con checklist propio antes de dar el servicio por cerrado." },
  { icon: <I.shirt/>, name: "Cambio de ropa de cama y toallas",
    desc: "Sábanas, fundas, toallas grandes y de mano. Camas hechas con esquinas perfectas y toallas dobladas como en un hotel." },
  { icon: <I.brush/>, name: "Lavandería y secado",
    desc: "Recogida, lavado, secado y planchado. Trabajamos con stock rotatorio: nunca te quedas sin ropa de cama lista para la siguiente entrada." },
  { icon: <I.package/>, name: "Reposición de productos agotados",
    desc: "Productos de limpieza y cortesía (gel, champú, papel higiénico, café, sal, aceite). Te avisamos siempre antes de comprar y pasamos los tickets en la factura mensual." },
  { icon: <I.camera/>, name: "Reportaje fotográfico de entrada y salida",
    desc: "Te llega por WhatsApp después de cada servicio. Una prueba visual de cómo dejamos la vivienda y de cómo la encontramos. Si algo no estaba bien al llegar, lo sabes en minutos.",
    featured: true },
  { icon: <I.car/>, name: "Desplazamientos incluidos",
    desc: "Sin coste extra por kilometraje dentro de nuestra zona habitual. Operamos en Madrid y alrededores todos los días del año." },
];

function BaseServices() {
  return (
    <section className="base" id="servicios">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Servicio base</span>
            <h2 className="section-title">Qué incluye <em>cada limpieza</em>.</h2>
          </div>
          <p className="lead">
            Un paquete claro y completo. Nada de letra pequeña, nada de "sorpresas"
            en la factura. Esto entra siempre que nos contratas.
          </p>
        </div>

        <div className="base-list reveal">
          {BASE_SERVICES.map((s, i) => (
            <article key={i} className={`base-item ${s.featured ? "featured" : ""}`}>
              <div className="base-num">{String(i+1).padStart(2, "0")}</div>
              <h3 className="base-name">
                <span aria-hidden="true">{s.icon}</span>
                <span>{s.name}</span>
              </h3>
              <p className="base-desc">{s.desc}</p>
            </article>
          ))}
        </div>

        <div className="beforeafter reveal" style={{transitionDelay: "80ms"}} aria-label="Ejemplo de reportaje fotográfico">
          <div className="ba-card">
            <img src="assets/photos/example-living-before.jpg" alt="Salón antes del servicio: cocina, sofás y comedor" loading="lazy"/>
            <span className="ba-tag">Entrada</span>
            <span className="ba-time">10:48</span>
          </div>
          <div className="ba-card after">
            <img src="assets/photos/example-bedroom-after.jpg" alt="Dormitorio listo para el huésped: cama hecha, toallas dobladas y vistas al exterior" loading="lazy"/>
            <span className="ba-tag">Salida</span>
            <span className="ba-time">13:21</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Extras =====
const EXTRAS = [
  { icon: <I.wrench/>, title: "Mantenimiento",
    items: ["Manitas y pequeñas reparaciones", "Albañilería puntual", "Carpintería y montajes", "Electricidad básica"] },
  { icon: <I.sofa/>, title: "Cuidado profundo",
    items: ["Limpieza general fuera del paquete", "Tapicerías, sofás y colchones con máquina", "Lavandería extra: edredones, nórdicos, mantas"] },
  { icon: <I.sparkle/>, title: "Decoración y puesta a punto",
    items: ["Preparación de la vivienda al inicio de temporada", "Detalles de bienvenida y ambientación", "Reposición de menaje y textiles"] },
  { icon: <I.flame/>, title: "Eventos en la vivienda",
    items: ["Parrillero a domicilio", "Paellas", "Camareros para celebraciones", "DJs (bajo disponibilidad)"] },
];

function Extras() {
  return (
    <section className="extras">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Extras bajo presupuesto</span>
            <h2 className="section-title">Y todo lo demás, <em>cuando lo necesitas</em>.</h2>
          </div>
          <p className="lead">
            Cubrimos lo que no entra en una limpieza habitual: una reparación,
            una limpieza profunda fin de temporada, una preparación para una
            celebración del propietario. Hablemos sobre lo que necesitas.
          </p>
        </div>
        <div className="extras-grid reveal">
          {EXTRAS.map((e, i) => (
            <div className="extra-card" key={i}>
              <div className="extra-icon">{e.icon}</div>
              <div>
                <h3 className="extra-title">{e.title}</h3>
                <ul className="extra-list">
                  {e.items.map((it, k) => <li key={k}>{it}</li>)}
                </ul>
              </div>
            </div>
          ))}
        </div>
        <div className="extras-aside reveal">
          <p className="text">
            También gestionamos la <strong>asesoría energética</strong> de tu
            vivienda para reducir la factura de la luz y el gas. Lo coordinamos nosotros.
          </p>
          <a href="contacto.html#energia" className="btn-link">Pídenos presupuesto de luz/gas <I.arrow/></a>
        </div>
      </div>
    </section>
  );
}

// ===== Cómo trabajamos =====
const PROCESS = [
  { num: "01", title: "Coordinamos calendario",
    desc: "Nos pasas las fechas o nos sincronizamos con tu calendario de reservas (Airbnb, Booking, tu PMS…). Sabemos cuándo entra el siguiente huésped antes que tú." },
  { num: "02", title: "Limpieza y puesta a punto",
    desc: "Ejecutamos el servicio antes del check-in. Equipo propio, materiales propios, checklist completo." },
  { num: "03", title: "Reportaje fotográfico por WhatsApp",
    desc: "Fotos de entrada y salida del servicio, por estancia. Te las enviamos por WhatsApp y quedan documentadas las incidencias si las hubiera." },
  { num: "04", title: "Factura mensual detallada",
    desc: "Cada servicio listado con ticket de las compras realizadas. Cero opacidad, cero sorpresas a fin de mes." },
];

function Process() {
  return (
    <section className="process" id="proceso">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Cómo trabajamos</span>
            <h2 className="section-title">Un proceso construido <em>sobre la confianza</em>.</h2>
          </div>
          <p className="lead">
            Lo que más temen los propietarios es que un proveedor falle el día
            del check-in. Nuestro proceso está pensado para que eso no pase.
          </p>
        </div>
        <div className="process-grid">
          <div className="reveal">
            <div className="process-steps">
              {PROCESS.map((p) => (
                <div key={p.num} className="process-step">
                  <div className="step-num">{p.num}</div>
                  <div>
                    <h3>{p.title}</h3>
                    <p>{p.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="reveal" style={{transitionDelay: "120ms"}}>
            <WhatsAppReport/>
          </div>
        </div>
      </div>
    </section>
  );
}

function WhatsAppReport() {
  return (
    <div className="email-mock" role="img" aria-label="Ejemplo de reportaje fotográfico que enviamos al propietario por WhatsApp">
      <div className="email-stamp">así te llega el reporte</div>
      <div className="email-head">
        <div className="email-row"><span className="k">De</span><span className="v">TURIS Cleaning Services</span></div>
        <div className="email-row"><span className="k">Para</span><span className="v">Propietario</span></div>
        <div className="email-row"><span className="k">Hoy</span><span className="v">11:42</span></div>
        <h4 className="email-subject">Servicio completado · vivienda lista para el check-in</h4>
      </div>
      <div className="email-body">
        <p>Hola, vivienda lista para el check-in de las 15:00.</p>
        <p>Encontramos el sofá con una mancha de café, lo dejamos limpio. Adjuntamos fotos de entrada y salida. Reposición: papel higiénico (×4) y café (×1). Ticket en la factura mensual.</p>
        <div className="email-photos">
          <div className="email-photo"><img src="assets/photos/salon-cocina.jpg" alt=""/><span>Salón</span></div>
          <div className="email-photo"><img src="assets/photos/terraza-vistas.jpg" alt=""/><span>Terraza</span></div>
          <div className="email-photo"><img src="assets/photos/dormitorio.jpg" alt=""/><span>Dormitorio</span></div>
          <div className="email-photo"><img src="assets/photos/piscina-pantano.jpg" alt=""/><span>Exterior</span></div>
        </div>
        <p>Cualquier cosa, por aquí. — El equipo TURIS.</p>
      </div>
    </div>
  );
}

// ===== Garantía + signature =====
function Guarantee() {
  return (
    <section className="guarantee" id="confianza">
      <div className="container">
        <div className="guarantee-grid">
          <div className="reveal">
            <p className="guarantee-quote">
              Garantizamos la realización de cada servicio.
              Contamos con un equipo amplio que <em style={{fontStyle: "italic", color: "var(--cream)"}}>nunca deja una casa sin atender</em>,
              ni siquiera el día más complicado.
            </p>
            <div className="signature-block">
              <svg className="signature-svg" viewBox="0 0 280 70" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M8 44 C 14 22, 22 18, 28 32 C 32 42, 28 50, 24 46 C 26 42, 34 30, 42 36 C 48 40, 44 50, 50 46 C 58 38, 52 28, 60 30 C 68 32, 64 48, 72 42 C 80 36, 78 26, 86 30 C 92 33, 88 45, 94 42 M 102 24 C 100 30, 102 44, 110 42 C 118 40, 118 28, 110 28 C 104 28, 102 34, 108 38 M 122 30 L 122 48 M 124 22 L 124 22 M 132 32 C 136 26, 144 28, 142 36 C 140 42, 132 40, 132 46 C 132 50, 142 48, 146 44"/>
                <path d="M 158 44 C 164 22, 172 18, 178 32 C 182 42, 178 50, 174 46 C 176 42, 184 30, 192 36 C 198 40, 196 50, 202 46 M 210 32 C 206 38, 212 50, 220 44 C 226 40, 226 30, 220 30 C 214 30, 212 38, 218 42 M 230 24 L 232 46 L 240 28 L 246 46 L 254 28 L 256 46 M 264 32 C 260 38, 264 50, 272 46"/>
              </svg>
              <div className="signature-meta">
                <strong>El equipo TURIS</strong>
                TURIS Cleaning Services
              </div>
            </div>
          </div>
          <div className="reveal" style={{transitionDelay: "120ms"}}>
            <figure className="guarantee-photo">
              <img src="assets/photos/salon-cocina.jpg" alt="Salón de una vivienda preparada por TURIS Cleaning Services"/>
            </figure>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Casas (galería de trabajo real) =====
// 15 huecos para viviendas. Rellena `src` con la foto cuando la tengas (mismo orden = mismo hueco).
// Fotos reales de viviendas que preparamos. Para añadir más: copia la imagen a
// assets/photos/ y añade aquí { src, cap } — la galería y el botón "ver completa"
// se ajustan solos.
const GALLERY = [
  { src: "assets/photos/piscina-pantano.jpg", cap: "Casa con piscina junto al embalse · San Martín de Valdeiglesias" },
  { src: "assets/photos/dormitorio.jpg", cap: "Dormitorio preparado con vistas a la sierra" },
  { src: "assets/photos/salon-cocina.jpg", cap: "Salón y cocina de chalet rural" },
  { src: "assets/photos/terraza-vistas.jpg", cap: "Terraza con vistas a la montaña" },
  { src: "assets/photos/example-living-before.jpg", cap: "Salón listo para el check-in" },
  { src: "assets/photos/example-bedroom-after.jpg", cap: "Habitación con toallas y cama hechas" },
];

const GALLERY_PREVIEW = 16;
function Gallery({ bare }) {
  const photos = GALLERY.filter((g) => g && g.src);
  const [showAll, setShowAll] = useState(false);
  const visible = showAll ? photos : photos.slice(0, GALLERY_PREVIEW);
  return (
    <section className="gallery" id="casas">
      <div className="container">
        {!bare && (
          <div className="section-head reveal">
            <div>
              <span className="eyebrow">Nuestras viviendas</span>
              <h2 className="section-title">La variedad de casas que <em>preparamos</em>.</h2>
            </div>
            <p className="lead">
              Pisos en ciudad, chalets en la sierra, casas con piscina junto al pantano.
              Cada una con sus particularidades; todas listas a tiempo para el siguiente huésped.
            </p>
          </div>
        )}
        <div className="gallery-grid reveal">
          {visible.map((g, i) => (
            <figure key={i} className="gallery-item">
              <img src={g.src} alt={g.cap || ""} loading="lazy"/>
              {g.cap && <figcaption>{g.cap}</figcaption>}
            </figure>
          ))}
        </div>
        {!showAll && photos.length > GALLERY_PREVIEW && (
          <div className="gallery-more reveal">
            <button type="button" className="btn btn-outline" onClick={() => setShowAll(true)}>
              Ver galería completa ({photos.length} fotos) <I.arrow/>
            </button>
          </div>
        )}
      </div>
    </section>
  );
}

// ===== Casas teaser (home) =====
function CasasTeaser() {
  const shots = [GALLERY[0], GALLERY[1], GALLERY[2], GALLERY[3]].filter((g) => g && g.src);
  return (
    <section className="gallery">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Nuestras viviendas</span>
            <h2 className="section-title">Casas que dejamos <em>listas cada semana</em>.</h2>
          </div>
          <p className="lead">
            Pisos en ciudad, chalets en la sierra, casas con piscina junto al pantano.
            Una muestra de la variedad de viviendas que preparamos.
          </p>
        </div>
        <div className="casas-teaser-grid reveal">
          {shots.map((g, i) => (
            <figure key={i} className="gallery-item">
              <img src={g.src} alt={g.cap || ""} loading="lazy"/>
              {g.cap && <figcaption>{g.cap}</figcaption>}
            </figure>
          ))}
        </div>
        <div className="svc-teaser-foot reveal">
          <p>Cada vivienda con su carácter; todas listas a tiempo para el siguiente huésped.</p>
          <a href="casas.html" className="btn btn-outline">Ver todas las casas <I.arrow/></a>
        </div>
      </div>
    </section>
  );
}

// ===== Trusted by =====
function Trusted() {
  return (
    <section className="trusted">
      <div className="container">
        <div className="trusted-label reveal">Confían en nosotros</div>
        <div className="trusted-row reveal" aria-label="Gestoras vacacionales que colaboran con nosotros">
          <span className="trusted-logo" title="Bliss Homes">
            <img src="assets/logos/bliss-homes.png" alt="Bliss Homes" loading="lazy"/>
          </span>
          <span className="trusted-logo" title="Lakeland">
            <img src="assets/logos/lakeland-coral.jpg" alt="Lakeland" loading="lazy"/>
          </span>
          <span className="trusted-logo" title="nius">
            <img src="assets/logos/nius.jpg" alt="nius" loading="lazy"/>
          </span>
        </div>
      </div>
    </section>
  );
}

// ===== Zonas =====
function Areas() {
  return (
    <section className="areas" id="zonas">
      <div className="container">
        <div className="areas-grid">
          <div className="reveal">
            <span className="eyebrow">Listado de zonas</span>
            <h2 className="section-title">Estas son nuestras <em>zonas habituales</em>.</h2>
          </div>
          <div className="reveal" style={{transitionDelay: "100ms"}}>
            <div className="areas-list">
              <span className="area-pill primary">Madrid capital</span>
              <span className="area-pill primary">San Martín de Valdeiglesias</span>
              <span className="area-pill">Sierra de Madrid</span>
              <span className="area-pill">Sierra Oeste</span>
              <span className="area-pill">El Escorial</span>
              <span className="area-pill">Navacerrada</span>
              <span className="area-pill">Cercedilla</span>
              <span className="area-pill">Resto de la Comunidad</span>
            </div>
            <p className="areas-note">¿Tu vivienda está fuera de esta lista? <a href="contacto.html" style={{color: "var(--green)", borderBottom: "1px solid currentColor"}}>Pregúntanos por tu zona</a> — valoramos cada caso.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== FAQ =====
const FAQS = [
  { q: "¿Cobráis los desplazamientos?",
    a: "No. Dentro de nuestra zona habitual —Madrid y alrededores— los desplazamientos van incluidos, sin coste por kilometraje." },
  { q: "¿Cómo es la facturación?",
    a: "Una sola factura a final de mes con cada servicio detallado y los tickets de las compras (reposiciones). Te avisamos siempre antes de comprar nada y tú lo apruebas." },
  { q: "¿Trabajáis fines de semana y festivos?",
    a: "Sí, todos los días del año salvo el 25 de diciembre y el 1 de enero. Atendemos urgencias e imprevistos cuando se entra o se sale en festivo." },
  { q: "¿Y si un huésped entra el mismo día que sale otro?",
    a: "Lo coordinamos con tu calendario o tu PMS para que la vivienda esté lista antes del check-in. Contamos con un equipo amplio para no fallar ningún día, ni el más complicado." },
  { q: "¿Trabajáis con gestoras de alquiler vacacional?",
    a: "Sí. Colaboramos con varias gestoras de la zona y nos adaptamos a su operativa y a sus tiempos." },
  { q: "¿Solo hacéis limpieza?",
    a: "La limpieza es la base, pero también cubrimos lavandería, reposición, mantenimiento y manitas, decoración y puesta a punto, e incluso catering para eventos bajo consulta." },
];

function Faq() {
  return (
    <section className="faq" id="faq">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Preguntas frecuentes</span>
            <h2 className="section-title">Lo que suelen <em>preguntarnos</em>.</h2>
          </div>
          <p className="lead">
            Y si tienes cualquier otra duda, escríbenos por WhatsApp y te
            contestamos en persona, sin centralitas ni esperas.
          </p>
        </div>
        <div className="faq-list reveal">
          {FAQS.map((f, i) => (
            <details key={i} className="faq-item">
              <summary>
                <span>{f.q}</span>
                <span className="faq-icon" aria-hidden="true"/>
              </summary>
              <div className="faq-a"><p>{f.a}</p></div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Contact (wizard de presupuesto, 5 pasos estilo Bliss) =====
const QUOTE_STEPS = [
  { key: "ubicacion", label: "Ubicación" },
  { key: "viviendas", label: "Viviendas" },
  { key: "servicios", label: "Servicios" },
  { key: "frecuencia", label: "Frecuencia" },
  { key: "contacto", label: "Contacto" },
];
const OPT_VIVIENDAS = ["1 vivienda", "2 – 3", "4 – 10", "11 – 25", "Más de 25"];
const OPT_SERVICIOS = ["Solo limpieza", "Limpieza + lavandería", "Pack completo (todo incluido)", "Aún no lo sé"];
const OPT_FRECUENCIA = ["Por cada reserva", "Semanal", "Quincenal", "Puntual · una vez", "Aún no lo sé"];

function Contact() {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({ ubicacion: "", viviendas: "", servicios: "", frecuencia: "", nombre: "", telefono: "", email: "" });
  const [consent, setConsent] = useState(false);
  const [errors, setErrors] = useState({});
  const [status, setStatus] = useState("idle");
  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const choose = (k, v) => {
    set(k, v);
    setErrors({});
    setTimeout(() => setStep((s) => Math.min(s + 1, QUOTE_STEPS.length - 1)), 200);
  };

  const next = () => {
    const e = {};
    if (step === 0 && !data.ubicacion.trim()) e.ubicacion = "Indícanos la zona de tu vivienda";
    if (step === 1 && !data.viviendas) e.choice = "Elige una opción para continuar";
    if (step === 2 && !data.servicios) e.choice = "Elige una opción para continuar";
    if (step === 3 && !data.frecuencia) e.choice = "Elige una opción para continuar";
    setErrors(e);
    if (Object.keys(e).length) return;
    setStep((s) => Math.min(s + 1, QUOTE_STEPS.length - 1));
  };
  const back = () => { setErrors({}); setStep((s) => Math.max(s - 1, 0)); };

  const submit = async (ev) => {
    if (ev) ev.preventDefault();
    const e = {};
    if (!data.nombre.trim()) e.nombre = "Indícanos tu nombre";
    const hasPhone = /^[\d +()-]{6,}$/.test(data.telefono);
    const hasEmail = /^\S+@\S+\.\S+$/.test(data.email);
    if (!hasPhone && !hasEmail) e.contact = "Déjanos un teléfono o un email para contactarte";
    if (!consent) e.consent = "Necesitamos tu consentimiento para poder responderte";
    setErrors(e);
    if (Object.keys(e).length) return;
    setStatus("sending");
    await sendToTuris({
      subject: "Presupuesto LIMPIEZA — solicitud desde la web",
      fields: {
        Concepto: "Presupuesto de limpieza",
        Nombre: data.nombre,
        Telefono: data.telefono || "—",
        Email: data.email || "—",
        Ubicacion: data.ubicacion || "—",
        Viviendas: data.viviendas || "—",
        Servicios: data.servicios || "—",
        Frecuencia: data.frecuencia || "—",
        Consentimiento: consent ? "Sí" : "No",
      },
    });
    // Mostramos éxito al usuario en cualquier caso (si la clave Web3Forms no está
    // configurada, queda en modo demo). Ver WEB3FORMS_ACCESS_KEY arriba.
    setStatus("success");
  };

  if (status === "success") {
    return (
      <section className="contact" id="contacto">
        <div className="container">
          <div className="quote-wrap reveal">
            <div className="form-success">
              <h3>¡Gracias, {data.nombre.split(" ")[0] || "un placer"}!</h3>
              <p>Hemos recibido tu solicitud. Te respondemos en menos de 24 h con un presupuesto para {data.ubicacion ? <strong>{data.ubicacion}</strong> : "tu zona"}. Si lo prefieres, sigue por WhatsApp y te contestamos al momento.</p>
              <a href="https://wa.me/34644363973" target="_blank" rel="noopener" className="btn btn-whatsapp" style={{marginTop: 20}}>
                <I.whatsapp/> Continuar por WhatsApp
              </a>
            </div>
            <ContactDirect/>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="contact" id="contacto">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Pedir presupuesto</span>
            <h2 className="section-title">Cuéntanos qué necesitas.<br/><em>Te respondemos hoy.</em></h2>
          </div>
          <p className="lead">
            2 minutos, 4 preguntas. Tengas una casa o gestiones varias, te preparamos
            un presupuesto realista y sin compromiso. Te respondemos en menos de 24 h.
          </p>
        </div>

        <div className="quote-wrap reveal">
          <div className="quote-card">
            <ol className="stepper" aria-hidden="true">
              {QUOTE_STEPS.map((s, i) => (
                <li key={s.key} className={`stepper-item ${i === step ? "current" : ""} ${i < step ? "done" : ""}`}>
                  <span className="stepper-dot">{i < step ? <I.check/> : i + 1}</span>
                  <span className="stepper-label">{s.label}</span>
                </li>
              ))}
            </ol>

            <div className="quote-body">
              <span className="quote-progress">Paso {step + 1} de {QUOTE_STEPS.length}</span>

              {step === 0 && (
                <div className="quote-step">
                  <h3 className="quote-q">¿Dónde está tu vivienda?</h3>
                  <p className="quote-help">Pueblo, barrio o zona aproximada.</p>
                  <div className={`form-field ${errors.ubicacion ? "error" : ""}`}>
                    <input
                      autoFocus
                      value={data.ubicacion}
                      onChange={(e) => set("ubicacion", e.target.value)}
                      onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); next(); } }}
                      placeholder="Ej: San Martín de Valdeiglesias, El Escorial, Madrid centro..."
                    />
                    {errors.ubicacion && <span className="err">{errors.ubicacion}</span>}
                  </div>
                </div>
              )}

              {step === 1 && (
                <div className="quote-step">
                  <h3 className="quote-q">¿Cuántas viviendas tienes?</h3>
                  <p className="quote-help">Da igual si es una o muchas: nos adaptamos a ti.</p>
                  <div className="quote-options">
                    {OPT_VIVIENDAS.map((o) => (
                      <button type="button" key={o} className={`quote-opt ${data.viviendas === o ? "sel" : ""}`} onClick={() => choose("viviendas", o)}>{o}</button>
                    ))}
                  </div>
                  {errors.choice && <span className="err">{errors.choice}</span>}
                </div>
              )}

              {step === 2 && (
                <div className="quote-step">
                  <h3 className="quote-q">¿Qué necesitas?</h3>
                  <p className="quote-help">Lo afinamos contigo después, no te preocupes.</p>
                  <div className="quote-options">
                    {OPT_SERVICIOS.map((o) => (
                      <button type="button" key={o} className={`quote-opt ${data.servicios === o ? "sel" : ""}`} onClick={() => choose("servicios", o)}>{o}</button>
                    ))}
                  </div>
                  {errors.choice && <span className="err">{errors.choice}</span>}
                </div>
              )}

              {step === 3 && (
                <div className="quote-step">
                  <h3 className="quote-q">¿Con qué frecuencia?</h3>
                  <p className="quote-help">Una idea aproximada nos vale.</p>
                  <div className="quote-options">
                    {OPT_FRECUENCIA.map((o) => (
                      <button type="button" key={o} className={`quote-opt ${data.frecuencia === o ? "sel" : ""}`} onClick={() => choose("frecuencia", o)}>{o}</button>
                    ))}
                  </div>
                  {errors.choice && <span className="err">{errors.choice}</span>}
                </div>
              )}

              {step === 4 && (
                <form className="quote-step" onSubmit={submit} noValidate>
                  <h3 className="quote-q">¿A dónde te enviamos el presupuesto?</h3>
                  <p className="quote-help">Con un teléfono o un email nos basta.</p>
                  <div className={`form-field ${errors.nombre ? "error" : ""}`}>
                    <label htmlFor="q-nombre">Nombre</label>
                    <input id="q-nombre" autoComplete="name" value={data.nombre} onChange={(e) => set("nombre", e.target.value)} placeholder="Tu nombre"/>
                    {errors.nombre && <span className="err">{errors.nombre}</span>}
                  </div>
                  <div className="form-row">
                    <div className="form-field">
                      <label htmlFor="q-tel">Teléfono</label>
                      <input id="q-tel" type="tel" inputMode="tel" autoComplete="tel" value={data.telefono} onChange={(e) => set("telefono", e.target.value)} placeholder="644 ··· ···"/>
                    </div>
                    <div className="form-field">
                      <label htmlFor="q-email">Email <span className="opt">(o teléfono)</span></label>
                      <input id="q-email" type="email" autoComplete="email" value={data.email} onChange={(e) => set("email", e.target.value)} placeholder="tu@email.com"/>
                    </div>
                  </div>
                  {errors.contact && <span className="err" style={{marginTop: -8, marginBottom: 12, display: "block"}}>{errors.contact}</span>}
                  <label className={`quote-consent ${errors.consent ? "error" : ""}`}>
                    <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)}/>
                    <span>He leído y acepto la <a href="#" onClick={(e) => e.preventDefault()}>política de privacidad</a>.</span>
                  </label>
                  {errors.consent && <span className="err">{errors.consent}</span>}
                </form>
              )}
            </div>

            <div className="quote-nav">
              <button type="button" className="quote-back" onClick={back} style={{visibility: step === 0 ? "hidden" : "visible"}}>
                <I.arrow style={{transform: "rotate(180deg)"}}/> Atrás
              </button>
              {step < QUOTE_STEPS.length - 1 ? (
                <button type="button" className="btn btn-primary" onClick={next}>Siguiente <I.arrow/></button>
              ) : (
                <button type="button" className="btn btn-primary" onClick={submit} disabled={status === "sending"}>
                  {status === "sending" ? "Enviando..." : <>Pedir presupuesto <I.arrow/></>}
                </button>
              )}
            </div>
          </div>

          <ContactDirect/>
        </div>
      </div>
    </section>
  );
}

function ContactDirect() {
  return (
    <aside className="contact-direct reveal" style={{transitionDelay: "120ms"}}>
      <h3>¿Prefieres hablar antes de escribir?</h3>
      <p>WhatsApp suele ser lo más rápido. Te respondemos en persona, sin esperas.</p>
      <a className="contact-channel" href="https://wa.me/34644363973" target="_blank" rel="noopener">
        <span className="ico"><I.whatsapp/></span>
        <div>
          <div className="lab">WhatsApp</div>
          <div className="val">644 363 973</div>
        </div>
      </a>
      <a className="contact-channel" href="tel:+34644363973">
        <span className="ico"><I.phone/></span>
        <div>
          <div className="lab">Teléfono</div>
          <div className="val">644 363 973</div>
        </div>
      </a>
      <a className="contact-channel" href="mailto:turiscleaningandservices@gmail.com">
        <span className="ico"><I.mail/></span>
        <div>
          <div className="lab">Email</div>
          <div className="val" style={{fontSize: 16, wordBreak: "break-all"}}>turiscleaningandservices@gmail.com</div>
        </div>
      </a>
      <p className="contact-microcopy">
        Abierto todos los días del año salvo 25 de diciembre y 1 de enero.
      </p>
    </aside>
  );
}

// ===== Footer =====
function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <a className="footer-brand" href="index.html" aria-label="TURIS Cleaning Services — inicio"><img className="footer-brand-img" src="assets/turis-logo.png" alt="TURIS Cleaning Services" width="72" height="68"/></a>
            <p className="footer-tag">
              Limpieza profesional para viviendas turísticas y vacacionales.
              No gestionamos viviendas: somos el equipo de limpieza de confianza
              de propietarios y gestoras. Madrid y Ávila.
            </p>
          </div>
          <div className="footer-col">
            <h4>Contacto</h4>
            <a href="tel:+34644363973">644 363 973</a>
            <a href="mailto:turiscleaningandservices@gmail.com">turiscleaningandservices@gmail.com</a>
            <a href="https://wa.me/34644363973" target="_blank" rel="noopener">WhatsApp</a>
          </div>
          <div className="footer-col">
            <h4>Web</h4>
            <a href="servicios.html">Servicios</a>
            <a href="casas.html">Casas</a>
            <a href="zonas.html">Zonas</a>
            <a href="contacto.html">Contacto</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} TURIS Cleaning Services</span>
          <span>
            <a href="#" style={{display: "inline"}}>Aviso legal</a> · <a href="#" style={{display: "inline"}}>Privacidad</a> · <a href="#" style={{display: "inline"}}>Cookies</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

// ===== Shared: page hero (subpáginas) =====
function PageHero({ eyebrow, title, titleEm, sub, photo }) {
  return (
    <section className="page-hero">
      <div className="container">
        <div className={`page-hero-inner ${photo ? "" : "solo"}`}>
          <div className="reveal">
            <span className="eyebrow">{eyebrow}</span>
            <h1 className="page-hero-title h-display">{title} <em>{titleEm}</em></h1>
            <p className="page-hero-sub">{sub}</p>
            <div className="page-hero-actions">
              <a href="contacto.html" className="btn btn-primary">Pedir presupuesto <I.arrow/></a>
              <a href="https://wa.me/34644363973" target="_blank" rel="noopener" className="btn btn-whatsapp">
                <I.whatsapp/> WhatsApp
              </a>
            </div>
          </div>
          {photo && (
            <figure className="page-hero-photo reveal" style={{transitionDelay: "100ms"}}>
              <img src={photo} alt=""/>
            </figure>
          )}
        </div>
      </div>
    </section>
  );
}

// ===== Conversion CTA band =====
function CTABand({ title, text }) {
  return (
    <section className="cta-band">
      <div className="container">
        <div className="cta-band-inner reveal">
          <div className="cta-band-copy">
            <h2 className="cta-band-title">{title}</h2>
            <p className="cta-band-text">{text}</p>
          </div>
          <div className="cta-band-actions">
            <a href="contacto.html" className="btn btn-cream">Pedir presupuesto <I.arrow/></a>
            <a href="https://wa.me/34644363973" target="_blank" rel="noopener" className="btn btn-ghost-cream">
              <I.whatsapp/> WhatsApp
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Sketch filter (trazo a mano) — desplaza los trazos para que parezcan dibujados =====
function SketchDefs() {
  return (
    <svg width="0" height="0" style={{position: "absolute"}} aria-hidden="true" focusable="false">
      <defs>
        <filter id="sketch" x="-25%" y="-25%" width="150%" height="150%">
          <feTurbulence type="fractalNoise" baseFrequency="0.15" numOctaves="2" seed="6" result="noise"/>
          <feDisplacementMap in="SourceGraphic" in2="noise" scale="2.3" xChannelSelector="R" yChannelSelector="G"/>
        </filter>
        <filter id="sketch2" x="-25%" y="-25%" width="150%" height="150%">
          <feTurbulence type="fractalNoise" baseFrequency="0.18" numOctaves="2" seed="17" result="noise"/>
          <feDisplacementMap in="SourceGraphic" in2="noise" scale="2.1" xChannelSelector="R" yChannelSelector="G"/>
        </filter>
      </defs>
    </svg>
  );
}

// ===== Floating WhatsApp (todas las páginas) =====
function WhatsAppFab() {
  return (
    <a
      className="wa-fab"
      href="https://wa.me/34644363973?text=Hola%2C%20me%20gustar%C3%ADa%20pedir%20presupuesto%20de%20limpieza%20para%20mi%20vivienda"
      target="_blank"
      rel="noopener"
      aria-label="Escríbenos por WhatsApp"
    >
      <I.whatsapp/>
      <span className="wa-fab-label">¿Hablamos?</span>
    </a>
  );
}

// ===== Servicios teaser (home) =====
function ServicesTeaser() {
  return (
    <section className="svc-teaser">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Qué hacemos</span>
            <h2 className="section-title">Todo lo que tu vivienda <em>necesita</em>.</h2>
          </div>
          <p className="lead">
            Un paquete de limpieza claro y completo —limpieza, lavandería, reposición
            y reportaje fotográfico— y todos los extras cuando hacen falta. Sin letra pequeña.
          </p>
        </div>
        <div className="svc-teaser-grid reveal">
          {BASE_SERVICES.map((s, i) => (
            <div className="svc-teaser-item" key={i}>
              <span className="svc-teaser-icon" aria-hidden="true">{s.icon}</span>
              <h3>{s.name}</h3>
            </div>
          ))}
        </div>
        <div className="svc-teaser-foot reveal">
          <p>Y además: mantenimiento y manitas, decoración y puesta a punto, lavandería extra y eventos bajo consulta.</p>
          <a href="servicios.html" className="btn btn-outline">Ver todos los servicios <I.arrow/></a>
        </div>
      </div>
    </section>
  );
}

// ===== Zonas teaser (home) =====
function ZonasTeaser() {
  return (
    <section className="zonas-teaser">
      <div className="container">
        <div className="zonas-teaser-inner reveal">
          <div>
            <span className="eyebrow">Dónde operamos</span>
            <h2 className="section-title">Madrid y <em>la sierra</em>, cada día.</h2>
            <p className="lead">
              Madrid capital, San Martín de Valdeiglesias, Sierra Oeste, El Escorial,
              Navacerrada, Cercedilla y alrededores. Todos los días del año.
            </p>
          </div>
          <a href="zonas.html" className="btn btn-outline">Ver todas las zonas <I.arrow/></a>
        </div>
      </div>
    </section>
  );
}

// ===== Pages =====
function HomePage() {
  return (
    <main>
      <Hero/>
      <Problem/>
      <ServicesTeaser/>
      <Process/>
      <CasasTeaser/>
      <Guarantee/>
      <Trusted/>
      <ZonasTeaser/>
      <CTABand
        title="¿Lista tu próxima entrada?"
        text="Tanto si tienes una casa como si gestionas varias, cuéntanos tu caso y te preparamos un presupuesto realista. Sin compromiso, te respondemos hoy."
      />
    </main>
  );
}

function ServiciosPage() {
  return (
    <main>
      <PageHero
        eyebrow="Servicios"
        title="Limpieza integral,"
        titleEm="y todo lo demás."
        sub="La limpieza es la base: interiores, lavandería, reposición y reportaje fotográfico en cada servicio. A partir de ahí, cubrimos todo lo que tu vivienda necesite para estar siempre lista."
        photo="assets/photos/dormitorio.jpg"
      />
      <BaseServices/>
      <Extras/>
      <CTABand
        title="¿Quieres el paquete completo para tu vivienda?"
        text="Te preparamos un presupuesto a medida según tu vivienda, tu zona y la frecuencia que necesites."
      />
    </main>
  );
}

function ZonasPage() {
  return (
    <main>
      <PageHero
        eyebrow="Zonas"
        title="Madrid y"
        titleEm="alrededores."
        sub="Operamos en Madrid capital y en toda la sierra, todos los días del año salvo el 25 de diciembre y el 1 de enero. ¿Tu vivienda está fuera de la lista? Pregúntanos: valoramos cada caso."
        photo="assets/photos/piscina-pantano.jpg"
      />
      <Areas/>
      <CTABand
        title="¿Tu vivienda está en nuestra zona?"
        text="Escríbenos con la ubicación y te confirmamos cobertura y presupuesto el mismo día."
      />
    </main>
  );
}

function CasasPage() {
  return (
    <main>
      <PageHero
        eyebrow="Casas"
        title="Las viviendas que"
        titleEm="preparamos."
        sub="Pisos en ciudad, chalets en la sierra, casas con piscina junto al pantano. Una muestra de las casas que dejamos listas para el siguiente huésped — cada una con sus particularidades."
        photo="assets/photos/salon-cocina.jpg"
      />
      <Gallery bare/>
      <CTABand
        title="¿Quieres tu vivienda siempre así de lista?"
        text="Cuéntanos dónde está —una casa o varias— y te preparamos un presupuesto a medida. Sin compromiso."
      />
    </main>
  );
}

// ===== Asesoría energética (segundo formulario: luz/gas) =====
const OPT_ENERGIA = ["Luz", "Gas", "Luz y gas"];
function EnergyForm() {
  const [interes, setInteres] = useState("");
  const [data, setData] = useState({ nombre: "", telefono: "", email: "", suministro: "" });
  const [consent, setConsent] = useState(false);
  const [errors, setErrors] = useState({});
  const [status, setStatus] = useState("idle");
  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const submit = async (ev) => {
    if (ev) ev.preventDefault();
    const e = {};
    if (!interes) e.interes = "Dinos qué te interesa";
    if (!data.nombre.trim()) e.nombre = "Indícanos tu nombre";
    const hasPhone = /^[\d +()-]{6,}$/.test(data.telefono);
    const hasEmail = /^\S+@\S+\.\S+$/.test(data.email);
    if (!hasPhone && !hasEmail) e.contact = "Déjanos un teléfono o un email";
    if (!consent) e.consent = "Necesitamos tu consentimiento para responderte";
    setErrors(e);
    if (Object.keys(e).length) return;
    setStatus("sending");
    await sendToTuris({
      subject: "Presupuesto LUZ/GAS — solicitud desde la web",
      fields: {
        Concepto: "Presupuesto luz / gas (asesoría energética)",
        Interes: interes,
        Nombre: data.nombre,
        Telefono: data.telefono || "—",
        Email: data.email || "—",
        Suministro_actual: data.suministro || "—",
        Consentimiento: consent ? "Sí" : "No",
      },
    });
    setStatus("success");
  };

  return (
    <section className="contact energy" id="energia">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Asesoría energética</span>
            <h2 className="section-title">¿Pagas de más por <em>luz o gas</em>?</h2>
          </div>
          <p className="lead">
            Revisamos tu factura y te buscamos una tarifa mejor para la vivienda.
            Sin compromiso y con un único interlocutor: nosotros. Es un trámite aparte
            de la limpieza, por eso tiene su propio formulario.
          </p>
        </div>
        <div className="quote-wrap reveal">
          <div className="quote-card">
            {status === "success" ? (
              <div className="form-success" style={{padding: "12px 4px"}}>
                <h3>¡Gracias, {data.nombre.split(" ")[0] || "un placer"}!</h3>
                <p>Hemos recibido tu solicitud de presupuesto de {interes.toLowerCase()}. Te contactamos en menos de 24 h con una propuesta para ahorrar en tu factura.</p>
              </div>
            ) : (
              <form className="quote-step" onSubmit={submit} noValidate>
                <h3 className="quote-q">¿Qué te interesa mejorar?</h3>
                <div className="quote-options" style={{marginBottom: 18}}>
                  {OPT_ENERGIA.map((o) => (
                    <button type="button" key={o} className={`quote-opt ${interes === o ? "sel" : ""}`} onClick={() => { setInteres(o); setErrors((x) => ({ ...x, interes: undefined })); }}>{o}</button>
                  ))}
                </div>
                {errors.interes && <span className="err">{errors.interes}</span>}
                <div className={`form-field ${errors.nombre ? "error" : ""}`}>
                  <label htmlFor="e-nombre">Nombre</label>
                  <input id="e-nombre" autoComplete="name" value={data.nombre} onChange={(e) => set("nombre", e.target.value)} placeholder="Tu nombre"/>
                  {errors.nombre && <span className="err">{errors.nombre}</span>}
                </div>
                <div className="form-row">
                  <div className="form-field">
                    <label htmlFor="e-tel">Teléfono</label>
                    <input id="e-tel" type="tel" inputMode="tel" autoComplete="tel" value={data.telefono} onChange={(e) => set("telefono", e.target.value)} placeholder="644 ··· ···"/>
                  </div>
                  <div className="form-field">
                    <label htmlFor="e-email">Email <span className="opt">(o teléfono)</span></label>
                    <input id="e-email" type="email" autoComplete="email" value={data.email} onChange={(e) => set("email", e.target.value)} placeholder="tu@email.com"/>
                  </div>
                </div>
                <div className="form-field">
                  <label htmlFor="e-sum">Compañía actual <span className="opt">(opcional)</span></label>
                  <input id="e-sum" value={data.suministro} onChange={(e) => set("suministro", e.target.value)} placeholder="Ej: Iberdrola, Endesa, Naturgy..."/>
                </div>
                {errors.contact && <span className="err" style={{marginTop: -8, marginBottom: 12, display: "block"}}>{errors.contact}</span>}
                <label className={`quote-consent ${errors.consent ? "error" : ""}`}>
                  <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)}/>
                  <span>He leído y acepto la <a href="#" onClick={(e) => e.preventDefault()}>política de privacidad</a>.</span>
                </label>
                {errors.consent && <span className="err">{errors.consent}</span>}
                <div className="quote-nav" style={{justifyContent: "flex-end"}}>
                  <button type="submit" className="btn btn-primary" disabled={status === "sending"}>
                    {status === "sending" ? "Enviando..." : <>Pedir presupuesto luz/gas <I.arrow/></>}
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactoPage() {
  return (
    <main>
      <Contact/>
      <EnergyForm/>
      <Faq/>
    </main>
  );
}

// ===== App (page router) =====
const PAGES = { home: HomePage, servicios: ServiciosPage, casas: CasasPage, zonas: ZonasPage, contacto: ContactoPage };

function App({ page }) {
  const [drawerOpen, setDrawerOpen] = useState(false);
  useReveal();
  const Page = PAGES[page] || HomePage;
  return (
    <>
      <SketchDefs/>
      <Header onOpenMenu={() => setDrawerOpen(true)} page={page}/>
      <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} page={page}/>
      <Page/>
      <Footer page={page}/>
      <WhatsAppFab/>
    </>
  );
}

const rootEl = document.getElementById("root");
const currentPage = rootEl.dataset.page || "home";
ReactDOM.createRoot(rootEl).render(<App page={currentPage}/>);
