// HOME — componentes especificos: Hero, Clients, Services, Cases, Stats, CTA banner

function HeroBuildingBg() {
  // Skyline silhouette evocativo, formas geométricas — no replica edificio real
  return (
    <svg className="hero__skyline" viewBox="0 0 800 600" fill="none" preserveAspectRatio="xMaxYMax meet" aria-hidden="true">
      <defs>
        <linearGradient id="bldGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#3a2616" />
          <stop offset="60%" stopColor="#1a1108" />
          <stop offset="100%" stopColor="#0a0805" />
        </linearGradient>
        <linearGradient id="winGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.5" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.05" />
        </linearGradient>
      </defs>
      {/* Building masses */}
      <rect x="60" y="180" width="160" height="420" fill="url(#bldGrad)" />
      <rect x="240" y="120" width="200" height="480" fill="url(#bldGrad)" />
      <rect x="460" y="220" width="120" height="380" fill="url(#bldGrad)" />
      <rect x="600" y="80" width="180" height="520" fill="url(#bldGrad)" />
      {/* Window grids */}
      <g opacity="0.45">
        {Array.from({ length: 14 }).map((_, r) => (
          <g key={r}>
            {Array.from({ length: 5 }).map((_, c) => (
              <rect key={c} x={70 + c * 28} y={200 + r * 28} width="18" height="14" fill="url(#winGrad)" />
            ))}
            {Array.from({ length: 6 }).map((_, c) => (
              <rect key={"b"+c} x={250 + c * 30} y={140 + r * 30} width="20" height="16" fill="url(#winGrad)" />
            ))}
            {Array.from({ length: 5 }).map((_, c) => (
              <rect key={"d"+c} x={610 + c * 32} y={100 + r * 32} width="22" height="18" fill="url(#winGrad)" />
            ))}
          </g>
        ))}
      </g>
      {/* Roof accents */}
      <line x1="240" y1="120" x2="440" y2="120" stroke="var(--accent)" strokeWidth="1" opacity="0.6" />
      <line x1="600" y1="80" x2="780" y2="80" stroke="var(--accent)" strokeWidth="1" opacity="0.6" />
    </svg>
  );
}

function PillarIcon({ kind }) {
  const stroke = "currentColor";
  if (kind === "consultoria") {
    return (
      <HexMark size={48} color="var(--accent)" strokeWidth={5}>
        <g transform="translate(30 30) scale(0.4)" stroke={stroke} strokeWidth="6" fill="none" strokeLinecap="round" strokeLinejoin="round" color="var(--accent)">
          <path d="M20 70 L40 30 L60 60 L80 20" />
          <circle cx="80" cy="20" r="6" fill="currentColor" />
          <path d="M10 80 L90 80" />
        </g>
      </HexMark>
    );
  }
  if (kind === "infra") {
    return (
      <HexMark size={48} color="var(--accent)" strokeWidth={5}>
        <g transform="translate(28 28) scale(0.44)" stroke={stroke} strokeWidth="5" fill="none" color="var(--accent)" strokeLinejoin="round">
          <rect x="15" y="20" width="70" height="20" rx="3" />
          <rect x="15" y="50" width="70" height="20" rx="3" />
          <circle cx="25" cy="30" r="2.5" fill="currentColor" />
          <circle cx="25" cy="60" r="2.5" fill="currentColor" />
          <line x1="35" y1="30" x2="75" y2="30" />
          <line x1="35" y1="60" x2="75" y2="60" />
        </g>
      </HexMark>
    );
  }
  if (kind === "software") {
    return (
      <HexMark size={48} color="var(--accent)" strokeWidth={5}>
        <g transform="translate(28 30) scale(0.44)" stroke={stroke} strokeWidth="6" fill="none" strokeLinecap="round" strokeLinejoin="round" color="var(--accent)">
          <path d="M30 20 L10 50 L30 80" />
          <path d="M70 20 L90 50 L70 80" />
          <path d="M55 15 L45 85" />
        </g>
      </HexMark>
    );
  }
  return null;
}

