// shared.jsx — atoms used by all LP variations
// Exports to window: Countdown, Ornament, CTAPrimary, GuaranteeBadge, LotTable,
//                    WhatsAppPrint, LogoMark, NathPhoto, useCountdown, PriceBlock,
//                    VagasProgress, FloatingWhatsApp, SectionCTA, IGLink

const EVENT_DATE  = new Date('2026-06-06T14:00:00-03:00'); // 6 jun 2026, 14h BRT
const CHECKOUT_URL = 'https://lastlink.com/p/CFE40E0A2?cp=lote01';
const WHATSAPP_URL = 'https://wa.me/5549999317000';
const IG_URL       = 'https://instagram.com/nathaliapriscoo';
const ORIGINAL_PRICE = 197;
const LOT_PRICES_MAP = { L0: 19, L1: 29, L2: 59, L3: 99 };
const LOT_PRICE_NEXT = { L0: 29, L1: 59, L2: 99, L3: 99 };

/* ============================================================
   COUNTDOWN HOOKS
   ============================================================ */
function useCountdown(target = EVENT_DATE) {
  const [now, setNow] = React.useState(() => new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  let diff = Math.max(0, target.getTime() - now.getTime());
  const d = Math.floor(diff / 86400000); diff -= d * 86400000;
  const h = Math.floor(diff / 3600000);  diff -= h * 3600000;
  const m = Math.floor(diff / 60000);    diff -= m * 60000;
  const s = Math.floor(diff / 1000);
  return { d, h, m, s };
}

// 24h lot urgency countdown — persists in localStorage, rotates every 24h
function use24hLotCountdown() {
  const KEY = 'm1pct_lot24h_end';
  const compute = () => {
    let end = parseInt(localStorage.getItem(KEY) || '0', 10);
    const now = Date.now();
    if (!end || end < now) {
      end = now + 24 * 3600 * 1000;
      localStorage.setItem(KEY, String(end));
    }
    return end;
  };
  const [endTime, setEndTime] = React.useState(compute);
  const [now, setNow]         = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => {
      const t = Date.now();
      setNow(t);
      if (endTime - t <= 0) {
        const ne = t + 24 * 3600 * 1000;
        localStorage.setItem(KEY, String(ne));
        setEndTime(ne);
      }
    }, 1000);
    return () => clearInterval(id);
  }, [endTime]);
  const diff = Math.max(0, endTime - now);
  const h = Math.floor(diff / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  return { h, m, s };
}

/* ============================================================
   COUNTDOWN BANDS
   ============================================================ */
function Countdown({ compact = false }) {
  const { d, h, m, s } = useCountdown();
  const pad = (n) => String(n).padStart(2, '0');
  return (
    <div className="countdown-band">
      <span className="countdown-label">
        {compact ? 'Imersão · 6/jun' : 'Começa em'}
      </span>
      <div className="countdown-cells">
        <span className="num">{pad(d)}</span><span className="unit">d</span>
        <span className="num">{pad(h)}</span><span className="unit">h</span>
        <span className="num">{pad(m)}</span><span className="unit">m</span>
        <span className="num">{pad(s)}</span><span className="unit">s</span>
      </div>
    </div>
  );
}

function Ornament({ heart = false }) {
  return (
    <div className="ornament">
      <span className="bar"></span>
      {heart
        ? <span style={{ color: 'var(--gold)', fontSize: 12, transform: 'translateY(-1px)' }}>♥</span>
        : <span className="diamond"></span>}
      <span className="bar"></span>
    </div>
  );
}

/* ============================================================
   CTA — primary gold button
   ============================================================ */
function CTAPrimary({ price = 29, label = 'Quero meu lugar na imersão', href = CHECKOUT_URL, sub }) {
  return (
    <div>
      <a href={href} target="_blank" rel="noopener" className="cta-primary">
        {label} <span className="price">— R${price}</span>
      </a>
      {sub !== false && (
        <div className="trust-strip">
          {sub || <>Lote especial · vagas limitadas <span className="sep">·</span> garantia 7 dias <span className="sep">·</span> pagamento único</>}
        </div>
      )}
    </div>
  );
}

/* ============================================================
   SECTION CTA — inline CTA at end of long content blocks
   ============================================================ */
