// Sections — Mentoria, Timeline, Produtos, B2B, Parceiros, Testimonials
const INSTA_SERVICES = [
  { icon: "instagram", num: "01", title: "Crescimento orgânico", text: "Estratégia de conteúdo para crescer no Instagram sem depender de anúncios — mesmo começando do zero." },
  { icon: "sparkles", num: "02", title: "Conteúdo que viraliza", text: "Reels e posts que chegam em quem ainda não te segue. Técnica real com +60M de visualizações de prova." },
  { icon: "users", num: "03", title: "Monetização e lançamento", text: "Transformar seguidores em compradores com DM, stories e produto digital — do zero à primeira venda." },
];

const NEGOCIOS_SERVICES = [
  { icon: "briefcase", num: "01", title: "LLC, EIN e estrutura legal", text: "Empresa aberta, conta business e compliance — tudo certo antes de captar o primeiro cliente." },
  { icon: "globe", num: "02", title: "Captação de clientes em Orlando", text: "Como chegar nos primeiros clientes B2B em Orlando sem depender de indicação e sem gastar com ads no início." },
  { icon: "star", num: "03", title: "Tráfego, funil e escala", text: "Meta Ads, posicionamento e funil de vendas para o mercado americano. 20 anos de prática — não de apostila." },
];

const Mentoria = () => (
  <section id="mentoria" className="mentoria">
    <style>{`
      .mentoria .grid-3 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 32px;
      }
      @media (min-width: 700px) { .mentoria .grid-3 { grid-template-columns: repeat(2, 1fr); } }
      @media (min-width: 900px) { .mentoria .grid-3 { grid-template-columns: repeat(3, 1fr); } }
      .offer-block {
        padding-bottom: 72px;
        margin-bottom: 72px;
        border-bottom: 1px solid var(--border);
      }
      .offer-block:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
      .service-card { display: flex; flex-direction: column; gap: 18px; min-height: 260px; }
      .service-card .num {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.2em;
        color: var(--ink-2);
      }
      .service-card .ico {
        width: 44px; height: 44px;
        border-radius: 8px;
        background: var(--soft);
        color: var(--ink);
        display: grid; place-items: center;
        transition: background .25s, color .25s;
      }
      .service-card:hover .ico {
        background: var(--accent);
        color: var(--accent-ink);
      }
      .service-card h3 {
        font-size: 22px;
        line-height: 1.15;
      }
      .service-card p {
        color: var(--ink-2);
        font-size: 14.5px;
        margin: 0;
        flex: 1;
      }
      .service-card .more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--ink);
      }
      .mentoria-foot {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 28px;
      }
      @media (min-width: 700px) {
        .mentoria-foot {
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
        }
      }
      .mentoria-foot p {
        margin: 0;
        max-width: 60ch;
        color: var(--ink-2);
        font-size: 14.5px;
      }
    `}</style>
    <div className="container">
      <div className="section-head reveal">
        <div className="eyebrow">Mentorias</div>
        <div>
          <h2>Dois caminhos.<br/><em style={{ fontStyle: "italic", color: "var(--accent)" }}>Um resultado.</em></h2>
          <p className="lede" style={{ marginTop: 18 }}>
            Escolha o que faz mais sentido para o seu momento agora — ou combine os dois.
          </p>
        </div>
      </div>

      <div className="offer-block">
        <div className="section-head reveal" style={{ marginBottom: 32 }}>
          <div className="eyebrow">01 / Mentoria Instagram</div>
          <div>
            <h2 style={{ fontSize: "clamp(28px, 4vw, 52px)" }}>Cresça, viralize<br/>e <em style={{ fontStyle: "italic", color: "var(--accent)" }}>monetize.</em></h2>
            <p className="lede" style={{ marginTop: 12 }}>
              Para quem quer transformar o Instagram em fonte de renda —
              começando do zero ou acelerando o que já existe.
            </p>
          </div>
        </div>
        <div className="grid-3">
          {INSTA_SERVICES.map((s, i) => (
            <article key={s.num} className="card service-card reveal" data-delay={(i % 3) + 1}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div className="ico"><Icon name={s.icon} size={22}/></div>
                <span className="num">{s.num}</span>
              </div>
              <h3>{s.title}</h3>
              <p>{s.text}</p>
              <span className="more">Saber mais <Icon name="arrow-up-right" size={12}/></span>
            </article>
          ))}
        </div>
        <div className="mentoria-foot reveal">
          <p>Vagas limitadas. Conversa inicial gratuita para entender se faz sentido para o seu perfil.</p>
          <a href={WHATSAPP_INSTAGRAM} target="_blank" rel="noopener" className="btn btn-primary">
            Quero crescer no Instagram <Icon name="whatsapp" size={16}/>
          </a>
        </div>
      </div>

      <div className="offer-block">
        <div className="section-head reveal" style={{ marginBottom: 32 }}>
          <div className="eyebrow">02 / Mentoria Negócios EUA</div>
          <div>
            <h2 style={{ fontSize: "clamp(28px, 4vw, 52px)" }}>Abra, estruture e<br/><em style={{ fontStyle: "italic", color: "var(--accent)" }}>escale em Orlando.</em></h2>
            <p className="lede" style={{ marginTop: 12 }}>
              Para empreendedores que querem construir negócios reais nos EUA —
              com estrutura certa e clientes desde o início.
            </p>
          </div>
        </div>
        <div className="grid-3">
          {NEGOCIOS_SERVICES.map((s, i) => (
            <article key={s.num} className="card service-card reveal" data-delay={(i % 3) + 1}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div className="ico"><Icon name={s.icon} size={22}/></div>
                <span className="num">{s.num}</span>
              </div>
              <h3>{s.title}</h3>
              <p>{s.text}</p>
              <span className="more">Saber mais <Icon name="arrow-up-right" size={12}/></span>
            </article>
          ))}
        </div>
        <div className="mentoria-foot reveal">
          <p>20+ anos empreendendo nos EUA. Consultoria baseada em resultado real, não teoria.</p>
          <a href={WHATSAPP_NEGOCIOS} target="_blank" rel="noopener" className="btn btn-primary">
            Quero meu negócio nos EUA <Icon name="whatsapp" size={16}/>
          </a>
        </div>
      </div>

    </div>
  </section>
);

