/* sections.jsx — About, Services, Comfort, Why-Trust, Distribuidores,
   Linea Blanca preview, Projects, Clients, Contact, Footer
*/

/* ─── SOBRE NOSOTROS — luminous, with photo collage ─── */
const About = () =>
<section id="nosotros" className="section about">
    <div className="container">
      <div className="about-grid">
        <div className="about-copy">
          <span className="eyebrow">Sobre Nosotros</span>
          <h2>Ingeniería que se siente como hogar.</h2>
          <p className="lede">
            En <strong>Aclimatar </strong> integramos 35 años de experiencia
            técnica con una sensibilidad nueva: que cada espacio que climatizamos
            se sienta cómodo, eficiente y bien terminado.
          </p>
          <p className="lede" style={{ marginTop: 16 }}>
            Diseñamos, proveemos e instalamos sistemas termomecánicos para
            viviendas, edificios, comercios e industrias. Como <strong>Agente Oficial Carrier</strong>,
            respaldamos cada obra con servicio técnico a nivel nacional.
          </p>
          <div className="about-points">
            {[
          { t: 'Ingeniería propia', d: 'Cálculo, diseño y dirección técnica en cada obra.' },
          { t: 'Equipos premium', d: 'Carrier, Midea, Schneider, Honeywell.' },
          { t: 'Servicio continuo', d: 'Mantenimiento preventivo y soporte 24/7.' }].
          map((p, i) =>
          <div key={i} className="about-point">
                <div className="about-point-num">{String(i + 1).padStart(2, '0')}</div>
                <div>
                  <div className="about-point-t">{p.t}</div>
                  <div className="about-point-d">{p.d}</div>
                </div>
              </div>
          )}
          </div>
        </div>
        <div className="about-visual">
          <div className="about-collage">
            <div className="about-img-1 about-photo">
              <img src="photos/aclimatar-nosotros.png" alt="Camión Carrier de Aclimatar frente a torres corporativas" />
            </div>
            <div className="about-badge">
              <div className="about-badge-num">35</div>
              <div className="about-badge-lbl">años climatizando<br />el país</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ─── KPI BAR — refined stats ─── */
