/* Offer */

const OFFER_ITEMS = [
  { t: "Gestão contínua de vulnerabilidades", d: "Identificação, priorização e acompanhamento de correções" },
  { t: "Assessment de segurança e auditoria técnica", d: "Visão completa do seu ambiente" },
  { t: "Consultoria estratégica (Visão BISO)", d: "Alinhamento de segurança ao negócio" },
  { t: "Cloud Security", d: "Análise e proteção de ambientes híbridos e multi-cloud" },
  { t: "Relatórios executivos e técnicos", d: "Comunicação para board e para TI" },
  { t: "Apoio a frameworks", d: "ISO 27001, NIST e boas práticas de mercado" },
  { t: "Gestão de riscos de IA", d: "Shadow AI, vazamento de dados em ferramentas generativas" },
];

const Offer = () => (
  <section id="oferta" data-screen-label="07 Oferta">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow"><span className="dot"></span>O que está incluso</div>
        <h2>Parceria de segurança que se adapta ao seu momento.</h2>
        <p>Escolha entre projeto pontual ou gestão recorrente mensal — escopo definido após o diagnóstico.</p>
      </div>

      <div className="offer-card">
        <div>
          <h3>O que está incluso</h3>
          <p className="offer-sub">Componentes da parceria — combinados sob medida no diagnóstico inicial.</p>
          <ul className="offer-items">
            {OFFER_ITEMS.map((o, i) => (
              <li key={i}>
                <span className="check"><Icon.Check style={{width: 12, height: 12}}/></span>
                <div>
                  <strong>{o.t}</strong>
                  <span>{o.d}</span>
                </div>
              </li>
            ))}
          </ul>
        </div>

        <div className="offer-contact-card">
          <div className="contact-label">Vamos conversar</div>
          <h4 className="contact-title">Venha conversar conosco.</h4>
          <p className="contact-lede">
            Cada parceria começa com uma conversa sem custo e sem compromisso. Em <strong style={{color:'var(--text)'}}>30 a 60 minutos</strong> você sai com clareza sobre a exposição real do seu ambiente — e sobre o que faz sentido (ou não) contratar.
          </p>

          <div className="contact-channels">
            <a
              href={window.WA_URL_DIAG}
              onClick={(e) => window.openWhatsApp(e, window.WA_URL_DIAG)}
              target="_blank" rel="noopener noreferrer"
              className="contact-channel"
            >
              <div className="cc-icon" style={{background:'rgba(37, 211, 102, 0.12)', color:'#25D366'}}><Icon.Whatsapp/></div>
              <div className="cc-text">
                <div className="cc-label">WhatsApp</div>
                <div className="cc-value">(11) 92198-9935</div>
              </div>
              <Icon.Arrow className="cc-arrow" style={{width: 14, height: 14}}/>
            </a>

            <a href="mailto:contato@infocuesta.com.br" className="contact-channel">
              <div className="cc-icon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                  <path d="m22 6-10 7L2 6"/>
                </svg>
              </div>
              <div className="cc-text">
                <div className="cc-label">E-mail</div>
                <div className="cc-value">contato@infocuesta.com.br</div>
              </div>
              <Icon.Arrow className="cc-arrow" style={{width: 14, height: 14}}/>
            </a>
          </div>

          <div className="contact-meta">
            <span className="meta-dot"></span>
            Resposta em até 24h · sem custo · sem compromisso
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Offer });