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

// =====================================================
// Logo (real brand mark)
// =====================================================
const LogoMark = ({ size = 32 }) => (
  <span className="bn-logo-mark" style={{ width: size, height: size, fontSize: size * 0.5 }}>B</span>
);

const BeneLogo = ({ dark = false }) => (
  <img
    src={dark ? "assets/logo.png" : "assets/logo-white.png"}
    alt="Bene Imóveis"
    className="bn-logo-img"
  />
);

// =====================================================
// Header (with page nav)
// =====================================================
const Header = ({ page, setPage, onDark = false }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const nav = [
    { id: "home", label: "Início" },
    { id: "listings", label: "Imóveis" },
    { id: "launches", label: "Lançamentos" },
    { id: "about", label: "A Imobiliária" },
    { id: "contact", label: "Contato" },
  ];

  const go = (id) => (e) => { e.preventDefault(); setPage(id); window.scrollTo({ top: 0, behavior: "smooth" }); };

  const useLightLogo = onDark && !scrolled;

  return (
    <header className={`bn-header ${scrolled ? "scrolled" : ""} ${onDark && !scrolled ? "on-dark" : ""}`}>
      <a href="#" className="bn-logo" onClick={go("home")}>
        <BeneLogo dark={!useLightLogo} />
      </a>
      <nav className="bn-nav">
        {nav.map(n => (
          <a key={n.id} href="#" onClick={go(n.id)}
             className={`bn-nav-link ${page === n.id ? "active" : ""}`}>
            {n.label}
          </a>
        ))}
        <a className="bn-nav-cta" href={WA_LINK} target="_blank" rel="noopener">
          <span style={{ width: 6, height: 6, background: "#25D366", borderRadius: "50%" }}></span>
          Falar com corretor
        </a>
      </nav>
    </header>
  );
};

// =====================================================
// Floating WhatsApp button
// =====================================================
const WhatsAppFab = () => (
  <a className="wa-fab" href={WA_LINK} target="_blank" rel="noopener" aria-label="WhatsApp">
    <span className="wa-icon">
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M17.5 14.4c-.3-.1-1.6-.8-1.9-.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-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.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.6-.7 1.9-1.3.2-.6.2-1.2.2-1.3-.1 0-.3-.1-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.5 3.4 1.3 4.9L2 22l5.2-1.4c1.4.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.1c-1.5 0-3-.4-4.3-1.2l-.3-.2-3.2.9.9-3.1-.2-.3C4.1 14.9 3.8 13.4 3.8 12c0-4.5 3.7-8.2 8.2-8.2s8.2 3.7 8.2 8.2-3.7 8.1-8.2 8.1z"/>
      </svg>
    </span>
    <span>WhatsApp</span>
  </a>
);

// =====================================================
// Footer
// =====================================================
const Footer = ({ setPage }) => {
  const go = (id) => (e) => { e.preventDefault(); setPage(id); window.scrollTo({ top: 0, behavior: "smooth" }); };
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <img src="assets/logo-white.png" alt="Bene Imóveis" style={{ height: 110, marginBottom: 24 }} />
          <p>Imóveis premium em Ijuí e região. Atendimento humanizado, soluções para investidores e curadoria criteriosa desde 2001.</p>
        </div>
        <div className="footer-col">
          <h4>Navegação</h4>
          <ul>
            <li onClick={go("home")}>Início</li>
            <li onClick={go("listings")}>Imóveis</li>
            <li onClick={go("launches")}>Lançamentos</li>
            <li onClick={go("about")}>A Imobiliária</li>
            <li onClick={go("contact")}>Contato</li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Atendimento</h4>
          <ul>
            <li>Seg–Sex · 09h às 18h</li>
            <li>Sáb · 09h às 12h</li>
            <li>(55) 3333‑2222</li>
            <li>contato@imoveisbene.com.br</li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Endereço</h4>
          <ul>
            <li>Rua Bento Gonçalves, 371</li>
            <li>Centro · Ijuí / RS</li>
            <li>CEP 98700-000</li>
            <li>CRECI/RS 47.107</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Bene Imóveis · Todos os direitos reservados</span>
        <span>CRECI/RS 47.107 · Política de privacidade</span>
      </div>
    </footer>
  );
};

// =====================================================
// Inline icons
// =====================================================
const Icon = ({ name, size = 14 }) => {
  const icons = {
    bed: <path d="M2 12V6h6v2h8V6h6v6M2 12v4M22 12v4M2 12h20"/>,
    bath: <><path d="M3 12h18v3a4 4 0 01-4 4H7a4 4 0 01-4-4v-3z"/><path d="M5 12V5a2 2 0 012-2"/></>,
    area: <><rect x="3" y="3" width="18" height="18"/><path d="M3 9h18M9 3v18"/></>,
    car: <><path d="M3 13l1.5-5h15L21 13"/><circle cx="6.5" cy="16.5" r="1.5"/><circle cx="17.5" cy="16.5" r="1.5"/><path d="M3 13h18v3"/></>,
    play: <polygon points="5 3 19 12 5 21 5 3"/>,
    arrow: <path d="M5 12h14M13 6l6 6-6 6"/>,
    pin: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></>,
    chev: <path d="M6 9l6 6 6-6"/>,
    chevR: <path d="M9 6l6 6-6 6"/>,
    search: <><circle cx="11" cy="11" r="8"/><path d="M21 21l-4-4"/></>,
    camera: <><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></>,
    close: <path d="M18 6L6 18M6 6l12 12"/>,
    grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></>,
    map: <><polygon points="1 6 8 3 16 6 23 3 23 18 16 21 8 18 1 21 1 6"/><line x1="8" y1="3" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="21"/></>,
    heart: <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>,
    share: <><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></>,
    mail: <><rect x="2" y="4" width="20" height="16"/><polyline points="2 6 12 13 22 6"/></>,
    phone: <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.37 1.9.72 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0122 16.92z"/>,
    wa: <path d="M17.5 14.4c-.3-.1-1.6-.8-1.9-.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-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.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.6-.7 1.9-1.3.2-.6.2-1.2.2-1.3-.1 0-.3-.1-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.5 3.4 1.3 4.9L2 22l5.2-1.4c1.4.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    star: <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={["play","star","heart","pin","mail","phone","wa"].includes(name) ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      {icons[name]}
    </svg>
  );
};

// =====================================================
// Reveal-on-scroll wrapper
// =====================================================
const Reveal = ({ children, className = "", delay = 0, as: As = "div" }) => {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setShown(true); io.disconnect(); }
    }, { threshold: 0.15 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return (
    <As ref={ref} className={`reveal ${shown ? "in" : ""} ${className}`} style={{ transitionDelay: `${delay}s` }}>
      {children}
    </As>
  );
};

Object.assign(window, { Header, Footer, WhatsAppFab, Icon, Reveal, LogoMark, BeneLogo });