// Sections 2 — B2B, Parceiros, Testimonials, Lead magnet, Footer

const PARA_QUEM = [
  { icon: "sparkles", text: "Tem produto pronto (ou quase) mas não consegue lançar" },
  { icon: "shield",   text: "Está saturado de gestores de tráfego sem resultado real" },
  { icon: "users",    text: "Sabe que tem potencial mas está preso na rotina" },
  { icon: "globe",    text: "Quer crescer nos EUA mas não sabe por onde começar" },
  { icon: "star",     text: "Já tentou. Não deu. E quer entender por quê desta vez vai ser diferente" },
  { icon: "briefcase",text: "Tem negócio funcionando mas quer escalar com estrutura" },
];

const ParaQuemE = () => (
  <section id="para-quem" className="para-quem">
    <style>{`
      .para-quem { background: var(--ink); color: #fff; }
      .para-quem .eyebrow { color: var(--accent); }
      .para-quem h2 { color: #fff; }
      .para-quem .pq-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 48px;
      }
      @media (min-width: 700px) { .para-quem .pq-grid { grid-template-columns: repeat(2, 1fr); } }
      @media (min-width: 1100px) { .para-quem .pq-grid { grid-template-columns: repeat(3, 1fr); } }
      .pq-item {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: var(--radius-lg);
        padding: 22px 20px;
      }
      .pq-item .pq-ico {
        flex: 0 0 auto;
        width: 40px; height: 40px;
        border-radius: 8px;
        background: rgba(255,255,255,0.1);
        display: grid; place-items: center;
        color: var(--accent);
      }
      .pq-item p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.85); }
      .para-quem .pq-foot {
        margin-top: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
      }
      .para-quem .pq-foot p { color: rgba(255,255,255,0.6); font-size: 15px; margin: 0; }
    `}</style>
    <div className="container">
      <div className="section-head reveal">
        <div className="eyebrow">Para quem é</div>
        <div>
          <h2>Você se identifica<br/>com <em style={{ fontStyle: "italic", color: "var(--accent)" }}>algum desses?</em></h2>
          <p className="lede" style={{ marginTop: 18, color: "rgba(255,255,255,0.7)" }}>
            Se sim, você está no lugar certo. O problema não é você — é a falta de clareza e de alguém que entre no seu contexto.
          </p>
        </div>
      </div>
      <div className="pq-grid">
        {PARA_QUEM.map((item, i) => (
          <div key={i} className="pq-item reveal" data-delay={(i % 3) + 1}>
            <div className="pq-ico"><Icon name={item.icon} size={20}/></div>
            <p>{item.text}</p>
          </div>
        ))}
      </div>
      <div className="pq-foot reveal">
        <p>Esses são os casos que acompanho todo dia. Conversa inicial gratuita.</p>
        <a href={WHATSAPP_LINK} target="_blank" rel="noopener" className="btn btn-primary">
          Quero entender o meu caso <Icon name="whatsapp" size={16}/>
        </a>
      </div>
    </div>
  </section>
);

const PILARES = [
  { num: "01", title: "Clareza estratégica",       text: "Identificamos o que você já tem e não está enxergando. Diagnóstico real, sem achismo." },
  { num: "02", title: "Direcionamento prático",     text: "Saímos da teoria e vamos direto ao que funciona para o seu caso específico." },
  { num: "03", title: "Tráfego com objetivo",       text: "Ads para trazer cliente, não vaidade de número. Cada real investido precisa ter sentido." },
  { num: "04", title: "Estrutura digital",          text: "Site, funil e automação. Seu produto vendendo com consistência, não por sorte." },
  { num: "05", title: "Acompanhamento direto",      text: "Você não fica sozinho. Estamos juntos até o resultado aparecer de verdade." },
];

