﻿/* =========================================================
   Innovaria — primitives + Nav + Footer
   ========================================================= */
const { useState, useEffect, useRef } = React;

/* ---------- Icon helper (Lucide) ----------
   Each Icon renders an <i data-lucide> inside a React-managed <span>,
   then we call lucide.createIcons() to replace the <i> with an <svg>.
   Wrapping in a span means React only reconciles the span (stable),
   so the svg inside survives re-renders cleanly. */
function Icon({ name, size = 16, strokeWidth = 1.5, className }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current || !window.lucide) return;
    ref.current.innerHTML =
    `<i data-lucide="${name}" width="${size}" height="${size}" stroke-width="${strokeWidth}"></i>`;
    window.lucide.createIcons();
  }, [name, size, strokeWidth]);
  return (
    <span
      ref={ref}
      className={className}
      style={{ display: "inline-flex", width: size, height: size, lineHeight: 0 }} />);


}

/* ---------- Inline brand SVGs (Lucide removed brand icons) ---------- */
function SocialIcon({ kind, size = 14 }) {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor" };
  if (kind === "instagram") return (
    <svg {...common} aria-hidden="true">
      <path d="M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8c.1-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.2 0-3.5 0-4.7.1-1.1.1-1.7.3-2.1.4-.5.2-.9.4-1.3.8-.4.4-.6.8-.8 1.3-.1.4-.3 1-.4 2.1-.1 1.2-.1 1.5-.1 4.7s0 3.5.1 4.7c.1 1.1.3 1.7.4 2.1.2.5.4.9.8 1.3.4.4.8.6 1.3.8.4.1 1 .3 2.1.4 1.2.1 1.5.1 4.7.1s3.5 0 4.7-.1c1.1-.1 1.7-.3 2.1-.4.5-.2.9-.4 1.3-.8.4-.4.6-.8.8-1.3.1-.4.3-1 .4-2.1.1-1.2.1-1.5.1-4.7s0-3.5-.1-4.7c-.1-1.1-.3-1.7-.4-2.1-.2-.5-.4-.9-.8-1.3-.4-.4-.8-.6-1.3-.8-.4-.1-1-.3-2.1-.4-1.2-.1-1.5-.1-4.7-.1zm0 3.1a5 5 0 100 9.9 5 5 0 000-9.9zm0 8.2A3.2 3.2 0 1112 8.7a3.2 3.2 0 010 6.6zm5.2-8.3a1.1 1.1 0 100 2.3 1.1 1.1 0 000-2.3z" />
    </svg>);

  if (kind === "facebook") return (
    <svg {...common} aria-hidden="true">
      <path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06C2 17.08 5.66 21.24 10.44 22v-7.03H7.9v-2.91h2.54V9.85c0-2.51 1.49-3.9 3.77-3.9 1.09 0 2.24.2 2.24.2v2.47h-1.26c-1.24 0-1.63.78-1.63 1.57v1.88h2.78l-.45 2.91h-2.33V22C18.34 21.24 22 17.08 22 12.06z" />
    </svg>);

  if (kind === "youtube") return (
    <svg {...common} aria-hidden="true">
      <path d="M23.5 6.2a3 3 0 00-2.1-2.1C19.6 3.6 12 3.6 12 3.6s-7.6 0-9.4.5A3 3 0 00.5 6.2 31 31 0 000 12a31 31 0 00.5 5.8 3 3 0 002.1 2.1c1.8.5 9.4.5 9.4.5s7.6 0 9.4-.5a3 3 0 002.1-2.1A31 31 0 0024 12a31 31 0 00-.5-5.8zM9.6 15.6V8.4l6.3 3.6-6.3 3.6z" />
    </svg>);

  if (kind === "linkedin") return (
    <svg {...common} aria-hidden="true">
      <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5V9h3v10zM6.5 7.6A1.7 1.7 0 116.5 4a1.7 1.7 0 010 3.5zM19 19h-3v-5.3c0-1.3-.5-2-1.6-2-1.2 0-1.9.8-1.9 2V19h-3V9h2.9v1.3c.5-.8 1.6-1.5 3-1.5 2.2 0 3.6 1.4 3.6 4.2V19z" />
    </svg>);

  return null;
}