// Timeline
const TIMELINE = [
  { week: "Sem. 0", title: "Diagnóstico", text: "Conversa de 60min para mapear objetivo, perfil e o caminho mais rápido até o resultado — Instagram, negócio ou os dois." },
  { week: "Sem. 1–2", title: "Planejamento", text: "Estratégia definida, ferramentas escolhidas, estrutura legal iniciada e primeiros passos no conteúdo." },
  { week: "Sem. 3–4", title: "Execução", text: "Conteúdo publicado, negócio estruturado, primeiras abordagens de captação ativas." },
  { week: "Sem. 5–8", title: "Primeiros resultados", text: "Primeiros clientes, crescimento visível no Instagram, ajustes e aceleração." },
  { week: "90 dias", title: "Independência", text: "Você não me liga mais para perguntar coisa básica. Só para mostrar resultado." },
];

const Timeline = () => (
  <section id="processo" className="timeline-section" style={{ paddingTop: 0 }}>
    <style>{`
      .timeline-section { background: var(--bg); }
      .tl-wrap {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: clamp(28px, 5vw, 56px);
      }
      .tl-head {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 40px;
      }
      .tl-head h3 {
        font-size: clamp(26px, 3.4vw, 38px);
        line-height: 1.1;
      }
      .tl {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        position: relative;
      }
      @media (min-width: 900px) {
        .tl { grid-template-columns: repeat(5, 1fr); gap: 0; }
      }
      .tl-item {
        position: relative;
        padding: 24px 0 24px 28px;
        border-left: 1px solid var(--border);
      }
      @media (min-width: 900px) {
        .tl-item {
          padding: 28px 18px 8px 0;
          border-left: none;
          border-top: 1px solid var(--border);
        }
      }
      .tl-item::before {
        content: "";
        position: absolute;
        width: 9px; height: 9px;
        border-radius: 50%;
        background: var(--accent);
        left: -5px; top: 28px;
      }
      @media (min-width: 900px) {
        .tl-item::before { left: 0; top: -5px; }
      }
      .tl-item .week {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 8px;
        display: block;
      }
      .tl-item h4 {
        font-family: var(--serif);
        font-size: 20px;
        margin: 0 0 10px;
        font-weight: 500;
        letter-spacing: -0.01em;
      }
      .tl-item p {
        margin: 0;
        font-size: 13.5px;
        color: var(--ink-2);
        line-height: 1.55;
      }
    `}</style>
    <div className="container">
      <div className="tl-wrap reveal">
        <div className="tl-head">
          <span className="eyebrow">Processo</span>
          <h3>Do zero ao resultado em <em style={{ fontStyle: "italic", color: "var(--accent)" }}>90 dias</em>.</h3>
        </div>
        <div className="tl">
          {TIMELINE.map((t, i) => (
            <div key={i} className="tl-item">
              <span className="week">{t.week}</span>
              <h4>{t.title}</h4>
              <p>{t.text}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// Produtos digitais
const Produtos = () => (
  <section id="produtos" className="produtos">
    <style>{`
      .produtos .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
      }
      @media (min-width: 900px) { .produtos .grid { grid-template-columns: 1fr 1fr; } }
      .product-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 480px;
        padding: 0;
        overflow: hidden;
      }
      .product-card .top {
        aspect-ratio: 16/9;
        position: relative;
        overflow: hidden;
      }
      .product-card .top .placeholder {
        position: absolute; inset: 0; border: none; border-radius: 0;
      }
      .product-card .top .stamp {
        position: absolute;
        left: 20px; top: 20px;
        z-index: 2;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(6px);
        padding: 6px 12px;
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ink);
      }
      .product-card .top .soon-tag {
        position: absolute;
        right: 20px; top: 20px;
        z-index: 2;
        background: var(--accent);
        color: var(--ink);
        padding: 6px 14px;
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      }
      .product-card.coming-soon .top::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(27,42,74,0.45) 100%);
        z-index: 1;
      }
      .product-card.coming-soon .price {
        color: var(--ink-2);
      }
      .btn-ghost {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--ink);
        padding: 12px 18px;
        border-radius: 999px;
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        transition: background .2s, border-color .2s;
      }
      .btn-ghost:hover { background: var(--soft); border-color: var(--ink-2); }
      .product-card .body {
        padding: 28px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1;
      }
      .product-card h3 {
        font-size: 28px;
        line-height: 1.1;
      }
      .product-card .desc {
        margin: 0;
        color: var(--ink-2);
        font-size: 14.5px;
        flex: 1;
      }
      .product-card ul {
        list-style: none;
        padding: 0; margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .product-card ul li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-size: 13.5px;
      }
      .product-card ul li .check {
        flex: 0 0 auto;
        width: 18px; height: 18px;
        border-radius: 50%;
        background: var(--soft);
        display: grid; place-items: center;
        margin-top: 2px;
        color: var(--ink);
      }
      .product-card .price-row {
        display: flex;
        align-items: end;
        justify-content: space-between;
        margin-top: 8px;
        padding-top: 18px;
        border-top: 1px solid var(--border);
      }
      .product-card .price {
        font-family: var(--serif);
        font-weight: 500;
        font-size: 32px;
        line-height: 1;
        letter-spacing: -0.01em;
      }
      .product-card .price small {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.16em;
        color: var(--ink-2);
        display: block;
        margin-bottom: 4px;
        text-transform: uppercase;
      }
    `}</style>
    <div className="container">
      <div className="section-head reveal">
        <div className="eyebrow">02 / Produtos Digitais</div>
        <div>
          <h2>Materiais que <em style={{ fontStyle: "italic", color: "var(--accent)" }}>destravam<br/>caminhos.</em> <span style={{ display: "block", fontSize: "0.42em", fontFamily: "var(--mono)", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-2)", marginTop: 14, fontStyle: "normal" }}>Em produção · Lançamento 2026</span></h2>
        </div>
      </div>

      <div className="grid">
        <article className="card product-card reveal coming-soon">
          <div className="top">
            <img src="assets/cover-curso.jpg" alt="Capa: Edição que vende na Etsy" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}/>
            <span className="stamp">Curso · 2h 40min</span>
            <span className="soon-tag">Em breve</span>
          </div>
          <div className="body">
            <h3>Edição que vende na Etsy</h3>
            <p className="desc">
              Treinamento direto: como editar shorts e reels que viralizam para
              vender produtos digitais e templates na Etsy. Sem CapCut genérico.
            </p>
            <ul>
              <li><span className="check"><Icon name="check" size={11}/></span>14 aulas com projeto pronto</li>
              <li><span className="check"><Icon name="check" size={11}/></span>Pack de 22 transições editáveis</li>
              <li><span className="check"><Icon name="check" size={11}/></span>Checklist de SEO da Etsy 2026</li>
            </ul>
            <div className="price-row">
              <div>
                <small>Lançamento</small>
                <div className="price" style={{ fontSize: 22 }}>Em breve</div>
              </div>
              <a href="#checklist" className="btn btn-ghost">
                Avise-me <Icon name="arrow-right" size={14}/>
              </a>
            </div>
          </div>
        </article>

        <article className="card product-card reveal coming-soon" data-delay="2">
          <div className="top">
            <img src="assets/cover-ebook.jpg" alt="Capa: Guia de Sobrevivência Brasileiro nos EUA" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}/>
            <span className="stamp">E-book · 184 páginas</span>
            <span className="soon-tag">Em breve</span>
          </div>
          <div className="body">
            <h3>Guia de Sobrevivência<br/>Brasileiro nos EUA</h3>
            <p className="desc">
              O playbook estratégico que eu queria ter recebido em 2014.
              Visto, finanças, escola, saúde, networking e os erros que custam caro.
            </p>
            <ul>
              <li><span className="check"><Icon name="check" size={11}/></span>11 capítulos + planilhas</li>
              <li><span className="check"><Icon name="check" size={11}/></span>Lista de profissionais brasileiros em FL</li>
              <li><span className="check"><Icon name="check" size={11}/></span>Atualizações vitalícias</li>
            </ul>
            <div className="price-row">
              <div>
                <small>Lançamento</small>
                <div className="price" style={{ fontSize: 22 }}>Em breve</div>
              </div>
              <a href="#checklist" className="btn btn-ghost">
                Avise-me <Icon name="arrow-right" size={14}/>
              </a>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>
);

window.Mentoria = Mentoria;
window.Timeline = Timeline;
window.Produtos = Produtos;