const KPIBar = () =>
<section className="kpi-bar">
    <div className="container">
      <div className="kpi-grid">
        {[
      { n: '35', s: 'años', l: 'experiencia en ingeniería termomecánica' },
      { n: '+150', s: '', l: 'clientes corporativos satisfechos' },
      { n: '+100', s: '', l: 'proyectos realizados en todo el país' },
      { n: '24/7', s: '', l: 'soporte técnico continuo' }].
      map((k, i) =>
      <div key={i} className="kpi-item">
            <div className="kpi-num"><span className="tnum">{k.n}</span><span className="kpi-suffix">{k.s}</span></div>
            <div className="kpi-lbl">{k.l}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


/* ─── SERVICIOS — premium cards with image + content ─── */
const Services = ({ setPage }) => {
  const services = [
  {
    id: 'residencial',
    tag: 'Residencial',
    t: 'Instalaciones residenciales',
    d: 'Climatización para casas, departamentos y propiedad horizontal. Asesoramiento, provisión e instalación con foco en confort y eficiencia.',
    photo: 'photos/services/residencial-biblioteca.jpg',
    alt: 'Equipos de aire integrados en biblioteca con piso de parquet y bibliotecas de madera'
  },
  {
    id: 'ph',
    tag: 'Edificios',
    t: 'Propiedad horizontal',
    d: 'Sistemas centralizados y por unidad para edificios. Garantizamos confort, eficiencia energética y mantenimiento continuo.',
    photo: 'photos/services/edificios-rooftop.jpg',
    alt: 'Ductos y ventilador centrífugo en azotea de edificio con skyline de Buenos Aires'
  },
  {
    id: 'comercial',
    tag: 'Comercial',
    t: 'Comercios & gastronomía',
    d: 'Climatización para locales, oficinas y gastronomía. Optimizamos el confort del cliente y la operatividad del negocio.',
    photo: 'photos/services/comercial-chiller-carrier.png',
    alt: 'Instalación de chiller Carrier AquaForce en azotea con equipo Aclimatar trabajando'
  },
  {
    id: 'industrial',
    tag: 'Industrial',
    t: 'Química, farma & pesadas',
    d: 'Termomecánica para procesos industriales. Eficiencia, continuidad operativa y cumplimiento normativo estricto.',
    photo: 'photos/services/industrial-sala-maquinas.jpg',
    alt: 'Sala de máquinas con intercambiadores de placas y manifolds'
  }];

  return (
    <section id="servicios" className="section services">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Servicios</span>
            <h2>Soluciones integrales,<br />de la ingeniería al confort.</h2>
          </div>
          <p className="lede" style={{ maxWidth: '36ch' }}>
            Acompañamos cada obra desde el primer cálculo hasta la puesta en marcha,
            trabajando junto a ingenieros y arquitectos.
          </p>
        </div>
        <div className="services-grid">
          {services.map((s, i) =>
          <article key={i} className="service-card card"
            onClick={() => setPage && setPage('servicio:' + s.id)}
            style={{ cursor: 'pointer' }}>
              <div className="service-img">
                <img src={s.photo} alt={s.alt} />
                <span className="service-tag">{s.tag}</span>
              </div>
              <div className="service-body">
                <h3>{s.t}</h3>
                <p>{s.d}</p>
                <a className="arrow-link">
                  Ver más
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
                </a>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

};

/* ─── COMFORT / LIFESTYLE — wide image with overlay cards ─── */
const Comfort = () =>
<section className="section comfort">
    <div className="container-wide">
      <div className="comfort-card">
        <div className="ph ph-warm comfort-bg">
          <span className="ph-label">cocina premium · familia · confort</span>
          <div className="comfort-overlay">
            <span className="eyebrow" style={{ color: 'rgba(255,255,255,.9)' }}>Confort para el hogar</span>
            <h2 style={{ color: '#fff', maxWidth: '14ch' }}>
              El aire que tu casa merece.
            </h2>
            <p className="lede" style={{ color: 'rgba(255,255,255,.85)', maxWidth: '40ch' }}>
              Diseñamos climatización pensada para vivir: silenciosa, eficiente y
              que se integra a la estética de cada ambiente.
            </p>
            <button className="btn btn-secondary" style={{ background: '#fff' }}>Explorar para tu hogar</button>
          </div>
        </div>
        <div className="comfort-features">
          {[
        { i: '🌡', t: 'Temperatura inteligente', d: 'Control por zona, app y horarios.' },
        { i: '🔇', t: 'Operación silenciosa', d: 'Equipos premium debajo de 23dB.' },
        { i: '🌱', t: 'Eficiencia energética', d: 'Inverter clase A+++ y filtros HEPA.' },
        { i: '🛠', t: 'Instalación curada', d: 'Mangueras embutidas, terminaciones prolijas.' }].
        map((f, i) =>
        <div key={i} className="comfort-feature">
              <div className="cf-icon">{f.i}</div>
              <div className="cf-title">{f.t}</div>
              <div className="cf-desc">{f.d}</div>
            </div>
        )}
        </div>
      </div>
    </div>
  </section>;


/* ─── LÍNEA BLANCA — preview section in home ─── */
const LineaBlancaPreview = () => {
  const SHOWROOM_URL = 'https://www.tecnicaintegrada.com.ar/';
  const categories = [
  { name: 'Aires acondicionados', sub: 'Splits, multisplit, VRF', accent: 'brand', url: 'https://www.tecnicaintegrada.com.ar/climatizacion/?mpage=3' },
  { name: 'Heladeras', sub: 'No Frost, Top Mount, French Door, Side-by-Side', accent: 'cool', url: 'https://www.tecnicaintegrada.com.ar/linea-blanca/refrigeracion1/heladeras/' },
  { name: 'Lavarropas', sub: 'Carga frontal y superior', accent: 'blue', url: 'https://www.tecnicaintegrada.com.ar/linea-blanca/lavado/lavarropas/' },
  { name: 'Cocinas & anafes', sub: 'Gas, eléctricos y vitrocerámicos', accent: 'warm', url: 'https://www.tecnicaintegrada.com.ar/linea-blanca/anafes-y-campanas/' },
  { name: 'Microondas', sub: 'Digitales y con grill', accent: 'cool', url: 'https://www.tecnicaintegrada.com.ar/pequenos-electrodomesticos/microondas/' },
  { name: 'Pequeños electrodomésticos', sub: 'Cafeteras, aspiradoras y más', accent: 'brand', url: 'https://www.tecnicaintegrada.com.ar/pequenos-electrodomesticos/' }];
  return (
    <section id="linea-blanca" className="section linea-preview" data-screen-label="Línea Blanca">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">LÍNEA BLANCA</span>
            <h2>Habilitados por Carrier y Midea<br />para equipar cada espacio de tu hogar.</h2>
          </div>
          <p className="lede" style={{ maxWidth: '36ch' }}>
            Desde el split de tu cuarto hasta la heladera, el lavarropas
            o la cocina empotrada — todo bajo el mismo respaldo técnico.
          </p>
        </div>
        <div className="lb-cat-grid">
          {categories.map((c, i) =>
          <a key={i} className={"lb-cat-card lb-accent-" + c.accent}
          href={c.url} target="_blank" rel="noopener noreferrer">
              <div className="lb-cat-icon">
                <CategoryIcon name={c.name} />
              </div>
              <div className="lb-cat-meta">
                <div className="lb-cat-name">{c.name}</div>
                <div className="lb-cat-count">{c.sub}</div>
              </div>
              <svg className="lb-cat-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M7 17L17 7M17 7H8M17 7v9" />
              </svg>
            </a>
          )}
        </div>
        <div className="center" style={{ marginTop: 'var(--gap-xl)' }}>
          <a className="btn btn-primary btn-lg" href={SHOWROOM_URL} target="_blank" rel="noopener noreferrer">
            Visitá nuestro sitio web
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 17L17 7M17 7H8M17 7v9" /></svg>
          </a>
        </div>
      </div>
    </section>);

};

const CategoryIcon = ({ name }) => {
  const n = name.toLowerCase();
  const c = "currentColor";
  if (n.includes('aire')) return (
    <svg viewBox="0 0 32 24" width="40" height="30" fill="none" stroke={c} strokeWidth="1.5">
      <rect x="2" y="2" width="28" height="14" rx="2" />
      <path d="M2 9h28M6 13h20" />
      <path d="M10 18l-2 4M16 18v4M22 18l2 4" />
    </svg>);

  if (n.includes('helad')) return (
    <svg viewBox="0 0 24 32" width="30" height="40" fill="none" stroke={c} strokeWidth="1.5">
      <rect x="3" y="2" width="18" height="28" rx="2" />
      <path d="M3 13h18" />
      <path d="M6 7v3M6 17v6" />
    </svg>);

  if (n.includes('lavarrop')) return (
    <svg viewBox="0 0 28 32" width="35" height="40" fill="none" stroke={c} strokeWidth="1.5">
      <rect x="2" y="2" width="24" height="28" rx="2" />
      <circle cx="14" cy="19" r="7" />
      <circle cx="14" cy="19" r="4" />
      <circle cx="7" cy="7" r="1" fill={c} />
      <circle cx="11" cy="7" r="1" fill={c} />
    </svg>);

  if (n.includes('cocina') || n.includes('anafe')) return (
    <svg viewBox="0 0 32 24" width="40" height="30" fill="none" stroke={c} strokeWidth="1.5">
      <rect x="2" y="4" width="28" height="18" rx="2" />
      <circle cx="9" cy="13" r="3" />
      <circle cx="23" cy="13" r="3" />
      <path d="M2 8h28" />
    </svg>);

  if (n.includes('microondas')) return (
    <svg viewBox="0 0 32 22" width="40" height="28" fill="none" stroke={c} strokeWidth="1.5">
      <rect x="2" y="2" width="28" height="18" rx="2" />
      <rect x="5" y="5" width="16" height="12" />
      <circle cx="25" cy="8" r="1" fill={c} />
      <circle cx="25" cy="12" r="1" fill={c} />
      <rect x="23" y="14" width="5" height="3" />
    </svg>);

  return (
    <svg viewBox="0 0 28 28" width="36" height="36" fill="none" stroke={c} strokeWidth="1.5">
      <rect x="3" y="3" width="22" height="22" rx="3" />
      <path d="M9 14h10M9 18h6" />
      <circle cx="14" cy="9" r="2" />
    </svg>);

};

/* ─── WHY TRUST — refined ─── */
const WhyTrust = () => {
  const reasons = [
  { n: '01', t: '35 años de experiencia', d: 'Desarrollamos soluciones termomecánicas para proyectos residenciales, comerciales e industriales.' },
  { n: '02', t: 'Soluciones integrales', d: 'Desde la ingeniería y provisión de equipos hasta instalación, puesta en marcha y mantenimiento.' },
  { n: '03', t: 'Equipo especializado', d: 'Profesionales capacitados que trabajan junto a arquitectos e ingenieros, con cumplimiento normativo total.' },
  { n: '04', t: 'Respaldo de marca', d: 'Agente Oficial Carrier con cobertura técnica nacional y proveedores premium.' }];

  return (
    <section className="section why-trust">
      <div className="container">
        <div className="why-grid">
          <div className="why-head">
            <span className="eyebrow">¿Por qué Aclimatar?</span>
            <h2>Cuatro razones<br />para confiar tu obra.</h2>
            <p className="lede">
              Construimos relaciones largas con nuestros clientes porque entregamos
              soluciones que duran décadas y servicio que responde cuando hace falta.
            </p>
          </div>
          <div className="why-list">
            {reasons.map((r, i) =>
            <div key={i} className="why-item">
                <div className="why-num">{r.n}</div>
                <div>
                  <h3>{r.t}</h3>
                  <p>{r.d}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

};

/* ─── DISTRIBUIDORES — Marcas con las que trabajamos ─── */
const Distribuidores = () => {
  // Each slot has a stable id so dropped logos persist. The wordmark below
  // doubles as a placeholder and as a label once the logo is loaded.
  const partners = [
  { id: 'logo-carrier', name: 'Carrier', sub: 'Factory Authorized Dealer' },
  { id: 'logo-midea', name: 'Midea', sub: 'Partner comercial' },
  { id: 'logo-schneider', name: 'Schneider Electric', sub: 'Partner de automatización' },
  { id: 'logo-honeywell', name: 'Honeywell', sub: 'Partner técnico' },
  { id: 'logo-amcham', name: 'AmCham Argentina', sub: 'Cámara de Comercio' }];

  return (
    <section className="section-tight brands-section">
      <div className="container">
        <div className="brands-head">
          <span className="eyebrow">Marcas con las que trabajamos</span>
          <h3>Equipos premium, ingeniería de origen.</h3>
          <p className="brands-lede">
            Distribuidores autorizados y partners técnicos de los principales
            fabricantes mundiales en climatización, automatización y control.
          </p>
        </div>
        <div className="logo-grid logo-grid-brands">
          {partners.map((p) =>
          <div key={p.id} className={"logo-tile" + (p.id === 'logo-amcham' ? ' logo-tile-amcham' : '')}>
              <div className="logo-tile-slot">
                <image-slot
                id={p.id}
                src={'logos/' + p.id + '.webp'}
                fit="contain"
                shape="rect"
                placeholder={p.name}>
              </image-slot>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

/* ─── PROYECTOS — real projects, 5-card masonry ─── */
const PROJECTS = [
{
  id: 'banco-ciudad',
  t: 'Banco Ciudad',
  tag: 'Corporativo',
  short: 'Sistema central de enfriamiento por agua + SMMS Toshiba VRF + equipos de precisión para salas de servidores.',
  images: [
  'photos/banco-ciudad/27.jpg',
  'photos/banco-ciudad/25.jpg',
  'photos/banco-ciudad/11.jpg',
  'photos/banco-ciudad/16.jpg',
  'photos/banco-ciudad/19.jpg',
  'photos/banco-ciudad/12.jpg',
  'photos/banco-ciudad/18.jpg',
  'photos/banco-ciudad/02.jpg',
  'photos/banco-ciudad/03.jpg',
  'photos/banco-ciudad/06.jpg',
  'photos/banco-ciudad/07.jpg',
  'photos/banco-ciudad/08.jpg',
  'photos/banco-ciudad/13.jpg',
  'photos/banco-ciudad/23.jpg'],

  phFallback: 'ph-cool',
  desc: 'Proyecto integral de climatización y ventilación para edificio corporativo, contemplando la instalación de sistemas de inyección y extracción de aire para asegurar una adecuada renovación y calidad ambiental en todos los sectores. Se ejecutó un sistema central de enfriamiento por agua, incluyendo máquina enfriadora (chiller), UTAs, bombas de circulación y toda la infraestructura hidráulica asociada. Adicionalmente, se implementó climatización mediante tecnología SMMS Toshiba (VRF) y equipos de precisión para salas de servidores.'
},
{
  id: 'banco-galicia',
  t: 'Banco Galicia · Edificio Leiva',
  tag: 'Centro de Cómputos',
  short: 'Chiller Carrier AquaForce de alta eficiencia, operativo de izaje complejo en zona urbana.',
  images: [
  'photos/banco-galicia/06-terraza-aerea.jpg',
  'photos/banco-galicia/01-izaje-cielo.jpg',
  'photos/banco-galicia/02-izaje-galicia.jpg',
  'photos/banco-galicia/05-frame-53.jpg',
  'photos/banco-galicia/03-frame-26.jpg',
  'photos/banco-galicia/04-frame-45.jpg',
  'photos/banco-galicia/09-chiller-calle.jpg',
  'photos/banco-galicia/08-aclimatar-team.jpg',
  'photos/banco-galicia/07-chiller-detalle.jpg',
  'photos/banco-galicia/10-foto.webp'],

  phFallback: 'ph-blue',
  desc: 'Reemplazo integral del sistema de climatización del centro de cómputos mediante la provisión e instalación de un chiller Carrier AquaForce de alta eficiencia, diseñado para operación continua en aplicaciones críticas. El proyecto incluyó un operativo de izaje de alta complejidad en zona urbana de tránsito intenso, coordinado con equipos especializados y estrictas medidas de seguridad. El equipo fue montado sobre estructura metálica reforzada con amortiguadores antivibratorios.'
},
{
  id: 'clinica-bazterrica',
  t: 'Clínica Bazterrica',
  tag: 'Sanitario',
  short: 'Climatización integral para edificio sanitario con chiller central, UTAs y montaje en altura.',
  images: [
  'photos/bazterrica/03-install.jpg',
  'photos/bazterrica/01-fans-aerial.jpg',
  'photos/bazterrica/06-crane-lift.jpg',
  'photos/bazterrica/07-equipment.jpg',
  'photos/bazterrica/05-uta-shaft.jpg',
  'photos/bazterrica/04-skyline-blue-fan.jpg',
  'photos/bazterrica/02-rooftop-ducts.jpg'],

  phFallback: 'ph-cool',
  desc: 'Proyecto integral de climatización para edificio de uso sanitario, contemplando la instalación de sistemas de inyección y extracción de aire para garantizar condiciones óptimas de ventilación y calidad ambiental en áreas críticas. Se ejecutó la instalación de un sistema central de enfriamiento por agua, incluyendo chiller, UTAs, bombas de circulación e infraestructura hidráulica. El desarrollo incluyó montaje en altura, distribución de cañerías, aislaciones térmicas y puesta en marcha del sistema.'
},
{
  id: 'altos-del-rio',
  t: 'Altos del Río',
  tag: 'Propiedad Horizontal',
  short: 'Climatización central con tecnología SMMS Toshiba VRF + sistemas de inyección y extracción.',
  images: [
  'photos/altos-del-rio/01-vrf-array.jpg',
  'photos/altos-del-rio/02-vrf-detail.jpg',
  'photos/altos-del-rio/03-rooftop-ducts-city.jpg',
  'photos/altos-del-rio/04-blue-fan-skyline.jpg',
  'photos/altos-del-rio/05-blue-fan-rooftop.jpg',
  'photos/altos-del-rio/06-carrier-uta.jpg',
  'photos/altos-del-rio/07-duct-distribution.jpg',
  'photos/altos-del-rio/08-rooftop-ducts.jpg',
  'photos/altos-del-rio/09-duct-interior.jpg',
  'photos/altos-del-rio/10-office-conditioned.jpg',
  'photos/altos-del-rio/11-cassette.jpg',
  'photos/altos-del-rio/12-room-units.jpg',
  'photos/altos-del-rio/13-vent-detail.jpg',
  'photos/altos-del-rio/14-garage-extraction.jpg'],

  phFallback: 'ph-warm',
  desc: 'Proyecto de climatización integral en edificio, incluyendo la instalación de sistemas de inyección y extracción de aire para garantizar una correcta renovación y calidad del ambiente interior. Se implementó climatización central mediante tecnología SMMS Toshiba (VRF), permitiendo control eficiente de temperatura en múltiples sectores. La instalación incluyó montaje de unidades exteriores en terraza, distribución de cañerías frigoríficas y red de conductos de ventilación.'
},
{
  id: 'quartier-lacroze',
  t: 'Edificio Quartier Lacroze',
  tag: 'Propiedad Horizontal',
  short: 'Daikin VRV IV en terraza + sala de máquinas completa: calderas, intercambiadores de placas, cuadros de bombas y tanques para agua caliente y pileta climatizada.',
  images: [
  'photos/quartier-lacroze/01-vrv-terraza.jpg',
  'photos/quartier-lacroze/02-vrv-detalle.jpg',
  'photos/quartier-lacroze/03-caldera.jpg',
  'photos/quartier-lacroze/04-bombas-primario.jpg',
  'photos/quartier-lacroze/05-bombas-primario-detalle.jpg',
  'photos/quartier-lacroze/06-placas-secundario.jpg',
  'photos/quartier-lacroze/07-placas-grundfos.jpg',
  'photos/quartier-lacroze/08-tanques.jpg',
  'photos/quartier-lacroze/09-valvula-mezcladora.jpg'],

  phFallback: 'ph-blue',
  desc: 'Aclimatar ejecutó la climatización integral y el sistema de generación de agua caliente del Edificio Quartier Lacroze, combinando climatización por expansión directa con una sala de máquinas completa para agua caliente sanitaria y pileta climatizada. En terraza se realizó el montaje de las unidades condensadoras Daikin VRV IV (R410A), que abastecen la climatización de los departamentos. En la sala de máquinas se desarrolló el circuito primario de calderas, con cuadro de bombas y cañería de hierro negro, encargado de generar el agua caliente. Ese circuito primario entrega su energía, a través de placas de intercambio de calor, a un circuito secundario con sus propios cuadros de bombas en hierro negro y acero inoxidable, que distribuye el agua caliente sanitaria a los departamentos. El sistema se completa con un tanque acumulador, un tanque de expansión (dilatador) y un cuadro de válvula mezcladora que regula la temperatura de provisión de agua caliente a las unidades y el climatizado de la pileta del edificio.'
}];


const Projects = ({ setPage }) => {
  return (
    <section id="proyectos" className="section projects">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Proyectos realizados</span>
            <h2>Obras que respaldan<br />cada palabra.</h2>
          </div>
          <a className="arrow-link" onClick={() => setPage && setPage('proyectos')}>
            Ver todos los proyectos
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
          </a>
        </div>
        <div className="proj-grid">
          {PROJECTS.slice(0, 4).map((p, i) =>
          <article key={p.id} className={"proj-card proj-card-" + i}
          onClick={() => setPage && setPage('proyectos')}>
              <ProjImage p={p} />
              <div className="proj-meta">
                <span className="pill pill-soft">{p.tag}</span>
                <h3>{p.t}</h3>
                <p className="proj-short">{p.short}</p>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

};

/* Project image with graceful fallback to placeholder.
   Supports either p.img (string) or p.images (array — uses first). */
const ProjImage = ({ p, className = 'proj-img', index = 0 }) => {
  const [failed, setFailed] = React.useState(false);
  const src = p.images && p.images[index] || p.img;
  if (failed || !src) {
    return (
      <div className={"ph " + p.phFallback + " " + className}>
        <span className="ph-label">{p.t}</span>
      </div>);

  }
  return (
    <div className={className + ' proj-img-photo'}>
      <img src={src} alt={p.t} loading="lazy" onError={() => setFailed(true)} />
    </div>);

};

/* ─── CLIENTES — Empresas que confiaron en nosotros ─── */
const Clients = () => {
  // Empresas que confiaron en Aclimatar a lo largo de 35 años de operación.
  const clients = [
  { id: 'cli-banco-ciudad', name: 'Banco Ciudad', sub: 'Banca' },
  { id: 'cli-banco-galicia', name: 'Banco Galicia', sub: 'Banca' },
  { id: 'cli-banco-provincia', name: 'Banco Provincia', sub: 'Banca' },
  { id: 'cli-banco-hipo', name: 'Banco Hipotecario', sub: 'Banca' },
  { id: 'cli-citibank', name: 'Citibank', sub: 'Banca' },
  { id: 'cli-hsbc', name: 'HSBC', sub: 'Banca' },
  { id: 'cli-santander', name: 'Santander', sub: 'Banca' },
  { id: 'cli-allaria', name: 'Allaria', sub: 'Servicios financieros' },
  { id: 'cli-presidencia', name: 'Presidencia de la Nación', sub: 'Sector público' },
  { id: 'cli-min-eco', name: 'Ministerio de Economía', sub: 'Sector público' },
  { id: 'cli-aa2000', name: 'Aeropuertos Argentina', sub: 'Infraestructura' },
  { id: 'cli-aerolineas', name: 'Aerolíneas Argentinas', sub: 'Aviación' },
  { id: 'cli-telefonica', name: 'Telefónica', sub: 'Telecomunicaciones' },
  { id: 'cli-nextel', name: 'Nextel', sub: 'Telecomunicaciones' },
  { id: 'cli-edenor', name: 'Edenor', sub: 'Energía' },
  { id: 'cli-total', name: 'Total', sub: 'Energía' },
  { id: 'cli-techint', name: 'Techint', sub: 'Industrial' },
  { id: 'cli-criba', name: 'CRIBA', sub: 'Constructora' },
  { id: 'cli-argencons', name: 'Argencons', sub: 'Desarrollador inmobiliario' },
  { id: 'cli-roarco', name: 'Roarco', sub: 'Constructora' },
  { id: 'cli-exolgan', name: 'Exolgan', sub: 'Terminal portuaria' },
  { id: 'cli-honda', name: 'Honda', sub: 'Industrial · automotriz' },
  { id: 'cli-mercedes', name: 'Mercedes-Benz', sub: 'Industrial · automotriz' },
  { id: 'cli-coca-cola', name: 'Coca-Cola', sub: 'Consumo masivo' },
  { id: 'cli-mccain', name: 'McCain', sub: 'Alimenticio' },
  { id: 'cli-mcdonalds', name: "McDonald's", sub: 'Gastronomía' },
  { id: 'cli-sc-johnson', name: 'SC Johnson', sub: 'Consumo masivo' },
  { id: 'cli-bat', name: 'British American Tobacco', sub: 'Industrial' },
  { id: 'cli-tabacalera', name: 'Tabacalera Sarandí', sub: 'Industrial' },
  { id: 'cli-whirlpool', name: 'Whirlpool', sub: 'Industrial' },
  { id: 'cli-philips', name: 'Philips', sub: 'Tecnología' },
  { id: 'cli-cencosud', name: 'Cencosud', sub: 'Retail' },
  { id: 'cli-jumbo', name: 'Jumbo', sub: 'Retail' },
  { id: 'cli-blaisten', name: 'Blaisten', sub: 'Retail' },
  { id: 'cli-hosp-italiano', name: 'Hospital Italiano', sub: 'Salud' },
  { id: 'cli-favaloro', name: 'Fundación Favaloro', sub: 'Salud' },
  { id: 'cli-malbran', name: 'Instituto Malbrán', sub: 'Salud · investigación' },
  { id: 'cli-osde', name: 'OSDE', sub: 'Salud' },
  { id: 'cli-omint', name: 'Omint', sub: 'Salud' },
  { id: 'cli-uca', name: 'UCA', sub: 'Educación' },
  { id: 'cli-river', name: 'River Plate', sub: 'Deportivo' },
  { id: 'cli-boca', name: 'Boca Juniors', sub: 'Deportivo' },
  { id: 'cli-temaiken', name: 'Temaikèn', sub: 'Fundación' },
  { id: 'cli-bingo-cab', name: 'Bingo Caballito', sub: 'Entretenimiento' }];

  return (
    <section className="section-tight clients-section">
      <div className="container">
        <div className="brands-head">
          <span className="eyebrow">Empresas que confiaron en nosotros</span>
          <h3>Más de 40 organizaciones eligieron Aclimatar.</h3>
          <p className="brands-lede">
            Bancos, industria, salud, retail, sector público y deporte —
            obras de climatización ejecutadas a lo largo de 35 años
            en todo el país.
          </p>
        </div>
        <div className="clients-marquee">
          <div className="clients-marquee-track">
            {[...clients, ...clients].map((c, i) =>
            <div key={c.id + '-' + i} className="logo-tile logo-tile-sm logo-tile-marquee">
                <div className="logo-tile-slot">
                  <image-slot
                  id={c.id}
                  src={'logos/' + c.id + '.webp'}
                  fit="contain"
                  shape="rect"
                  placeholder={c.name}>
                </image-slot>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

};

/* ─── CONTACTO — luminous ─── */
const CONTACT_WA = '5491130697492'; // WhatsApp Aclimatar
const CONTACT_EMAIL = 'administracion@aclimatarargentina.com.ar';

// ⚠️ REEMPLAZAR por el endpoint real de Formspree para el formulario de PROYECTOS.
//    Creá un formulario en https://formspree.io (apuntado a administracion@aclimatarargentina.com.ar)
//    y pegá acá su URL, con la forma: https://formspree.io/f/xxxxxxxx
const FORMSPREE_PROYECTOS = 'https://formspree.io/f/xrewbdkn';

const Contact = () => {
  const EMPTY = { nombre: '', empresa: '', email: '', telefono: '', tipo: 'Climatización residencial', mensaje: '' };
  const [form, setForm] = React.useState(EMPTY);
  const [errors, setErrors] = React.useState({});
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const sent = status === 'sent';

  const set = (k) => (e) => {
    setForm((f) => ({ ...f, [k]: e.target.value }));
    if (errors[k]) setErrors((er) => ({ ...er, [k]: false }));
  };

  // Build a readable lead message used for the WhatsApp / email fallbacks.
  const buildBody = () => {
    const L = [];
    L.push('Nueva consulta desde aclimatarargentina.com.ar');
    L.push('');
    L.push('Nombre: ' + form.nombre);
    if (form.empresa.trim()) L.push('Empresa: ' + form.empresa);
    L.push('Email: ' + form.email);
    if (form.telefono.trim()) L.push('Teléfono: ' + form.telefono);
    L.push('Tipo de proyecto: ' + form.tipo);
    L.push('');
    L.push('Mensaje:');
    L.push(form.mensaje.trim() || '(sin detalle)');
    return L.join('\n');
  };

  const validate = () => {
    const er = {};
    if (!form.nombre.trim()) er.nombre = true;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) er.email = true;
    setErrors(er);
    return Object.keys(er).length === 0;
  };

  // Envía la consulta directamente a Formspree (sin mailto, sin abrir Outlook).
  const onSubmit = async (e) => {
    e.preventDefault();
    if (!validate() || status === 'sending') return;
    setStatus('sending');
    try {
      const fd = new FormData();
      fd.append('Nombre', form.nombre);
      fd.append('Empresa', form.empresa || '—');
      fd.append('Email', form.email);
      fd.append('Teléfono', form.telefono || '—');
      fd.append('Tipo de proyecto', form.tipo);
      fd.append('Mensaje', form.mensaje || '(sin detalle)');
      fd.append('_subject', 'Consulta web · ' + form.nombre);
      fd.append('email', form.email); // reply-to
      const res = await fetch(FORMSPREE_PROYECTOS, {
        method: 'POST',
        headers: { Accept: 'application/json' },
        body: fd,
      });
      if (res.ok) {
        setStatus('sent');
      } else {
        setStatus('error');
      }
    } catch (err) {
      setStatus('error');
    }
  };

  const waHref = 'https://wa.me/' + CONTACT_WA + '?text=' + encodeURIComponent(buildBody());

  return (
  <section id="contacto" className="section contact">
    <div className="container">
      <div className="contact-grid">
        <div className="contact-copy">
          <span className="eyebrow">Contacto</span>
          <h2>Coordinemos una<br />evaluación técnica.</h2>
          <p className="lede">
            Completá el formulario y nuestro equipo se contacta para coordinar
            una evaluación técnica sin cargo en tu obra.
          </p>
          <div className="contact-info">
            <div className="contact-info-item">
              <div className="contact-info-lbl">Oficina</div>
              <a className="contact-info-val contact-info-link" href="tel:+541144883917">(5411) 4488-3917</a>
            </div>
            <div className="contact-info-item">
              <div className="contact-info-lbl">Email</div>
              <a className="contact-info-val contact-info-link" href={'mailto:' + CONTACT_EMAIL}>{CONTACT_EMAIL}</a>
            </div>
            <div className="contact-info-item">
              <div className="contact-info-lbl">Dirección</div>
              <a className="contact-info-val contact-info-link"
            href="https://maps.google.com/maps?q=Aclimatar+Mu%C3%B1oz+3681+Ciudadela+B1702+Buenos+Aires"
            target="_blank" rel="noopener noreferrer">
                C. Juan B. Muñoz 3681,<br />Ciudadela, Buenos Aires · B1702
                <span className="contact-info-maps">Ver en Google Maps ↗</span>
              </a>
            </div>
          </div>
        </div>

        {sent ? (
        <div className="contact-form contact-sent" role="status" aria-live="polite">
          <div className="contact-sent-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
          </div>
          <h3>¡Recibimos tu consulta!</h3>
          <p>
            Tu mensaje llegó a nuestro equipo. Te respondemos en menos de 24h hábiles.
            Si necesitás algo urgente, escribinos por WhatsApp.
          </p>
          <div className="contact-sent-actions">
            <a className="btn btn-secondary" href={waHref} target="_blank" rel="noopener noreferrer">
              Escribir por WhatsApp
            </a>
          </div>
          <button type="button" className="contact-sent-reset" onClick={() => { setForm(EMPTY); setStatus('idle'); }}>
            Cargar otra consulta
          </button>
        </div>
        ) : (
        <form className="contact-form" noValidate onSubmit={onSubmit}>
          <div className="cf-row-2">
            <div className="cf-field">
              <label>Nombre y apellido</label>
              <input type="text" value={form.nombre} onChange={set('nombre')}
                className={errors.nombre ? 'cf-invalid' : ''} placeholder="María García" />
            </div>
            <div className="cf-field">
              <label>Empresa</label>
              <input type="text" value={form.empresa} onChange={set('empresa')} placeholder="Opcional" />
            </div>
          </div>
          <div className="cf-row-2">
            <div className="cf-field">
              <label>Email</label>
              <input type="email" value={form.email} onChange={set('email')}
                className={errors.email ? 'cf-invalid' : ''} placeholder="vos@empresa.com" />
            </div>
            <div className="cf-field">
              <label>Teléfono</label>
              <input type="tel" value={form.telefono} onChange={set('telefono')} placeholder="+54 11" />
            </div>
          </div>
          <div className="cf-field">
            <label>Tipo de proyecto</label>
            <select value={form.tipo} onChange={set('tipo')}>
              <option>Climatización residencial</option>
              <option>Edificio / Propiedad Horizontal</option>
              <option>Comercial / Gastronómico</option>
              <option>Industrial</option>
              <option>Compra de electrodomésticos</option>
            </select>
          </div>
          <div className="cf-field">
            <label>Mensaje</label>
            <textarea rows="4" value={form.mensaje} onChange={set('mensaje')}
              placeholder="Contanos sobre tu proyecto, m² aproximados, ubicación..."></textarea>
          </div>
          {(errors.nombre || errors.email) &&
            <p className="cf-error">Completá tu nombre y un email válido para continuar.</p>}
          {status === 'error' &&
            <p className="cf-error">
              No pudimos enviar tu consulta en este momento. Reintentá en unos minutos o escribinos por <a href={waHref} target="_blank" rel="noopener noreferrer">WhatsApp</a>.
            </p>}
          <button type="submit" className="btn btn-primary btn-lg" style={{ width: '100%' }}
            disabled={status === 'sending'}>
            {status === 'sending' ? 'Enviando…' : 'Enviar consulta'}
            {status !== 'sending' &&
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7" /></svg>}
          </button>
          <p className="cf-fine">
            Tu consulta llega por email a nuestro equipo. Te respondemos en menos de 24h hábiles.
          </p>
        </form>
        )}
      </div>
    </div>
  </section>);
};


/* ─── FOOTER ─── */
const Footer = ({ setPage }) =>
<footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <a className="footer-logo-link"
        onClick={() => {setPage('home');window.scrollTo({ top: 0, behavior: 'smooth' });}}
        style={{ cursor: 'pointer', display: 'inline-block' }}>
            <Logo />
          </a>
          <p style={{ marginTop: 16, maxWidth: '32ch' }}>
            Soluciones integrales en climatización residencial, comercial e industrial.
            35 años climatizando Argentina.
          </p>
          <a className="footer-linkedin" href="https://www.linkedin.com/company/aclimatar-s-r-l/" target="_blank" rel="noopener noreferrer">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 1 1 .04 5 2.5 2.5 0 0 1-.04-5zM3 9.5h4V21H3V9.5zM10 9.5h3.8v1.65h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21H18.4v-5.1c0-1.22-.02-2.78-1.7-2.78-1.7 0-1.96 1.32-1.96 2.7V21H10V9.5z" /></svg>
            Aclimatar Argentina
          </a>
        </div>
        <div className="footer-col">
            <div className="footer-h">Empresa</div>
                <a onClick={() => { setPage('home'); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>Home</a>
                <a onClick={() => { setPage('home'); setTimeout(() => document.getElementById('nosotros')?.scrollIntoView({ behavior: 'smooth' }), 100); }}>Nosotros</a>
                <a onClick={() => { setPage('home'); setTimeout(() => document.getElementById('servicios')?.scrollIntoView({ behavior: 'smooth' }), 100); }}>Servicios</a>
                <a onClick={() => { setPage('home'); setTimeout(() => document.getElementById('proyectos')?.scrollIntoView({ behavior: 'smooth' }), 100); }}>Proyectos</a>
                <a onClick={() => { setPage('home'); setTimeout(() => document.getElementById('empleo')?.scrollIntoView({ behavior: 'smooth' }), 100); }}>Empleo</a>
                <a onClick={() => { setPage('home'); setTimeout(() => document.getElementById('contacto')?.scrollIntoView({ behavior: 'smooth' }), 100); }}>Contacto</a>
        </div>
        <div className="footer-col">
          <div className="footer-h">Contacto</div>
          <a>(5411) 4488-3917</a>
          <a className="footer-email">administracion@aclimatarargentina.com.ar</a>
          <a className="footer-email">C. Juan B. Muñoz 3681, Ciudadela, Buenos Aires</a>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 Aclimatar S.R.L. · Todos los derechos reservados.</div>
        <div className="footer-bottom-right">
          <a>Términos</a>
          <a>Privacidad</a>
        </div>
      </div>
    </div>
  </footer>;


Object.assign(window, {
  About, KPIBar, Services, Comfort, LineaBlancaPreview,
  WhyTrust, Distribuidores, Projects, Clients, Contact, Footer,
  CategoryIcon, PROJECTS, ProjImage
});