/* ──────────────────────────────────────────────────
   MODULES V1 — "Control Center"
   Interactive tabbed explorer: click a module on the
   left, the product screen swaps on the right.
   ────────────────────────────────────────────────── */

const ModulesV1 = () => {
  const [activeId, setActiveId] = React.useState('reservas');
  const active = MODULES.find(m => m.id === activeId) || MODULES[0];

  // group by category
  const groups = MODULES.reduce((acc, m) => {
    acc[m.category] = acc[m.category] || [];
    acc[m.category].push(m);
    return acc;
  }, {});

  return (
    <section id="modulos" className="relative py-14 lg:py-20 bg-ink-950 overflow-hidden">
      {/* ambient glow */}
      <div className="absolute top-0 right-[10%] w-[40%] h-[60%] bg-brand-500/15 blur-[160px] rounded-full pointer-events-none"></div>
      <div className="absolute bottom-0 left-[5%] w-[30%] h-[50%] bg-brand-400/10 blur-[140px] rounded-full pointer-events-none"></div>
      <div className="absolute inset-0 grid-bg-dark opacity-40"></div>

      <div className="relative max-w-7xl mx-auto px-6 lg:px-8">
        <div className="flex items-end justify-between mb-10 flex-wrap gap-6">
          <div className="max-w-2xl">
            <span className="inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-400 mb-4">
              <span className="w-6 h-px bg-brand-400"></span> Módulos
            </span>
            <h2 className="text-[36px] sm:text-[44px] lg:text-[52px] font-bold text-white tracking-[-0.02em] leading-[1.05]">
              Um painel. <span className="serif italic text-brand-400 font-normal">Toda a operação.</span>
            </h2>
            <p className="text-[16px] text-white/60 max-w-lg mt-3">
              Clique em cada módulo para ver o produto real em ação. Tudo compartilha dados — o que entra pelo WhatsApp alimenta o CRM; a ficha técnica puxa do estoque.
            </p>
          </div>
          <div className="flex items-center gap-2 text-[11px] text-white/40">
            <I.mouse size={14}/> Selecione um módulo abaixo
          </div>
        </div>

        <div className="grid lg:grid-cols-[300px_1fr] gap-6">
          {/* Module rail */}
          <div className="space-y-5">
            {Object.entries(groups).map(([cat, mods]) => (
              <div key={cat}>
                <div className="text-[10px] font-bold uppercase tracking-[0.14em] text-white/35 mb-2 px-1">{cat}</div>
                <div className="space-y-1">
                  {mods.map(m => {
                    const isActive = m.id === activeId;
                    return (
                      <button key={m.id} onClick={() => setActiveId(m.id)}
                        className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all group ${
                          isActive
                            ? 'bg-brand-500/15 border border-brand-400/30 shadow-[inset_0_0_20px_-6px_rgba(56,189,248,.3)]'
                            : 'bg-white/[.02] border border-white/5 hover:bg-white/[.05] hover:border-white/10'
                        }`}>
                        <div className={`w-8 h-8 rounded-md flex items-center justify-center shrink-0 transition-colors ${
                          isActive ? 'bg-brand-500 text-white' : 'bg-white/5 text-white/60 group-hover:text-white'
                        }`}><m.icon size={15}/></div>
                        <div className="flex-1 min-w-0">
                          <div className={`text-[13px] font-semibold truncate ${isActive ? 'text-white' : 'text-white/85'}`}>{m.label}</div>
                        </div>
                        {isActive && <I.chevronRight size={14} className="text-brand-400"/>}
                      </button>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>

          {/* Preview pane */}
          <div className="space-y-4">
            <div key={activeId} style={{animation:'fadeInSwap .45s cubic-bezier(.22,1,.36,1)'}}>
              <div className="rounded-2xl overflow-hidden ring-1 ring-white/10 bg-ink-900">
                <active.Mock />
              </div>
            </div>

            {/* Meta caption */}
            <div key={`c-${activeId}`} className="flex flex-wrap items-start justify-between gap-6 pt-2" style={{animation:'fadeIn .5s .1s both'}}>
              <div className="max-w-[460px]">
                <div className="flex items-center gap-2 mb-2">
                  <span className="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">{active.category}</span>
                  <span className="w-1 h-1 rounded-full bg-white/20"></span>
                  <span className="text-[10px] text-white/40">{active.id}.restaurantepro.com.br</span>
                </div>
                <h3 className="text-[22px] font-bold text-white mb-2">{active.label}</h3>
                <p className="text-[14px] text-white/60 leading-relaxed">{active.tagline}</p>
              </div>
              <ul className="grid grid-cols-1 gap-1.5 max-w-[360px]">
                {active.bullets.map((b,i) => (
                  <li key={i} className="flex items-start gap-2 text-[12.5px] text-white/70">
                    <I.check size={13} className="text-brand-400 mt-0.5 shrink-0"/>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes fadeInSwap { from { opacity:0; transform:translateY(8px) scale(.995)} to { opacity:1; transform:none } }
        @keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
      `}</style>
    </section>
  );
};

Object.assign(window, { ModulesV1 });