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

// ============ ICONS ============
const Icon = ({ name, size = 24, stroke = 1.25 }) => {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "square", strokeLinejoin: "miter" };
  const map = {
    arrow: <svg {...props} strokeLinecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></svg>,
    arrowDown: <svg {...props} strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="6 13 12 19 18 13"/></svg>,
    play: <svg {...props} fill="currentColor" stroke="none"><polygon points="6 4 20 12 6 20 6 4"/></svg>,
    whatsapp: <svg {...props} strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>,

    // -- Why (3 principios) --
    pin: <svg {...props}><path d="M12 22 L12 14"/><circle cx="12" cy="9" r="6"/><circle cx="12" cy="9" r="2" fill="currentColor" stroke="none"/></svg>,
    building: <svg {...props}><rect x="5" y="3" width="14" height="18"/><line x1="5" y1="9" x2="19" y2="9"/><line x1="5" y1="15" x2="19" y2="15"/><line x1="12" y1="3" x2="12" y2="21"/></svg>,
    coin: <svg {...props}><rect x="4" y="6" width="16" height="12"/><line x1="4" y1="10" x2="20" y2="10"/><line x1="9" y1="14" x2="15" y2="14"/></svg>,
    constellation: <svg {...props}><line x1="6" y1="6" x2="18" y2="6"/><line x1="6" y1="6" x2="6" y2="18"/><line x1="6" y1="18" x2="18" y2="18"/><line x1="18" y1="6" x2="18" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/><circle cx="6" cy="6" r="1.6" fill="currentColor" stroke="none"/><circle cx="18" cy="6" r="1.6" fill="currentColor" stroke="none"/><circle cx="6" cy="18" r="1.6" fill="currentColor" stroke="none"/><circle cx="18" cy="18" r="1.6" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="2" fill="currentColor" stroke="none"/></svg>,
    community: <svg {...props}><line x1="12" y1="5" x2="5" y2="18"/><line x1="12" y1="5" x2="19" y2="18"/><line x1="5" y1="18" x2="19" y2="18"/><circle cx="12" cy="5" r="2.2" fill="currentColor" stroke="none"/><circle cx="5" cy="18" r="2.2" fill="currentColor" stroke="none"/><circle cx="19" cy="18" r="2.2" fill="currentColor" stroke="none"/></svg>,

    // -- Segments (4 perfiles) --
    storefront: <svg {...props}><path d="M3 8 L5 4 L19 4 L21 8 L21 20 L3 20 Z"/><line x1="3" y1="8" x2="21" y2="8"/><line x1="9" y1="20" x2="9" y2="12"/><line x1="15" y1="20" x2="15" y2="12"/><line x1="9" y1="12" x2="15" y2="12"/></svg>,
    portfolio: <svg {...props}><rect x="3" y="7" width="18" height="13"/><path d="M9 7 V5 a1 1 0 0 1 1 -1 h4 a1 1 0 0 1 1 1 v2"/><line x1="3" y1="12" x2="21" y2="12"/></svg>,
    growth: <svg {...props}><rect x="4" y="14" width="3" height="6"/><rect x="10" y="10" width="3" height="10"/><rect x="16" y="6" width="3" height="14"/></svg>,
    monument: <svg {...props}><path d="M4 20 L4 8 L12 3 L20 8 L20 20 Z"/><line x1="4" y1="20" x2="20" y2="20"/><line x1="9" y1="20" x2="9" y2="12"/><line x1="15" y1="20" x2="15" y2="12"/><line x1="9" y1="12" x2="15" y2="12"/><circle cx="12" cy="8.5" r="1" fill="currentColor" stroke="none"/></svg>,

    // -- Services (12 servicios) --
    coffee: <svg {...props}><path d="M4 9 H17 V15 a4 4 0 0 1 -4 4 H8 a4 4 0 0 1 -4 -4 Z"/><path d="M17 11 H19 a2 2 0 0 1 0 4 H17"/><line x1="7" y1="4" x2="7" y2="6"/><line x1="11" y1="4" x2="11" y2="6"/><line x1="15" y1="4" x2="15" y2="6"/></svg>,
    reception: <svg {...props}><circle cx="12" cy="7" r="3"/><path d="M5 20 v-1 a4 4 0 0 1 4 -4 h6 a4 4 0 0 1 4 4 v1"/><line x1="3" y1="20" x2="21" y2="20"/></svg>,
    terrace: <svg {...props}><line x1="3" y1="15" x2="21" y2="15"/><line x1="3" y1="20" x2="21" y2="20"/><path d="M6 15 L6 12 a2 2 0 0 1 2 -2 h8 a2 2 0 0 1 2 2 L18 15"/><line x1="8" y1="10" x2="8" y2="4"/><line x1="8" y1="4" x2="14" y2="4"/></svg>,
    camera: <svg {...props}><rect x="3" y="7" width="18" height="13"/><circle cx="12" cy="13.5" r="3.5"/><path d="M8 7 L9.5 4 H14.5 L16 7"/></svg>,
    print: <svg {...props}><rect x="6" y="3" width="12" height="6"/><rect x="3" y="9" width="18" height="9"/><rect x="6" y="14" width="12" height="6"/><circle cx="17" cy="12" r="0.6" fill="currentColor" stroke="none"/></svg>,
    droplet: <svg {...props} strokeLinejoin="round"><path d="M12 3 L17 10 a5 5 0 1 1 -10 0 Z"/></svg>,
    snowflake: <svg {...props} strokeLinecap="round"><line x1="12" y1="3" x2="12" y2="21"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="5.5" y1="5.5" x2="18.5" y2="18.5"/><line x1="18.5" y1="5.5" x2="5.5" y2="18.5"/></svg>,
    wifi: <svg {...props} strokeLinecap="round"><path d="M3 9 a14 14 0 0 1 18 0"/><path d="M6 12.5 a9 9 0 0 1 12 0"/><path d="M9 16 a4 4 0 0 1 6 0"/><circle cx="12" cy="19" r="0.6" fill="currentColor" stroke="none"/></svg>,
    table: <svg {...props}><rect x="3" y="8" width="18" height="2"/><line x1="6" y1="10" x2="6" y2="16"/><line x1="18" y1="10" x2="18" y2="16"/><circle cx="9" cy="6" r="1.2"/><circle cx="12" cy="6" r="1.2"/><circle cx="15" cy="6" r="1.2"/></svg>,
    package: <svg {...props}><path d="M3 7 L12 3 L21 7 L21 17 L12 21 L3 17 Z"/><line x1="3" y1="7" x2="12" y2="11"/><line x1="21" y1="7" x2="12" y2="11"/><line x1="12" y1="11" x2="12" y2="21"/></svg>,
    shield: <svg {...props}><path d="M12 3 L20 6 V12 c0 4.5 -3.5 7.5 -8 9 c-4.5 -1.5 -8 -4.5 -8 -9 V6 Z"/><path d="M9 12 L11 14 L15 10" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    parking: <svg {...props}><rect x="3" y="3" width="18" height="18"/><path d="M9 18 V7 H13 a3 3 0 0 1 0 6 H9"/></svg>,

    // -- Misc --
    download: <svg {...props} strokeLinecap="round" strokeLinejoin="round"><path d="M4 14 v5 h16 v-5"/><line x1="12" y1="3" x2="12" y2="15"/><polyline points="7 10 12 15 17 10"/></svg>,
    calendar: <svg {...props}><rect x="3" y="5" width="18" height="16"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="8" y1="3" x2="8" y2="7"/><line x1="16" y1="3" x2="16" y2="7"/></svg>,
  };
  return map[name] || null;
};