/* ---------- Button ---------- */
function Button({ variant = "primary", size = "md", icon, iconRight, children, as = "button", ...rest }) {
  const cls = ["btn", `btn--${variant}`, size === "sm" && "btn--sm"].filter(Boolean).join(" ");
  const Comp = as;
  return (
    <Comp className={cls} {...rest}>
      {icon && <Icon name={icon} size={18} />}
      {children}
      {iconRight && <Icon name={iconRight} size={18} />}
    </Comp>);

}

/* ---------- Utility bar ---------- */
function UtilityBar() {
  return (
    <div className="utility-bar">
      <div className="container">
        <ul className="utility-list">
          <li className="utility-item"><Icon name="phone" size={14} /> +34 604 49 40 89</li>
          <li className="utility-item"><Icon name="mail" size={14} /> hola@innovaria.es</li>
        </ul>
        <div className="utility-account">
          <a href="#login" className="utility-account__signin">
            <Icon name="user" size={14} />
            <span><strong>Iniciar sesión</strong> o Registrarse</span>
          </a>
          <div className="utility-account__socials">
            <a href="#" aria-label="Facebook"><SocialIcon kind="facebook" size={13} /></a>
            <a href="#" aria-label="Instagram"><SocialIcon kind="instagram" size={13} /></a>
            <a href="#" aria-label="YouTube"><SocialIcon kind="youtube" size={13} /></a>
            <a href="#" aria-label="LinkedIn"><SocialIcon kind="linkedin" size={13} /></a>
          </div>
        </div>
      </div>
    </div>);

}

