/* global React, Icon */
// ============================================
// GENERIC MODULE DEEP-DIVE TEMPLATE
// Used by /modulos/*.html pages. Accepts a config object.
// ============================================
const { useState: useMs } = React;

function ModuleDeepDive({ config }) {
  const { eyebrow, title, subtitle, color, bg, features, mockup: MockupComp, useCases, integrations, faq } = config;

  return (
    <>
      {/* DEEP DIVE — intro + mockup */}
      <section className="section" style={{ background: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
        <div className="container">
          <div className="module-deep-grid">
            <div className="reveal">
              <span className="eyebrow" style={{ color }}>{eyebrow}</span>
              <h2 className="display-2 mt-2">{title}</h2>
              <p className="lead mt-3">{subtitle}</p>

              <div className="mt-4" style={{ display: 'grid', gap: 14 }}>
                {features.slice(0, 4).map((f, i) => (
                  <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                    <div style={{ width: 26, height: 26, borderRadius: 7, background: bg, color, display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 2 }}>
                      <Icon name="check" size={15}/>
                    </div>
                    <div>
                      <div style={{ fontWeight: 500, fontSize: 16, letterSpacing: '-0.01em' }}>{f.t}</div>
                      <div className="text-muted mt-1" style={{ fontSize: 14 }}>{f.d}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="mt-4" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <a href="contato.html" className="btn btn-primary">Agendar demonstração <Icon name="arrow" size={16}/></a>
                <a href="modulos.html" className="btn btn-ghost">Ver todos os módulos</a>
              </div>
            </div>

            <div className="reveal" data-delay="2">
              {MockupComp ? <MockupComp/> : <MockupPlaceholder color={color} bg={bg}/>}
            </div>
          </div>
        </div>
      </section>

      {/* FEATURES GRID — todos os recursos */}
      {features.length > 4 && (
        <section className="section" style={{ background: 'var(--bg-alt)' }}>
          <div className="container">
            <div className="section-head">
              <span className="eyebrow" style={{ color }}>Recursos</span>
              <h2 className="display-2">Tudo que você precisa no módulo.</h2>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
              {features.map((f, i) => (
                <div key={i} className="card reveal" data-delay={(i % 3) + 1} style={{ padding: 24, background: 'var(--surface)' }}>
                  <div style={{ width: 38, height: 38, borderRadius: 10, background: bg, color, display: 'grid', placeItems: 'center', marginBottom: 14 }}>
                    <Icon name={f.i || 'check'} size={18}/>
                  </div>
                  <div style={{ fontWeight: 600, fontSize: 15.5, letterSpacing: '-0.01em' }}>{f.t}</div>
                  <div className="text-muted mt-2" style={{ fontSize: 13.5, lineHeight: 1.55 }}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* USE CASES */}
      {useCases && useCases.length > 0 && (
        <section className="section" style={{ background: 'var(--bg)' }}>
          <div className="container">
            <div className="section-head">
              <span className="eyebrow" style={{ color }}>Na prática</span>
              <h2 className="display-2">Como times usam esse módulo.</h2>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20 }}>
              {useCases.map((u, i) => (
                <div key={i} className="card reveal" data-delay={(i % 3) + 1} style={{ padding: 28, background: 'var(--surface)' }}>
                  <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 10 }}>{u.label}</div>
                  <div style={{ fontWeight: 600, fontSize: 17, letterSpacing: '-0.01em', marginBottom: 10 }}>{u.title}</div>
                  <div className="text-muted" style={{ fontSize: 14, lineHeight: 1.6 }}>{u.desc}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* INTEGRATIONS */}
      {integrations && integrations.length > 0 && (
        <section className="section" style={{ background: 'var(--bg-alt)' }}>
          <div className="container">
            <div className="section-head">
              <span className="eyebrow">Plataforma conectada</span>
              <h2 className="display-2">Conecta-se com o resto da TSA.</h2>
              <p className="lead mt-2">Este módulo trabalha em conjunto com os demais — sem integrações externas, sem retrabalho.</p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 14, maxWidth: 980, margin: '0 auto' }}>
              {integrations.map((it, i) => (
                <a key={i} href={it.href || '#'} className="reveal" data-delay={(i % 3) + 1} style={{
                  display: 'flex', gap: 14, alignItems: 'center', padding: 18,
                  background: 'var(--surface)', border: '1px solid var(--border)',
                  borderRadius: 12, textDecoration: 'none', color: 'inherit',
                  transition: 'all 0.2s ease',
                }} onMouseEnter={(e) => { e.currentTarget.style.borderColor = color; e.currentTarget.style.transform = 'translateY(-2px)'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: it.bg || bg, color: it.color || color, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                    <Icon name={it.i} size={16}/>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 500, fontSize: 14.5 }}>{it.name}</div>
                    <div className="text-muted" style={{ fontSize: 12.5, marginTop: 2 }}>{it.desc}</div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* FAQ */}
      {faq && faq.length > 0 && <ModuleFAQ items={faq}/>}
    </>
  );
}

function ModuleFAQ({ items }) {
  const [open, setOpen] = useMs(0);
  return (
    <section className="section" style={{ background: 'var(--bg)' }}>
      <div className="container" style={{ maxWidth: 820 }}>
        <div className="section-head">
          <span className="eyebrow">Dúvidas</span>
          <h2 className="display-2">Perguntas frequentes sobre o módulo.</h2>
        </div>
        <div style={{ display: 'grid', gap: 10 }}>
          {items.map((q, i) => (
            <div key={i} className="card reveal" data-delay={(i % 3) + 1} style={{ padding: 0, background: 'var(--surface)', overflow: 'hidden' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', display: 'flex', gap: 16, alignItems: 'center', justifyContent: 'space-between',
                padding: '20px 24px', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left',
                fontWeight: 500, fontSize: 15.5, letterSpacing: '-0.005em', color: 'var(--text)',
              }}>
                <span>{q.q}</span>
                <span style={{ color: 'var(--text-muted)', transition: 'transform 0.2s', transform: open === i ? 'rotate(45deg)' : 'none' }}>+</span>
              </button>
              {open === i && (
                <div style={{ padding: '0 24px 22px', color: 'var(--text-muted)', fontSize: 14.5, lineHeight: 1.65 }}>{q.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MockupPlaceholder({ color, bg }) {
  return (
    <div style={{
      aspectRatio: '4/3', background: bg, border: `1px solid ${color}22`, borderRadius: 16,
      display: 'grid', placeItems: 'center', color, fontSize: 13, fontFamily: 'var(--font-mono)',
    }}>
      [ mockup do módulo ]
    </div>
  );
}

window.ModuleDeepDive = ModuleDeepDive;