// Aiglú — shared web components
// Header, Footer, brand symbol, project data.

const Sym01 = ({ size = 32, color = 'currentColor' }) => (
  <svg viewBox="0 0 100 100" width={size} height={size} style={{ display: 'block' }}>
    <path d="M 12 82 L 12 50 A 38 38 0 0 1 88 50 L 88 82" fill="none" stroke={color} strokeWidth="9" strokeLinecap="square"/>
    <line x1="12" y1="82" x2="88" y2="82" stroke={color} strokeWidth="9" strokeLinecap="square"/>
  </svg>
);

const Brand = ({ size = 28, color = 'var(--ink)', linkBase = '' }) => (
  <a href={linkBase + 'index.html'} className="nav-brand" aria-label="Aiglú · Inicio">
    <Sym01 size={size} color={color} />
    <span className="nav-wordmark" style={{ color }}>aiglú</span>
  </a>
);

const Header = ({ active, base = '' }) => {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const links = [
    { k: 'home', label: 'Inicio', href: base + 'index.html' },
    { k: 'proyectos', label: 'Proyectos', href: base + 'index.html#proyectos' },
    { k: 'estudio', label: 'Estudio', href: base + 'nosotros.html' },
    { k: 'calculadoras', label: 'Calculadoras', href: base + 'calculadoras.html' },
    { k: 'pildoras', label: 'Píldoras', href: base + 'pildoras.html' },
    { k: 'inversores', label: 'Inversores', href: base + 'inversores.html' },
    { k: 'acceso', label: 'Área privada', href: base + 'acceso.html' },
  ];
  return (
    <header className="nav">
      <div className="nav-inner">
        <Brand linkBase={base} />
        <nav className="nav-links" aria-label="Principal">
          {links.map(l => (
            <a key={l.k} className={'nav-link' + (active === l.k ? ' active' : '')} href={l.href}>{l.label}</a>
          ))}
          <a className="nav-cta" href={base + 'index.html#contacto'}>Hablemos</a>
        </nav>
        <button className={`nav-burger ${open ? 'open' : ''}`} onClick={() => setOpen(!open)} aria-label="Menú">
          <span></span><span></span><span></span>
        </button>
      </div>
      {open && (
        <>
          <div className="nav-mobile-backdrop" onClick={() => setOpen(false)}></div>
          <nav className="nav-mobile-drawer" aria-label="Móvil">
            {links.map(l => (
              <a key={l.k} className={'nav-mobile-link' + (active === l.k ? ' active' : '')} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
            ))}
            <a className="nav-mobile-cta" href={base + 'index.html#contacto'} onClick={() => setOpen(false)}>Hablemos →</a>
          </nav>
        </>
      )}
    </header>
  );
};

const Footer = ({ base = '' }) => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
            <Sym01 size={32} color="var(--cream)" />
            <span style={{ fontWeight: 600, fontSize: 26, letterSpacing: '-0.03em' }}>aiglú</span>
          </div>
          <p style={{ color: 'rgba(241,236,227,0.72)', lineHeight: 1.55, fontSize: 15, maxWidth: 360, margin: 0 }}>
            Promoción inmobiliaria con atención al detalle, en un entorno completamente digital y comprometido con su entorno.
          </p>
        </div>
        <div>
          <h4>Navegación</h4>
          <ul>
            <li><a href={base + 'index.html'}>Inicio</a></li>
            <li><a href={base + 'index.html#proyectos'}>Proyectos</a></li>
            <li><a href={base + 'nosotros.html'}>Estudio</a></li>
            <li><a href={base + 'calculadoras.html'}>Calculadoras</a></li>
            <li><a href={base + 'pildoras.html'}>Píldoras</a></li>
            <li><a href={base + 'inversores.html'}>Inversores</a></li>
          </ul>
        </div>
        <div>
          <h4>Contacto</h4>
          <ul>
            <li>+34 900 000 000</li>
            <li><a href="mailto:hola@aiglu.es">hola@aiglu.es</a></li>
            <li>Calle Velázquez, 1<br/>28001 Madrid</li>
          </ul>
        </div>
        <div>
          <h4>Legal</h4>
          <ul>
            <li><a href="#">Aviso legal</a></li>
            <li><a href="#">Privacidad</a></li>
            <li><a href="#">Cookies</a></li>
            <li><a href="#">Inversores</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Aiglú S.L. · CIF B12345678</span>
        <span>Construir es un acto de cuidado</span>
      </div>
    </div>
  </footer>
);

// Reveal-on-scroll hook
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// Project catalog (the data drives both home grid and individual pages)
const PROJECTS = [
  {
    slug: 'aiglu-colmenar',
    name: 'Aiglú Colmenar',
    location: 'Colmenar Viejo · Madrid',
    status: 'En comercialización',
    statusKey: 'live',
    units: 26,
    typology: '1, 2 y 3 dormitorios',
    delivery: 'Q4 2028',
    cover: 'assets/parcela-01.png',
    blurb: '26 viviendas con garaje y trastero en el centro de Colmenar Viejo. Promoción residencial con viabilidad estudiada.',
    page: 'proyectos/aiglu-colmenar.html',
  },
  {
    slug: 'aiglu-tres-cantos',
    name: 'Aiglú Tres Cantos',
    location: 'Tres Cantos · Madrid',
    status: 'Próximamente',
    statusKey: 'upcoming',
    units: 42,
    typology: '2 y 3 dormitorios',
    delivery: 'Q2 2030',
    cover: null,
    blurb: 'Promoción residencial sostenible junto al parque tecnológico. Detalles en breve.',
    page: 'proyectos/aiglu-tres-cantos.html',
  },
  {
    slug: 'aiglu-las-rozas',
    name: 'Aiglú Las Rozas',
    location: 'Las Rozas · Madrid',
    status: 'En estudio',
    statusKey: 'future',
    units: 18,
    typology: 'Unifamiliares pareadas',
    delivery: 'Por definir',
    cover: null,
    blurb: 'Conjunto de viviendas unifamiliares pareadas en parcela arbolada. Anteproyecto en redacción.',
    page: 'proyectos/aiglu-las-rozas.html',
  },
];

// Decorative architectural placeholder (used when no real photo)
const ArchPlaceholder = ({ tone = 'var(--cream-warm)', accent = 'var(--ink)', label }) => (
  <div style={{
    position: 'absolute', inset: 0, background: tone,
    overflow: 'hidden',
  }}>
    <svg viewBox="0 0 600 450" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"
         style={{ position: 'absolute', inset: 0, opacity: 0.22 }}>
      {[60, 130, 200, 270, 340, 410, 480, 550].map(x => (
        <line key={x} x1={x} y1="0" x2={x - 70} y2="450" stroke={accent} strokeWidth="1"/>
      ))}
      <path d="M 90 450 L 90 280 A 110 110 0 0 1 310 280 L 310 450" fill="none" stroke={accent} strokeWidth="1.6"/>
      <path d="M 320 450 L 320 320 A 75 75 0 0 1 470 320 L 470 450" fill="none" stroke={accent} strokeWidth="1.6"/>
    </svg>
    {label && (
      <div style={{
        position: 'absolute', bottom: 24, left: 28,
        fontFamily: 'var(--mono)', fontSize: 11,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'var(--ink)', opacity: 0.6,
      }}>
        {label}
      </div>
    )}
  </div>
);

Object.assign(window, { Sym01, Brand, Header, Footer, useReveal, PROJECTS, ArchPlaceholder });