/* global React, Icon, Placeholder, EstadoPill, UNIDADES, VENTURES, WHATSAPP, WHATSAPP_URL, BrandLogo */
const { useState: useStateSite } = React;

function Logo({ dark = false }) {
  return <BrandLogo height={dark ? 42 : 50} />;
}

function WhatsAppButton({ size = "md", solid = true, label = "Escríbenos" }) {
  const pad = size === "lg" ? "px-6 py-3.5 text-[15px]" : "px-4 py-2.5 text-sm";
  const cls = solid
    ? "bg-taupe-900 text-white hover:bg-taupe-800"
    : "bg-white text-taupe-900 ring-1 ring-taupe-200 hover:bg-taupe-50";
  return (
    <button type="button" onClick={() => window.__openAlzio && window.__openAlzio()}
      className={`group inline-flex items-center gap-2.5 rounded-full font-semibold transition ${pad} ${cls}`}>
      <Icon name="Sparkles" size={size === "lg" ? 19 : 17} className="text-amber-400" strokeWidth={2.4} />
      <span>{label}</span>
      <span className="rounded-full bg-amber-400/15 px-2 py-0.5 font-mono text-[10px] uppercase tracking-wide text-amber-600 hidden sm:inline">Alzio IA</span>
    </button>
  );
}

function PublicNav() {
  const links = ["Proyectos", "Software", "Portafolio", "Contacto"];
  const [open, setOpen] = useStateSite(false);
  return (
    <header className="sticky top-0 z-30 border-b border-taupe-200/70 bg-stone-50/85 backdrop-blur">
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-3.5 sm:px-6 sm:py-4">
        <Logo />
        <nav className="hidden items-center gap-7 md:flex">
          {links.map((l) => (
            <a key={l} href={`#${l.toLowerCase()}`} className="text-sm font-medium text-taupe-600 hover:text-taupe-900 transition">{l}</a>
          ))}
        </nav>
        <div className="flex items-center gap-2">
          <WhatsAppButton />
          <button onClick={() => setOpen((o) => !o)}
            className="grid h-10 w-10 place-items-center rounded-full bg-white text-taupe-700 ring-1 ring-taupe-200 transition hover:bg-taupe-50 md:hidden" title="Menú">
            <Icon name={open ? "X" : "Menu"} size={18} />
          </button>
        </div>
      </div>
      {open && (
        <nav className="border-t border-taupe-200/70 bg-stone-50 px-4 py-2 md:hidden">
          {links.map((l) => (
            <a key={l} href={`#${l.toLowerCase()}`} onClick={() => setOpen(false)}
              className="block rounded-lg px-3 py-2.5 text-sm font-semibold text-taupe-700 transition hover:bg-taupe-100">{l}</a>
          ))}
        </nav>
      )}
    </header>
  );
}

function Hero() {
  return (
    <section className="relative overflow-hidden">
      <div className="mx-auto grid max-w-6xl items-center gap-12 px-6 py-16 md:grid-cols-[1.05fr_0.95fr] md:py-24">
        <div>
          <div className="inline-flex items-center gap-2 rounded-full bg-taupe-100 px-3 py-1.5 ring-1 ring-taupe-200">
            <span className="h-1.5 w-1.5 rounded-full bg-amber-500" />
            <span className="font-mono text-[11px] uppercase tracking-[0.16em] text-taupe-600">Desarrolladores de proyectos desde 2010 · Colombia</span>
          </div>
          <h1 className="mt-6 text-[clamp(2.5rem,5.4vw,4.25rem)] font-extrabold leading-[0.98] tracking-[-0.03em] text-taupe-900">
            Desarrollamos proyectos.
            <br />
            <span className="text-taupe-500">Y el software</span> que los impulsa.
          </h1>
          <p className="mt-6 max-w-xl text-lg leading-relaxed text-taupe-600">
            Estructuramos negocios reales desde el diagnóstico hasta la operación, y construimos las plataformas, apps y agentes de IA que los hacen escalar.
          </p>
          <div className="mt-8 flex flex-wrap items-center gap-4">
            <WhatsAppButton size="lg" />
            <a href="#portafolio" className="inline-flex items-center gap-2 text-sm font-semibold text-taupe-700 hover:text-taupe-900 transition">
              Ver portafolio vigente
              <Icon name="ArrowDownRight" size={17} />
            </a>
          </div>
          <div className="mt-12 flex items-center gap-8 border-t border-taupe-200/70 pt-6">
            <Stat k="15+" v="años desarrollando" />
            <Stat k="8" v="ventures activos" />
            <Stat k="2" v="unidades de negocio" />
          </div>
        </div>

        <div className="relative">
          <image-slot id="hero-main" placeholder="Foto / render del proyecto insignia"
            shape="rounded" radius="18" fit="cover"
            style={{ display: "block", width: "100%", aspectRatio: "4 / 5", boxShadow: "0 20px 40px -12px rgba(58,52,49,0.25)" }}></image-slot>
          <div className="absolute -bottom-5 -left-5 hidden w-52 rounded-xl bg-white p-4 shadow-lg shadow-taupe-900/10 ring-1 ring-taupe-100 sm:block">
            <div className="font-mono text-[10px] uppercase tracking-[0.14em] text-taupe-400">Portafolio</div>
            <div className="mt-1 text-2xl font-extrabold text-taupe-900">8 ventures</div>
            <div className="mt-0.5 text-xs text-taupe-500">inmobiliario · turismo · software</div>
          </div>
        </div>
      </div>
    </section>
  );
}
function Stat({ k, v }) {
  return (
    <div>
      <div className="text-2xl font-extrabold tracking-tight text-taupe-900">{k}</div>
      <div className="text-xs text-taupe-500">{v}</div>
    </div>
  );
}

