/* ──────────────────────────────────────────────────
   MODULES V2 — "Dashboard Grid"
   Dense, utilitarian, 4 screens visible at once with
   OS-window chrome. Terminal-flavored typography and
   monospace lane labels.
   ────────────────────────────────────────────────── */

const ModulesV2 = () => {
  const featured = MODULES.filter(m => ['reservas','whatsapp','fichas','compras','producao','crm'].includes(m.id));

  return (
    <section id="modulos" className="relative py-14 lg:py-20 bg-ink-50 overflow-hidden">
      <div className="absolute inset-0 grid-bg opacity-60"></div>

      <div className="relative max-w-7xl mx-auto px-6 lg:px-8">
        {/* Header */}
        <div className="mb-12 border-l-2 border-brand-500 pl-5">
          <div className="flex items-center gap-3 mb-3">
            <span className="mono text-[10px] font-medium text-brand-600 uppercase tracking-[0.18em]">modulos.live</span>
            <span className="text-[10px] mono text-ink-400">v2.4.0</span>
            <span className="flex items-center gap-1 text-[10px] mono text-green-600"><span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse-soft"></span> all systems</span>
          </div>
          <h2 className="text-[36px] sm:text-[44px] lg:text-[52px] font-bold text-ink-900 tracking-[-0.02em] leading-[1.05] mb-3">
            Nove módulos. <span className="serif italic text-brand-600 font-normal">Um sistema.</span>
          </h2>
          <p className="text-[16px] text-ink-500 max-w-xl">
            Todos os módulos falam entre si. Veja o sistema real — screenshots da produção, não mockups de marketing.
          </p>
        </div>

        {/* Dense grid */}
        <div className="grid md:grid-cols-2 gap-6">
          {featured.map((m, i) => (
            <div key={m.id} data-reveal style={{transitionDelay:`${i*60}ms`}} className="group">
              {/* window header bar */}
              <div className="flex items-center justify-between mb-2 px-1">
                <div className="flex items-center gap-2">
                  <div className="w-6 h-6 rounded bg-ink-900 text-white flex items-center justify-center"><m.icon size={12}/></div>
                  <span className="mono text-[10px] text-ink-400 uppercase tracking-wider">{String(i+1).padStart(2,'0')}/</span>
                  <span className="text-[13px] font-bold text-ink-900">{m.label}</span>
                </div>
                <a href={`#modulo-${m.id}`} className="text-[11px] text-brand-600 hover:text-brand-700 flex items-center gap-1 opacity-60 group-hover:opacity-100 transition-opacity">
                  Expandir <I.external size={10}/>
                </a>
              </div>
              {/* mockup */}
              <div className="relative rounded-xl overflow-hidden ring-1 ring-ink-200 group-hover:ring-brand-300 transition-all">
                <div className="transform origin-top-left scale-[0.88] -mb-[12%] -mr-[14%]" style={{width:'114%'}}>
                  <m.Mock/>
                </div>
              </div>
              <p className="mt-3 text-[12.5px] text-ink-500 leading-relaxed px-1">{m.tagline}</p>
            </div>
          ))}
        </div>

        {/* Terminal-style command strip */}
        <div className="mt-14 rounded-2xl bg-ink-900 p-5 lg:p-6 relative overflow-hidden">
          <div className="absolute inset-0 grid-bg-dark opacity-20"></div>
          <div className="relative flex items-start lg:items-center gap-6 flex-col lg:flex-row">
            <div className="flex items-center gap-3 shrink-0">
              <div className="flex gap-1.5">
                <span className="w-2.5 h-2.5 rounded-full bg-red-400/80"></span>
                <span className="w-2.5 h-2.5 rounded-full bg-amber-400/80"></span>
                <span className="w-2.5 h-2.5 rounded-full bg-green-400/80"></span>
              </div>
              <span className="mono text-[11px] text-white/40">restaurantepro · operation.sh</span>
            </div>
            <div className="flex-1 mono text-[13px] text-white/90 leading-relaxed">
              <span className="text-brand-400">$</span> rpro sync —-all <span className="text-white/40">&nbsp;# todos os módulos integrados</span><br/>
              <span className="text-green-400">→</span> WhatsApp ↔ CRM ↔ Reservas ↔ Fila ↔ Avaliações ↔ Fichas ↔ Compras ↔ Produção ↔ Checklists <span className="text-white/50">ok</span>
            </div>
            <a href="#precos" className="shrink-0 px-4 py-2.5 rounded-lg bg-brand-500 hover:bg-brand-400 text-[13px] font-semibold text-white flex items-center gap-2 transition-colors">
              Ativar todos <I.arrow size={14}/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ModulesV2 });