// ============ NAV ============
const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    ['Edificio', '#ecosistema'],
    ['Disponibilidad', '#disponibilidad'],
    ['Recorrido', '#tour'],
    ['Servicios', '#servicios'],
    ['Perspectiva', '#blog'],
    ['Contacto', '#final'],
  ];
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#top" className="nav-logo" aria-label="Torre Auro">
        <span className="brand-logo" aria-hidden/>
      </a>
      <div className="nav-links">
        {links.map(([label, href]) => (
          <a key={href} href={href}>{label}</a>
        ))}
      </div>
      <a href="#final" className="nav-cta">
        Agenda recorrido <Icon name="arrow" size={14}/>
      </a>
    </nav>
  );
};

// ============ HERO ============
const Hero = () => (
  <header className="hero" id="top">
    <div className="hero-bg">
      <img src="assets/hero-torre-auro.jpg" alt="Torre Auro · fachada sobre Ruiz Cortines" className="hero-img"/>
      <div className="hero-overlay"/>
    </div>

    <div className="hero-meta">
      <span>Boca del Río · Veracruz · 19.10° N</span>
      <span>Entrega · Primavera 2026</span>
    </div>

    <div className="wrap hero-content">
      <div className="hero-left">
        <div className="eyebrow" style={{ color: '#c8a45c', marginBottom: 32 }}>Torre Auro · Costa de Oro</div>
        <h1>
          Oficinas Clase A<br/>
          sobre <em>Ruiz Cortines.</em>
        </h1>
        <p className="hero-sub">
          Seis pisos de oficinas y un local comercial premium en el corazón de Costa de Oro, Boca del Río. Plantas libres, servicios incluidos, doble acceso vehicular.
        </p>
        <div className="hero-micro">
          <span>Desde $29,750 / mes</span>
          <span className="dot-sep"/>
          <span>Entrega obra gris</span>
          <span className="dot-sep"/>
          <span>Configurable a tu operación</span>
        </div>
        <div className="hero-actions">
          <a href="#final" className="btn btn--primary btn--lg">
            Agenda recorrido <Icon name="arrow" size={16}/>
          </a>
          <a href="#disponibilidad" className="btn btn--ghost-light btn--lg">
            Ver disponibilidad y precios
          </a>
        </div>
      </div>

      <div className="hero-side">
        <div>
          <div style={{ marginBottom: 8 }}>Desde</div>
          <div className="price">$29,750 <span style={{ fontSize: '0.5em', color: 'rgba(247,244,238,0.6)' }}>/ mes</span></div>
        </div>
        <div style={{ width: 1, height: 60, background: 'rgba(247,244,238,0.2)' }}/>
        <div>
          <div style={{ marginBottom: 8 }}>Local comercial</div>
          <div className="price">281.72 <span style={{ fontSize: '0.5em', color: 'rgba(247,244,238,0.6)' }}>m²</span></div>
        </div>
      </div>
    </div>

    <div className="hero-scroll">
      Descubre el edificio
    </div>
  </header>
);

// ============ MARQUEE STRIP ============
const MarqueeStrip = () => (
  <div className="strip">
    <div className="strip-inner">
      <span>Ruiz Cortines <span className="dot"/> Costa de Oro <span className="dot"/> Boca del Río <span className="dot"/> Diseño JRA Arquitectos <span className="dot"/> Desarrollo Grupo HERRO <span className="dot"/></span>
      <span>Ruiz Cortines <span className="dot"/> Costa de Oro <span className="dot"/> Boca del Río <span className="dot"/> Diseño JRA Arquitectos <span className="dot"/> Desarrollo Grupo HERRO <span className="dot"/></span>
    </div>
  </div>
);

window.Icon = Icon;
window.Nav = Nav;
window.Hero = Hero;
window.MarqueeStrip = MarqueeStrip;