/* global React, Icon, Logo, useReveal, CTA */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ─── Modules ───
function Modules() {
  const modules = window.CCA_DATA.modules;
  const [open, setOpen] = useState(0);

  const totalLessons = modules.reduce((sum, m) => sum + m.lessons.length, 0);

  return (
    <section className="section section--cream" id="modulos">
      <div className="shell">
        <div className="section-head">
          <h2 className="h2">O que você vai dominar no CCA</h2>
          <p className="lead">{modules.length} módulos · {totalLessons} aulas em vídeo. Do entendimento da pele e do cosmético ao raciocínio clínico e à construção de rotinas personalizadas.</p>
        </div>

        <div className="accordion accordion--covers">
          {modules.map((m, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`acc-item ${isOpen ? "is-open" : ""}`}>
                <button
                  className="acc-cover"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  aria-label={`${m.tag} — ${m.title}`}
                >
                  {m.image && (
                    <div className="acc-cover-img" style={{backgroundImage: `url(${m.image})`}}/>
                  )}
                  <span className="acc-cover-bar">
                    <span className="acc-cover-count">{m.lessons.length} aulas</span>
                    <span className="acc-toggle" aria-hidden="true">
                      <Icon.plus style={{width: 18, height: 18}}/>
                    </span>
                  </span>
                </button>
                <div className="acc-body">
                  <div className="acc-body-inner">
                    <ul className="acc-lessons">
                      {m.lessons.map((l, k) => (
                        <li key={k} className="acc-lesson">
                          <span className="acc-lesson-n">{l.n}</span>
                          <span className="acc-lesson-title">{l.title}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="shell flex-center mt-xl">
        <CTA/>
      </div>
    </section>
  );
}

// ─── Bonuses ───
function Bonuses() {
  const bonuses = window.CCA_DATA.bonuses;
  // Duplicate for seamless infinite loop
  const loop = [...bonuses, ...bonuses];
  return (
    <section className="section section--bonus" id="bonus">
      <div className="shell">
        <div className="section-head">
          <h2 className="h2 cream-text">Bônus exclusivos</h2>
          <p className="lead">6 ferramentas práticas que você usa nos primeiros 30 dias de consultoria. Valor agregado de <b style={{color:"var(--cream)"}}>R$ 1.000,00</b>, inclusas.</p>
        </div>
      </div>

      <div className="marquee bonus-marquee" aria-label="Carrossel de bônus">
        <div className="marquee-track marquee-track--bonus">
          {loop.map((b, i) => {
            return (
              <article key={i} className="bonus-card" aria-hidden={i >= bonuses.length}>
                <div className="bonus-visual">
                  <BonusCover bonus={b} index={i % bonuses.length}/>
                </div>
                <div className="bonus-body">
                  <div className="bonus-meta">
                    <span className="bonus-tag">{b.tag}</span>
                    <span className="bonus-value"><s>{b.value}</s> incluso</span>
                  </div>
                  <h3>{b.title}</h3>
                  <p>{b.desc}</p>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── Countdown ───
function useCountdown(targetMs) {
  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(t);
  }, []);
  const diff = Math.max(0, targetMs - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff / 3600000) % 24);
  const m = Math.floor((diff / 60000) % 60);
  const s = Math.floor((diff / 1000) % 60);
  return {d, h, m, s};
}

// ─── Pricing ───
function Pricing() {
  const breakdown = [
    {name: "Bônus #01 Planilha Viva GPS Cosmético PRO", price: "R$ 97,00"},
    {name: "Bônus #02 Anamnese de Mapeamento 9D", price: "R$ 147,00"},
    {name: "Bônus #03 Planner Editável de Rotina Personalizada", price: "R$ 87,00"},
    {name: "Bônus #04 Guia do Atendimento Online Estratégico", price: "R$ 125,00"},
    {name: "Bônus #05 Guia de Ingredientes Controversos", price: "R$ 147,00"},
    {name: "Bônus #06 Comunidade exclusiva", price: "R$ 397,00"},
  ];

  return (
    <section className="section section--cream" id="preco">
      <div className="shell">
        <div className="section-head">
          <h2 className="h2">Oferta especial por tempo limitado</h2>
          <p className="lead">Esse método será vendido por R$ 1.997,00 nos próximos meses. Agora você acessa economizando quase 50%, e com todos os bônus inclusos.</p>
        </div>

        <div className="pricing-wrap">
          <div className="pricing-breakdown reveal">
            <h4>O que está incluso</h4>
            <div className="breakdown-row">
              <span className="name"><Icon.check style={{width: 14, height: 14, color: "#04581B", marginRight: 8, display: "inline-block", verticalAlign: "-2px"}}/>Acesso de 3 anos com atualizações e novas aulas inclusas</span>
              <span className="price">incluso</span>
            </div>
            {breakdown.map((b, i) => (
              <div key={i} className="breakdown-row">
                <span className="name"><Icon.check style={{width: 14, height: 14, color: "#04581B", marginRight: 8, display: "inline-block", verticalAlign: "-2px"}}/>{b.name}</span>
                <span className="price">{b.price}</span>
              </div>
            ))}
            <div className="breakdown-row is-total">
              <span className="name">Total em bônus</span>
              <span className="price">R$ 1.000,00</span>
            </div>
          </div>

          <div className="pricing-offer reveal reveal-delay-1" id="comprar">
            <div className="logo-mark">
              <img src="assets/logo-full.png" alt="CCA"/>
            </div>
            <div style={{fontSize: 13, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 18}}>
              Acesso completo CCA
            </div>
            <div className="from">De <s>R$ 2.997,00</s> por apenas</div>
            <div className="price-big">12× R$ 103,11</div>
            <div className="price-or">no cartão, ou <b>R$ 997,00 à vista</b></div>

            <a href="https://pay.hotmart.com/L101960414T" target="_blank" rel="noopener" className="btn btn--gold" style={{width: "100%"}}>
              Quero entrar no CCA
              <Icon.arrow className="arrow" style={{width: 18, height: 18}}/>
            </a>
            <div className="seals">
              <div><Icon.shield style={{width: 14, height: 14}}/> 3 anos de acesso</div>
              <div><Icon.hotmart style={{width: 14, height: 14}}/> Hotmart</div>
              <div><Icon.shield style={{width: 14, height: 14}}/> Compra segura</div>
              <div><Icon.privacy style={{width: 14, height: 14}}/> Privacidade</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Guarantee ───
function Guarantee() {
  return (
    <section className="section" id="garantia">
      <div className="shell">
        <div className="guarantee">
          <div className="guarantee-text reveal">
            <h2 className="h2" style={{marginTop: 0}}>Você terá 7 dias de garantia total.</h2>
            <p>Se, por qualquer motivo, você sentir que o método não é para você, seu investimento está protegido.</p>
            <p>Basta pedir reembolso durante o prazo de 7 dias após a compra direto na plataforma da Hotmart.</p>
            <p><b>Ou você fica ultra satisfeita, ou você recebe todo o seu dinheiro de volta.</b></p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Certificate ───
function Certificate() {
  return (
    <section className="section" id="certificado">
      <div className="shell">
        <div className="section-head">
          <h2 className="h2 cream-text">Certificado de Conclusão CCA</h2>
          <p className="lead">Ao concluir os 6 módulos, você recebe um certificado que comprova sua participação no método e sua evolução profissional na consultoria de skincare.</p>
        </div>

        <div className="certificate-stage reveal">
          <figure className="certificate-real">
            <img src="assets/certificado.png" alt="Certificado de Conclusão CCA — Cosmetologia Consciente Aplicada" />
          </figure>
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ───
function FAQ() {
  const faq = window.CCA_DATA.faq;
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="shell">
        <div className="section-head">
          <h2 className="h2 cream-text">Ainda tem dúvidas?</h2>
          <p className="lead">As perguntas mais comuns sobre o método CCA.</p>
        </div>
        <div className="faq-list">
          {faq.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`faq-item reveal ${isOpen ? "is-open" : ""}`} style={{transitionDelay: `${(i % 6) * 0.04}s`}}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="toggle"><Icon.plus style={{width: 16, height: 16}}/></span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner">
                    <p>{f.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── Support ───
function Support() {
  return (
    <section className="section support" id="suporte">
      <div className="shell">
        <a href="#" className="support-link">
          Fale com nossa equipe pelo WhatsApp
        </a>
        <h2 className="h2">Caso tenha qualquer dúvida sobre o método, nosso suporte está à disposição.</h2>
        <a href="#" className="btn btn--whatsapp">
          <Icon.whatsapp style={{width: 22, height: 22}}/>
          Falar com suporte
        </a>
      </div>
    </section>
  );
}

// ─── Footer ───
function Footer() {
  return (
    <footer className="footer footer-min">
      <div className="footer-divider" aria-hidden="true"></div>
      <div className="shell">
        <div className="footer-min-inner">
          <div className="footer-min-logo">
            <img src="assets/logo-full.png" alt="CCA - Cosmetologia Consciente aplicada"/>
          </div>

          <nav className="footer-min-links" aria-label="Links legais">
            <a href="termos-de-uso.html">Termos de uso</a>
            <span className="footer-sep" aria-hidden="true">•</span>
            <a href="politica-de-privacidade.html">Política de privacidade</a>
            <span className="footer-sep" aria-hidden="true">•</span>
            <a href="politica-de-reembolso.html">Política de reembolso</a>
          </nav>

          <div className="footer-min-legal">
            <span>© 2026 Cosmetologia Consciente aplicada</span>
            <span className="footer-sep" aria-hidden="true">•</span>
            <span>CNPJ 58.427.440/0001-00</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {Modules, Bonuses, Pricing, Guarantee, Certificate, FAQ, Support, Footer});