const { NavBar, SectionHeader, ComboBanner, Badge } = window.SEXYSXDesignSystem_ff61c3;

function FIcon({ d }) { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FF4D97" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{d}</svg>; }
const FI = {
  mag: <React.Fragment><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></React.Fragment>,
  photo: <React.Fragment><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="M21 15l-5-5L5 21" /></React.Fragment>,
  play: <React.Fragment><circle cx="12" cy="12" r="10" /><polygon points="10 8 16 12 10 16 10 8" /></React.Fragment>,
  bell: <path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0" />,
  book: <React.Fragment><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" /></React.Fragment>,
  film: <React.Fragment><rect x="2" y="3" width="20" height="18" rx="2" /><path d="M7 3v18M17 3v18M2 8h5M2 16h5M17 8h5M17 16h5" /></React.Fragment>,
};

const FEATURES = [
  ['5 anos de Revistas Digitais', FI.book],
  ['6.000 fotos no Sexy Clube', FI.photo],
  ['500 Vídeos HD no Sexy Clube', FI.play],
  ['Atualizações toda semana', FI.bell],
  ['+400 episódios Papo com Pijama', FI.film],
  ['+200 episódios HOT exclusivos', FI.play],
  ['Episódios Exclusivos Casa das Pimentinhas', FI.mag],
];

function ConversionCard({ onSubscribe }) {
  return (
    <div className="card" style={{ maxWidth: 700, margin: '0 auto', padding: 0, overflow: 'hidden', position: 'relative', border: '1px solid rgba(123,63,242,0.55)', boxShadow: '0 0 0 1px rgba(255,255,255,0.04) inset, 0 24px 60px rgba(0,0,0,0.55), var(--glow-purple), var(--glow-magenta)', background: 'linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%)' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'var(--gradient-sx)' }} />
      <div style={{ padding: '36px 40px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 10 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '0.03em', textTransform: 'uppercase' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="var(--orange-light)"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
          <span className="text-gradient-highlight">Combo Premium</span>
        </span>
        <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#fff', background: 'var(--gradient-highlight)', padding: '5px 12px', borderRadius: 9999, boxShadow: 'var(--glow-orange)' }}>Oferta por tempo limitado</span>
      </div>
      <div style={{ padding: '22px 40px 0', display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
        <span style={{ fontSize: 16, color: 'var(--text-muted)', textDecoration: 'line-through' }}>R$ 129,90</span>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>R$ 64<span style={{ fontSize: 28 }}>,90</span></span>
        <span className="ui-caption">/mês · R$ 1,99 por dia</span>
      </div>
      <div style={{ padding: '24px 40px 0' }}>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 18px' }}>
          {['+6.000 fotos exclusivas', '+500 vídeos HD', '+400 episódios Papo com Pijama', 'Casa das Pimentinhas completa', 'Atualizações toda semana', 'Acesso imediato após o pagamento'].map(p => (
            <li key={p} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 13, fontWeight: 500, color: 'var(--text-primary)' }}>
              <span style={{ width: 16, height: 16, borderRadius: '50%', background: 'var(--gradient-sx)', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 1 }}>
                <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
              </span>{p}
            </li>
          ))}
        </ul>
      </div>
      <div style={{ padding: '32px 40px 36px' }}>
        <SXButton block onClick={onSubscribe} style={{ padding: '18px 28px', fontSize: 16 }}>Quero Assinar Agora</SXButton>
        <p className="ui-caption" style={{ textAlign: 'center', marginTop: 12 }}>Cancele quando quiser · Cartão, Pix ou Pix Recorrente · Compra 100% segura</p>
      </div>
    </div>
  );
}

function TrustRow() {
  const items = [['Compra Segura', ICONS_L.lock], ['Privacidade Protegida', ICONS_L.eye], ['Qualidade Garantida SEXY', ICONS_L.star]];
  return (
    <div style={{ display: 'flex', gap: 28, justifyContent: 'center', flexWrap: 'wrap', padding: '20px 0' }}>
      {items.map(([t, d]) => (
        <span key={t} style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 12, fontWeight: 600, color: 'var(--text-muted)' }}>
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{d}</svg>{t}
        </span>
      ))}
    </div>
  );
}
const ICONS_L = {
  lock: <React.Fragment><rect x="4" y="11" width="16" height="9" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></React.Fragment>,
  eye: <React.Fragment><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z" /><circle cx="12" cy="12" r="3" /></React.Fragment>,
  star: <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />,
};

function SubBrandSection({ eyebrow, title, body, points, gradient, image, reverse }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center', direction: reverse ? 'rtl' : 'ltr' }} className="subbrand-grid">
      <div style={{ direction: 'ltr', aspectRatio: '4/3', borderRadius: image ? 0 : 'var(--radius-xl)', background: image ? 'transparent' : gradient, position: 'relative', overflow: 'hidden', border: image ? 'none' : '1px solid var(--border-subtle)' }}>
        {image
          ? <img src={image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
          : <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08), transparent 60%)' }} />
        }
      </div>
      <div style={{ direction: 'ltr' }}>
        <span className="ui-label" style={{ color: 'var(--magenta-light)' }}>{eyebrow}</span>
        <h3 style={{ margin: '10px 0 14px', fontSize: 'var(--text-3xl)' }}>{title}</h3>
        <p className="body-lg" style={{ marginBottom: 18 }}>{body}</p>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {points.map(p => (
            <li key={p} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, color: 'var(--text-primary)', fontWeight: 500 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--gradient-sx)', flexShrink: 0 }} />{p}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function FaqItem({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: '1px solid var(--border-subtle)' }}>
      <button onClick={() => setOpen(v => !v)} style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, padding: '20px 0', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
        <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)', fontFamily: 'var(--font-display)' }}>{q}</span>
        <span style={{ flexShrink: 0, transform: open ? 'rotate(45deg)' : 'none', transition: 'transform .2s', fontSize: 20, color: 'var(--purple-light)' }}>+</span>
      </button>
      {open && <p className="body-sm" style={{ paddingBottom: 20, maxWidth: 720 }}>{a}</p>}
    </div>
  );
}