/* ---------- Nav ---------- */
function Nav() {
  const [menuOpen, setMenuOpen] = useState(false);
  const [langOpen, setLangOpen] = useState(false);
  const [lang, setLang] = useState("ES");
  useEffect(() => {
    if (menuOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    const onKey = (e) => {
      if (e.key === "Escape") {
        setMenuOpen(false);
        setLangOpen(false);
      }
    };
    const onClickOutside = (e) => {
      if (!e.target.closest || !e.target.closest(".nav__lang")) {
        setLangOpen(false);
      }
    };
    window.addEventListener("keydown", onKey);
    window.addEventListener("click", onClickOutside);
    return () => {
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("click", onClickOutside);
      document.body.style.overflow = "";
    };
  }, [menuOpen]);

  return (
    <div className="nav-wrap">
      <div className="container">
        <nav className="nav" aria-label="Principal" style={{ height: "83px" }}>
          <a href="home.html" className="nav__logo" aria-label="Innovaria — Inicio">
            <img src="assets/innovaria-logo.png" alt="Innovaria" style={{ width: "119px", height: "50px" }} />
          </a>
          <div className="nav__links">
            <a href="home.html" className="is-active">Inicio</a>
            <a href="quiero-vender.html">Quiero Vender</a>
            <a href="quiero-comprar.html">Quiero Comprar</a>
            <a href="por-que-innovaria.html">¿Por Qué Innovaria?</a>
            <a href="contacto.html">Contacto</a>
          </div>
          <div className="nav__right">
            <div className="nav__lang">
              <button
                type="button"
                className="nav__circle"
                aria-label="Cambiar idioma"
                aria-haspopup="listbox"
                aria-expanded={langOpen}
                onClick={() => setLangOpen((v) => !v)}>
                <Icon name="globe" size={18} />
              </button>
              {langOpen && (
                <ul className="nav__lang-menu" role="listbox">
                  {[
                    { code: "ES", label: "Español" },
                    { code: "EN", label: "English" },
                    { code: "DE", label: "Deutsch" },
                    { code: "FR", label: "Français" },
                    { code: "RU", label: "Русский" },
                  ].map((l) => (
                    <li key={l.code} role="option">
                      <button
                        type="button"
                        className={"nav__lang-item" + (lang === l.code ? " is-active" : "")}
                        onClick={() => { setLang(l.code); setLangOpen(false); }}>
                        <span className="nav__lang-code">{l.code}</span>
                        <span className="nav__lang-label">{l.label}</span>
                      </button>
                    </li>
                  ))}
                </ul>
              )}
            </div>
            <a href="login.html" className="nav__circle" aria-label="Mi cuenta">
              <Icon name="user" size={18} />
            </a>
            <a href="valorar-mi-casa-gratis.html" className="nav__cta">
              <Icon name="home" size={16} />
              <span>Valorar mi casa gratis</span>
            </a>
            <button
              className="icon-btn nav__burger"
              aria-label={menuOpen ? "Cerrar menú" : "Abrir menú"}
              aria-expanded={menuOpen}
              onClick={() => setMenuOpen((v) => !v)}>
              <Icon name={menuOpen ? "x" : "menu"} size={20} />
            </button>
          </div>
        </nav>
      </div>

      {/* Mobile drawer */}
      <div
        className={"nav-drawer" + (menuOpen ? " is-open" : "")}
        aria-hidden={!menuOpen}
        onClick={(e) => { if (e.target === e.currentTarget) setMenuOpen(false); }}
      >
        <div className="nav-drawer__panel">
          <div className="nav-drawer__top">
            <a href="home.html" className="nav-drawer__logo" onClick={() => setMenuOpen(false)} aria-label="Innovaria — Inicio">
              <img src="assets/innovaria-logo.png" alt="Innovaria" style={{ height: "44px", width: "auto" }} />
            </a>
            <button
              className="icon-btn nav-drawer__close"
              aria-label="Cerrar menú"
              onClick={() => setMenuOpen(false)}>
              <Icon name="x" size={20} />
            </button>
          </div>

          <nav className="nav-drawer__links" aria-label="Menú móvil">
            <a href="home.html" className="is-active" onClick={() => setMenuOpen(false)}>Inicio</a>
            <a href="quiero-vender.html" onClick={() => setMenuOpen(false)}>Quiero Vender</a>
            <a href="quiero-comprar.html" onClick={() => setMenuOpen(false)}>Quiero Comprar</a>
            <a href="por-que-innovaria.html" onClick={() => setMenuOpen(false)}>¿Por Qué Innovaria?</a>
            <a href="contacto.html" onClick={() => setMenuOpen(false)}>Contacto</a>
          </nav>

          <div className="nav-drawer__cta">
            <Button variant="primary" iconRight="arrow-right" as="a" href="valorar-mi-casa-gratis.html" onClick={() => setMenuOpen(false)}>
              Valorar mi casa gratis
            </Button>
          </div>

          <div className="nav-drawer__contact">
            <a href="tel:+34604494089" className="nav-drawer__contact-item">
              <Icon name="phone" size={16} />
              +34 604 49 40 89
            </a>
            <a href="mailto:hola@innovaria.es" className="nav-drawer__contact-item">
              <Icon name="mail" size={16} />
              hola@innovaria.es
            </a>
          </div>

          <div className="nav-drawer__socials">
            <a href="#" aria-label="Facebook"><SocialIcon kind="facebook" size={16} /></a>
            <a href="#" aria-label="Instagram"><SocialIcon kind="instagram" size={16} /></a>
            <a href="#" aria-label="YouTube"><SocialIcon kind="youtube" size={16} /></a>
            <a href="#" aria-label="LinkedIn"><SocialIcon kind="linkedin" size={16} /></a>
          </div>
        </div>
      </div>
    </div>);

}

/* ---------- Site header (wraps utility + nav, toggles scrolled state) ---------- */
function SiteHeader() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    // Hysteresis: activate at 80, deactivate at 30 → no flicker around the threshold
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled((prev) => {
        if (!prev && y > 80) return true;
        if (prev && y < 30) return false;
        return prev;
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"site-header" + (scrolled ? " is-scrolled" : "")}>
      <UtilityBar />
      <Nav />
    </header>);

}

/* ---------- Site header v2 — always white, no top utility bar ----------
   Variant used for pages where we want a solid, simple header from the start
   (e.g. property detail page). */
function SiteHeader2() {
  return (
    <header className="site-header site-header--v2 is-scrolled">
      <Nav />
    </header>);

}

