const DS = () => window.FanyMarquesDesignSystem_c5cbdd;
const A = './assets/';

const useDS = () => {
  const R = window.React;
  const [ds, setDs] = R.useState(DS());
  R.useEffect(() => {
    if (ds) return;
    const t = setInterval(() => { const d = DS(); if (d) { setDs(d); clearInterval(t); } }, 60);
    return () => clearInterval(t);
  }, [ds]);
  return ds;
};


function TopBar({ cta = 'Quero minha vaga', onCta, right }) {
  const { Button } = DS();
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 10, display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-3) var(--space-6)', padding: '14px var(--gutter-lg)', background: 'var(--surface-glass)', backdropFilter: 'blur(var(--blur-glass))', borderBottom: 'var(--border-hairline) solid var(--border-subtle)' }}>
      <img src={A + 'signature-fany-mark.png'} alt="Fany Marques" style={{ height: 34, objectFit: 'contain' }} />
      {right || <Button size="sm" onClick={onCta}>{cta}</Button>}
    </header>
  );
}

function Section({ tone = 'page', width = 'var(--container-content)', pad = 'var(--section-y)', children, style }) {
  const fields = {
    page: { background: 'var(--bg-page)' },
    surface: { background: 'var(--bg-surface)' },
    studio: { background: 'var(--gradient-studio)' },
    hero: { background: 'var(--gradient-hero)' },
    light: { background: 'var(--paper)', color: 'var(--text-on-light)' },
  };
  return (
    <section style={{ padding: pad + ' var(--gutter-lg)', ...fields[tone], ...style }}>
      <div style={{ maxWidth: width, margin: '0 auto' }}>{children}</div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ padding: 'var(--space-12) var(--gutter-lg)', background: 'var(--bg-inset)', borderTop: 'var(--border-hairline) solid var(--border-subtle)', display: 'grid', gap: 'var(--space-4)', justifyItems: 'center', textAlign: 'center' }}>
      <img src={A + 'crest-gold-mark.png'} alt="" style={{ width: 54 }} />
      <p style={{ font: 'var(--type-small)', fontSize: 'var(--text-3xs)', color: 'var(--text-muted)', maxWidth: '60ch' }}>Fany Marques · @elafanymarques · romperparaprosperar.com.br<br />Este conteúdo tem finalidade educativa e não substitui acompanhamento clínico.</p>
      <p style={{ font: 'var(--type-small)', fontSize: 'var(--text-4xs)', color: 'var(--text-muted)', opacity: .7 }}>© 2026 Fany Marques. Todos os direitos reservados.</p>
    </footer>
  );
}