function HeroSection() {
  return (
    <section className="hero">
      <div className="hero__bg">
        <div className="hero__bg-image" />
        <div className="hero__bg-grid" />
      </div>
      <HeroBuildingBg />
      <div className="container hero__inner">
        <div className="reveal is-in">
          <span className="kicker">INFRAESTRUCTURA · SOFTWARE · PERSONAS</span>
          <h1 className="hero__title">
            Transformamos tecnología<br />
            en <em>crecimiento real</em>
          </h1>
          <p className="hero__lead">
            Consultoría tecnológica integral para empresas que quieren modernizar
            su infraestructura, automatizar procesos y escalar con soluciones
            seguras y eficientes.
          </p>
          <div className="hero__ctas">
            <a href="servicios.html" className="btn btn--primary btn--lg">
              Nuestros servicios <ArrowRight size={15} />
            </a>
            <a href="contacto.html" className="btn btn--ghost-dark btn--lg">
              Hablemos de tu proyecto <ArrowRight size={15} />
            </a>
          </div>
        </div>
        <div className="hero__pillars reveal-stagger">
          <div className="pillar">
            <PillarIcon kind="consultoria" />
            <div>
              <h3 className="pillar__title">Consultoría estratégica</h3>
              <p className="pillar__text">
                Alineamos tecnología y negocio para impulsar tu crecimiento.
              </p>
            </div>
          </div>
          <div className="pillar">
            <PillarIcon kind="infra" />
            <div>
              <h3 className="pillar__title">Infraestructura robusta</h3>
              <p className="pillar__text">
                Diseñamos y gestionamos entornos seguros, escalables y eficientes.
              </p>
            </div>
          </div>
          <div className="pillar">
            <PillarIcon kind="software" />
            <div>
              <h3 className="pillar__title">Software e integraciones</h3>
              <p className="pillar__text">
                Desarrollamos soluciones a medida e integramos tus sistemas.
              </p>
            </div>
          </div>
          <div className="pillar">
            <PillarIcon kind="consultoria" />
            <div>
              <h3 className="pillar__title">Kit Digital</h3>
              <p className="pillar__text">
                Te guiamos para convertir ayudas de digitalización en herramientas útiles para tu empresa.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ClientsBand() {
  const clients = [
    { name: "Tramarcan", src: "assets/clients/tramarcan.png" },
    { name: "Bapp Servicios y Transporte", src: "assets/clients/bapp.png" },
    { name: "TransAmerica Supplys", src: "assets/clients/transamerica-supplys.webp" },
    { name: "Vilacar", src: "assets/clients/vilacar.png" },
    { name: "Venezia Clinic", src: "assets/clients/venezia-clinic.webp" },
    { name: "ICM - Colegio Inmaculado Corazón de María", src: "assets/clients/icmaria.png" },
    { name: "Meralki Projects", src: "assets/clients/meralki.png" },
  ];
  return (
    <section className="clients">
      <div className="container">
        <p className="clients__label">Empresas que confían en nosotros</p>
        <div className="clients__row reveal-stagger">
          {clients.map((c, i) => (
            <span key={i} className="client-logo">
              <img src={c.src} alt={`${c.name} logo`} loading="lazy" />
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function KitDigitalHomeSection() {
  return (
    <section className="kit-home">
      <div className="container kit-home__inner">
        <div className="kit-home__copy reveal">
          <span className="kicker">KIT DIGITAL</span>
          <h2>Digitaliza tu empresa aprovechando mejor las ayudas disponibles</h2>
          <p>
            Te ayudamos a aterrizar el Kit Digital en soluciones concretas:
            procesos menos manuales, herramientas conectadas, gestión más clara
            y acompañamiento para que el cambio se use de verdad.
          </p>
          <div className="kit-home__actions">
            <a href="servicios.html#kit-digital" className="btn btn--primary btn--lg">
              Ver cómo trabajamos <ArrowRight size={15} />
            </a>
            <a href="contacto.html" className="btn btn--ghost-light btn--lg">
              Consultar mi caso <ArrowRight size={15} />
            </a>
          </div>
        </div>
        <div className="kit-home__media reveal">
          <img src="assets/kit-digital-visual.svg" alt="Referencia visual de Kit Digital para pymes" loading="lazy" />
        </div>
      </div>
    </section>
  );
}

function ServiceIcon({ kind }) {
  if (kind === "infra") return (
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="6" y="10" width="28" height="18" rx="2" />
      <path d="M6 22h28" />
      <circle cx="11" cy="16" r="1" fill="currentColor" />
      <circle cx="11" cy="25" r="1" fill="currentColor" />
      <path d="M16 32h8M14 28v4M26 28v4" />
    </svg>
  );
  if (kind === "software") return (
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 12 L6 20 L14 28" />
      <path d="M26 12 L34 20 L26 28" />
      <path d="M22 8 L18 32" />
    </svg>
  );
  if (kind === "consultoria") return (
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 32 L14 22 L20 28 L34 10" />
      <path d="M28 10 L34 10 L34 16" />
      <path d="M6 36 L34 36" />
    </svg>
  );
  if (kind === "internacional") return (
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="20" cy="20" r="14" />
      <path d="M6 20h28M20 6c4 4 6 9 6 14s-2 10-6 14c-4-4-6-9-6-14s2-10 6-14z" />
    </svg>
  );
  return null;
}

function ServicesSection() {
  const items = [
    { kind: "software", title: "Software a medida", text: "Software Factory propia: aplicaciones, plataformas y SaaS construidos con stack moderno y entregas rápidas.", href: "servicios.html#software" },
    { kind: "infra", title: "Equipos y hardware", text: "Suministro, alquiler, mantenimiento y reparación de equipos informáticos, redes, periféricos y hardware de empresa.", href: "servicios.html#equipos" },
    { kind: "internacional", title: "Integraciones", text: "Conectamos sistemas, APIs y ERPs, e integramos servidores y almacenamiento en la nube con infraestructura propia.", href: "servicios.html#integraciones" },
    { kind: "consultoria", title: "Automatización + IA", text: "Automatizamos procesos manuales y aplicamos IA donde sí mueve la aguja: atención, datos y back-office.", href: "servicios.html#ia" },
  ];
  return (
    <section className="section section--light">
      <div className="container">
        <div className="section-head--center reveal">
          <span className="kicker kicker--center">NUESTRO ENFOQUE</span>
          <h2 className="section-title">Tecnología con propósito</h2>
          <p className="section-lead">
            Combinamos experiencia en infraestructura, desarrollo de software y
            visión estratégica para ofrecer soluciones que generan impacto medible
            en tu negocio.
          </p>
        </div>
        <div className="services-grid reveal-stagger">
          {items.map((s, i) => (
            <a key={i} href={s.href} className="service-card">
              <span className="service-card__num">0{i + 1} / 04</span>
              <div className="service-card__icon"><ServiceIcon kind={s.kind} /></div>
              <h3 className="service-card__title">{s.title}</h3>
              <p className="service-card__text">{s.text}</p>
              <span className="service-card__more">Saber más <ArrowRight size={11} /></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function DashboardMock() {
  const bars = [40, 60, 35, 75, 55, 90, 65, 80, 50, 95, 70, 85];
  return (
    <div className="dash">
      <div className="dash__bar">
        <i></i><i></i><i></i>
        <span>analytics.ascired.com</span>
      </div>
      <div className="dash__body">
        <div className="dash__cell dash__cell--lg">
          <h6>Operaciones / hora</h6>
          <div className="num">12,847</div>
          <div className="delta">↑ 23.4% vs ayer</div>
          <div className="dash__chart">
            {bars.map((h, i) => <i key={i} style={{ height: `${h}%`, opacity: 0.3 + (h/100)*0.7 }} />)}
          </div>
        </div>
        <div className="dash__cell">
          <h6>Latencia P95</h6>
          <div className="num">142<span style={{fontSize:13,color:"rgba(255,255,255,.5)",marginLeft:4}}>ms</span></div>
          <div className="delta">↓ 8ms</div>
        </div>
        <div className="dash__cell">
          <h6>Disponibilidad</h6>
          <div className="num">99.98<span style={{fontSize:13,color:"rgba(255,255,255,.5)"}}>%</span></div>
          <div className="delta">SLA 99.9%</div>
        </div>
        <div className="dash__cell">
          <h6>Integraciones</h6>
          <div className="num">28</div>
          <div className="delta">activas</div>
        </div>
        <div className="dash__cell">
          <h6>Throughput</h6>
          <svg width="100%" height="36" viewBox="0 0 200 36" preserveAspectRatio="none">
            <path d="M0 28 L20 22 L40 24 L60 18 L80 14 L100 16 L120 10 L140 12 L160 6 L180 8 L200 4"
                  stroke="var(--accent)" strokeWidth="1.5" fill="none" />
            <path d="M0 28 L20 22 L40 24 L60 18 L80 14 L100 16 L120 10 L140 12 L160 6 L180 8 L200 4 L200 36 L0 36 Z"
                  fill="var(--accent)" opacity="0.15" />
          </svg>
        </div>
      </div>
    </div>
  );
}

function CasesSection() {
  const cases = [
    {
      kicker: "EDUCACIÓN",
      title: "Digitalización educativa para ICMaria",
      text: "Acompañamiento tecnológico durante dos décadas: soporte, equipamiento y digitalización del aula con iPads para modernizar la experiencia educativa.",
    },
    {
      kicker: "SALUD",
      title: "Historia clínica digital — Venezia Clinic",
      text: "Plataforma clínica a medida, citación online, pagos y panel médico. Cumplimiento RGPD desde el diseño.",
    },
  ];
  const [idx, setIdx] = React.useState(0);
  const c = cases[idx];
  return (
    <section className="cases">
      <div className="container cases__inner">
        <div className="reveal">
          <span className="kicker">CASOS DE ÉXITO</span>
          <h2 className="section-title" style={{ margin: "18px 0 18px" }}>
            Soluciones que<br />generan resultados
          </h2>
          <p className="section-lead" style={{ color: "var(--text-on-dark-mute)" }}>
            Cada proyecto es una historia de transformación medible. Estos son
            algunos de los retos que hemos resuelto con nuestros clientes.
          </p>
          <div style={{ display: "flex", alignItems: "center", gap: 20, marginTop: 32, flexWrap: "wrap" }}>
            <a href="casos.html" className="btn btn--primary">
              Ver casos de éxito <ArrowRight />
            </a>
            <div className="case-arrows">
              <button className="case-arrow" onClick={() => setIdx((idx - 1 + cases.length) % cases.length)} aria-label="Anterior">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                  <path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
              <button className="case-arrow" onClick={() => setIdx((idx + 1) % cases.length)} aria-label="Siguiente">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                  <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-on-dark-mute)", letterSpacing: "0.06em" }}>
              0{idx + 1} / 0{cases.length}
            </div>
          </div>
        </div>
        <div className="case-feature reveal" key={idx}>
          <div className="case-feature__media">
            <DashboardMock />
          </div>
          <div className="case-feature__body">
            <div className="case-feature__kicker">{c.kicker}</div>
            <h3 className="case-feature__title">{c.title}</h3>
            <p className="case-feature__text">{c.text}</p>
            <a href="casos.html" className="case-feature__more">
              Ver proyecto <ArrowRight />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatIcon({ kind }) {
  const props = { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  if (kind === "team") return <svg {...props}><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3 3-5 6-5s6 2 6 5"/><circle cx="17" cy="9" r="2.5"/><path d="M14 15c2-1 7 0 7 5"/></svg>;
  if (kind === "projects") return <svg {...props}><path d="M3 8h18v12H3z"/><path d="M9 8V5h6v3"/></svg>;
  if (kind === "clients") return <svg {...props}><path d="M3 21V7l6-4 6 4v14M9 21v-6h6v6M3 21h18"/></svg>;
  if (kind === "globe") return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3 4 6 4 9s-1 6-4 9c-3-3-4-6-4-9s1-6 4-9z"/></svg>;
  return null;
}

function StatsSection() {
  const stats = [
    { kind: "team", num: "25+", lbl: "Años de trayectoria" },
    { kind: "projects", num: "300+", lbl: "Proyectos entregados" },
    { kind: "clients", num: "200+", lbl: "Marcas que confían" },
    { kind: "globe", num: "24/7", lbl: "Soporte técnico" },
  ];
  return (
    <section className="stats">
      <div className="container">
        <div className="stats__row reveal-stagger">
          {stats.map((s, i) => (
            <div key={i} className="stat">
              <div className="stat__icon"><StatIcon kind={s.kind} /></div>
              <div>
                <div className="stat__num">{s.num}</div>
                <div className="stat__lbl">{s.lbl}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CtaBanner() {
  return (
    <section className="cta-banner">
      <div className="container cta-banner__inner">
        <div className="cta-banner__icon">
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#0a0a0a" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 11c0-3.3 2.7-6 6-6h6c3.3 0 6 2.7 6 6v0c0 3.3-2.7 6-6 6h-2l-4 4v-4H9c-3.3 0-6-2.7-6-6v0z"/>
          </svg>
        </div>
        <div>
          <h3>¿Tienes un proyecto en mente?</h3>
          <p>Hablemos y encontraremos la mejor solución para llevar tu empresa al siguiente nivel.</p>
        </div>
        <a href="contacto.html" className="btn btn--lg">
          Contacta con nosotros <ArrowRight />
        </a>
      </div>
    </section>
  );
}

Object.assign(window, {
  HeroSection, ClientsBand, ServicesSection, CasesSection, StatsSection, CtaBanner,
});