// Main App for Copia de llaves landing
const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp, useMemo } = React;

const PHONE = "641 11 67 13";
const PHONE_RAW = "+34641116713";
const WA_URL = `https://wa.me/${PHONE_RAW.replace("+","")}?text=${encodeURIComponent("Hola, necesito una copia de llave / mando.")}`;
const TEL_URL = `tel:${PHONE_RAW}`;
const MAPS_URL = "https://maps.google.com/?q=C.+Gral.+Espartero+10+La+Solana";

// === NAV ===
const Nav = () => {
  const [scrolled, setScrolled] = useStateApp(false);
  useEffectApp(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? "scrolled" : ""}`}>
      <a href="#top" className="nav-logo">
        <span className="markmark">CL</span>
        <span>
          Copia de llaves
          <small style={{display:"block"}}>La Solana · 24 h</small>
        </span>
      </a>
      <div className="nav-actions">
        <span className="badge-open"><span className="dot"></span>Abierto ahora · 24 h</span>
        <a href={WA_URL} target="_blank" rel="noopener" className="btn btn-ghost btn-icon" aria-label="WhatsApp">
          <Icon name="wa" size={18}/>
        </a>
        <a href={TEL_URL} className="btn btn-primary" aria-label="Llamar">
          <Icon name="phone" size={16}/>
          <span style={{fontVariantNumeric:"tabular-nums"}}>{PHONE}</span>
        </a>
      </div>
    </header>
  );
};

// === HERO ===
const Hero = () => {
  const [scrollY, setScrollY] = useStateApp(0);
  useEffectApp(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const rotation = scrollY * 0.18;
  const parallax = Math.min(scrollY * 0.25, 80);

  return (
    <section className="hero grain" id="top" data-screen-label="01 Hero">
      <div className="hero-bg" style={{ transform: `scale(1.05) translateY(${parallax * 0.4}px)` }}></div>
      <div className="hero-veil"></div>
      <ScrollKey rotation={rotation}/>
      <div className="wrap hero-content">
        <div className="hero-eyebrow">
          <span className="tick"></span>
          <span className="eyebrow">Cerrajero del automóvil · La Solana</span>
        </div>
        <h1 className="display">
          Tu llave de coche,<br/>
          <span className="accent">lista al momento.</span>
        </h1>
        <p className="hero-sub">
          Copias, mandos y programación con chip — en La Solana y toda La Mancha. Llámanos: contestamos a cualquier hora.
        </p>
        <div className="hero-ctas">
          <a href={TEL_URL} className="btn btn-primary btn-lg pulse-ring">
            <Icon name="phone" size={18}/>
            Llamar ahora · {PHONE}
          </a>
          <a href={WA_URL} target="_blank" rel="noopener" className="btn btn-ghost btn-lg">
            <Icon name="wa" size={18}/>
            WhatsApp
          </a>
        </div>
        <div className="hero-pill">
          <span className="stars">★ 5,0</span>
          <span>en Google</span>
          <span className="sep"></span>
          <span style={{display:"inline-flex",alignItems:"center",gap:6}}>
            <span style={{width:7,height:7,borderRadius:"50%",background:"#3DD68C",display:"inline-block"}}></span>
            Abierto 24 h
          </span>
        </div>
      </div>
      <div className="hero-meta">
        <div className="wrap">
          <div className="hero-meta-inner">
            <div>Servicio<span>24 horas, todos los días</span></div>
            <div>Especialidad<span>Llaves y mandos de coche</span></div>
            <div>Cobertura<span>Ciudad Real · Toledo · Albacete</span></div>
            <div>Taller<span>C. Gral. Espartero, 10 — La Solana</span></div>
          </div>
        </div>
      </div>
    </section>
  );
};

// === MARQUEE ===
const Marquee = () => {
  const items = [
    "Llaves de coche", "Mandos a distancia", "Programación con chip",
    "Apertura sin daños", "Llaves perdidas", "Reparación de carcasas",
    "Hogar y comunidad",
  ];
  const row = items.flatMap((t, i) => [
    <span key={`a${i}`}>{t}</span>,
    <span key={`b${i}`} className="muted">{t}</span>,
  ]);
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row}{row}
      </div>
    </div>
  );
};

// === TRUST STRIP ===
const Trust = () => {
  const items = [
    { icon: "key", h: "Especialistas en coche", p: "Llaves clásicas, mandos y chip." },
    { icon: "bolt", h: "Listo en minutos", p: "Sin esperas eternas." },
    { icon: "clock", h: "24 horas", p: "Cuando otros han cerrado." },
    { icon: "pin", h: "Toda La Mancha", p: "Vamos donde estés." },
  ];
  return (
    <div className="trust" data-screen-label="02 Trust">
      <div className="wrap">
        <div className="trust-grid">
          {items.map((it, i) => (
            <div className="trust-item" key={i}>
              <div className="trust-icon"><Icon name={it.icon} size={20}/></div>
              <div>
                <h4>{it.h}</h4>
                <p>{it.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// === SERVICES ===
const Services = () => {
  const services = [
    { n: "01", icon: "key", h: "Copia de llave de coche", p: "Cualquier marca, llave clásica o con chip. Hecha en taller, lista para llevar." },
    { n: "02", icon: "remote", h: "Programación de mando", p: "Reprogramamos o emparejamos mandos nuevos a la centralita de tu coche." },
    { n: "03", icon: "lost", h: "Llaves perdidas", p: "Vamos donde estés y fabricamos una nueva en el sitio. Sin grúa, sin drama." },
    { n: "04", icon: "unlock", h: "Apertura de vehículo", p: "Sin daños. Sin cambiar la cerradura. Sin romper la luna." },
    { n: "05", icon: "wrench", h: "Reparación de llaves y mandos", p: "Carcasas, botones, baterías. Lo dejamos como nuevo." },
    { n: "06", icon: "home", h: "Copias para casa y negocio", p: "Llaves de hogar, garaje, comunidad y oficina." },
  ];
  return (
    <section className="section" id="servicios" data-screen-label="03 Servicios">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">Servicios</span>
          <h2>Lo que hacemos.<br/><span className="accent">Hecho rápido.</span></h2>
          <p>Especialistas en cerrajería del automóvil. Pero también nos ocupamos de tu casa y tu negocio cuando hace falta.</p>
        </div>
        <div className="services-grid">
          {services.map((s, i) => (
            <div className="service-card" key={i}>
              <div className="service-num">{s.n}</div>
              <Icon name={s.icon} size={36} stroke={1.4}/>
              <div className="arrow"><Icon name="arrow" size={20}/></div>
              <h3>{s.h}</h3>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// === HOW WE WORK ===
const HowWeWork = () => {
  const steps = [
    { n: "1", meta: "Paso uno", h: "Llámanos o escríbenos.", p: "Por teléfono o WhatsApp. Cuéntanos qué llave o mando es. Si tienes foto, mejor." },
    { n: "2", meta: "Paso dos", h: "Precio claro al momento.", p: "Sin sorpresas, sin letra pequeña. Si no podemos hacerlo, te lo decimos en el momento." },
    { n: "3", meta: "Paso tres", h: "Vienes al taller — o vamos a ti.", p: "Te lo dejamos listo en minutos. Si te has quedado tirado, salimos donde estés." },
  ];
  return (
    <section className="section" id="como-trabajamos" style={{paddingTop:0}} data-screen-label="04 Cómo trabajamos">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">Cómo trabajamos</span>
          <h2>Tres pasos.<br/>Cero líos.</h2>
        </div>
        <div className="steps-grid">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="step-meta">{s.meta}</div>
              <div className="step-num">{s.n}</div>
              <h4>{s.h}</h4>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// === REVIEWS ===
const reviews = [
  { name: "Pepe", initials: "P", text: "Fui a hacer una copia de llave y me sorprendió lo rápido que la tuvieron lista. El precio fue muy bueno y además me atendieron con mucha amabilidad. Da gusto encontrar sitios así." },
  { name: "yima10", initials: "Y", text: "Un trato genial y muy majo el chico. Tardó muy poco en hacerme una copia para las llaves de mi auto. Lo recomiendo." },
  { name: "Jose Antonio", initials: "JA", text: "Una máquina. La llave en un momento y perfecto funcionamiento, aparte de un precio bastante económico." },
];

const Reviews = () => {
  const [idx, setIdx] = useStateApp(0);
  const timerRef = useRefApp();
  useEffectApp(() => {
    timerRef.current = setInterval(() => setIdx((i) => (i + 1) % reviews.length), 6000);
    return () => clearInterval(timerRef.current);
  }, []);
  const reset = () => { clearInterval(timerRef.current); timerRef.current = setInterval(() => setIdx((i) => (i + 1) % reviews.length), 8000); };
  const r = reviews[idx];
  return (
    <section className="reviews section" id="resenas" data-screen-label="05 Reseñas">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">Reseñas reales · Google</span>
          <h2>5,0 <span className="accent">★</span><br/>en seis reseñas.</h2>
        </div>
        <div className="review-card">
          <div className="review-stars">★★★★★</div>
          <p className="review-text" key={idx}>{r.text}</p>
          <div className="review-author">
            <div className="review-avatar">{r.initials}</div>
            <div>
              <strong>{r.name}</strong>
              <div style={{fontSize:12, color:"var(--muted-2)", fontFamily:"JetBrains Mono, monospace"}}>Cliente verificado · Google</div>
            </div>
          </div>
          <div className="review-controls">
            <div className="review-dots">
              {reviews.map((_, i) => (
                <div key={i} className={`review-dot ${i === idx ? "active" : ""}`} onClick={() => { setIdx(i); reset(); }}/>
              ))}
            </div>
            <div className="review-arrows">
              <button onClick={() => { setIdx((idx - 1 + reviews.length) % reviews.length); reset(); }} aria-label="Anterior"><Icon name="left" size={18}/></button>
              <button onClick={() => { setIdx((idx + 1) % reviews.length); reset(); }} aria-label="Siguiente"><Icon name="right" size={18}/></button>
            </div>
          </div>
          <div className="review-foot">
            <div className="google-badge">
              <Icon name="google" size={20}/>
              <span className="num">5,0 / 5</span>
              <span className="stars">★★★★★</span>
              <span style={{color:"var(--muted)", fontSize:13}}>· 6 reseñas</span>
            </div>
            <a href="https://www.google.com/search?sa=X&sca_esv=31f75f21cab977db&cs=1&hl=es-ES&sxsrf=ANbL-n4XQrUMPeRiYkPVetpVlmKqwu1Rdw:1778424043084&q=Copia+de+llaves+Rese%C3%B1as&rflfq=1&num=20&stick=H4sIAAAAAAAAAONgkxI2MTS1MDS0MLAwMzM0MDK1NDYw2sDI-IpRwjm_IDNRISVVIScnsSy1WCEotTj18MbE4kWsOKUAWvVbVVAAAAA&rldimm=4158118086610259302&tbm=lcl&ved=2ahUKEwiakOTq-a6UAxU_OPsDHV3CAdoQ9fQKegQITRAG&biw=2133&bih=1070&dpr=0.9#lkt=LocalPoiReviews" target="_blank" rel="noopener" style={{color:"var(--bone-2)", fontSize:14, display:"inline-flex", alignItems:"center", gap:6}}>
              Ver todas las reseñas <Icon name="arrow" size={16}/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

// === SERVICE AREA ===
const ServiceArea = () => {
  const towns = [
    "La Solana","Manzanares","Valdepeñas","Tomelloso","Alcázar de San Juan",
    "Daimiel","Puertollano","Almagro","Miguelturra","Bolaños",
    "Membrilla","Argamasilla","Campo de Criptana","Herencia","Socuéllamos",
    "Consuegra","Madridejos","Villarrobledo","La Roda","Quintanar","Villacañas",
    "Carrión","Malagón","Torralba","Ruidera","Munera","Ossa de Montiel",
  ];
  return (
    <section className="section" id="zona" style={{borderTop:"1px solid var(--line)", background:"var(--bg)"}} data-screen-label="06 Zona">
      <div className="wrap">
        <div className="area-wrap">
          <div className="area-map">
            <ServiceMap/>
          </div>
          <div>
            <span className="eyebrow">Zona de servicio</span>
            <h2 style={{fontSize:"clamp(36px, 5vw, 64px)", fontWeight:800, letterSpacing:"-0.03em", lineHeight:0.95, marginTop:12}}>
              Trabajamos en <span style={{color:"var(--yellow)"}}>toda La Mancha</span>.
            </h2>
            <p style={{color:"var(--muted)", marginTop:16, fontSize:16, lineHeight:1.55, maxWidth:480}}>
              Salimos desde La Solana. Nos movemos por Ciudad Real, Toledo y Albacete. Si tu pueblo no está en la lista, llámanos igualmente.
            </p>
            <ul className="area-list" style={{marginTop:32}}>
              {towns.map((t) => <li key={t}>{t}</li>)}
              <li className="more">y alrededores…</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

// === GALLERY ===
const Gallery = () => {
  const items = [
    { src: "fotos/foto-1.jpg", tag: "Bodegón · Mandos" },
    { src: "fotos/foto-9.jpg", tag: "Kia · BMW" },
    { src: "fotos/foto-2.jpg", tag: "VW Golf rojo" },
    { src: "fotos/foto-7.jpg", tag: "Volvo XC60" },
    { src: "fotos/foto-3.jpg", tag: "VW · llave plegable" },
    { src: "fotos/foto-5.jpg", tag: "Mandos surtidos" },
  ];
  return (
    <section className="section" id="galeria" style={{paddingTop:0}} data-screen-label="07 Galería">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">Galería</span>
          <h2>El día a día <br/>en el taller.</h2>
        </div>
        <div className="gallery-grid">
          {items.map((it, i) => (
            <div className="gallery-item" key={i}>
              <img src={it.src} alt={it.tag} loading="lazy"/>
              <span className="tag">{it.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// === FINAL CTA ===
const FinalCTA = () => (
  <section className="final-cta grain" id="cta" data-screen-label="08 CTA final">
    <div className="final-cta-bg"></div>
    <div className="final-cta-veil"></div>
    <div className="wrap final-cta-inner">
      <span className="eyebrow" style={{color:"var(--yellow)"}}>Estás a una llamada</span>
      <h2>
        ¿Te quedaste sin llave?<br/>
        <span className="accent">Llámanos a cualquier hora.</span>
      </h2>
      <a href={TEL_URL} className="big-phone pulse-ring">
        <span className="big-phone-icon"><Icon name="phone" size={22}/></span>
        {PHONE}
      </a>
      <p className="final-meta">
        <strong>También por WhatsApp.</strong> 24 horas. La Solana — y toda La Mancha. Si te has quedado tirado en mitad de la noche, contestamos.
      </p>
    </div>
  </section>
);

// === FOOTER ===
const Footer = () => (
  <footer className="footer">
    <div className="wrap">
      <div className="footer-grid">
        <div className="footer-brand">
          <div className="nav-logo" style={{fontSize:18}}>
            <span className="markmark">CL</span>
            <span>Copia de llaves</span>
          </div>
          <p>Cerrajero del automóvil en La Solana, Ciudad Real. Llaves, mandos y aperturas — 24 horas.</p>
        </div>
        <div>
          <h5>Contacto</h5>
          <ul>
            <li><a href={TEL_URL}>{PHONE}</a></li>
            <li><a href={WA_URL} target="_blank" rel="noopener">WhatsApp</a></li>
            <li><a href={MAPS_URL} target="_blank" rel="noopener">Cómo llegar</a></li>
          </ul>
        </div>
        <div>
          <h5>Taller</h5>
          <ul>
            <li>C. Gral. Espartero, 10</li>
            <li>13240 La Solana</li>
            <li>Ciudad Real</li>
          </ul>
        </div>
        <div>
          <h5>Horario</h5>
          <ul>
            <li>Abierto 24 horas</li>
            <li>Todos los días</li>
            <li><a href="#">Aviso legal</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Copia de llaves · La Solana</span>
        <span>Diseñado con cariño en La Mancha</span>
      </div>
    </div>
  </footer>
);

// === FLOATING MOBILE CTA ===
const FloatCTA = () => (
  <div className="float-cta">
    <a href={TEL_URL} className="call">
      <Icon name="phone" size={18}/>
      Llamar · {PHONE}
    </a>
    <a href={WA_URL} target="_blank" rel="noopener" className="wa" aria-label="WhatsApp">
      <Icon name="wa" size={20}/>
    </a>
  </div>
);

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

// === APP ===
const App = () => {
  useReveal();
  return (
    <>
      <Nav/>
      <Hero/>
      <Marquee/>
      <Trust/>
      <Services/>
      <HowWeWork/>
      <Reviews/>
      <ServiceArea/>
      <Gallery/>
      <FinalCTA/>
      <Footer/>
      <FloatCTA/>
    </>
  );
};

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