/* global React */

/* ============= AUTORIDADE ============= */
function Autoridade() {
  return (
    <section data-screen-label="07 Autoridade">
      <div className="container">
        <div className="section-head">
          <h2 className="display h2">Quem criou o Método LEGADO.</h2>
        </div>
        <div className="author-grid">
          <div>
            <div className="author-photo" style={{ backgroundImage: "url('images/edivaldo.webp'), url('images/edivaldo.jpg')", backgroundSize: "cover", backgroundPosition: "center top" }}></div>
          </div>
          <div>
            <h3 className="display h3 author-name">Edivaldo Maués Carvalho Neto</h3>
            <div className="author-role">Sucessor · Conselheiro · Engenheiro de Produção</div>

            <div className="author-bio">
              <p>
                Sucessor de terceira geração de uma empresa familiar de transporte fluvial, com 75 anos de história e 270 colaboradores.
                Viveu na prática o que ensina: <strong>crise financeira, conflitos societários, sucessão travada
                e empresa desorganizada.</strong>
              </p>
              <p>
                Liderou uma transformação profunda baseada em governança, estratégia e gestão profissional.
                Sob sua direção, a empresa saiu de R$ 16 milhões para R$ 103 milhões de faturamento entre 2016 e 2025.
              </p>
              <p>
                Hoje atua como conselheiro e ajuda outras famílias empresárias a evitar a próxima crise.
                Não ensina teoria. Ensina o que viveu.
              </p>
            </div>

            <div className="creds">
              <div className="cred">
                <div className="cred-label">Graduação</div>
                <div className="cred-value">Eng. Produção <strong>UNAMA</strong></div>
              </div>
              <div className="cred">
                <div className="cred-label">MBA</div>
                <div className="cred-value">Gestão Empresarial <strong>FGV</strong></div>
              </div>
              <div className="cred">
                <div className="cred-label">Especialização</div>
                <div className="cred-value">Conselheiro <strong>FDC</strong></div>
              </div>
              <div className="cred">
                <div className="cred-label">Operação real</div>
                <div className="cred-value">Transporte fluvial · <strong>75 anos</strong></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============= ARGUMENTOS ============= */
function Argumentos() {
  const facts = [
    "As empresas familiares mais longevas do mundo profissionalizaram sua gestão.",
    "Toda empresa familiar enfrentará sucessão.",
    "Quem se prepara antes lidera. Quem adia, reage.",
    "Sucessão sem método é a principal causa de fratura societária.",
  ];
  return (
    <section className="arg-section" data-screen-label="08 Argumentos">
      <div className="container">
        <div className="section-head">
          <h2 className="display h2">A matemática silenciosa da empresa familiar.</h2>
        </div>

        <div className="arg-stat-row">
          <div>
            <div className="big-stat">
              ~<span className="pct">10%</span>
            </div>
            <div className="big-stat-cap">Das empresas familiares chegam à 3ª geração</div>
          </div>
          <ul className="arg-list">
            {facts.map((t, i) => (
              <li key={i} className="arg-item">
                <span className="arg-item-num">{String(i + 1).padStart(2, "0")}</span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="arg-question">
          <p>A pergunta não é <em>se</em> vai acontecer.</p>
          <p>É <em>como</em> vai acontecer.</p>
        </div>
      </div>
    </section>
  );
}

/* ============= MÓDULOS ============= */
function Modulos() {
  const modules = [
    { letter: "L", num: "01", title: "Linha de Sucessão", aulas: 7, dur: "1h10" },
    { letter: "E", num: "02", title: "Estrutura de Gestão", aulas: 9, dur: "1h45" },
    { letter: "G", num: "03", title: "Ganho de Credibilidade", aulas: 6, dur: "55min" },
    { letter: "A", num: "04", title: "Alinhamento Familiar", aulas: 8, dur: "1h30" },
    { letter: "D", num: "05", title: "Documento de Governança", aulas: 7, dur: "1h20" },
    { letter: "O", num: "06", title: "Operação Sustentável", aulas: 6, dur: "1h05" },
  ];

  const inclusos = [
    { icon: <Icon.Module />, name: "Curso online completo", desc: "Aulas gravadas, acesso vitalício à versão atual." },
    { icon: <Icon.Doc />, name: "Templates prontos", desc: "Modelos de reuniões de família e conselho." },
    { icon: <Icon.Spreadsheet />, name: "Planilhas estratégicas", desc: "DRE, fluxo de caixa, indicadores." },
    { icon: <Icon.Doc />, name: "Checklists de execução", desc: "Passo a passo de cada pilar do método." },
    { icon: <Icon.WhatsApp />, name: "Suporte via WhatsApp", desc: "Tira-dúvidas direto com a equipe." },
    { icon: <Icon.Users />, name: "Acesso à comunidade", desc: "Rede privada de sucessores em formação." },
  ];

  return (
    <section data-screen-label="09 Módulos">
      <div className="container">
        <div className="section-head">
          <h2 className="display h2">6 módulos. Um método. Aplicação imediata.</h2>
          <p className="lead">
            Cada módulo entrega um pilar do método LEGADO. Você assiste no seu ritmo,
            aplica em sequência e constrói sua autoridade na prática.
          </p>
        </div>

        <div className="modules">
          {modules.map((m) => (
            <div key={m.letter} className="module">
              <div className="module-letter">{m.letter}</div>
              <div className="module-num">Módulo {m.num}</div>
              <div className="module-title">{m.title}</div>
              <div className="module-meta">
                <span><Icon.Play size={10} /> {m.aulas} aulas</span>
                <span><Icon.Clock size={10} /> {m.dur}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="modules-totals">
          <span><strong>6</strong> módulos</span>
          <span className="sep">·</span>
          <span><strong>43</strong> aulas gravadas</span>
          <span className="sep">·</span>
          <span><strong>~7h45</strong> de conteúdo</span>
          <span className="sep">·</span>
          <span>acesso <strong>vitalício</strong></span>
        </div>

        <div className="inclusos">
          {inclusos.map((it, i) => (
            <div key={i} className="incluso">
              <div className="incluso-icon">{it.icon}</div>
              <div className="incluso-name">{it.name}</div>
              <div className="incluso-desc">{it.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============= BÔNUS — mockups visuais ============= */
function BonusMockup({ kind }) {
  if (kind === "wapp") {
    return (
      <div className="bmock bmock-wapp" aria-hidden="true">
        <div className="bmock-phone">
          <div className="bmock-bubble in">Edivaldo, como apresento o acordo de sócios pro meu pai?</div>
          <div className="bmock-bubble out">Manda o contexto. Te respondo hoje com o passo a passo.</div>
          <div className="bmock-typing"><span></span><span></span><span></span></div>
        </div>
      </div>
    );
  }
  if (kind === "community") {
    return (
      <div className="bmock bmock-comm" aria-hidden="true">
        <div className="bmock-avatars">
          <span className="bmock-av a1"></span>
          <span className="bmock-av a2"></span>
          <span className="bmock-av a3"></span>
          <span className="bmock-av a4"></span>
          <span className="bmock-av more">+</span>
        </div>
        <div className="bmock-comm-label">Rede privada de sucessores</div>
      </div>
    );
  }
  if (kind === "templates") {
    return (
      <div className="bmock bmock-tpl" aria-hidden="true">
        <div className="bmock-doc d3"></div>
        <div className="bmock-doc d2"></div>
        <div className="bmock-doc d1">
          <span className="bmock-doc-line w70"></span>
          <span className="bmock-doc-line w90"></span>
          <span className="bmock-doc-line w50"></span>
          <span className="bmock-doc-stamp">ATA</span>
        </div>
      </div>
    );
  }
  // dre
  return (
    <div className="bmock bmock-dre" aria-hidden="true">
      <div className="bmock-sheet">
        <div className="bmock-sheet-head">
          <span></span><span></span><span></span>
        </div>
        <div className="bmock-bars">
          <span style={{ height: "40%" }}></span>
          <span style={{ height: "62%" }}></span>
          <span style={{ height: "55%" }}></span>
          <span style={{ height: "82%" }}></span>
          <span style={{ height: "70%" }}></span>
          <span style={{ height: "100%" }}></span>
        </div>
        <div className="bmock-sheet-foot">DRE · Fluxo · Indicadores</div>
      </div>
    </div>
  );
}

function Bonus() {
  const bonuses = [
    {
      num: "01", kind: "wapp",
      title: "Tira-dúvidas direto no WhatsApp",
      desc: "Canal de suporte estratégico com a equipe do Método LEGADO durante toda a sua jornada.",
      value: "R$ 1.200",
    },
    {
      num: "02", kind: "community",
      title: "Comunidade privada de sucessores",
      desc: "Acesso a um grupo fechado de outros sucessores aplicando o método. Networking real entre famílias empresárias.",
      value: "R$ 1.800",
    },
    {
      num: "03", kind: "templates",
      title: "Templates do curso",
      desc: "Modelos prontos de atas, regimento, acordo de sócios, plano de sucessor, reuniões de conselho e família.",
      value: "R$ 2.400",
    },
    {
      num: "04", kind: "dre",
      title: "Arquivo Gerencial completo",
      desc: "DRE, Fluxo de Caixa, Planejamento Estratégico e Painel de Indicadores. Editável, comentado e replicável.",
      value: "R$ 3.600",
    },
  ];

  const total = "R$ 9.000";

  return (
    <section className="bonus-section" data-screen-label="10 Bônus">
      <div className="container">
        <div className="section-head">
          <h2 className="display h2">Quatro bônus que sozinhos já valem o investimento.</h2>
          <p className="lead">
            Liberados imediatamente após a inscrição, dentro da área de membros.
          </p>
        </div>

        <Reveal stagger className="bonus-list">
          {bonuses.map((b) => (
            <div key={b.num} className="bonus">
              <div className="bonus-mock">
                <BonusMockup kind={b.kind} />
                <span className="bonus-mock-tag">Bônus {b.num}</span>
              </div>
              <div className="bonus-content">
                <h4>{b.title}</h4>
                <p>{b.desc}</p>
              </div>
              <div className="bonus-value">
                Valor de mercado
                <span className="num">{b.value}</span>
              </div>
            </div>
          ))}
        </Reveal>

        <div className="bonus-total">
          <span className="bonus-total-label">Valor somado dos bônus</span>
          <span className="bonus-total-num">{total}</span>
          <span className="bonus-total-note">incluídos sem custo na sua matrícula</span>
        </div>
      </div>
    </section>
  );
}

window.LegadoComponentsB = { Autoridade, Argumentos, Modulos, Bonus };
Object.assign(window, { Autoridade, Argumentos, Modulos, Bonus });