/* =========================================================
   Secciones top (rev. usuario):
   - Hero con H1 "Inmobiliaria en Torrevieja y Orihuela Costa"
   - HousePanel: panel forma de casa
   - BlueBubble: bocadillo azul "¿Cuánto vale tu vivienda?"
   ========================================================= */

const HERO_BG = "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1800&q=80";

/* ---------- Hero ---------- */
function Hero() {
  return (
    <section className="hero" aria-label="Hero" style={{ padding: "8px 0px 50px" }}>
      <div className="container">
        <div className="hero__frame">
          <img className="hero__bg" src={HERO_BG} alt="Vivienda mediterránea en Torrevieja y Orihuela Costa" />
          <div className="hero__overlay" />
          <div className="hero__content">
            <span className="hero__overline">Costa Blanca Sur · Alicante</span>
            <h1 className="hero__title">
              Inmobiliaria en Torrevieja<br />y <span className="hl">Orihuela Costa</span>
            </h1>
            <p className="hero__sub">
              Encuentra tu próxima casa o pide tu valoración. Equipo local. Marketing de verdad. Tecnología IA propia.
            </p>
          </div>
          <SearchBar />
        </div>
      </div>
    </section>);

}

function SearchBar() {
  return (
    <div className="search-bar">
      <div className="search-bar__inner">
        <div className="search-field">
          <span className="search-field__label">PRECIO</span>
          <div className="search-field__select">
            <span style={{ color: "var(--fg-tertiary)", fontWeight: 500 }}>Selecciona</span>
            <Icon name="chevron-down" size={16} />
          </div>
        </div>
        <div className="search-field">
          <span className="search-field__label">Zona</span>
          <div className="search-field__select">
            Torrevieja
            <Icon name="chevron-down" size={16} />
          </div>
        </div>
        <div className="search-field">
          <span className="search-field__label">Tipo</span>
          <div className="search-field__select" style={{ color: "rgb(20, 28, 20)" }}>
            Cualquiera
            <Icon name="chevron-down" size={16} />
          </div>
        </div>
        <button className="search-bar__cta">
          <Icon name="search" size={16} />
          Buscar
        </button>
      </div>
    </div>);

}

/* ---------- Sec 2: HousePanel (imagen real de casa con foto + texto) ---------- */
function HousePanel() {
  const [videoOpen, setVideoOpen] = useState(false);
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el || visible) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setVisible(true);
          obs.disconnect();
        }
      });
    }, { threshold: 0.18 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [visible]);
  return (
    <section ref={ref} className={"section section--gap60" + (visible ? " is-in" : "")} aria-label="Tu vivienda merece una estrategia" style={{ textAlign: "left", padding: "50px 0px", opacity: "1" }}>
      <div className="container" style={{ padding: "0px" }}>
        <div className="housesec" style={{ padding: "0px", height: "582px", margin: "0 auto", textAlign: "left" }}>
          <div className="housesec__media">
            <img className="housesec__bg" src="assets/house-bg.png" alt="" aria-hidden="true" />
            <img className="housesec__img" src="assets/house-photo.png" alt="Casa simbólica con vista urbana y vídeo de presentación de Innovaria" style={{ width: "580px", padding: "0px", borderWidth: "0px", borderStyle: "solid", borderRadius: "0px", opacity: "1", margin: "-1px" }} />

            <button
              className="housesec__play"
              type="button"
              aria-label="Reproducir vídeo intro"
              onClick={() => setVideoOpen(true)}>
              
              <svg className="housesec__play-ring" viewBox="0 0 200 200" aria-hidden="true">
                <defs>
                  <path
                    id="playRingPath"
                    d="M 100,100 m -78,0 a 78,78 0 1,1 156,0 a 78,78 0 1,1 -156,0" />
                  
                </defs>
                <text fill="#ffffff" fontFamily="Plus Jakarta Sans" fontSize="16" fontWeight="700" letterSpacing="4">
                  <textPath href="#playRingPath" startOffset="0">
                    PLAY INTRO VIDEO · PLAY INTRO VIDEO · 
                  </textPath>
                </text>
              </svg>
              <span className="housesec__play-center">
                <Icon name="play" size={22} strokeWidth={2.4} />
              </span>
            </button>

            <div className="housesec__badge housesec__badge--google">
              <img src="assets/badge-google-rating.webp" alt="Valoración 4.9 sobre 5 en Google" />
            </div>
          </div>

          <div className="housesec__content" style={{ textAlign: "left", width: "580px", height: "545px" }}>
            <span className="eyebrow">Sobre Innovaria</span>
            <h2 style={{ color: "rgb(20, 28, 20)" }}>
              Nuestro método, en 3 <span className="hl">promesas firmadas</span>.
            </h2>
            <p>
              Aplicamos inteligencia artificial para presentar y difundir tu casa mejor que nadie, con transparencia total: el precio anunciado es el precio final, tu exclusiva se comparte con toda la red MLS y cada servicio va por contrato.
            </p>

            <div className="housesec__bullets">
              <div className="housesec__bullet">
                <span className="housesec__bullet-icon" style={{ backgroundColor: "rgb(8, 56, 26)" }}><Icon name="check" size={14} strokeWidth={3} /></span>
                <span className="housesec__bullet-text" style={{ color: "rgb(20, 28, 20)" }}>Precio anunciado igual a precio final, sin comisión añadida al comprador.</span>
              </div>
              <div className="housesec__bullet">
                <span className="housesec__bullet-icon" style={{ backgroundColor: "rgb(8, 56, 26)" }}><Icon name="check" size={14} strokeWidth={3} /></span>
                <span className="housesec__bullet-text" style={{ color: "rgb(20, 28, 20)" }}>Exclusiva compartida con toda la red MLS y un único interlocutor.</span>
              </div>
              <div className="housesec__bullet">
                <span className="housesec__bullet-icon" style={{ backgroundColor: "rgb(8, 56, 26)" }}><Icon name="check" size={14} strokeWidth={3} /></span>
                <span className="housesec__bullet-text" style={{ color: "rgb(20, 28, 20)" }}>Servicios garantizados por contrato. Si no cumplimos, no te obliga a ti.</span>
              </div>
            </div>

            <div className="housesec__ctas">
              <Button variant="primary" iconRight="arrow-right" as="a" href="valorar-mi-casa-gratis.html">
                Valorar mi casa gratis
              </Button>
              <Button variant="ghost" icon="play" as="a" href="#" onClick={(e) => {e.preventDefault();setVideoOpen(true);}}>
                Cómo vendemos
              </Button>
            </div>
          </div>
        </div>
      </div>

      {videoOpen && <VideoModal videoId="qS4hxRwzmJA" onClose={() => setVideoOpen(false)} />}
    </section>);

}