/* ---------- Site header v3 — like v2 (always white) but WITH top utility bar.
   Usado en /panel (dashboard) y otras páginas autenticadas donde queremos
   mantener el topbar de contacto siempre visible. La CSS que pliega el
   utility-bar cuando .is-scrolled vive en styles.css; en auth.css forzamos
   que se mantenga visible para .site-header--v3. */
function SiteHeader3() {
  return (
    <header className="site-header site-header--v3 is-scrolled">
      <UtilityBar />
      <Nav />
    </header>);

}

/* ---------- Footer ---------- */
function Footer() {
  // Reveal-on-scroll effect with subtle parallax:
  // - Measure footer height and expose as CSS var so body can reserve
  //   scrollable space below main.
  // - Translate the footer up as the user approaches the bottom of the
  //   document, so it rises gradually (parallax — moves slower than main).
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const applyHeight = () => {
      document.documentElement.style.setProperty(
        "--footer-real-height", el.offsetHeight + "px"
      );
    };
    applyHeight();
    const ro = new ResizeObserver(applyHeight);
    ro.observe(el);

    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = 0;
        const fh = el.offsetHeight;
        const docH = document.documentElement.scrollHeight;
        const vh = window.innerHeight;
        const maxScroll = docH - vh;
        const clamped = Math.max(0, Math.min(maxScroll, window.scrollY));
        const remaining = Math.max(0, maxScroll - clamped);
        const zone = fh * 1.2;
        const progress = remaining >= zone ? 0 : 1 - remaining / zone;
        const translateY = (1 - progress) * fh * 0.7;
        el.style.transform = `translate3d(0, ${translateY.toFixed(1)}px, 0)`;
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);

    return () => {
      ro.disconnect();
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);
  return (
    <footer className="footer footer--reveal" ref={ref} id="contacto">
      {/* ROW 1: Logo + description + socials  |  Newsletter */}
      <div className="footer__hero">
        <div className="container">
          <div className="footer__hero-grid" style={{ maxWidth: "1500px", margin: "0 auto" }}>
            <div className="footer__brand">
              <img src="assets/innovaria-logo-negative.png" alt="Innovaria Real Estate" style={{ height: "56px", width: "auto", opacity: 0.98 }} />
              <p className="footer__about">
                Inmobiliaria en Torrevieja y Orihuela Costa. Vendemos tu casa con estrategia, transparencia y la primera IA aplicada de verdad al sector.
              </p>
              <div className="footer__socials">
                <a href="#" aria-label="Facebook"><SocialIcon kind="facebook" size={16} /></a>
                <a href="#" aria-label="Instagram"><SocialIcon kind="instagram" size={16} /></a>
                <a href="#" aria-label="LinkedIn"><SocialIcon kind="linkedin" size={16} /></a>
                <a href="#" aria-label="YouTube"><SocialIcon kind="youtube" size={16} /></a>
              </div>
            </div>

            <div className="footer__newsletter" style={{ width: "1112px" }}>
              <div className="footer__newsletter-text">
                <div className="newsletter__title">Recibe nuestra revista inmobiliaria</div>
                <div className="newsletter__sub">Una vez al trimestre, sin spam. Solo lo útil para vender mejor tu casa en Torrevieja u Orihuela Costa.</div>
              </div>
              <form className="footer__newsletter-form" onSubmit={(e) => e.preventDefault()}>
                <input type="email" placeholder="Tu correo electrónico" aria-label="Correo electrónico" />
                <button type="submit">Suscribirme</button>
              </form>
            </div>
          </div>
        </div>
      </div>

      {/* ROW 2: Contact Info | Enlaces | Zonas | Legal */}
      <div className="footer__top">
        <div className="container">
          <div className="footer__cols" style={{ maxWidth: "1500px", padding: "69px 0px 72px", margin: "0px 14px 0px 91px" }}>
            <div className="footer__col footer__col--contact">
              <h4>Contacto</h4>
              <div className="footer__contact">
                <div className="footer__contact-item">
                  <span className="footer__contact-icon"><Icon name="phone" size={18} /></span>
                  <a href="tel:+34604494089">+34 604 49 40 89</a>
                </div>
                <div className="footer__contact-item">
                  <span className="footer__contact-icon"><Icon name="mail" size={18} /></span>
                  <a href="mailto:hola@innovaria.es">hola@innovaria.es</a>
                </div>
                <div className="footer__contact-item">
                  <span className="footer__contact-icon"><Icon name="map-pin" size={18} /></span>
                  <span>Calle Ramón y Cajal 45<br />03182 Torrevieja, Alicante</span>
                </div>
              </div>
            </div>

            <div className="footer__col">
              <h4>Enlaces</h4>
              <ul>
                <li><a href="quiero-vender.html"><Icon name="arrow-right" size={12} /> Quiero Vender</a></li>
                <li><a href="quiero-comprar.html"><Icon name="arrow-right" size={12} /> Quiero Comprar</a></li>
                <li><a href="valorar-mi-casa-gratis.html"><Icon name="arrow-right" size={12} /> Valoración gratuita</a></li>
                <li><a href="ia-aplicada.html"><Icon name="arrow-right" size={12} /> IA aplicada</a></li>
                <li><a href="por-que-innovaria.html"><Icon name="arrow-right" size={12} /> ¿Por Qué Innovaria?</a></li>
                <li><a href="blog.html"><Icon name="arrow-right" size={12} /> Blog y Prensa</a></li>
              </ul>
            </div>

            <div className="footer__col">
              <h4>Zonas</h4>
              <ul>
                <li><a href="zona.html?zona=torrevieja-centro"><Icon name="arrow-right" size={12} /> Torrevieja Centro</a></li>
                <li><a href="zona.html?zona=playa-del-cura"><Icon name="arrow-right" size={12} /> Playa del Cura</a></li>
                <li><a href="zona.html?zona=playa-de-la-mata"><Icon name="arrow-right" size={12} /> Playa de la Mata</a></li>
                <li><a href="zona.html?zona=punta-prima"><Icon name="arrow-right" size={12} /> Punta Prima</a></li>
                <li><a href="zona.html?zona=los-balcones"><Icon name="arrow-right" size={12} /> Los Balcones</a></li>
                <li><a href="zona.html?zona=los-frutales"><Icon name="arrow-right" size={12} /> Los Frutales</a></li>
              </ul>
            </div>

            <div className="footer__col">
              <h4>Legal</h4>
              <ul>
                <li><a href="aviso-legal.html"><Icon name="arrow-right" size={12} /> Aviso legal</a></li>
                <li><a href="privacidad.html"><Icon name="arrow-right" size={12} /> Privacidad</a></li>
                <li><a href="cookies.html"><Icon name="arrow-right" size={12} /> Cookies</a></li>
                <li><a href="rgpd.html"><Icon name="arrow-right" size={12} /> RGPD</a></li>
                <li><a href="condiciones.html"><Icon name="arrow-right" size={12} /> Condiciones</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div className="container">
        <div className="footer__bottom">
          <div>© 2026 Innovaria Real Estate · Todos los derechos reservados</div>
          <div className="footer__langs">
            <a href="#" className="is-active">ES</a>
            <a href="#">EN</a>
            <a href="#">DE</a>
            <a href="#">FR</a>
            <a href="#">RU</a>
          </div>
        </div>
      </div>
    </footer>);

}

/* ---------- Float WhatsApp ---------- */
function FloatWA() {
  return (
    <a className="float-wa" href="https://wa.me/34604494089" aria-label="WhatsApp">
      <Icon name="message-circle" size={24} strokeWidth={1.5} />
    </a>);

}

/* ---------- FAQ Item ---------- */
function FAQItem({ q, a, open, onClick }) {
  return (
    <div className={"faq__item" + (open ? " is-open" : "")}>
      <button className="faq__btn" onClick={onClick} aria-expanded={open}>
        <span>{q}</span>
        <span className="faq__toggle">
          <Icon name="plus" size={18} />
        </span>
      </button>
      <div className="faq__panel">
        <div className="faq__panel-inner">{a}</div>
      </div>
    </div>);

}

Object.assign(window, { Icon, SocialIcon, Button, UtilityBar, Nav, SiteHeader, SiteHeader2, SiteHeader3, Footer, FloatWA, FAQItem });