function SalesPage({ onCta }) {
  const ds = useDS();
  if (!ds) return null;
  const { Button, Eyebrow, Headline, Mark, Badge, Card, Divider, BulletList, Testimonial, FAQItem, StatBlock, PriceCard, Guarantee } = ds;
  return (
    <div>
      <TopBar cta="Quero começar" onCta={onCta} />

      <div style={{ position: 'relative', minHeight: 'var(--hero-min-h)', display: 'grid', alignItems: 'end', background: 'var(--gradient-hero)' }}>
        <img src={A + 'portrait-hero-dark.png'} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', opacity: .95 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'var(--gradient-protect)' }} />
        <div style={{ position: 'relative', padding: 'var(--space-16) var(--gutter-lg) var(--space-20)', maxWidth: 'var(--container-content)', margin: '0 auto', display: 'grid', gap: 'var(--space-6)', justifyItems: 'center', textAlign: 'center' }}>
          <Eyebrow>Programa Romper para Prosperar</Eyebrow>
          <Headline as="h1" size="hero">Você está <Mark>bloqueando</Mark><br />a potência de quem está ao seu lado?</Headline>
          <Divider width={280} />
          <p style={{ font: 'var(--type-lead)', color: 'var(--text-body)', maxWidth: '54ch' }}>
            Como padrões invisíveis e expectativas desequilibradas podem estar sabotando seus <strong style={{ color: 'var(--pink-300)' }}>relacionamentos</strong> e a sua <strong style={{ color: 'var(--pink-300)' }}>prosperidade</strong>.
          </p>
          <Button size="lg" note="Turma de setembro · vagas limitadas" onClick={onCta}>Quero romper esses bloqueios</Button>
          <StatBlock style={{ marginTop: 'var(--space-6)' }} items={[{ value: '+12 mil', label: 'leitoras' }, { value: '8', label: 'encontros ao vivo' }, { value: '21', label: 'dias de plano' }]} />
        </div>
      </div>

      <Section tone="studio" width="var(--container-page)">
        <div style={{ display: 'grid', gridTemplateColumns: 'var(--cols-2)', gap: 'var(--space-16)', alignItems: 'center' }}>
          <img src={A + 'portrait-two-versions.png'} alt="As duas versões de você" style={{ width: '100%', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-raised)' }} />
          <div style={{ display: 'grid', gap: 'var(--space-6)' }}>
            <Eyebrow>As 2 versões de você</Eyebrow>
            <Headline size="section" align="left">Você sabe que precisa <Mark>vencer</Mark>, mas você <Mark>trava</Mark>.</Headline>
            <p style={{ font: 'var(--type-body)', color: 'var(--text-body)' }}>Não é preguiça. Tem duas versões suas brigando aí dentro — e uma delas quer te sabotar.</p>
            <BulletList marker="cross" items={['Você começa e trava na metade', 'Culpa por querer mais do que já tem', 'Você entrega tudo e ainda se sente em dívida', 'Repete o mesmo padrão em cada relação']} />
          </div>
        </div>
      </Section>

      <Section>
        <div style={{ display: 'grid', gap: 'var(--space-10)', justifyItems: 'center', textAlign: 'center' }}>
          <Eyebrow tone="gold" rules={false}>O método</Eyebrow>
          <Headline size="section">Consciência, identidade, ação.</Headline>
          <div style={{ display: 'grid', gridTemplateColumns: 'var(--cols-3)', gap: 'var(--space-6)', textAlign: 'left', width: '100%' }}>
            {[['01', 'Consciência', 'Enxergar a crença que sustenta o padrão — em psicologia, neurociência e psicanálise.'],
              ['02', 'Identidade', 'Construir uma nova identidade baseada em disciplina, propósito e ação.'],
              ['03', 'Prosperidade', 'Levar a mudança para as quatro áreas: emocional, relações, carreira e dinheiro.']].map(([n, t, d]) => (
              <Card key={n} variant="gold" style={{ display: 'grid', gap: 'var(--space-3)' }}>
                <span style={{ fontFamily: 'var(--font-impact)', fontSize: 'var(--text-2xl)', color: 'var(--gold-400)' }}>{n}</span>
                <h3 style={{ font: 'var(--type-title)', fontSize: 'var(--text-md)' }}>{t}</h3>
                <p style={{ font: 'var(--type-body)', color: 'var(--text-body)' }}>{d}</p>
              </Card>
            ))}
          </div>
        </div>
      </Section>

      <Section tone="surface" width="var(--container-page)">
        <div style={{ display: 'grid', gridTemplateColumns: 'var(--cols-offer)', gap: 'var(--space-16)', alignItems: 'center' }}>
          <img src={A + 'book-3d.png'} alt="Romper para Prosperar" style={{ width: '100%' }} />
          <div style={{ display: 'grid', gap: 'var(--space-5)' }}>
            <Headline font="ornament" size="sub" align="left" style={{ color: 'var(--gold-300)' }}>Romper para Prosperar</Headline>
            <Divider variant="diamond" />
            <p style={{ font: 'var(--type-body)', color: 'var(--text-body)' }}>Uma jornada de autoconhecimento fundamentada em psicologia, neurociência, psicanálise e desenvolvimento humano. O livro que dá origem ao programa.</p>
            <BulletList marker="gold" items={['Conteúdo prático e transformador', 'Autoconhecimento e controle emocional', 'Disciplina, foco e prosperidade']} />
            <Button variant="gold" style={{ justifySelf: 'start' }}>Conhecer o livro</Button>
          </div>
        </div>
      </Section>

      <Section>
        <div style={{ display: 'grid', gap: 'var(--space-8)' }}>
          <Eyebrow>Quem já rompeu</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'var(--cols-3)', gap: 'var(--space-5)' }}>
            <Testimonial quote="Entendi em duas semanas o que eu evitava há dez anos." name="Juliana R." role="Leitora" />
            <Testimonial quote="Parei de pedir permissão para crescer. Mudou a minha casa inteira." name="Camila S." role="Aluna · turma 3" />
            <Testimonial quote="A parte da identidade destravou a minha carreira." name="Renata M." role="Aluna · turma 2" />
          </div>
        </div>
      </Section>

      <Section tone="hero" width="var(--container-narrow)">
        <div style={{ display: 'grid', gap: 'var(--space-8)', justifyItems: 'center' }}>
          <Eyebrow>A oferta</Eyebrow>
          <PriceCard title="Programa Romper para Prosperar" badge="Turma de setembro" priceFrom="R$ 997" price="R$ 497" installment="ou 12x de R$ 48,90"
            items={['8 encontros ao vivo com a Fany', { text: 'Plano de 21 dias', note: 'PDF + áudios guiados' }, 'Comunidade fechada de alunas', 'Gravações por 12 meses']}
            cta="Quero garantir minha vaga" footnote="Pagamento seguro · 7 dias de garantia" onCta={onCta} />
          <Guarantee text="Entre, assista tudo e, se não for para você, devolvemos cada centavo em até 7 dias." seal={A + 'crest-gold-mark.png'} />
        </div>
      </Section>

      <Section width="var(--container-narrow)">
        <div style={{ display: 'grid', gap: 'var(--space-6)' }}>
          <Headline size="sub" align="left">Perguntas que sempre chegam</Headline>
          <div>
            <FAQItem defaultOpen question="Preciso ter lido o livro antes?" answer="Não. O livro aprofunda o método, mas o programa funciona sozinho." />
            <FAQItem question="Quanto tempo por semana?" answer="Um encontro de 90 minutos e cerca de 20 minutos de prática por dia." />
            <FAQItem question="E se eu não puder assistir ao vivo?" answer="Todos os encontros ficam gravados por 12 meses na área de alunas." />
            <FAQItem question="Isso substitui terapia?" answer="Não. É um programa educativo de desenvolvimento e não substitui acompanhamento clínico." />
          </div>
        </div>
      </Section>

      <Footer />
    </div>
  );
}

Object.assign(window, { SalesPage });
if (typeof module !== 'undefined') module.exports = { SalesPage };