function UnidadCard({ u }) {
  return (
    <div className="relative flex flex-col rounded-2xl bg-white p-7 ring-1 ring-taupe-200/70 shadow-sm">
      <div className="flex items-center justify-between">
        <span className="grid h-12 w-12 place-items-center rounded-xl bg-taupe-900 text-amber-300">
          <Icon name={u.icon} size={24} />
        </span>
        {u.nuevo && (
          <span className="inline-flex items-center gap-1.5 rounded-full bg-amber-400 px-2.5 py-1 text-[11px] font-bold uppercase tracking-wide text-taupe-900">
            <Icon name="Sparkles" size={13} /> Nuevo
          </span>
        )}
      </div>
      <h3 className="mt-5 text-2xl font-extrabold tracking-tight text-taupe-900">{u.titulo}</h3>
      <p className="mt-2 text-[15px] leading-relaxed text-taupe-600">{u.desc}</p>
      <ul className="mt-6 grid gap-2.5">
        {u.items.map((it) => (
          <li key={it.label} className="flex items-center gap-3 rounded-lg bg-taupe-50 px-3.5 py-2.5 ring-1 ring-taupe-100">
            <Icon name={it.icon} size={17} className="text-taupe-500 shrink-0" />
            <span className="text-sm font-medium text-taupe-800">{it.label}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Unidades() {
  return (
    <section id="proyectos" className="bg-stone-50 py-20">
      <div className="mx-auto max-w-6xl px-6">
        <SectionHead eyebrow="Dos unidades, un mismo equipo" titulo="Lo que hacemos" />
        <div id="software" className="mt-10 grid gap-6 md:grid-cols-2">
          {UNIDADES.map((u) => <UnidadCard key={u.id} u={u} />)}
        </div>
      </div>
    </section>
  );
}

function SectionHead({ eyebrow, titulo, action }) {
  return (
    <div className="flex flex-wrap items-end justify-between gap-4">
      <div>
        <div className="font-mono text-[11px] uppercase tracking-[0.18em] text-amber-600">{eyebrow}</div>
        <h2 className="mt-2 text-3xl font-extrabold tracking-tight text-taupe-900 md:text-4xl">{titulo}</h2>
      </div>
      {action}
    </div>
  );
}

function ProjectCard({ p }) {
  return (
    <div className="group flex flex-col overflow-hidden rounded-2xl bg-white ring-1 ring-taupe-200/70 shadow-sm transition hover:shadow-md hover:ring-taupe-300">
      <image-slot id={`proj-${p.id}`} src={p.img || undefined} placeholder={`Foto de ${p.name}`}
        shape="rect" fit="cover"
        style={{ display: "block", width: "100%", aspectRatio: "16 / 10" }}></image-slot>
      <div className="flex flex-1 flex-col p-5">
        <div className="flex items-start justify-between gap-3">
          <div className="flex items-center gap-2.5">
            <span className="grid h-9 w-9 place-items-center rounded-lg bg-taupe-100 text-taupe-600 ring-1 ring-taupe-200">
              <Icon name={p.icon} size={18} />
            </span>
            <div>
              <h3 className="font-bold leading-tight text-taupe-900">{p.name}</h3>
              <div className="text-xs text-taupe-500">{p.sector}</div>
            </div>
          </div>
          <EstadoPill estado={p.estado} />
        </div>
        <p className="mt-3 text-sm leading-relaxed text-taupe-600">{p.blurb}</p>
        <div className="mt-auto flex flex-wrap items-center gap-x-4 gap-y-1.5 pt-4">
          {p.page && (
            <a href={p.page} className="inline-flex items-center gap-1.5 text-xs font-bold text-amber-600 hover:text-amber-700 transition">
              Ver proyecto <Icon name="ArrowUpRight" size={14} />
            </a>
          )}
          {p.url && (
            <a href={`https://${p.url}`} target="_blank" rel="noopener noreferrer"
              className="inline-flex items-center gap-1.5 text-xs font-semibold text-taupe-700 hover:text-amber-600 transition">
              <Icon name="Globe" size={13} /> {p.url}
            </a>
          )}
        </div>
      </div>
    </div>
  );
}

function Portafolio() {
  return (
    <section id="portafolio" className="py-20">
      <div className="mx-auto max-w-6xl px-6">
        <SectionHead
          eyebrow="Portafolio vigente"
          titulo="Proyectos en marcha"
          action={<span className="font-mono text-xs text-taupe-400">{VENTURES.length} ventures · 2026</span>}
        />
        <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {VENTURES.map((p) => <ProjectCard key={p.id} p={p} />)}
        </div>
      </div>
    </section>
  );
}

function ContactoCTA() {
  return (
    <section id="contacto" className="bg-taupe-900 py-20 text-white">
      <div className="mx-auto max-w-6xl px-6">
        <div className="grid items-center gap-10 md:grid-cols-[1.2fr_0.8fr]">
          <div>
            <div className="font-mono text-[11px] uppercase tracking-[0.18em] text-amber-300">Hablemos</div>
            <h2 className="mt-3 text-4xl font-extrabold leading-[1.02] tracking-tight md:text-5xl">
              ¿Tienes un proyecto?<br />Lo desarrollamos contigo.
            </h2>
            <p className="mt-5 max-w-lg text-lg leading-relaxed text-taupe-200">
              Cuéntale tu idea a Alzio, nuestro asistente de IA, y te orientamos al instante. Cuando estés listo, te conectamos con el equipo.
            </p>
            <div className="mt-8">
              <WhatsAppButton size="lg" solid={false} label="Chatea con Alzio" />
            </div>
          </div>
          <div className="rounded-2xl bg-taupe-800 p-6 ring-1 ring-white/10">
            <div className="font-mono text-[10px] uppercase tracking-[0.16em] text-taupe-400">Asistente 3H</div>
            <button type="button" onClick={() => window.__openAlzio && window.__openAlzio()} className="mt-2 flex items-center gap-3 text-2xl font-bold tracking-tight hover:text-amber-300 transition">
              <Icon name="Sparkles" size={24} className="text-amber-300" />
              Habla con Alzio
            </button>
            <div className="mt-6 grid gap-3 border-t border-white/10 pt-5 text-sm text-taupe-200">
              <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:text-amber-300 transition"><Icon name="MessageCircle" size={16} className="text-taupe-400" /> WhatsApp directo</a>
              <div className="flex items-center gap-3"><Icon name="Globe" size={16} className="text-taupe-400" /> treshache.co</div>
              <div className="flex items-center gap-3"><Icon name="Building2" size={16} className="text-taupe-400" /> Desarrollo de proyectos y software</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PublicFooter() {
  return (
    <footer className="border-t border-taupe-200/70 bg-stone-50 py-10">
      <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-4 px-6">
        <Logo />
        <div className="font-mono text-xs text-taupe-400">© 2026 3H · treshache.co — desarrollamos proyectos desde 2010</div>
      </div>
    </footer>
  );
}

function PublicSite() {
  return (
    <div className="min-h-screen bg-stone-50 text-taupe-900">
      <PublicNav />
      <main>
        <Hero />
        <Unidades />
        <Portafolio />
        <ContactoCTA />
      </main>
      <PublicFooter />
      <div className="h-24" />
    </div>
  );
}

Object.assign(window, { PublicSite, Logo, WhatsAppButton });