/* ================== DAC — SECÇÕES ================== */

function Hero() {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <nav className="nav wrap">
        <div className="wordmark reveal">
          <span>MÉTODO <em style={{fontStyle: 'italic', color: 'var(--amber)'}}>DAC</em></span>
          <span className="wordmark-dot"></span>
          <span className="wordmark-tag">Da Ansiedade à Confiança. </span>
        </div>
        <a href="#preco" className="btn btn-ghost" style={{marginLeft: 'auto', padding: '12px 22px', fontSize: '13px'}}>
          <span className="nav-cta-full">Entrar</span>
          <span className="nav-cta-short">Entrar</span>
          <span className="btn-arrow">→</span>
        </a>
      </nav>

      <div className="hero-content wrap hero-split">
        <div className="hero-copy">
          <div className="eyebrow eyebrow-amber reveal" style={{marginBottom: '28px'}}>
            MENTORIA INTENSIVA DE 90 DIAS · TURMA A FECHAR · EM DIRETO
          </div>

          <h1 className="hero-headline display reveal reveal-delay-1">
            Tu não<br/>
            <span className="display-italic">nasceste</span> assim.
          </h1>

          <p className="hero-sub reveal reveal-delay-2">
            A ansiedade convenceu-te do contrário. <br/>
            Em 90 dias, vais prová-lo a ti próprio.
          </p>

          <div className="reveal reveal-delay-3" style={{display: 'flex', gap: '12px', flexWrap: 'wrap'}}>
            <a href="#preco" className="btn btn-primary">
              Quero começar a minha transformação
              <span className="btn-arrow">→</span>
            </a>
            <a href="#jornada" className="btn btn-ghost">Ver como funciona</a>
          </div>
        </div>

        <aside className="hero-portrait reveal reveal-delay-2">
          <div className="hero-portrait-frame">
            <img src="assets/vania.png" alt="Vânia Chavarria" className="hero-portrait-img"/>
          </div>
          <div className="hero-portrait-caption">
            <span className="eyebrow">Criadora do método</span>
            <div style={{fontFamily: 'var(--font-display)', fontSize: '29px', fontWeight: 300, letterSpacing: '-0.02em', marginTop: '6px'}}>
              Vânia <em style={{fontStyle: 'italic', color: 'var(--amber)'}}>Chavarria</em>
            </div>
            <div className="eyebrow" style={{marginTop: '10px', fontSize: '13px', letterSpacing: '0.24em', color: 'var(--amber)'}}>
              Treinadora de Ansiedade
            </div>
          </div>
        </aside>
      </div>

      <div className="hero-meta-bar wrap reveal reveal-delay-4">
        <div className="hero-meta">
          <div className="hero-meta-item">
            <div className="eyebrow">Programa</div>
            <div className="v">Da Ansiedade à Confiança</div>
          </div>
          <div className="hero-meta-item">
            <div className="eyebrow">Duração</div>
            <div className="v">90 dias · 3 fases</div>
          </div>
          <div className="hero-meta-item">
            <div className="eyebrow">Criado por</div>
            <div className="v">Vânia Chavarria</div>
          </div>
          <div className="hero-meta-item">
            <div className="eyebrow">Formato</div>
            <div className="v">Online · ao vivo</div>
          </div>
        </div>

      </div>
    </section>
  );
}

function ProofBand({ children }) {
  return (
    <div className="proof-band">
      <div className="proof-band-inner">
        {children}
      </div>
    </div>
  );
}

function Mirror() {
  const items = [
    "Acordas já cansado — antes de o dia começar.",
    "O peito aperta sem razão. O corpo parece que sabe algo que tu não sabes.",
    "Evitas situações. Adias decisões. Dizes sim quando queres dizer não.",
    "Sentes que apontam para ti. Sentes-te julgado.",
    "Já tentaste terapia, medicação, meditação — nada mudou de verdade.",
    "E às vezes, um pensamento: não ser capaz. Medo do medo.",
  ];

  return (
    <section className="mirror" data-screen-label="02 Espelho">
      <div className="wrap">
        <div className="mirror-grid">
          <div className="reveal">
            <div className="eyebrow eyebrow-amber" style={{marginBottom: '24px'}}>— 02 · O Espelho</div>
            <h2 className="display" style={{fontSize: 'clamp(44px, 6vw, 86px)', marginBottom: '24px'}}>
              Reconheces-te<br/><span className="display-italic">em alguma destas?</span>
            </h2>
            <p className="lede">
              Não é a tua imaginação. E não estás só.
              Estas são as frases reais de quem chegou ao Método DAC — antes de começar.
            </p>
          </div>

          <ul className="mirror-list">
            {items.map((text, i) => (
              <li key={i} className="mirror-item reveal" style={{transitionDelay: `${i * 0.08}s`}}>
                <span className="mirror-num">{String(i + 1).padStart(2, '0')}</span>
                <span className="mirror-text">{text}</span>
              </li>
            ))}

            <div className="mirror-whisper reveal">
              E no fundo — aquela pergunta que não fazes em voz alta:<br/>
              <span style={{color: 'var(--amber)'}}>“Será que eu sou assim?”</span>
            </div>
          </ul>
        </div>
      </div>
    </section>
  );
}

