/* global React, Icon */
const { useState: useStateS, useMemo } = React;

// ============ SECTION HEADER ============
const SectionHead = ({ num, eyebrow, title, lead }) => (
  <div className="section-head">
    <div>
      <div className="num">{num}</div>
      <div className="eyebrow" style={{ marginTop: 14 }}>{eyebrow}</div>
    </div>
    <div>
      <h2 dangerouslySetInnerHTML={{ __html: title }}/>
      {lead && <p className="lead" style={{ marginTop: 22 }}>{lead}</p>}
    </div>
  </div>
);

// ============ WHY ============
const Why = () => {
  const blocks = [
    {
      icon: 'pin',
      label: 'Ubicación',
      h: 'Una dirección que se reconoce de inmediato.',
      p: 'Frente a Ruiz Cortines, a pasos de Andamar, con doble acceso por Avenida Tiburón. La referencia urbana que ningún cliente necesita confirmar.',
    },
    {
      icon: 'constellation',
      label: 'Ecosistema',
      h: 'Un entorno empresarial Clase A.',
      p: 'Seis niveles de oficina, un local comercial sobre el corredor y un piso ancla corporativo. Arquitectura de JRA y desarrollo de Grupo HERRO. Una sola dirección para distintas escalas de empresa.',
    },
    {
      icon: 'community',
      label: 'Comunidad',
      h: 'Inquilinos seleccionados que comparten dirección.',
      p: 'Encuentros sectoriales, mesas redondas privadas y jornadas trimestrales. La identidad de Torre Auro se construye también con quienes la habitan.',
    },
  ];
  return (
    <section className="section why" id="edificio">
      <div className="wrap">
        <SectionHead
          num="01 — Por qué Torre Auro"
          eyebrow="La propuesta"
          title="Tres principios que <em class='serif-italic'>sostienen</em> la propuesta."
          lead="Una torre construida sobre tres certezas: ubicación reconocible, producto definido y transparencia comercial. La síntesis de Torre Auro se entiende sin intermediarios."
        />
        <div className="why-grid">
          {blocks.map((b, i) => (
            <div className="why-block" key={i}>
              <div className="icon-tag"><Icon name={b.icon} size={40} stroke={1.1}/></div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{b.label}</div>
              <h3>{b.h}</h3>
              <p style={{ marginTop: 14 }}>{b.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============ SEGMENTS ============
const Segments = () => {
  const items = [
    {
      icon: 'storefront',
      title: 'Tu negocio necesita estar a pie de calle.',
      p: 'Local comercial de 281.72 m² sobre Ruiz Cortines. Doble frente vial, alta visibilidad y el único nivel con flujo peatonal directo del corredor.',
      link: 'Ver el local',
      tag: 'Planta baja',
    },
    {
      icon: 'portfolio',
      title: 'Eres profesionista o despacho pequeño.',
      p: 'Oficinas de 85 m² desde $29,750 mensuales. Plantas configurables en obra gris, dispuestas para alojar la identidad de tu firma.',
      link: 'Ver oficinas chicas',
      tag: '85 m² · Niveles 1–6',
    },
    {
      icon: 'growth',
      title: 'Tu empresa está creciendo.',
      p: 'Espacios de 120 y 137 m² con capacidad para sala de juntas, privados y áreas colaborativas. Diseñados para operaciones de 8 a 18 colaboradores.',
      link: 'Ver oficinas grandes',
      tag: '120 / 137 m²',
    },
    {
      icon: 'monument',
      title: 'Eres corporativo regional o nacional.',
      p: 'Planta completa de 627+ m² configurables, identidad de piso propia y nomenclatura en directorio principal. La declaración institucional del corredor.',
      link: 'Oferta de planta completa',
      tag: 'Piso ancla',
      anchor: true,
    },
  ];
  return (
    <section className="section segments" id="segmentos">
      <div className="wrap">
        <SectionHead
          num="02 — Para quién"
          eyebrow="Segmenta tu necesidad"
          title='Cuatro perfiles, <em class="serif-italic">una sola dirección.</em>'
          lead="Torre Auro está diseñada para la coexistencia silenciosa: el operador comercial de planta baja, el despacho consolidado del nivel 3 y el corporativo del piso 6 comparten lobby y servicios, conservando independencia operativa."
        />
        <div className="segments-grid">
          {items.map((s, i) => (
            <div className={`segment ${s.anchor ? 'segment--anchor' : ''}`} key={i}>
              {s.anchor && <span className="badge">★ Piso ancla</span>}
              <div className="seg-icon" aria-hidden><Icon name={s.icon} size={40} stroke={1.1}/></div>
              <h4>{s.title}</h4>
              <p>{s.p}</p>
              <div style={{
                fontSize: 11,
                letterSpacing: '0.14em',
                textTransform: 'uppercase',
                color: s.anchor ? 'rgba(200,164,92,0.8)' : 'var(--muted)',
              }}>{s.tag}</div>
              <a href="#disponibilidad" className="seg-link">
                {s.link} <Icon name="arrow" size={14} className="arrow"/>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============ AVAILABILITY ============
const Availability = () => {
  const data = [
    { level: 'PB', tag: 'Local comercial', config: 'Un local · 281.72 m² · doble frente Ruiz Cortines + Tiburón', price: '$89,790', unit: '/ mes', status: 'available' },
    { level: '01', tag: 'El piso del primer contacto', config: '3 × 85 m²  ·  1 × 120 m²  ·  1 × 137 m²', price: '$35,000 – $50,000', unit: '/ mes', status: 'available' },
    { level: '02', tag: 'El piso del precio inteligente', config: '3 × 85 m²  ·  1 × 120 m²  ·  1 × 137 m²', price: '$29,750 – $44,000', unit: '/ mes', status: 'available' },
    { level: '03', tag: 'El piso del equilibrio', config: '3 × 85 m²  ·  1 × 120 m²  ·  1 × 137 m²', price: '$30,250 – $44,500', unit: '/ mes', status: 'reserved' },
    { level: '04', tag: 'El piso de la mitad cómoda', config: '3 × 85 m²  ·  1 × 120 m²  ·  1 × 137 m²', price: '$30,750 – $45,000', unit: '/ mes', status: 'available' },
    { level: '05', tag: 'El piso ejecutivo', config: '3 × 85 m²  ·  1 × 120 m²  ·  1 × 137 m²', price: '$31,250 – $45,500', unit: '/ mes', status: 'reserved' },
    { level: '06', tag: 'El piso ancla — planta completa', config: '627+ m²  ·  Disponible como planta completa', price: '$31,750 – $46,000', unit: '/ mes', status: 'available' },
  ];

  const statusLabel = {
    available: 'Disponible',
    reserved: 'Apartado',
    rented: 'Rentado',
  };

  return (
    <section className="section availability" id="disponibilidad">
      <div className="wrap">
        <SectionHead
          num="04 — Disponibilidad"
          eyebrow="Tabla viva"
          title='Tarifas <em class="serif-italic">públicas.</em> Disponibilidad <em class="serif-italic">en tiempo real.</em>'
          lead='Siete inventarios disponibles: seis niveles de oficina y un local comercial. Cada espacio cuenta con tarifa publicada y estado actualizado, sin trámites previos para conocer condiciones.'
        />

        <div className="av-table">
          <div className="av-row av-row--head">
            <div>Nivel</div>
            <div>Carácter</div>
            <div>Configuración</div>
            <div>Rango precios</div>
            <div>Estado</div>
            <div></div>
          </div>
          {data.map((r) => (
            <div className="av-row" key={r.level}>
              <div className="av-level">
                {r.level}
                {r.level === 'PB' && <small>Comercial</small>}
              </div>
              <div className="av-tag">"{r.tag}"</div>
              <div className="av-config">{r.config}</div>
              <div className="av-price">{r.price} <small>{r.unit}</small></div>
              <div className={`av-status status-${r.status}`}>
                <span className="dot"/>{statusLabel[r.status]}
              </div>
              <div className="av-cta">
                Ver nivel <Icon name="arrow" size={12}/>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 40, display: 'flex', gap: 32, flexWrap: 'wrap', fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--muted)' }}>
          <span>• Tarifas más IVA. Servicios del edificio incluidos en la cuota mensual.</span>
          <span>• Contratos a 12, 24 o 36 meses.</span>
          <span>• Condiciones preferentes para inquilinos ancla.</span>
        </div>
      </div>
    </section>
  );
};

// ============ TOUR / GALLERY ============
const Tour = () => {
  const [playing, setPlaying] = useStateS(false);
  return (
    <section className="section tour" id="tour">
      <div className="wrap">
        <SectionHead
            num="05 — Recorrido"
            eyebrow="Video · Recorrido aéreo"
            title='Del corredor a tu nivel, en <em class="serif-italic">sesenta segundos.</em>'
            lead='Costa de Oro → Ruiz Cortines → Andamar → llegada a Torre Auro → vista superior. El mismo trayecto que recorrerás durante tu visita programada.'
        />

        <div className="tour-grid">
          <div className="tour-main">
            {!playing ? (
              <React.Fragment>
                <img
                  src="assets/tour-aerial.jpg"
                  alt="Vista aérea de Boca del Río con Torre Auro"
                  className="tour-poster"
                />
                <button className="play-btn" onClick={() => setPlaying(true)} aria-label="Reproducir recorrido">
                  <div className="play-circle">
                    <Icon name="play" size={32}/>
                  </div>
                </button>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <iframe
                  src="https://www.youtube.com/embed/IAsu9xUkV1E?autoplay=1&rel=0&modestbranding=1"
                  title="Recorrido Torre Auro"
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                  className="tour-iframe"
                />
                <a
                  href="https://youtu.be/IAsu9xUkV1E"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="tour-fallback-link"
                >
                  ¿No carga? Ver en YouTube ↗
                </a>
              </React.Fragment>
            )}
            <div className="tour-cap">Recorrido aéreo · Torre Auro</div>
          </div>
          <div className="tour-side">
            <div className="tour-thumb">
              <img src="assets/tour-lobby.jpg" alt="Andamar — corredor empresarial Costa de Oro" className="tour-thumb-img"/>
              <div className="tour-cap">Andamar · vecino directo</div>
            </div>
            <div className="tour-thumb">
              <img src="assets/tour-corridor.jpg" alt="Corredor Ruiz Cortines" className="tour-thumb-img"/>
              <div className="tour-cap">Boulevard Ruiz Cortines</div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 40, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          <a href="#final" className="btn btn--primary">Agenda recorrido presencial <Icon name="arrow" size={14}/></a>
          <a href="#final" className="btn btn--ghost-light">Descarga carpeta PDF <Icon name="download" size={14}/></a>
        </div>
      </div>
    </section>
  );
};

// ============ SERVICES ============
const Services = () => {
  const items = [
    { icon: 'coffee', label: 'Café gourmet' },
    { icon: 'reception', label: 'Recepción' },
    { icon: 'terrace', label: 'Terrazas' },
    { icon: 'camera', label: 'Monitoreo 24/7' },
    { icon: 'print', label: 'Impresión' },
    { icon: 'droplet', label: 'Limpieza' },
    { icon: 'snowflake', label: 'A/C central' },
    { icon: 'wifi', label: 'WiFi empresarial' },
    { icon: 'table', label: 'Salas de juntas' },
    { icon: 'package', label: 'Paquetería' },
    { icon: 'shield', label: 'Seguridad' },
    { icon: 'parking', label: 'Estacionamiento' },
  ];
  return (
    <section className="section services" id="servicios">
      <div className="wrap">
        <SectionHead
          num="06 — Lo que incluye"
          eyebrow="Servicios"
          title='Infraestructura <em class="serif-italic">lista para operar</em> desde el primer día.'
          lead="El edificio se entrega con todos sus servicios en marcha: recepción, conectividad, monitoreo, áreas comunes y administración activa. Tu oficina se entrega en obra gris para que adecúes la planta a la identidad y operación de tu firma."
        />
        <div className="services-grid">
          {items.map((s, i) => (
            <div className="service" key={i}>
              <Icon name={s.icon} size={30} stroke={1.1}/>
              {s.label}
            </div>
          ))}
        </div>
        <p className="services-tagline">
          "Doce servicios incluidos. Una sola cuota mensual. Sin proveedores intermedios."
        </p>
      </div>
    </section>
  );
};

// ============ BLOG PREVIEW ============
const BlogPreview = () => {
  const posts = [
    {
      cat: 'Arquitectura corporativa',
      title: 'Por qué entregamos las oficinas en obra gris (y por qué deberías agradecerlo).',
      excerpt: 'Lejos de ser un atajo constructivo, la obra gris es una decisión de respeto hacia el inquilino que conoce sus necesidades de adecuación.',
      slot: 'blog-1',
      ph: 'Foto oficina obra gris con vista al mar'
    },
    {
      cat: 'Negocios en Veracruz',
      title: 'El nuevo Boca del Río: por qué Ruiz Cortines se convirtió en el corredor del Golfo.',
      excerpt: 'Hace una década era una vialidad de paso. Hoy es la dirección elegida por los corporativos del sureste para establecer su operación regional.',
      slot: 'blog-2',
      ph: 'Vista aérea de Ruiz Cortines al atardecer'
    },
    {
      cat: 'Guías prácticas',
      title: 'El costo total de operar una oficina en Boca del Río.',
      excerpt: 'Mantenimiento, servicios, IVA, depósito y adecuación: las partidas que rara vez se desglosan en un anuncio comercial.',
      slot: 'blog-3',
      ph: 'Plano arquitectónico con notas'
    },
  ];
  return (
    <section className="section" id="blog" style={{ background: 'var(--paper)' }}>
      <div className="wrap">
        <SectionHead
          num="07 — Perspectiva"
          eyebrow="Editorial Torre Auro"
          title='Inteligencia del corredor empresarial <em class="serif-italic">del Golfo.</em>'
          lead='Un editorial dedicado al mercado, al corredor y al sector. Lecturas pensadas para tomadores de decisión que evalúan dónde instalar su operación regional.'
        />
        <div className="cards-grid">
          {posts.map((p, i) => (
            <article className="card" key={i}>
              <div className="card-img">
                <image-slot id={p.slot} placeholder={p.ph} shape="rect"/>
                <span className="ph-tag">Lectura · 6 min</span>
              </div>
              <div className="card-body">
                <span className="cat">{p.cat}</span>
                <h3>{p.title}</h3>
                <p>{p.excerpt}</p>
                <span className="read">Leer artículo <Icon name="arrow" size={12}/></span>
              </div>
            </article>
          ))}
        </div>
        <div style={{ marginTop: 48, textAlign: 'center' }}>
          <a href="#" className="btn btn--ghost">Ver todos los artículos</a>
        </div>
      </div>
    </section>
  );
};

// ============ EVENTS PREVIEW ============
const EventsPreview = () => {
  const events = [
    {
      date: '15 de junio',
      time: '8:30–10:00 am',
      sector: 'Despachos legales',
      title: 'Encuentro de Despachos Legales',
      topic: 'Tema: nuevas reformas fiscales 2026 y su impacto en el ejercicio corporativo.',
    },
    {
      date: '22 de junio',
      time: '8:30–10:00 am',
      sector: 'Salud privada',
      title: 'Encuentro de Salud Privada',
      topic: 'Tema: marketing para consultorios y la nueva paciente del Golfo.',
    },
    {
      date: '6 de julio',
      time: '11:00–13:00 hrs',
      sector: 'Lanzamientos',
      title: 'Editorial · "El nuevo Boca del Río"',
      topic: 'Panel con urbanistas, economistas y arquitectos sobre el corredor Ruiz Cortines.',
    },
  ];
  return (
    <section className="section" id="eventos" style={{ background: 'var(--cream)' }}>
      <div className="wrap">
        <SectionHead
          num="08 — Agenda"
          eyebrow="Eventos en Torre Auro"
          title='Conoce el edificio <em class="serif-italic">en otro contexto.</em>'
          lead='Encuentros sectoriales, mesas redondas privadas y jornadas trimestrales de puertas abiertas. Un programa pensado para que recorras el espacio antes de evaluar formalmente tu interés.'
        />
        <div className="cards-grid">
          {events.map((e, i) => (
            <article className="card event-card" key={i}>
              <div className="card-img" style={{ position: 'relative' }}>
                <span className="event-date">{e.date} · {e.time}</span>
                <span className="sector">{e.sector}</span>
              </div>
              <div className="card-body">
                <h3>{e.title}</h3>
                <p>{e.topic}</p>
                <span className="read">Reservar lugar <Icon name="arrow" size={12}/></span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============ FINAL CTA ============
const FinalCTA = () => (
  <section className="section final" id="final">
    <div className="wrap final-content">
      <div className="eyebrow" style={{ color: '#c8a45c', justifyContent: 'center', marginBottom: 36, display: 'inline-flex' }}>Cierra el círculo</div>
      <h2>Donde Veracruz <em>hace negocios.</em></h2>
      <p className="lead" style={{ marginTop: 32 }}>
        Agenda un recorrido. Conoce el edificio en persona. Decide con datos, no con renders. Te recibe el equipo de desarrollo: la torre se conoce de la mano de quienes la concibieron.
      </p>
      <div className="final-actions">
        <a href="https://wa.me/522293027197" className="btn btn--primary btn--lg">
          <Icon name="whatsapp" size={16}/> WhatsApp · 229 302 7197
        </a>
        <a href="#" className="btn btn--ghost-light btn--lg">
          <Icon name="calendar" size={16}/> Agendar visita
        </a>
        <a href="#" className="btn btn--ghost-light btn--lg">
          <Icon name="download" size={16}/> Descargar carpeta PDF
        </a>
      </div>

      <div className="final-strip">
        <div className="item">Dirección<strong>Ruiz Cortines s/n, Costa de Oro</strong></div>
        <div className="item">Entrega<strong>Primavera 2026</strong></div>
        <div className="item">Desarrolla<strong>Grupo HERRO</strong></div>
        <div className="item">Diseño<strong>JRA Arquitectos</strong></div>
      </div>
    </div>
  </section>
);

// ============ FOOTER ============
const Footer = () => (
  <footer className="footer">
    <div className="footer-grid">
      <div>
        <div className="footer-logo">
          <span className="brand-logo brand-logo--lg" aria-hidden/>
        </div>
        <p style={{ maxWidth: 340, lineHeight: 1.6 }}>
          Seis pisos de oficinas Clase A y un local comercial premium sobre Ruiz Cortines. Donde Veracruz hace negocios.
        </p>
      </div>
      <div>
        <h5>El edificio</h5>
        <ul>
          <li><a href="#edificio">Arquitectura</a></li>
          <li><a href="#disponibilidad">Niveles</a></li>
          <li><a href="#segmentos">Planta completa</a></li>
          <li><a href="#servicios">Servicios incluidos</a></li>
          <li><a href="#">Ubicación</a></li>
        </ul>
      </div>
      <div>
        <h5>Contenido</h5>
        <ul>
          <li><a href="#blog">Perspectiva</a></li>
          <li><a href="#eventos">Agenda de eventos</a></li>
          <li><a href="#">Casos y tendencias</a></li>
          <li><a href="#">Newsletter</a></li>
        </ul>
      </div>
      <div>
        <h5>Contacto</h5>
        <ul>
          <li><a href="https://wa.me/522293027197">WhatsApp · 229 302 7197</a></li>
          <li><a href="mailto:hola@torreauro.com">hola@torreauro.com</a></li>
          <li><a href="#final">Agenda recorrido</a></li>
          <li><a href="#">Carpeta PDF</a></li>
        </ul>
      </div>
    </div>
    <div className="footer-bottom">
      <span>© 2026 Grupo HERRO · Torre Auro</span>
      <span>Diseño JRA Arquitectos · Boca del Río, Veracruz</span>
    </div>
  </footer>
);

window.SectionHead = SectionHead;
window.Why = Why;
window.Segments = Segments;
window.Availability = Availability;
window.Tour = Tour;
window.Services = Services;
window.BlogPreview = BlogPreview;
window.EventsPreview = EventsPreview;
window.FinalCTA = FinalCTA;
window.Footer = Footer;