/* ---------- VideoModal: YouTube popup ---------- */
function VideoModal({ videoId, onClose }) {
  useEffect(() => {
    const onKey = (e) => {if (e.key === "Escape") onClose();};
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, [onClose]);
  return (
    <div className="video-modal-overlay" role="dialog" aria-modal="true" onClick={onClose}>
      <div className="video-modal" onClick={(e) => e.stopPropagation()}>
        <button className="video-modal__close" type="button" aria-label="Cerrar" onClick={onClose}>
          <Icon name="x" size={20} />
        </button>
        <iframe
          src={`https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&playsinline=1`}
          title="Vídeo intro Innovaria"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowFullScreen
          referrerPolicy="strict-origin-when-cross-origin" />
        
      </div>
    </div>);

}

/* ---------- Sec 3: HandHouseBanner (¿Cuánto vale tu vivienda?) ---------- */
function BlueBubble() {
  return (
    <section className="section section--tight section--gap60" id="valoracion" aria-label="Valoración gratuita">
      <div className="container" style={{ height: "443px", padding: "0px 30px", margin: "0 auto" }}>
        <div className="handhouse" style={{ height: "420px", maxWidth: "100%", padding: "65px 96px 88px", width: "1900px", margin: "0 auto" }}>
          <div className="handhouse__content">
            <span className="handhouse__eyebrow">Valoración gratuita</span>
            <h2>
              ¿Cuánto vale tu <span className="hl">vivienda</span>?
            </h2>
            <p>
              Solicita un estudio de mercado gratuito y descubre el precio recomendado para vender tu propiedad en Torrevieja con garantías. Respuesta en 24 horas, sin compromiso y con un rango de precio realista basado en datos.
            </p>
            <div className="handhouse__ctas">
              <Button variant="light" iconRight="arrow-right" as="a" href="valorar-mi-casa-gratis.html">
                Valorar mi casa gratis
              </Button>
              <Button variant="ghost-light" icon="phone" as="a" href="tel:+34604494089">
                604 49 40 89
              </Button>
            </div>
          </div>
          <img
            className="handhouse__img"
            src="assets/hand-house.png"
            alt="Mano sosteniendo una casa en miniatura" />
          
        </div>
      </div>
    </section>);

}

/* ---------- HOME · Why Innovaria intro (estilo findrealestate.com — small left / big two-tone right) ---------- */
function HomeWhyIntro() {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const el = ref.current;
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            el.classList.add("is-visible");
            observer.unobserve(el);
          }
        });
      },
      { threshold: 0.35 }
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, []);
  return (
    <section ref={ref} className="home-why" aria-label="Por qué Innovaria">
      <div className="container home-why__inner">
        <span className="home-why__label">¿Por qué Innovaria?</span>
        <h2 className="home-why__copy">
          <span className="home-why__lead">Tu vida está cambiando. No te limites a encontrar un lugar: encuentra lo que buscas.</span>
          <span className="home-why__rest"> Te ayudamos a avanzar con claridad, confianza, y el agente adecuado a tu lado.</span>
        </h2>
      </div>
    </section>);

}

Object.assign(window, { Hero, SearchBar, HousePanel, BlueBubble, VideoModal, HomeWhyIntro });