/* ──────────────────────────────────────────────────
   MODULES V3 — "Editorial Case-Study"
   Full-bleed alternating rows. Screenshot spans wider
   than text column. Large display numbers. Magazine tone.
   ────────────────────────────────────────────────── */

const ModulesV3 = () => {
  const sections = [
    { ...MODULES.find(m=>m.id==='whatsapp'), quote:'60% das mensagens respondidas por IA, em média, no primeiro mês.', stat:'24/7' },
    { ...MODULES.find(m=>m.id==='fichas'), quote:'CMV recalculado em tempo real — toda compra atualiza todas as fichas.', stat:'−4,2%' },
    { ...MODULES.find(m=>m.id==='reservas'), quote:'Reservas online reduzem em 80% as ligações no horário de pico.', stat:'−80%' },
    { ...MODULES.find(m=>m.id==='producao'), quote:'Lotes, validade e etiquetas em uma tela — sem caderno, sem planilha.', stat:'0 ERP' },
  ];

  return (
    <section id="modulos" className="relative bg-white overflow-hidden">
      {/* Section header */}
      <div className="relative py-14 lg:py-20 bg-white border-b border-ink-100">
        <div className="max-w-7xl mx-auto px-6 lg:px-8 text-center">
          <span className="inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.2em] text-brand-600 mb-5">
            <span className="w-6 h-px bg-brand-500"></span> Módulos <span className="w-6 h-px bg-brand-500"></span>
          </span>
          <h2 className="text-[44px] sm:text-[56px] lg:text-[72px] font-bold text-ink-900 tracking-[-0.03em] leading-[1.02] mb-6 max-w-4xl mx-auto">
            Cada módulo, uma <span className="serif italic text-brand-600 font-normal">peça única</span>.
            <br/>Juntos, a <span className="serif italic text-brand-600 font-normal">operação inteira</span>.
          </h2>
          <p className="text-[17px] text-ink-500 max-w-xl mx-auto">
            Não são features isoladas. São ferramentas que se conversam, compartilham dados e reduzem o trabalho manual a zero.
          </p>
        </div>
      </div>

      {sections.map((s, i) => {
        const reversed = i % 2 === 1;
        const dark = i % 2 === 0;
        return (
          <div key={s.id}
               className={`relative py-14 lg:py-20 overflow-hidden ${dark ? 'bg-ink-950' : 'bg-ink-50'}`}>
            <div className={`absolute inset-0 ${dark ? 'grid-bg-dark opacity-30' : 'grid-bg opacity-40'}`}></div>
            {dark && <div className="absolute top-0 right-0 w-[40%] h-full bg-brand-500/10 blur-[120px] rounded-full pointer-events-none"></div>}

            <div className="relative max-w-7xl mx-auto px-6 lg:px-8">
              {/* big section number */}
              <div className={`mono text-[11px] font-medium uppercase tracking-[0.18em] mb-8 ${dark ? 'text-brand-400' : 'text-brand-600'}`}>
                <span className="opacity-50">{String(i+1).padStart(2,'0')} / {String(sections.length).padStart(2,'0')}</span> — {s.category}
              </div>

              <div className={`grid lg:grid-cols-[1fr_1.4fr] gap-10 lg:gap-16 items-center ${reversed ? 'lg:[&>*:first-child]:order-2' : ''}`}>
                {/* text column */}
                <div>
                  <div className="flex items-center gap-3 mb-6">
                    <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${dark ? 'bg-brand-500 text-white' : 'bg-brand-500 text-white'}`}>
                      <s.icon size={18}/>
                    </div>
                    <span className={`text-[11px] font-bold uppercase tracking-[0.14em] ${dark ? 'text-white/60' : 'text-ink-500'}`}>{s.label}</span>
                  </div>

                  <h3 className={`text-[36px] lg:text-[44px] font-bold tracking-[-0.02em] leading-[1.08] mb-5 ${dark ? 'text-white' : 'text-ink-900'}`}>
                    {s.tagline}
                  </h3>

                  <blockquote className={`relative pl-5 py-2 mb-6 border-l-2 ${dark ? 'border-brand-400 text-white/75' : 'border-brand-500 text-ink-600'} text-[15px] leading-relaxed italic serif`}>
                    "{s.quote}"
                  </blockquote>

                  <ul className="space-y-2 mb-7">
                    {s.bullets.map((b,bi) => (
                      <li key={bi} className={`flex items-start gap-2.5 text-[14px] ${dark ? 'text-white/70' : 'text-ink-600'}`}>
                        <I.check size={14} className={`${dark ? 'text-brand-400' : 'text-brand-600'} mt-0.5 shrink-0`}/>
                        <span>{b}</span>
                      </li>
                    ))}
                  </ul>

                  <div className={`inline-flex items-baseline gap-3 py-3 ${dark ? 'border-t border-white/10' : 'border-t border-ink-200'} pt-5`}>
                    <span className={`serif text-[56px] leading-none ${dark ? 'text-brand-400' : 'text-brand-600'}`}>{s.stat}</span>
                    <span className={`text-[12px] uppercase tracking-wider font-bold ${dark ? 'text-white/40' : 'text-ink-400'}`}>em média</span>
                  </div>
                </div>

                {/* mockup column */}
                <div className={reversed ? '' : ''}>
                  <div className="relative">
                    <div className={`absolute -inset-8 rounded-3xl ${dark ? 'bg-brand-500/10' : 'bg-brand-500/5'} blur-2xl`}></div>
                    <div className="relative">
                      <s.Mock/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </section>
  );
};

Object.assign(window, { ModulesV3 });