// LandingSaaS.jsx — variação "SaaS produto" do Copiloto Comercial
// Mantém 100% da copy do classic; apresenta com vocabulário visual de SaaS moderno:
// cards arredondados, mocks de chat do produto, alternância de blocos de feature.

const { useState, useEffect, useRef } = React;

// ── Tokens ────────────────────────────────────────────────
const T = {
  font: '"Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
  mono: '"Geist Mono", ui-monospace, monospace',
  bg: '#fbf7f0',
  surface: '#ffffff',
  ink: '#15110a',
  inkSoft: '#3d362c',
  inkMuted: '#857d70',
  rule: 'rgba(21,17,10,0.10)',
  ruleStrong: 'rgba(21,17,10,0.85)',
  chip: '#f1ebdf',
  chipSoft: '#f6f1e6',
  accent: '#7a5a2e',
  accentSoft: '#ede2c8',
  accent2: '#2a6f5a',
  accent2Soft: '#dcebe4',
  cta: '#d8e155',
  ctaInk: '#1f2206',
  wine: '#6b1f24',
  dark: '#15110a',
  darkInk: '#fbf7f0',
};

const MAX_W = 1240;

// ── Atoms ─────────────────────────────────────────────────
function Container({ children, style }) {
  return <div style={{ maxWidth: MAX_W, margin: '0 auto', padding: '0 32px', ...style }}>{children}</div>;
}

function Eyebrow({ children, color = T.accent }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      fontFamily: T.mono, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase',
      color, fontWeight: 600,
    }}>
      <span style={{ width: 28, height: 1.5, background: color, opacity: .7 }} />
      {children}
    </div>
  );
}

function Pill({ children, tone = 'soft', style }) {
  const styles = {
    soft: { background: T.accentSoft, color: '#4f3a1a' },
    dark: { background: T.dark, color: T.darkInk },
    line: { background: 'transparent', color: T.ink, border: `1px solid ${T.rule}` },
  }[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 12px', borderRadius: 999,
      fontFamily: T.mono, fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase',
      fontWeight: 400, ...styles, ...style,
    }}>{children}</span>
  );
}

function PrimaryBtn({ children, big = false, style }) {
  return (
    <button style={{
      padding: big ? '18px 28px' : '14px 22px',
      background: T.cta, color: T.ctaInk, border: 'none',
      borderRadius: 999, fontFamily: T.font, fontSize: big ? 16 : 14,
      fontWeight: 700, cursor: 'pointer', letterSpacing: '-0.005em',
      boxShadow: '0 8px 24px rgba(122,90,46,0.18), inset 0 -2px 0 rgba(0,0,0,0.10)',
      transition: 'transform .15s, box-shadow .15s', ...style,
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 12px 28px rgba(122,90,46,0.24), inset 0 -2px 0 rgba(0,0,0,0.10)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(122,90,46,0.18), inset 0 -2px 0 rgba(0,0,0,0.10)'; }}
    >{children}</button>
  );
}

function GhostBtn({ children, big = false, style }) {
  return (
    <button style={{
      padding: big ? '18px 28px' : '14px 22px',
      background: 'transparent', color: T.ink,
      border: `1.5px solid ${T.ink}`, borderRadius: 999,
      fontFamily: T.font, fontSize: big ? 16 : 14, fontWeight: 600, cursor: 'pointer',
      letterSpacing: '-0.005em', transition: 'all .15s', ...style,
    }}
      onMouseEnter={e => { e.currentTarget.style.background = T.ink; e.currentTarget.style.color = T.bg; }}
      onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = T.ink; }}
    >{children}</button>
  );
}

// ── Nav + promo strip ─────────────────────────────────────
function PromoStrip() {
  return (
    <div style={{ background: '#c43030', color: '#ffffff', fontFamily: T.font, fontSize: 12 }}>
      <Container style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 32px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{
            width: 6, height: 6, borderRadius: '50%', background: '#ffffff',
            animation: 'saasPulse 1.8s infinite',
          }} />
          <span><strong style={{ fontWeight: 700 }}>Bônus de lançamento</strong> · Desconto de 58% no plano anual</span>
        </div>
        <a style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6, fontWeight: 400 }}>
          Garantir o meu acesso <span style={{ color: '#ffffff' }}>→</span>
        </a>
      </Container>
    </div>
  );
}

function Nav() {
  return (
    <nav style={{ background: T.bg, position: 'sticky', top: 0, zIndex: 50, borderBottom: `1px solid ${T.rule}` }}>
      <Container style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 32px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src="assets/logo-copiloto.png" alt="Copiloto Comercial 8Ps" style={{ height: 68, width: 'auto', display: 'block' }} />
        </div>
        <div style={{ display: 'flex', gap: 28, fontSize: 15, color: T.inkSoft, fontWeight: 400 }}>
          <a style={{ textDecoration: 'none' }}>Como funciona</a>
          <a style={{ textDecoration: 'none' }}>Quais as vantagens</a>
          <a style={{ textDecoration: 'none' }}>Quem é Conrado Adolpho</a>
          <a style={{ textDecoration: 'none' }}>Investimento</a>
          <a style={{ textDecoration: 'none' }}>Entrar</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <PrimaryBtn>Começar agora</PrimaryBtn>
        </div>
      </Container>
    </nav>
  );
}