function SectionCTA({ hint, label = 'Quero minha vaga', price = 29 }) {
  return (
    <div className="section-cta">
      {hint && <div className="section-cta-hint">{hint}</div>}
      <a href={CHECKOUT_URL} target="_blank" rel="noopener" className="section-cta-btn">
        {label} — R${price} <span className="arrow">→</span>
      </a>
      <div style={{ fontSize: 10, color: 'var(--cream-faint)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
        Garantia 7 dias · Acesso imediato
      </div>
    </div>
  );
}

/* ============================================================
   LOGO MARK — uses uploaded PNG
   ============================================================ */
function LogoMark({ size = 'sm' }) {
  const width = size === 'lg' ? 230 : size === 'md' ? 160 : 120;
  return (
    <img
      src="assets/logo.png"
      alt="Imersão Mulher 1%"
      style={{ width, height: 'auto', display: 'block', mixBlendMode: 'screen', filter: 'brightness(1.05)' }}
    />
  );
}

function NathPhoto({ src, alt = 'Nathalia Prisco', style, className = 'nath-portrait' }) {
  return <img className={className} src={src} alt={alt} style={style} />;
}

/* ============================================================
   LOT TABLE v2 — active lot bigger, hover, no "order bump" subtitle
   ============================================================ */
function LotTable({ active = 'L1' }) {
  const lots = [
    { id: 'L0', name: 'Lote 0', price: 19, tag: 'Lote zero' },
    { id: 'L1', name: 'Lote 1', price: 29, tag: 'Lote especial' },
    { id: 'L2', name: 'Lote 2', price: 59, tag: 'Segundo lote' },
    { id: 'L3', name: 'Lote 3', price: 99, tag: 'Último lote' },
  ];
  const activeIdx = lots.findIndex(l => l.id === active);
  return (
    <div>
      {lots.map((l, i) => {
        const state = i < activeIdx ? 'sold-out' : i === activeIdx ? 'active' : 'upcoming';
        const label =
          state === 'sold-out' ? 'Esgotado'
          : state === 'active' ? 'Aberto agora'
          : 'Em breve';
        return (
          <div key={l.id} className="lot-card" data-state={state}>
            <div>
              <div className="lot-card-state">{label}</div>
              <div className="lot-card-name">
                {l.name}
                {state === 'active' && (
                  <span style={{
                    marginLeft: 8, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
                    color: 'var(--wine-bg)', background: 'var(--gold-light)', padding: '2px 8px',
                    borderRadius: 999, verticalAlign: 'middle', fontWeight: 700,
                    fontFamily: 'var(--font-body)',
                  }}>
                    Especial
                  </span>
                )}
              </div>
              {state === 'active' && (
                <div style={{ fontSize: 11, color: 'var(--cream-dim)', marginTop: 4, fontStyle: 'italic', fontFamily: 'var(--font-display)' }}>
                  pagamento único · acesso imediato
                </div>
              )}
            </div>
            <div className="lot-card-price">R${l.price}</div>
          </div>
        );
      })}
    </div>
  );
}

/* ============================================================
   VAGAS PROGRESS — 87% sold bar with warn label
   ============================================================ */
function VagasProgress({ percent = 87 }) {
  return (
    <div className="vagas-progress">
      <div className="vagas-progress-bar">
        <div className="vagas-progress-fill" style={{ width: percent + '%' }} />
      </div>
      <div className="vagas-progress-label">
        <span>{percent}% das vagas preenchidas</span>
        <span className="vagas-progress-warn">vagas finais</span>
      </div>
    </div>
  );
}

/* ============================================================
   PRICE BLOCK — full offer card with countdown
   ============================================================ */
function PriceBlock({ activeLot = 'L1', label = 'Garantir minha vaga' }) {
  const price = LOT_PRICES_MAP[activeLot] || 29;
  const nextPrice = LOT_PRICE_NEXT[activeLot] || 59;
  const { h, m, s } = use24hLotCountdown();
  const pad = (n) => String(n).padStart(2, '0');
  return (
    <div className="price-block">
      <span className="price-pill">Lote especial</span>

      <div className="price-investment">Investimento</div>
      <span className="price-old">R${ORIGINAL_PRICE}</span>
      <div className="price-new">
        <span className="currency">R$</span>
        <span className="amount">{price}</span>
      </div>
      <div className="price-sub">pagamento único · acesso imediato</div>

      <div className="price-bullets">
        <div className="b">Imersão ao vivo · 3 horas com Nathalia Prisco</div>
        <div className="b">Acesso direto · sem intermediários</div>
        <div className="b">Grupo de WhatsApp com o link da aula</div>
        <div className="b">Garantia incondicional de 7 dias</div>
      </div>

      <VagasProgress percent={87} />

      <div style={{ marginTop: 18 }}>
        <a href={CHECKOUT_URL} target="_blank" rel="noopener" className="cta-primary">
          {label} <span className="price">— R${price}</span>
        </a>
      </div>

      <div className="trust-row">
        <span>100% seguro</span>
        <span>Acesso imediato</span>
        <span>Sem cobrança automática</span>
      </div>

      <div className="lot-countdown">
        <div className="lot-countdown-label">Lote de R${price} vira em:</div>
        <div className="lot-countdown-cells">
          <div className="cell"><span className="n">{pad(h)}</span><span className="u">horas</span></div>
          <div className="cell"><span className="n">{pad(m)}</span><span className="u">min</span></div>
          <div className="cell"><span className="n">{pad(s)}</span><span className="u">seg</span></div>
        </div>
        <div className="lot-countdown-note">Depois desse prazo, o ingresso sobe para R${nextPrice}</div>
      </div>
    </div>
  );
}

/* ============================================================
   FLOATING WHATSAPP — bottom right, persistent
   ============================================================ */
function FloatingWhatsApp() {
  return (
    <a className="fl-wa" href={WHATSAPP_URL} target="_blank" rel="noopener" aria-label="Falar no WhatsApp">
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
      </svg>
      <span className="fl-wa-tip">Falar com o suporte</span>
    </a>
  );
}

/* ============================================================
   GUARANTEE BADGE — uses uploaded image
   ============================================================ */
function GuaranteeBadge({ width = 200 }) {
  return (
    <img className="guarantee-img" src="assets/garantia.png"
         alt="Garantia incondicional de 7 dias"
         style={{ width }} />
  );
}

/* ============================================================
   IG link
   ============================================================ */
function IGLink({ children = '@nathaliapriscoo', className = 'ig-link' }) {
  return <a className={className} href={IG_URL} target="_blank" rel="noopener">{children}</a>;
}

/* ============================================================
   WHATSAPP PRINT — fake testimonial messages
   ============================================================ */
function WhatsAppPrint({ name, initial, time = '14:32', messages = [] }) {
  return (
    <div className="wa">
      <div className="wa-meta">
        <div className="wa-avatar">{initial}</div>
        <div>
          <div className="wa-name">{name}</div>
          <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)', marginTop: -2 }}>online</div>
        </div>
        <div className="wa-time">{time}</div>
      </div>
      {messages.map((m, i) => (
        <div key={i} className={`wa-bubble ${m.right ? 'right' : ''}`}>
          {m.text}
          {m.right && <span className="wa-tick">✓✓</span>}
        </div>
      ))}
    </div>
  );
}

const TESTIMONIALS = [
  { name: 'Camila R.', initial: 'C', time: '21:14', messages: [
    { text: 'Nath… eu chorei na metade da aula.' },
    { text: 'Você descreveu exatamente o que eu vivi nos últimos 2 anos. Eu nunca vi ninguém colocar em palavras desse jeito.' },
    { text: 'Como você sabia? 😭' },
  ]},
  { name: 'Júlia M.', initial: 'J', time: '09:47', messages: [
    { text: 'Acabei de relacionar tudo que você falou sobre "esperar definição" com a minha história inteira.' },
    { text: 'Eu achava que era falta de sorte. Agora entendi que era um padrão meu.' },
    { text: 'Tô sem palavras. Obrigada de verdade.' },
  ]},
  { name: 'Bia S.', initial: 'B', time: '16:02', messages: [
    { text: 'Vc é a única que fala sobre isso desse jeito.' },
    { text: 'Sem culpar homem, sem culpar mulher. Só explicando o mecanismo.' },
    { text: 'Mudou meu jeito de olhar pras coisas em 1 aula.' },
  ]},
  { name: 'Larissa P.', initial: 'L', time: '22:38', messages: [
    { text: 'Acabei a aula de 25 e vim direto te falar:' },
    { text: 'Eu parei de me sentir burra. Era exatamente isso que eu precisava entender.' },
    { text: 'Tô esperando a imersão de 6 de junho. Já garanti minha vaga ❤️' },
  ]},
];

/* ============================================================
   HEADLINE COPY — 3 variations (C is default — provocativo)
   ============================================================ */
const HEADLINES = {
  A: {
    title:  <>Ele foi embora. <span className="accent">Voltou.</span> Você ficou. E agora está aqui lendo isso.</>,
    plain:  'Ele foi embora. Voltou. Você ficou. E agora está aqui lendo isso.',
    kicker: <>Não é coincidência. <span className="accent">É padrão.</span> E padrão tem explicação.</>,
  },
  B: {
    title:  <>A <span className="accent">Mulher 1%</span> não espera ser escolhida.</>,
    plain:  'A Mulher 1% não espera ser escolhida.',
    kicker: <>Ela entende <span className="accent">o que a fazia aceitar menos</span> — e para de aceitar.</>,
  },
  C: {
    title:  <>O problema não é que os homens são <span className="accent">uma merda.</span></>,
    plain:  'O problema não é que os homens são uma merda.',
    // updated per user request — quoted phrase in destaque
    kicker: <>O problema é <span className="accent">"O que em você continua atraindo esse tipo de canalha."</span></>,
  },
};

// Expose to window
Object.assign(window, {
  EVENT_DATE, CHECKOUT_URL, WHATSAPP_URL, IG_URL, ORIGINAL_PRICE, LOT_PRICES_MAP,
  useCountdown, use24hLotCountdown, Countdown, Ornament, CTAPrimary, SectionCTA,
  LogoMark, NathPhoto, LotTable, GuaranteeBadge, WhatsAppPrint,
  PriceBlock, VagasProgress, FloatingWhatsApp, IGLink,
  TESTIMONIALS, HEADLINES,
});