const FAQS = [
  ['Como funciona a cobrança recorrente?', 'Ao assinar o Combo Premium, R$ 64,90 são cobrados hoje e, automaticamente, todo mês na mesma data, no cartão de crédito ou Pix recorrente escolhido — até que você cancele.'],
  ['Posso cancelar quando quiser?', 'Sim. Não há fidelidade. O cancelamento pode ser feito a qualquer momento na área "Minha Conta" e vale a partir do próximo ciclo de cobrança.'],
  ['O que está incluso no Combo Premium?', 'Acesso completo ao Sexy Clube (fotos e vídeos), Papo com Pijama, Casa das Pimentinhas e conteúdo Pimentinhas, incluindo episódios e materiais exclusivos para assinantes.'],
  ['Meus dados de pagamento estão seguros?', 'Sim. Todo o processamento de pagamento é feito pela IUGU, com criptografia de ponta a ponta. Não armazenamos dados do seu cartão em nossos servidores.'],
  ['A cobrança aparece discreta na fatura?', 'Sim, a cobrança é identificada de forma discreta na fatura do cartão ou extrato Pix.'],
];

function TopBar() {
  const { h, m, s } = useCountdown();
  const pad = n => String(n).padStart(2, '0');
  return (
    <div style={{ background: 'var(--gradient-highlight)', padding: '8px 16px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, flexWrap: 'wrap', fontSize: 12, fontWeight: 700 }}>
      <span style={{ color: '#fff', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Últimos dias de promoção</span>
      <span style={{ color: '#fff', fontFamily: 'var(--font-display)' }}>{pad(h)}H {pad(m)}M {pad(s)}S</span>
    </div>
  );
}

function Landing({ onSubscribe }) {
  return (
    <div style={{ background: 'var(--bg-primary)', minHeight: '100vh' }}>
      <TopBar />
      <NavBar logoSexy="assets/Logo-Sexy.svg" onSubscribe={onSubscribe} items={[{ id: 'home', label: 'Início' }, { id: 'sexy', label: 'Sexy Clube' }, { id: 'papo', label: 'Papo com Pijama' }, { id: 'pimentinhas', label: 'Pimentinhas' }]} />

      {/* HERO */}
      <section style={{ padding: '84px 24px 56px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
        <video autoPlay loop muted playsInline src="uploads/video_background.mp4" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.4 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,10,15,0.5) 0%, rgba(10,10,15,0.85) 75%, var(--bg-primary) 100%)', pointerEvents: 'none' }} />
        <div style={{ position: 'relative', maxWidth: 900, margin: '0 auto' }}>
          <span className="ui-label" style={{ color: 'var(--purple-light)' }}>Combo Premium</span>
          <h1 className="display-2" style={{ margin: '14px 0 18px' }}>Acesso Total ao Universo <span className="text-gradient-sx">SEXY</span></h1>
          <p className="body-lg" style={{ maxWidth: 560, margin: '0 auto 32px' }}>Sexy Clube, Papo com Pijama e Casa das Pimentinhas em um único lugar. Fotos, vídeos e episódios exclusivos, liberados agora.</p>
          <div style={{ display: 'flex', gap: 24, justifyContent: 'center', flexWrap: 'wrap', alignItems: 'center', marginBottom: 8 }}>
            {['assets/logo-papo-pijama.svg', 'assets/logo-sexy-clube.svg', 'assets/logo-casa-pimentinhas.svg', 'assets/logo-pimentinhas.png'].map((src, i) => (
              <img key={i} src={src} height="46" alt="" style={{ opacity: 0.95, filter: src.endsWith('.svg') ? 'brightness(0) invert(1)' : 'none' }} />
            ))}
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section style={{ padding: '20px 24px 60px', maxWidth: 1100, margin: '0 auto' }}>
        <h2 style={{ textAlign: 'center', fontSize: 'var(--text-2xl)', marginBottom: 32 }}>Acesso Imediato a Mais de:</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,300px))', gap: 16, justifyContent: 'center' }}>
          {FEATURES.map(([label, icon]) => (
            <div key={label} className="card" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 10, padding: 22 }}>
              <FIcon d={icon} />
              <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>{label}</span>
            </div>
          ))}
        </div>
      </section>

      {/* PRICE */}
      <section style={{ padding: '0 24px 24px' }}>
        <ConversionCard onSubscribe={onSubscribe} />
        <TrustRow />
      </section>

      {/* SUBBRANDS */}
      <section style={{ padding: '60px 24px', maxWidth: 1200, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 80 }}>
        <SubBrandSection eyebrow="Papo com Pijama" title={<React.Fragment>Tem Papo na Cama,<br/>na Banheira e até no Divã</React.Fragment>} body="Duas entrevistadoras convidam as personalidades mais sexys do Brasil para conversas íntimas e reveladoras — com uma versão HOT exclusiva para assinantes." points={['5 episódios por semana', '20 episódios por mês', '2 Capas da Sexy', 'Matérias externas em eventos de relevância']} gradient="var(--gradient-discovery)" image="uploads/recorte-papo.png" />
        <SubBrandSection eyebrow="Casa das Pimentinhas" title="A Casa Mais Apimentada do Brasil" body="A décima temporada foi gravada em Campos do Jordão, em estrutura de cinema — com atividades, provas e muita cena HOT." points={['Atividades especiais', 'Provas divertidas e sexys', 'Cenas hots exclusivas', 'Capa individual de cada participante']} gradient="var(--gradient-highlight)" image="uploads/pimentinhas-casa.png" reverse />
      </section>

      {/* PAYMENT METHODS */}
      <section style={{ padding: '60px 24px', textAlign: 'center' }}>
        <h2 style={{ fontSize: 'var(--text-2xl)', marginBottom: 20 }}>Pague com <span style={{ color: 'var(--magenta-light)' }}>Cartão de Crédito</span> ou <span style={{ color: 'var(--magenta-light)' }}>Pix</span></h2>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 40 }}>
          {['visa', 'mastercard', 'american-express', 'elo', 'hipercard', 'diners'].map(b => (
            <img key={b} src={`assets/cards/${b}.svg`} height="34" alt={b} style={{ borderRadius: 6, boxShadow: '0 2px 8px rgba(0,0,0,0.3)' }} />
          ))}
          <span style={{ display: 'flex', alignItems: 'center', gap: 6, height: 34, padding: '0 14px', borderRadius: 6, background: '#fff' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00C2FF" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l4 4-4 4-4-4z" /><path d="M12 21l4-4-4-4-4 4z" /><path d="M3 12l4-4 4 4-4 4z" /><path d="M21 12l-4-4-4 4 4 4z" /></svg>
            <span style={{ fontWeight: 700, fontSize: 13, color: '#1a1a2e' }}>Pix</span>
          </span>
        </div>

        <div className="card" style={{ maxWidth: 720, margin: '0 auto', padding: 28, textAlign: 'left', display: 'flex', gap: 20, alignItems: 'flex-start', flexWrap: 'wrap' }}>
          <div style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'rgba(0,194,255,0.12)', border: '1px solid rgba(0,194,255,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--blue)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l4 4-4 4-4-4z" /><path d="M12 21l4-4-4-4-4 4z" /><path d="M3 12l4-4 4 4-4 4z" /><path d="M21 12l-4-4-4 4 4 4z" /></svg>
          </div>
          <div style={{ flex: 1, minWidth: 220 }}>
            <h4 style={{ marginBottom: 6 }}>Novidade: assine com Pix Recorrente</h4>
            <p className="body-sm">Autorize a cobrança direto no app do seu banco e a mensalidade de R$ 64,90 sai automaticamente todo mês — sem precisar gerar um novo QR Code ou copiar código toda vez. Mais simples que o cartão, tão fácil de cancelar quanto o Pix comum.</p>
          </div>
        </div>
      </section>

      {/* PRICE REPEAT */}
      <section style={{ padding: '56px 24px', background: 'var(--bg-surface)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
        <ConversionCard onSubscribe={onSubscribe} />
      </section>

      {/* FAQ */}
      <section style={{ padding: '20px 24px 80px', maxWidth: 760, margin: '0 auto' }}>
        <h2 style={{ fontSize: 'var(--text-2xl)', marginBottom: 8, textAlign: 'center' }}>Perguntas Frequentes</h2>
        <p className="body-sm" style={{ textAlign: 'center', marginBottom: 12 }}>Transparência total sobre sua assinatura.</p>
        <div>{FAQS.map(([q, a]) => <FaqItem key={q} q={q} a={a} />)}</div>
      </section>

      {/* FOOTER */}
      <footer style={{ padding: '40px 24px', borderTop: '1px solid var(--border-subtle)', textAlign: 'center' }}>
        <div style={{ display: 'flex', gap: 28, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 20 }}>
          {['assets/logo-sexy-clube.svg', 'assets/logo-papo-pijama.svg', 'assets/logo-casa-pimentinhas.svg', 'assets/logo-pimentinhas.png'].map((src, i) => (
            <img key={i} src={src} height="22" alt="" style={{ opacity: 0.7, filter: src.endsWith('.svg') ? 'brightness(0) invert(1)' : 'none' }} />
          ))}
        </div>
        <TrustRow />
        <p className="ui-caption" style={{ marginTop: 12 }}>© 2026 SEXY. Conteúdo destinado a maiores de 18 anos.</p>
      </footer>
    </div>
  );
}

window.Landing = Landing;