// ── Mock do produto: chat do Copiloto ─────────────────────
function CopilotMock() {
  const [step, setStep] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setStep(s => (s + 1) % 5), 1800);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{
      background: T.surface, borderRadius: 20, padding: 18,
      boxShadow: '0 30px 60px -20px rgba(21,17,10,0.25), 0 8px 18px rgba(21,17,10,0.06)',
      border: `1px solid ${T.rule}`,
      width: '100%',
    }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 14, borderBottom: `1px solid ${T.rule}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: T.dark, color: T.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: T.mono, fontWeight: 600, fontSize: 17 }}>8</div>
          <div>
            <div style={{ fontSize: 17, fontWeight: 600, color: T.ink }}>Copiloto Comercial</div>
            <div style={{ fontFamily: T.mono, fontSize: 12, color: T.inkMuted, letterSpacing: '0.08em' }}>ETAPA 03 DE 06 · ABORDAGEM</div>
          </div>
        </div>
        <Pill tone="soft" style={{ fontSize: 12 }}>● AO VIVO</Pill>
      </div>

      {/* Chat */}
      <div style={{ padding: '20px 4px 8px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <div style={{
            background: T.chip, color: T.ink, padding: '12px 14px', borderRadius: '16px 16px 4px 16px',
            fontSize: 17, lineHeight: 1.45, maxWidth: '78%',
          }}>
            Vendo software B2B, ticket médio R$ 5k/mês. Maior objeção: "está caro".
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: T.accent, color: '#fff', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: T.mono, fontWeight: 700, fontSize: 12 }}>C</div>
          <div style={{
            background: '#fff', border: `1px solid ${T.rule}`,
            padding: '14px 16px', borderRadius: '4px 16px 16px 16px',
            fontSize: 17, lineHeight: 1.5, maxWidth: '85%', color: T.ink,
          }}>
            Boa. Para esse perfil de objeção, montei um <strong style={{ color: T.accent }}>script de ancoragem</strong> em 3 movimentos: reposicionar valor, comparar custo do problema e oferecer condição com prazo curto.
          </div>
        </div>
        {/* Script bubble */}
        <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: T.accent, color: '#fff', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: T.mono, fontWeight: 700, fontSize: 12 }}>C</div>
          <div style={{ background: T.dark, color: T.bg, padding: '14px 16px', borderRadius: '4px 16px 16px 16px', maxWidth: '90%', width: '90%' }}>
            <div style={{ fontFamily: T.mono, fontSize: 12, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', marginBottom: 8 }}>SCRIPT · OBJEÇÃO "ESTÁ CARO"</div>
            <div style={{ fontSize: 12, lineHeight: 1.55 }}>
              "Entendo. Antes de eu te dar um preço, deixa eu te perguntar: quanto está te custando, todo mês, <em style={{ fontStyle: 'normal', background: 'rgba(233,92,44,0.35)', padding: '1px 4px' }}>não resolver isso</em>? Porque se for mais que R$ 5k, na verdade a gente está te entregando lucro — não cobrando."
            </div>
          </div>
        </div>
        {/* Typing */}
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: T.accent, color: '#fff', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: T.mono, fontWeight: 700, fontSize: 12 }}>C</div>
          <div style={{ display: 'flex', gap: 4, padding: '10px 14px', background: '#fff', border: `1px solid ${T.rule}`, borderRadius: 16 }}>
            {[0,1,2].map(i => (
              <span key={i} style={{
                width: 6, height: 6, borderRadius: '50%', background: T.inkMuted,
                animation: `saasTyping 1.2s infinite ${i * 0.15}s`,
              }} />
            ))}
          </div>
        </div>
      </div>

      {/* Footer toolbar */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10, padding: '12px 14px', background: T.chipSoft, borderRadius: 12 }}>
        <div style={{ display: 'flex', gap: 6 }}>
          {['Reescrever', 'Variação', 'Exportar'].map((t, i) => (
            <span key={t} style={{
              fontSize: 12, color: i === 0 ? T.ink : T.inkMuted, fontWeight: i === 0 ? 600 : 400,
              padding: '6px 10px', borderRadius: 8, background: i === 0 ? '#fff' : 'transparent',
              border: i === 0 ? `1px solid ${T.rule}` : '1px solid transparent',
            }}>{t}</span>
          ))}
        </div>
        <div style={{ fontFamily: T.mono, fontSize: 12, color: T.inkMuted }}>Etapa {String(step % 6 + 1).padStart(2, '0')}/06</div>
      </div>
    </div>
  );
}

Object.assign(window, { CopilotMock, Container, Eyebrow, Pill, PrimaryBtn, GhostBtn, Nav, PromoStrip, T });