function Revelation() {
  return (
    <section data-screen-label="03 Revelação">
      <div className="wrap">
        <div className="revelation-grid">
          <div className="revelation-left reveal">
            <div className="eyebrow eyebrow-amber" style={{marginBottom: '24px'}}>— 03 · A Verdade</div>
            <h2 className="display">
              E se o problema<br/>
              <span className="display-italic">nunca tivesse sido</span><br/>
              a ansiedade?
            </h2>
            <div className="revelation-name">
              Nasceu por isso o <em>Método DAC.</em>
              <div style={{fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-dim)', marginTop: '16px'}}>
                Da Ansiedade à Confiança
              </div>
            </div>
          </div>

          <div className="revelation-insight reveal reveal-delay-2">
            <p>
              A ansiedade <strong>não é a causa.</strong> É o sintoma.
              A causa é um vazio que ninguém te ensinou a preencher — a <strong>confiança.</strong>
            </p>
            <p>
              Por isso tudo o que tentaste — terapia, medicação, meditação — te deu algum alívio,
              mas nunca te devolveu a ti.
            </p>
            <p>
              A maioria dos programas promete tirar a ansiedade.
              <strong> Nenhum promete construir o que deveria estar no lugar dela.</strong>
            </p>
            <p style={{color: 'var(--amber)', fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '20px', lineHeight: 1.35, marginTop: '28px', paddingTop: '28px', borderTop: '1px solid var(--line)'}}>
              Confiança não se pensa.<br/>Constrói-se.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Journey() {
  const phases = [
    {
      num: "Fase 01",
      title: "Despertar",
      subtitle: "Corpo · Dias 1–30",
      body: "O teu corpo precisa de acordar antes da tua mente poder mudar. Começamos onde a ansiedade vive — no sistema nervoso.",
      glyph: (
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
          <circle cx="28" cy="28" r="8" stroke="currentColor" strokeWidth="1"/>
          <circle cx="28" cy="28" r="18" stroke="currentColor" strokeWidth="1" strokeDasharray="2 4"/>
          <circle cx="28" cy="28" r="27" stroke="currentColor" strokeWidth="1" opacity="0.3"/>
        </svg>
      ),
    },
    {
      num: "Fase 02",
      title: "Clareza",
      subtitle: "Mente · Dias 31–60",
      body: "Ver com clareza o que te prende — e desmontar, crença a crença. Aqui a cabeça aprende a confiar no corpo.",
      glyph: (
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
          <path d="M8 40 L28 8 L48 40" stroke="currentColor" strokeWidth="1" fill="none"/>
          <line x1="8" y1="40" x2="48" y2="40" stroke="currentColor" strokeWidth="1"/>
          <circle cx="28" cy="22" r="2" fill="currentColor"/>
        </svg>
      ),
    },
    {
      num: "Fase 03",
      title: "Confiança",
      subtitle: "Acção · Dias 61–90",
      body: "Não vais pensar sobre confiança. Vais prová-la. Com atos reais, no mundo real — os Atos de Confiança do mês 3.",
      glyph: (
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
          <path d="M10 28 L26 28 M26 28 L20 22 M26 28 L20 34" stroke="currentColor" strokeWidth="1"/>
          <circle cx="38" cy="28" r="10" stroke="currentColor" strokeWidth="1"/>
          <circle cx="38" cy="28" r="3" fill="currentColor"/>
        </svg>
      ),
    },
  ];

  return (
    <section id="jornada" data-screen-label="04 Jornada">
      <div className="wrap">
        <div className="journey-header reveal">
          <div className="eyebrow eyebrow-amber" style={{marginBottom: '24px'}}>— 04 · O caminho</div>
          <h2 className="display">
            90 dias. <span className="display-italic">Três fases.</span><br/>
            Uma transformação que fica.
          </h2>
        </div>

        <div className="journey-phases">
          {phases.map((p, i) => (
            <div key={i} className="phase reveal" style={{transitionDelay: `${i * 0.12}s`}}>
              <div className="phase-num">— {p.num}</div>
              <div className="phase-glyph" style={{color: 'var(--amber)'}}>{p.glyph}</div>
              <div>
                <h3 className="phase-title">{p.title}</h3>
                <div className="phase-subtitle">{p.subtitle}</div>
              </div>
              <p className="phase-body">{p.body}</p>
              <div className="phase-duration">
                <strong>30 dias</strong> · Prática + mentoria ao vivo
              </div>
            </div>
          ))}
        </div>

        <div className="reveal" style={{textAlign: 'center', marginTop: '56px', fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-dim)'}}>
          O conteúdo interno do método fica para quem entra. · O resultado, mostramos em testemunhos reais.
        </div>
      </div>
    </section>
  );
}

function Wall() {
  const tlist = [
    {
      result: "Confiança em mim que nunca esteve tão viva. Emagreci 9kg no caminho.",
      quote: "Entrei no DAC porque estava cansado de tentar. Saí outro — e o corpo acompanhou. Nove quilos a menos, e uma vida inteira para viver.",
      name: "Carina Pires",
      loc: "Portugal",
      img: "assets/testimonials/carina.jpg",
      featured: true,
    },
    {
      result: "Perdi o pânico de falar em público.",
      quote: "Até as pessoas à minha volta notaram a diferença em mim. Hoje sou muito mais calma, menos stressada e muito mais leve.",
      name: "Lígia Borges",
      loc: "Portugal",
      img: "assets/testimonials/ligia.jpg",
    },
    {
      result: "Aprendi a dizer não sem culpa.",
      quote: "Saí do modo automático. Hoje escolho. Não achei que fosse possível sentir-me assim.",
      name: "Luisa Vasco",
      loc: "Suíça",
      img: "assets/testimonials/luisa.jpg",
    },
    {
      result: "As dores no corpo desapareceram.",
      quote: "Os médicos não encontravam nada. O Método DAC encontrou tudo. O corpo sabia — e finalmente ouvi.",
      name: "Sandrina Felizardo",
      loc: "Portugal",
      img: "assets/testimonials/sandrina.jpg",
    },
    {
      result: "Ultrapassei o medo de conduzir.",
      quote: "Há três anos que não entrava num carro sem medo. Hoje viajo de Lisboa ao Porto e canto no caminho.",
      name: "Sonia Santinha",
      loc: "Portugal",
      img: "assets/testimonials/sonia.jpg",
    },
    {
      result: "Superei a ansiedade em espaços cheios. E perdi 11kg.",
      quote: "Eu tinha ansiedade de estar em espaços com muita gente, me davam ataques de pânico. Com a ajuda da Vania estou muito melhor.",
      name: "Nuno Zorro",
      loc: "Portugal",
      img: "assets/testimonials/nuno.jpg",
    },
    {
      result: "A melhor prenda de mim para mim.",
      quote: "Recuperei qualidade de vida, recuperei a confiança. Não há preço que pague isto.",
      name: "Alzira Aroso",
      loc: "Portugal",
      img: "assets/testimonials/alzira.jpg",
    },
  ];

  return (
    <section data-screen-label="05 Wall of Love">
      <div className="wrap">
        <div className="wall-header">
          <div className="reveal">
            <div className="eyebrow eyebrow-amber" style={{marginBottom: '24px'}}>— 05 · Wall of love</div>
            <h2 className="display">
              Não acredites em nós.<br/>
              <span className="display-italic">Acredita neles.</span>
            </h2>
          </div>
          <div className="wall-stat reveal reveal-delay-2">
            <div className="wall-stat-num">2000+</div>
            <div className="wall-stat-label">Vidas transformadas · 20 países</div>
          </div>
        </div>

        <div className="wall-grid">
          {tlist.map((t, i) => {
            const initials = t.name.split(' ').map(n => n[0]).slice(0, 2).join('');
            return (
              <div
                key={i}
                className={`tcard reveal ${t.featured ? 'tcard-featured' : ''}`}
                style={{transitionDelay: `${(i % 3) * 0.1}s`}}
              >
                {t.featured && (
                  <div className="tcard-hero-img">
                    {t.img ? (
                      <img src={t.img} alt={t.name} loading="lazy"/>
                    ) : (
                      <div className="tcard-avatar-placeholder tcard-avatar-placeholder--lg">
                        <span>{initials}</span>
                        <span className="tcard-avatar-note">foto</span>
                      </div>
                    )}
                  </div>
                )}
                <div className="tcard-body">
                  <div className="tcard-result">{t.result}</div>
                  <p className="tcard-quote">{t.quote}</p>
                  <div className="tcard-attr">
                    {!t.featured && (
                      <div className="tcard-avatar">
                        {t.img ? (
                          <img src={t.img} alt={t.name} loading="lazy"/>
                        ) : (
                          <div className="tcard-avatar-placeholder">
                            <span>{initials}</span>
                          </div>
                        )}
                      </div>
                    )}
                    <div className="tcard-attr-text">
                      <span className="tcard-name">{t.name}</span>
                      <span className="tcard-loc">{t.loc}</span>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Vania() {
  return (
    <section className="vania-section" data-screen-label="06 Vânia">
      <div className="wrap">
        <div className="vania-grid">
          <div className="vania-portrait reveal">
            <img src="assets/vania-bio.png" alt="Vânia Chavarria" className="vania-portrait-img" style={{width: '450px'}}/>
          </div>

          <div className="reveal reveal-delay-2">
            <div className="eyebrow eyebrow-amber vania-eyebrow">— 06 · Quem te guia</div>
            <h2 className="vania-name">
              Vânia <span style={{fontStyle: 'italic', color: 'var(--amber)'}}>Chavarria.</span>
            </h2>
            <div className="eyebrow eyebrow-amber" style={{marginTop: '8px', marginBottom: '16px', fontSize: '15.5px', letterSpacing: '0.24em'}}>
              Treinadora de Ansiedade
            </div>
            <p className="vania-title">Portugal</p>

            <div className="vania-creds">
              <div>
                <div className="vania-cred-num">20+</div>
                <div className="vania-cred-label">Anos na área<br/>da saúde</div>
              </div>
              <div>
                <div className="vania-cred-num">2000+</div>
                <div className="vania-cred-label">Vidas<br/>transformadas</div>
              </div>
              <div>
                <div className="vania-cred-num">23</div>
                <div className="vania-cred-label">Países que<br/>já alcançou</div>
              </div>
            </div>

            <div className="vania-copy">
              <p>
                Eu sei o que estás a sentir. <strong>Não porque li em livros.</strong> Porque já estive
                onde tu estás — e porque já acompanhei mais de 2000 pessoas, homens e mulheres, a sair exactamente de lá.
              </p>
              <p>
                Passei 20 anos na área da saúde. Vi o que medicação resolve e o que não resolve.
                Vi o que a terapia muda e o que deixa por mudar. E percebi que faltava uma ponte —
                algo que juntasse o corpo, a mente e a acção num só caminho.
              </p>
              <p>
                O Método DAC é essa ponte. <strong>É o que eu gostaria de ter tido quando precisei.</strong>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Includes() {
  const items = [
    { title: "Programa completo de 90 dias", desc: "As três fases · Despertar, Clareza, Confiança", val: "Core" },
    { title: "12 mentorias em grupo ao vivo com Vânia", desc: "Semanais · ao vivo · com pergunta e resposta", val: "Semanal" },
    { title: "Prática Somática DAC ilimitada", desc: "Prática física proprietária · acesso sem limite", val: "Ilimitado" },
    { title: "Desafios semanais progressivos", desc: "Pequenas acções · grande efeito cumulativo", val: "12 desafios" },
    { title: "Comunidade exclusiva da tua turma", desc: "Pessoas no mesmo ponto · ritmo · intenção", val: "Privado" },
    { title: "Diário do Método DAC", desc: "Digital · estruturado · guiado dia a dia", val: "Incluído" },
    { title: "Gravações de tudo", desc: "Vais poder rever sempre que precisares", val: "Vitalício" },
    { title: "Sessão de abertura + Cerimónia de Graduação", desc: "O início e o fim · marcados com intenção", val: "2 eventos" },
  ];

  return (
    <section data-screen-label="07 Inclui">
      <div className="wrap">
        <div className="includes-grid">
          <div className="reveal" style={{position: 'sticky', top: '80px'}}>
            <div className="eyebrow eyebrow-amber" style={{marginBottom: '24px'}}>— 07 · O que recebes</div>
            <h2 className="display" style={{fontSize: 'clamp(40px, 5vw, 72px)', marginBottom: '24px'}}>
              Não é um curso.<br/>
              <span className="display-italic">É um caminho</span>
              <br/>acompanhado.
            </h2>
            <p className="prose" style={{marginTop: '24px'}}>
              Tudo o que precisas está aqui. Nada avulso. Nada para comprar à parte.
            </p>
          </div>

          <ul className="includes-list">
            {items.map((it, i) => (
              <li key={i} className="includes-item reveal" style={{transitionDelay: `${i * 0.05}s`}}>
                <span className="includes-mark">0{i + 1}</span>
                <div>
                  <span className="includes-title">{it.title}</span>
                  <span className="includes-desc">{it.desc}</span>
                </div>
                <span className="includes-value">{it.val}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function Price() {
  return (
    <section id="preco" className="price-section" data-screen-label="08 Preço">
      <div className="wrap-narrow">
        <div className="price-card reveal">
          <div className="price-header">
            <div className="eyebrow eyebrow-amber price-eyebrow">— 08 · A tua decisão · Turma começa em Maio</div>
            <h2 className="price-title">
              O preço de<br className="mobile-only-br"/> <em>te escolheres.</em>
            </h2>
            <p style={{color: 'var(--ink-mute)', fontSize: '16px', maxWidth: '42ch', margin: '12px auto 0'}}>
              Quase 1€ por dia, durante 90 dias, para deixares de ser quem a ansiedade te fez acreditar que eras.
            </p>
          </div>

          <ScarcityBar embedded />

          <div className="price-amounts">
            <div className="price-option">
              <div className="price-label">A pronto</div>
              <div className="price-value"><span className="cur">€</span>97</div>
              <div className="price-note">Pagamento único</div>
            </div>
            <div className="price-divider">OU</div>
            <div className="price-option">
              <div className="price-label">Parcelado</div>
              <div className="price-value"><span className="cur">3×</span>39</div>
              <div className="price-note">Total · 117€</div>
            </div>
          </div>

          <p className="price-framing">
            O preço de um jantar para dois —<br/>
            para mudar o resto da tua vida.
          </p>

          <div className="price-cta-row">
            <a href="https://buy.stripe.com/8x2dRb4GL9jPc7UecC2Ry0x" className="btn btn-primary">
              Inscrever-me agora
              <span className="btn-arrow">→</span>
            </a>
          </div>

          <div className="guarantee">
            <div className="guarantee-seal">14d</div>
            <div className="guarantee-text">
              <strong>Garantia de 14 dias.</strong> Se nos primeiros 14 dias sentires que não é para ti,
              devolvemos 100% — sem perguntas.
            </div>
          </div>

          <div style={{textAlign: 'center', marginTop: '32px', fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-dim)'}}>
            Nova turma · vagas limitadas · pagamento seguro
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    {
      q: "Já tentei tudo e nada funcionou.",
      a: "Tentaste <strong>tirar</strong> a ansiedade. O Método DAC faz o contrário — substitui-a por confiança. Isso, tu ainda não tentaste. E é a peça que faltava.",
    },
    {
      q: "Não tenho tempo.",
      a: "São 4–5 horas por semana. Se tens tempo para sofrer em silêncio, tens tempo para mudar em direto. É uma escolha de prioridade, não de agenda.",
    },
    {
      q: "Não gosto de Yoga.",
      a: "<strong>Não é Yoga.</strong> É Prática Somática DAC — uma prática física proprietária criada pela Vânia. Não precisas de flexibilidade nem de experiência. Precisas só de presença.",
    },
    {
      q: "É mais um curso online gravado?",
      a: "Não. São 12 mentorias <strong>ao vivo</strong> com a Vânia — semanais, com pergunta e resposta. Acompanhamento real. As gravações ficam para ti, mas o coração está em direto.",
    },
    {
      q: "E se não funcionar comigo?",
      a: "2000+ pessoas em 20 países dizem que funcionou. Mas se nos primeiros 7 dias sentires que não é para ti, <strong>devolvemos 100%</strong> — sem perguntas.",
    },
    {
      q: "97€ é barato de mais para ser bom.",
      a: "O preço é uma decisão estratégica, não um reflexo da qualidade. A Vânia acredita que quem precisa, precisa — e que o dinheiro não pode ser a parede entre ti e a tua vida.",
    },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section data-screen-label="09 FAQ">
      <div className="wrap">
        <div className="faq-grid">
          <div className="reveal">
            <div className="eyebrow eyebrow-amber" style={{marginBottom: '24px'}}>— 09 · As últimas dúvidas</div>
            <h2 className="faq-left-title">
              Tudo o que<br/>pensaste em<br/>perguntar.
            </h2>
            <p className="prose">
              Se ainda ficou alguma, fala connosco no WhatsApp. Respondemos pessoalmente.
            </p>
          </div>

          <div className="faq-list reveal">
            {items.map((item, i) => (
              <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span className="faq-q-num">0{i + 1}</span>
                  <span>{item.q}</span>
                  <span className="faq-q-plus"></span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner" dangerouslySetInnerHTML={{__html: item.a}} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Final() {
  return (
    <section className="final" data-screen-label="10 CTA Final">
      <div className="wrap-narrow">
        <div className="eyebrow eyebrow-amber final-eyebrow reveal">— 10 · O último empurrão</div>

        <h2 className="final-headline reveal reveal-delay-1">
          Tu não<br/>
          <em>nasceste</em> assim.
        </h2>

        <p className="final-sub reveal reveal-delay-2">
          E 90 dias é tudo o que precisas<br/>
          para provar isso a ti próprio.
        </p>

        <div className="final-cta-row reveal reveal-delay-3">
          <a href="https://buy.stripe.com/8x2dRb4GL9jPc7UecC2Ry0x" className="btn btn-primary">
            Garantir a minha vaga — 97€
            <span className="btn-arrow">→</span>
          </a>
          <a href="#preco" className="btn btn-ghost">Ver os detalhes</a>
        </div>

        <div className="final-wa reveal reveal-delay-4">
          Dúvidas antes de decidir? <a href="https://wa.me/351934587659" target="_blank" rel="noopener">Fala connosco no WhatsApp →</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-row">
          <div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
            <span style={{fontFamily: 'var(--font-display)', fontSize: '18px', textTransform: 'none', letterSpacing: '-0.01em', color: 'var(--ink)'}}>
              Método <em style={{fontStyle: 'italic', color: 'var(--amber)'}}>DAC</em>
            </span>
            <span style={{width: '4px', height: '4px', background: 'var(--amber)', borderRadius: '50%'}}></span>
          </div>
          <div>© 2026 · Vânia Chavarria · Todos os direitos reservados</div>
          <div style={{display: 'flex', gap: '24px'}}>
            <a href="#" style={{color: 'var(--ink-mute)', textDecoration: 'none'}}>Termos</a>
            <a href="#" style={{color: 'var(--ink-mute)', textDecoration: 'none'}}>Privacidade</a>
            <a href="https://wa.me/351934587659" target="_blank" rel="noopener" style={{color: 'var(--amber)', textDecoration: 'none'}}>WhatsApp</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function ScarcityBar({ embedded = false }) {
  const [pct, setPct] = React.useState(80);

  React.useEffect(() => {
    const STORAGE_KEY = 'dac_scarcity_pct';
    const START_KEY = 'dac_scarcity_start';
    const now = Date.now();

    let start = parseInt(localStorage.getItem(START_KEY) || '0', 10);
    if (!start) {
      start = now;
      localStorage.setItem(START_KEY, String(start));
    }

    const compute = () => {
      const minutes = (Date.now() - start) / 60000;
      // Start at 80%, +0.08% per minute, cap at 96%
      const v = Math.min(96, 80 + minutes * 0.08);
      return v;
    };

    setPct(compute());
    localStorage.setItem(STORAGE_KEY, String(compute()));

    const id = setInterval(() => {
      const v = compute();
      setPct(v);
      localStorage.setItem(STORAGE_KEY, String(v));
    }, 30000);

    return () => clearInterval(id);
  }, []);

  const vagasTotal = 40;
  const vagasOcupadas = Math.round((pct / 100) * vagasTotal);
  const vagasRestantes = vagasTotal - vagasOcupadas;

  if (embedded) {
    return (
      <div className="scarcity-embed">
        <div className="scarcity-embed-row">
          <span className="scarcity-embed-label">
            <span className="scarcity-bar-dot"></span>
            Vagas preenchidas
          </span>
          <span className="scarcity-embed-count">
            <strong className="scarcity-embed-rest">RESTAM 25%</strong>
          </span>
        </div>
        <div className="scarcity-bar-track scarcity-embed-track">
          <div className="scarcity-bar-fill" style={{width: pct.toFixed(2) + '%'}}>
            <span className="scarcity-bar-pulse"></span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="scarcity-bar">
      <div className="scarcity-bar-inner">
        <span className="scarcity-bar-label">
          <span className="scarcity-bar-dot"></span>
          TURMA MAIO 2026 · ÚLTIMOS DIAS PARA ENTRAR
        </span>
        <div className="scarcity-bar-track">
          <div className="scarcity-bar-fill" style={{width: pct.toFixed(2) + '%'}}>
            <span className="scarcity-bar-pulse"></span>
          </div>
        </div>
      </div>
    </div>
  );
}

function Closing() {
  return (
    <section className="closing" data-screen-label="08b Porta a fechar">
      <div className="wrap-narrow">
        <div className="closing-card reveal">
          <div className="eyebrow eyebrow-amber closing-eyebrow">— A porta está a fechar</div>

          <h2 className="closing-headline">
            Esta turma está quase cheia.<br/>
            <em>Quando fechar, fecha.</em>
          </h2>

          <div className="closing-body">
            <p>
              Enquanto pensas, alguém como tu — que também andava a adiar há meses — inscreve-se.
              E daqui a 90 dias tem a vida que tu ainda estás a imaginar.
            </p>
            <p className="closing-emph">
              Não é sobre pressa.<br/>
              É sobre deixares de esperar pelo momento certo — e perceberes que <em>o momento certo és tu a decidir que chega.</em>
            </p>
          </div>

          <div className="closing-cta">
            <a href="https://buy.stripe.com/8x2dRb4GL9jPc7UecC2Ry0x" className="btn btn-primary">
              Garantir a minha vaga — 97€
              <span className="btn-arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function FloatingCTA() {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      const visible = window.scrollY > 1200 && window.scrollY < document.body.scrollHeight - 1200;
      setShow(visible);
      document.body.classList.toggle('floating-cta-visible', visible);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <a href="https://buy.stripe.com/8x2dRb4GL9jPc7UecC2Ry0x" className={`floating-cta ${show ? 'show' : ''}`}>
      Garantir a minha vaga — 97€
      <span>→</span>
    </a>
  );
}

/* ============ SOCIAL PROOF NOTIFICATIONS ============ */
function SocialProof() {
  // 40+ varied PT/BR names + cities + actions
  const people = [
    // Portugal
    { name: "Cláudia M.", city: "Lisboa" },
    { name: "Miguel S.", city: "Porto" },
    { name: "Ana Rita F.", city: "Coimbra" },
    { name: "Rui P.", city: "Braga" },
    { name: "Inês C.", city: "Faro" },
    { name: "Tiago L.", city: "Aveiro" },
    { name: "Joana N.", city: "Setúbal" },
    { name: "Pedro A.", city: "Leiria" },
    { name: "Sofia R.", city: "Viseu" },
    { name: "Bruno G.", city: "Funchal" },
    { name: "Catarina V.", city: "Évora" },
    { name: "André T.", city: "Guimarães" },
    { name: "Mariana B.", city: "Cascais" },
    { name: "Ricardo D.", city: "Sintra" },
    { name: "Beatriz L.", city: "Ponta Delgada" },
    { name: "Filipa O.", city: "Almada" },
    { name: "Gonçalo M.", city: "Viana do Castelo" },
    { name: "Helena S.", city: "Santarém" },
    // Brasil
    { name: "Juliana R.", city: "São Paulo" },
    { name: "Rafael O.", city: "Rio de Janeiro" },
    { name: "Patrícia L.", city: "Belo Horizonte" },
    { name: "Carla M.", city: "Curitiba" },
    { name: "Fernanda S.", city: "Porto Alegre" },
    { name: "Thiago B.", city: "Brasília" },
    { name: "Lucas P.", city: "Salvador" },
    { name: "Amanda F.", city: "Recife" },
    { name: "Gabriela N.", city: "Fortaleza" },
    { name: "Diogo A.", city: "Florianópolis" },
    { name: "Renata C.", city: "Goiânia" },
    { name: "Mateus T.", city: "Campinas" },
    { name: "Letícia V.", city: "Vitória" },
    // Diáspora
    { name: "Nuno F.", city: "Luxemburgo" },
    { name: "Susana A.", city: "Paris" },
    { name: "Carlos R.", city: "Londres" },
    { name: "Vera M.", city: "Zurique" },
    { name: "Marta P.", city: "Luanda" },
    { name: "Jorge C.", city: "Maputo" },
    { name: "Raquel S.", city: "Madrid" },
    { name: "Hugo L.", city: "Genebra" },
  ];

  const actions = [
    (p) => ({ verb: 'inscreveu-se', suffix: 'no Método DAC' }),
    (p) => ({ verb: 'garantiu a vaga', suffix: 'para Maio' }),
    (p) => ({ verb: 'entrou', suffix: 'na turma' }),
    (p) => ({ verb: 'começou', suffix: 'a transformação' }),
    (p) => ({ verb: 'inscreveu-se', suffix: 'há instantes' }),
  ];

  const timePhrases = [
    'há 1 minuto',
    'há 3 minutos',
    'há 7 minutos',
    'há 12 minutos',
    'há 18 minutos',
    'há 24 minutos',
    'há 31 minutos',
    'há 42 minutos',
    'há 56 minutos',
    'há 1 hora',
    'há 2 horas',
    'há 4 horas',
    'há instantes',
    'há 2 minutos',
    'há 5 minutos',
    'há 9 minutos',
  ];

  const [current, setCurrent] = React.useState(null);
  const [visible, setVisible] = React.useState(false);
  const shownIdxRef = React.useRef(new Set());

  React.useEffect(() => {
    let cancelled = false;
    let timeouts = [];

    const pick = () => {
      // Avoid repeating last 8
      const all = people.map((_, i) => i);
      let available = all.filter(i => !shownIdxRef.current.has(i));
      if (available.length === 0) {
        shownIdxRef.current.clear();
        available = all;
      }
      const idx = available[Math.floor(Math.random() * available.length)];
      shownIdxRef.current.add(idx);
      if (shownIdxRef.current.size > 8) {
        const first = shownIdxRef.current.values().next().value;
        shownIdxRef.current.delete(first);
      }
      const person = people[idx];
      const act = actions[Math.floor(Math.random() * actions.length)](person);
      const time = timePhrases[Math.floor(Math.random() * timePhrases.length)];
      return { ...person, ...act, time, key: Date.now() + '-' + idx };
    };

    const cycle = () => {
      if (cancelled) return;
      const entry = pick();
      setCurrent(entry);
      // small delay before show for mount
      timeouts.push(setTimeout(() => {
        if (!cancelled) setVisible(true);
      }, 40));
      // visible for 5.5s
      timeouts.push(setTimeout(() => {
        if (!cancelled) setVisible(false);
      }, 5500));
      // hide + schedule next with random gap
      const nextDelay = 7000 + Math.random() * 5500; // 7–12.5s
      timeouts.push(setTimeout(() => {
        if (!cancelled) cycle();
      }, 6200 + nextDelay));
    };

    // First notification after 6s (let user settle)
    const initial = setTimeout(cycle, 6000);
    timeouts.push(initial);

    return () => {
      cancelled = true;
      timeouts.forEach(clearTimeout);
    };
  }, []);

  if (!current) return null;

  // Initials for avatar
  const initials = current.name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();

  return (
    <div className={`social-proof ${visible ? 'show' : ''}`} key={current.key} aria-live="polite">
      <div className="social-proof-avatar">{initials}</div>
      <div className="social-proof-body">
        <div className="social-proof-top">
          <span className="social-proof-name">{current.name}</span>
          <span className="social-proof-dot">·</span>
          <span className="social-proof-city">{current.city}</span>
        </div>
        <div className="social-proof-action">
          <span className="social-proof-verb">{current.verb}</span> {current.suffix}
        </div>
        <div className="social-proof-time">
          <span className="social-proof-pulse"></span>
          {current.time}
        </div>
      </div>
      <button
        className="social-proof-close"
        onClick={() => setVisible(false)}
        aria-label="Fechar"
      >
        ×
      </button>
    </div>
  );
}

Object.assign(window, { Hero, ProofBand, Mirror, Revelation, Journey, Wall, Vania, Includes, Price, FAQ, Final, Footer, FloatingCTA, ScarcityBar, Closing, SocialProof });