/* global React */
const { useState: useState3, useEffect: useEffect3 } = React;

/* ============================================
   Plano de pré-lançamento / Pricing
   ============================================ */
function FounderPlan() {
  // Countdown to end of pre-launch (set 14 days from May 1, 2026)
  const target = new Date("2026-05-15T23:59:59").getTime();
  const [now, setNow] = useState3(Date.now());
  useEffect3(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  const pad = n => String(n).padStart(2, "0");

  return (
    <section className="section founder" id="founder">
      <div className="founder__bg"></div>
      <div className="container founder__inner">
        <div>
          <span className="eyebrow">05 / Oferta de pré-lançamento</span>
          <h2 className="title" style={{marginTop: 18}}>
            Plano de pré-lançamento.<br/>
            <em>Para quem entra primeiro.</em>
          </h2>
          <p className="lede" style={{marginTop: 24}}>
            500 vagas. Preço especial de pré-lançamento, voz direta no roadmap
            e prioridade nas primeiras ondas do produto.
          </p>

          <div className="scarcity" style={{marginTop: 36}}>
            <div className="scarcity__bar">
              <div className="scarcity__fill"></div>
            </div>
            <div className="scarcity__row">
              <span><strong>204</strong> de 500 vagas preenchidas</span>
              <span>296 restantes</span>
            </div>
          </div>

          <div className="countdown">
            <div className="countdown__cell">
              <div className="countdown__num">{pad(d)}</div>
              <div className="countdown__label">Dias</div>
            </div>
            <div className="countdown__cell">
              <div className="countdown__num">{pad(h)}</div>
              <div className="countdown__label">Horas</div>
            </div>
            <div className="countdown__cell">
              <div className="countdown__num">{pad(m)}</div>
              <div className="countdown__label">Min</div>
            </div>
            <div className="countdown__cell">
              <div className="countdown__num">{pad(s)}</div>
              <div className="countdown__label">Seg</div>
            </div>
          </div>
          <p className="mono-label" style={{marginTop: 16}}>Encerra em 15 de maio · Sem nova janela.</p>
        </div>

        <div className="pricing-card">
          <div className="pricing-card__ribbon">
            <Icon.Spark /> Pré-lançamento · Vagas limitadas
          </div>
          <h3 className="pricing-card__title">Escolha seu plano</h3>
          <p className="pricing-card__sub">
            Os dois planos liberam a mesma experiência Jethro: mentor IA, diagnóstico,
            plano de execução e grupo fechado do pré-lançamento.
          </p>

          <div className="pricing-options">
            <div className="pricing-option">
              <span className="pricing-option__label">Plano Mensal</span>
              <div className="pricing-option__head">
                <strong>Assinatura mensal</strong>
                <span>Flexível</span>
              </div>
              <p>Ideal para entrar no pré-lançamento com menor compromisso inicial e validar o Jethro no seu ritmo.</p>
              <ul className="pricing-option__list">
                <li><Icon.Check size={14}/><span>Cobrança recorrente mensal pelo PagBank.</span></li>
                <li><Icon.Check size={14}/><span>Acesso ao mentor IA, diagnóstico e plano 30/90/180.</span></li>
                <li><Icon.Check size={14}/><span>Entrada no grupo fechado de pré-lançamento.</span></li>
              </ul>
              <a href="/api/create-checkout?plan=monthly" className="btn btn--ghost btn--lg" data-checkout="monthly">
                Entrar no mensal <span className="btn-arrow"><Icon.Arrow /></span>
              </a>
            </div>

            <div className="pricing-option pricing-option--featured">
              <span className="pricing-option__badge">Mais escolhido</span>
              <span className="pricing-option__label">Plano Semestral</span>
              <div className="pricing-option__head">
                <strong>Assinatura semestral</strong>
                <span>Mais foco</span>
              </div>
              <p>Para quem quer atravessar a fase de implantação com constância, acompanhamento e menos fricção mensal.</p>
              <ul className="pricing-option__list">
                <li><Icon.Check size={14}/><span>Cobrança recorrente a cada 6 meses pelo PagBank.</span></li>
                <li><Icon.Check size={14}/><span>Mesmos recursos do mensal, com ciclo maior de execução.</span></li>
                <li><Icon.Check size={14}/><span>Prioridade nas ondas iniciais e no feedback de produto.</span></li>
              </ul>
              <a href="/api/create-checkout?plan=semiannual" className="btn btn--primary btn--lg" data-checkout="semiannual">
                Entrar no semestral <span className="btn-arrow"><Icon.Arrow /></span>
              </a>
            </div>
          </div>

          <ul className="pricing-card__included">
            <li><Icon.Check /><span><strong>Preço especial</strong> de pré-lançamento enquanto sua assinatura estiver ativa.</span></li>
            <li><Icon.Check /><span>Mentor IA 24/7, diagnóstico, plano 30/90/180 e biblioteca completa.</span></li>
            <li><Icon.Check /><span><strong>Voz no roadmap</strong> — você escolhe o que entra primeiro.</span></li>
            <li><Icon.Check /><span>Comunidade fechada de fundadores. Encontros mensais ao vivo.</span></li>
            <li><Icon.Check /><span>30 dias para cancelar. Reembolso integral, sem perguntas.</span></li>
          </ul>
          <p className="pricing-card__guarantee">Pagamento seguro · PagBank · Pix · Cartão</p>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   For Whom
   ============================================ */
function ForWhom() {
  const forItems = [
    "Empreendedor cristão.",
    "Quem cansou de comprar curso e quer execução.",
    "Fundador solo que não têm um conselheiro do lado.",
    "Quem quer princípios bíblicos sem linguagem religiosa rasa.",
    "Quem entende que ritmo > inspiração."
  ];
  const notItems = [
    "Quem busca milagre rápido sem esforço.",
    "Quem prefere consumir conteúdo a executar.",
    "Quem só quer mais um chatbot genérico.",
    "Quem não topa confiabilidade semanal.",
    "Quem espera promessa de enriquecimento."
  ];
  return (
    <section className="section section--ice" id="para-quem">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--light">06 / Para quem é</span>
          <h2 className="title">Construído para quem <em>está pronto</em>.</h2>
        </div>
        <div className="audience">
          <div className="audience__col audience__col--for">
            <h4>✱ É para você se</h4>
            <ul>
              {forItems.map((t, i) => (
                <li key={i}><span className="mark"><Icon.Check size={16}/></span><span>{t}</span></li>
              ))}
            </ul>
          </div>
          <div className="audience__col audience__col--not">
            <h4>✕ Não é para você se</h4>
            <ul>
              {notItems.map((t, i) => (
                <li key={i}><span className="mark"><Icon.X size={16}/></span><span>{t}</span></li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Authority / Quote
   ============================================ */
function Authority() {
  return (
    <section className="section section--light">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--light">07 / Autoridade</span>
          <h2 className="title">A escola do <em>Êxodo 18</em>.</h2>
          <p className="lede lede--light" style={{marginTop: 20}}>
            Jetro foi quem disse a Moisés: "o que você está fazendo não é bom." E desenhou um sistema de governo
            que funcionou. Esse é o DNA do produto: clareza, delegação e ritmo. Aplicado ao seu negócio.
          </p>
        </div>
        <div className="quote-card">
          <span className="quote-card__mark">“</span>
          <p className="quote-card__text">
            Nas duas primeiras semanas eu já tinha o plano de 90 dias mais claro que eu fiz nos últimos 4 anos.
            O que eu pagaria a um mentor por mês, eu pago aqui por ano.
          </p>
          <div className="quote-card__attr">
            <div className="quote-card__avatar"></div>
            <div>
              <div className="quote-card__attr-name">Beta tester · founder #017</div>
              <div className="quote-card__attr-title">SAAS B2B · 8 ANOS DE NEGÓCIO</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FounderPlan, ForWhom, Authority });