/* =========================================================
   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={t("home.hero.aria")} style={{ padding: "8px 0px 50px" }}>
      <div className="container">
        <div className="hero__frame">
          <img className="hero__bg" src={HERO_BG} alt={t("home.hero.bg_alt")} />
          <div className="hero__overlay" />
          <div className="hero__content">
            <span className="hero__overline">{t("home.hero.overline")}</span>
            <h1 className="hero__title" dangerouslySetInnerHTML={{ __html: t("home.hero.title_html") }} />
            <p className="hero__sub">
              {t("home.hero.sub")}
            </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">{t("home.searchBar.label_price")}</span>
          <div className="search-field__select">
            <span style={{ color: "var(--fg-tertiary)", fontWeight: 500 }}>{t("home.searchBar.placeholder_select")}</span>
            <Icon name="chevron-down" size={16} />
          </div>
        </div>
        <div className="search-field">
          <span className="search-field__label">{t("home.searchBar.label_zone")}</span>
          <div className="search-field__select">
            Torrevieja
            <Icon name="chevron-down" size={16} />
          </div>
        </div>
        <div className="search-field">
          <span className="search-field__label">{t("home.searchBar.label_type")}</span>
          <div className="search-field__select" style={{ color: "rgb(20, 28, 20)" }}>
            {t("home.searchBar.type_any")}
            <Icon name="chevron-down" size={16} />
          </div>
        </div>
        <button className="search-bar__cta">
          <Icon name="search" size={16} />
          {t("home.searchBar.cta_search")}
        </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={t("home.housePanel.aria")} 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={t("home.housePanel.img_alt")} style={{ width: "580px", padding: "0px", borderWidth: "0px", borderStyle: "solid", borderRadius: "0px", opacity: "1", margin: "-1px" }} />

            <button
              className="housesec__play"
              type="button"
              aria-label={t("home.housePanel.play_aria")}
              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">
                    {t("home.housePanel.play_ring")}
                  </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={t("home.housePanel.google_badge_alt")} />
            </div>
          </div>

          <div className="housesec__content" style={{ textAlign: "left", width: "580px", height: "545px" }}>
            <span className="eyebrow">{t("home.housePanel.eyebrow")}</span>
            <h2 style={{ color: "rgb(20, 28, 20)" }} dangerouslySetInnerHTML={{ __html: t("home.housePanel.h2_html") }} />
            <p>
              {t("home.housePanel.intro")}
            </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)" }}>{t("home.housePanel.bullet_1")}</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)" }}>{t("home.housePanel.bullet_2")}</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)" }}>{t("home.housePanel.bullet_3")}</span>
              </div>
            </div>

            <div className="housesec__ctas">
              <Button variant="primary" iconRight="arrow-right" as="a" href="valorar-mi-casa-gratis.html">
                {t("common.nav.cta_valorar")}
              </Button>
              <Button variant="ghost" icon="play" as="a" href="#" onClick={(e) => {e.preventDefault();setVideoOpen(true);}}>
                {t("home.housePanel.cta_method")}
              </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={t("common.action.close")} onClick={onClose}>
          <Icon name="x" size={20} />
        </button>
        <iframe
          src={`https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&playsinline=1`}
          title={t("home.videoModal.iframe_title")}
          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={t("home.blueBubble.aria")}>
      <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">{t("home.blueBubble.eyebrow")}</span>
            <h2 dangerouslySetInnerHTML={{ __html: t("home.blueBubble.h2_html") }} />
            <p>
              {t("home.blueBubble.intro")}
            </p>
            <div className="handhouse__ctas">
              <Button variant="light" iconRight="arrow-right" as="a" href="valorar-mi-casa-gratis.html">
                {t("common.nav.cta_valorar")}
              </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={t("home.blueBubble.img_alt")} />

        </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={t("home.whyIntro.aria")}>
      <div className="container home-why__inner">
        <span className="home-why__label">{t("home.whyIntro.label")}</span>
        <h2 className="home-why__copy">
          <span className="home-why__lead">{t("home.whyIntro.lead")}</span>
          <span className="home-why__rest">{t("home.whyIntro.rest")}</span>
        </h2>
      </div>
    </section>);

}

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