const Impacto = () => (
  <section id="impacto" className="impacto">
    <style>{`
      .impacto { background: var(--soft); }
      .impacto-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(28px, 4vw, 56px);
        align-items: center;
      }
      @media (min-width: 980px) {
        .impacto-grid { grid-template-columns: 1.1fr 1fr; }
      }
      .impacto h2 {
        font-size: clamp(34px, 5vw, 60px);
        line-height: 1.02;
      }
      .impacto p.lede {
        color: var(--ink-2);
        font-size: clamp(15px, 1.4vw, 18px);
        max-width: 52ch;
        margin: 24px 0 32px;
      }
      .impacto .panel {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: clamp(20px, 3vw, 32px);
      }
      .impacto .panel h4 {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.18em;
        color: var(--ink-2);
        text-transform: uppercase;
        margin: 0 0 18px;
      }
      .impacto .panel ul {
        list-style: none; margin: 0; padding: 0;
        display: flex; flex-direction: column; gap: 14px;
      }
      .impacto .panel li {
        display: flex; gap: 14px; align-items: flex-start;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--border);
      }
      .impacto .panel li:last-child { border-bottom: none; padding-bottom: 0; }
      .impacto .panel li .num {
        flex: 0 0 auto;
        width: 30px; height: 30px;
        border-radius: 50%;
        background: var(--soft);
        color: var(--ink);
        display: grid; place-items: center;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
      }
      .impacto .panel li h5 { margin: 0 0 4px; font-size: 15px; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
      .impacto .panel li p { margin: 0; font-size: 13px; color: var(--ink-2); }
    `}</style>
    <div className="container">
      <div className="impacto-grid">
        <div className="reveal">
          <span className="eyebrow">Impacto Digital · A Estrutura</span>
          <h2 style={{ marginTop: 18 }}>
            Não somos mais uma agência.<br/>
            <em style={{ fontStyle: "italic", color: "var(--accent)" }}>Somos a estrutura que faltava.</em>
          </h2>
          <p className="lede">
            Entramos no seu contexto, identificamos o que está travado
            e construímos junto o caminho — da clareza estratégica
            à execução com resultado. Sem promessas vazias.
            Com sinergia, proximidade e acompanhamento direto.
          </p>
          <a href={WHATSAPP_NEGOCIOS} target="_blank" rel="noopener" className="btn btn-dark">
            Vamos conversar sobre o seu caso <Icon name="arrow-right" size={14}/>
          </a>
        </div>
        <div className="panel reveal" data-delay="2">
          <h4>Os 5 pilares</h4>
          <ul>
            {PILARES.map(p => (
              <li key={p.num}>
                <div className="num">{p.num}</div>
                <div>
                  <h5>{p.title}</h5>
                  <p>{p.text}</p>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </section>
);

const PARTNERS = [
  { tag: "Câmbio · Remessa", name: "Express FX", icon: "globe" },
  { tag: "Conectividade", name: "Chip América", icon: "sim" },
  { tag: "Seguros", name: "Cobertura BR", icon: "shield" },
  { tag: "Carros", name: "Drive Orlando", icon: "car" },
  { tag: "Casas", name: "Lar 32819", icon: "home" },
  { tag: "Contabilidade", name: "Tax Brasil USA", icon: "credit-card" },
];

const Parceiros = () => (
  <section id="parceiros" className="parceiros">
    <style>{`
      .parceiros .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
      @media (min-width: 700px) { .parceiros .grid { grid-template-columns: repeat(3, 1fr); } }
      @media (min-width: 1100px) { .parceiros .grid { grid-template-columns: repeat(6, 1fr); } }
      .partner {
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 18px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        transition: all .25s;
        filter: grayscale(1);
        opacity: 0.85;
      }
      .partner:hover {
        filter: grayscale(0);
        opacity: 1;
        border-color: var(--accent);
        transform: translateY(-2px);
      }
      .partner .ico {
        width: 36px; height: 36px;
        background: var(--soft);
        border-radius: 8px;
        display: grid; place-items: center;
      }
      .partner .label {
        font-family: var(--mono);
        font-size: 9.5px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ink-2);
        margin-bottom: 4px;
      }
      .partner h4 {
        margin: 0;
        font-family: var(--serif);
        font-weight: 500;
        font-size: 17px;
        letter-spacing: -0.01em;
      }
      .partner .arrow {
        align-self: flex-end;
        color: var(--ink-2);
        margin-top: -28px;
      }
    `}</style>
    <div className="container">
      <div className="section-head reveal">
        <div className="eyebrow">04 / Parceiros</div>
        <div>
          <h2>A rede que eu uso<br/><em style={{ fontStyle: "italic", color: "var(--accent)" }}>e indico de olhos fechados.</em></h2>
        </div>
      </div>
      <div className="grid">
        {PARTNERS.map((p, i) => (
          <a key={p.name} href="#" target="_blank" rel="sponsored noopener noreferrer" className="partner reveal" data-delay={(i % 4) + 1}>
            <div style={{ display: "flex", justifyContent: "space-between" }}>
              <div className="ico"><Icon name={p.icon} size={18}/></div>
              <Icon name="arrow-up-right" size={14} className="arrow"/>
            </div>
            <div>
              <div className="label">{p.tag}</div>
              <h4>{p.name}</h4>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const TESTIMONIALS = [
  { quote: "Cheguei em Orlando num domingo, segunda já tinha carro, escola dos filhos e visita pra apartamento. Sozinha eu levaria 3 meses.", name: "Marina B.", meta: "Família · Curitiba → Davenport" },
  { quote: "O Júnior pegou meu Instagram parado em 4k e botou em 38k em 5 meses. Hoje minhas vagas de cabelereiro estão lotadas até maio.", name: "Patrícia L.", meta: "Beauty Studio · Lake Nona" },
  { quote: "O guia parece simples mas economiza meses. A parte de SSN e crédito eu imprimi e levei na bagagem.", name: "Rafael M.", meta: "Engenheiro · São Paulo" },
];

const Testimonials = () => {
  const [active, setActive] = useState(0);
  return (
    <section id="depoimentos" className="testi">
      <style>{`
        .testi { background: var(--ink); color: #fff; }
        .testi .eyebrow { color: rgba(255,255,255,0.55); }
        .testi .eyebrow::before { background: rgba(255,255,255,0.4); }
        .testi-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 48px;
          align-items: end;
        }
        @media (min-width: 900px) { .testi-grid { grid-template-columns: 1.4fr 1fr; gap: 72px; } }
        .testi-quote {
          font-family: var(--serif);
          font-weight: 400;
          font-size: clamp(28px, 3.8vw, 44px);
          line-height: 1.15;
          letter-spacing: -0.01em;
          min-height: 220px;
          font-style: italic;
        }
        .testi-quote::before { content: "“"; font-style: normal; color: var(--accent); font-size: 1.4em; margin-right: 6px; line-height: 0; vertical-align: -0.1em; }
        .testi-meta {
          margin-top: 32px;
          padding-top: 24px;
          border-top: 1px solid rgba(255,255,255,0.15);
          display: flex;
          align-items: center;
          gap: 16px;
        }
        .testi-meta .dot {
          width: 44px; height: 44px;
          border-radius: 50%;
          background: rgba(255,255,255,0.06);
          border: 1px solid rgba(255,255,255,0.12);
          color: #fff;
          display: grid; place-items: center;
        }
        .testi-meta .name { font-weight: 600; font-size: 14px; }
        .testi-meta .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: rgba(255,255,255,0.5); text-transform: uppercase; margin-top: 2px; }
        .testi-list { display: flex; flex-direction: column; gap: 12px; }
        .testi-list button {
          text-align: left;
          padding: 18px 20px;
          border-radius: var(--radius-lg);
          background: rgba(255,255,255,0.04);
          border: 1px solid rgba(255,255,255,0.08);
          transition: all .2s;
          color: rgba(255,255,255,0.7);
          font-family: var(--sans);
          line-height: 1.4;
          font-size: 13.5px;
        }
        .testi-list button.active {
          background: rgba(201,168,76,0.12);
          border-color: var(--accent);
          color: #fff;
        }
        .testi-list button .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 6px;
          font-family: var(--mono);
          font-size: 10.5px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
        }
        .testi-list button.active .top { color: var(--accent); }
      `}</style>
      <div className="container">
        <div className="section-head reveal" style={{ marginBottom: 56 }}>
          <div className="eyebrow">05 / Depoimentos</div>
          <div>
            <h2 style={{ color: "#fff" }}>Quem chegou antes,<br/><em style={{ fontStyle: "italic", color: "var(--accent)" }}>conta como foi.</em></h2>
          </div>
        </div>

        <div className="testi-grid">
          <div className="reveal">
            <div className="testi-quote" key={active}>{TESTIMONIALS[active].quote}</div>
            <div className="testi-meta">
              <div className="dot"><Icon name="user" size={20}/></div>
              <div>
                <div className="name">{TESTIMONIALS[active].name}</div>
                <div className="meta">{TESTIMONIALS[active].meta}</div>
              </div>
            </div>
          </div>
          <div className="testi-list reveal" data-delay="2">
            {TESTIMONIALS.map((t, i) => (
              <button
                key={i}
                onClick={() => setActive(i)}
                className={i === active ? "active" : ""}
                aria-label={`Depoimento de ${t.name}`}
              >
                <div className="top">
                  <span>0{i+1} / 0{TESTIMONIALS.length}</span>
                  <span>{t.name.split(" ")[0]}</span>
                </div>
                {t.quote.slice(0, 90).trim()}…
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const VIDEO_PROVAS = [
  { src: "videos/prova-1.mp4" },
  { src: "videos/prova-2.mp4" },
  { src: "videos/prova-3.mp4" },
];

const VideoProvas = () => (
  <section id="video-provas" className="video-provas">
    <style>{`
      .video-provas { background: var(--bg); }
      .vp-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
      }
      @media (min-width: 600px) { .vp-grid { grid-template-columns: repeat(3, 1fr); } }
      .vp-card {
        border-radius: var(--radius-lg);
        overflow: hidden;
        background: #000;
        aspect-ratio: 9/16;
        position: relative;
        border: 1px solid var(--border);
      }
      .vp-card video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
    `}</style>
    <div className="container">
      <div className="section-head reveal">
        <div className="eyebrow">Provas Sociais</div>
        <div>
          <h2>Quem já <em style={{ fontStyle: "italic", color: "var(--accent)" }}>chegou lá.</em></h2>
          <p className="lede" style={{ marginTop: 18 }}>
            Resultados reais de quem aplicou a mentoria.
          </p>
        </div>
      </div>
      <div className="vp-grid">
        {VIDEO_PROVAS.map((v, i) => (
          <div key={i} className="vp-card reveal" data-delay={i + 1}>
            <video
              src={v.src}
              controls
              preload="none"
              playsInline
            />
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.ParaQuemE = ParaQuemE;
window.Impacto = Impacto;
window.Parceiros = Parceiros;
window.Testimonials = Testimonials;
window.VideoProvas = VideoProvas;