/* Pricing Page — Marcianus Experience v3 */
const { useState: useStatePI } = React;

const PLANS = [
  {
    id: 'starter',
    name: 'Starter',
    tagline: 'Para testar a plataforma',
    price_monthly: 0,
    price_annual: 0,
    cta: 'Começar Gratuitamente',
    cta_kind: 'ghost',
    badge: null,
    features: [
      '1 evento por ano',
      'Até 50 participantes',
      'Check-in QR Code',
      'Smart Notes básico',
      'Dashboard simplificado',
      'Suporte via email',
    ],
    disabled: ['Hexis AI Match', 'NFC Hardware', 'CRM Sync', 'Pipeline Analytics'],
  },
  {
    id: 'operator',
    name: 'Operator',
    tagline: 'Para equipas de eventos sérias',
    price_monthly: 280000,
    price_annual: 230000,
    cta: 'Pedir Demo',
    cta_kind: 'primary',
    badge: 'Mais popular',
    features: [
      '6 eventos por ano',
      'Até 300 participantes',
      'Check-in NFC + QR Code',
      'Hexis AI Match (Score básico)',
      'Smart Notes com IA',
      'CRM Sync (HubSpot / Salesforce)',
      'Pipeline Analytics',
      'Suporte dedicado',
    ],
    disabled: ['Hardware físico incluído', 'Hexis Priority Engine', 'White-label'],
  },
  {
    id: 'diamond',
    name: 'Diamond',
    tagline: 'Operação full-stack. Zero fricção.',
    price_monthly: 870000,
    price_annual: 695000,
    cta: 'Falar com Equipa',
    cta_kind: 'gold',
    badge: 'Full Stack',
    features: [
      'Eventos ilimitados',
      'Participantes ilimitados',
      'Hardware incluído (Kiosk + NFC)',
      'Hexis Priority Engine (Match Premium)',
      'Smart Notes + Alertas em tempo real',
      'CRM Sync + Briefing executivo 24h',
      'Pipeline Analytics avançado',
      'Gamification & XP System',
      'White-label disponível',
      'Customer Success Manager dedicado',
    ],
    disabled: [],
  },
  {
    id: 'enterprise',
    name: 'Enterprise',
    tagline: 'Multi-tenant. API. Contrato à medida.',
    price_monthly: null,
    price_annual: null,
    cta: 'Contactar Fundador',
    cta_kind: 'ghost',
    badge: 'Custom',
    features: [
      'Tudo do Diamond',
      'Multi-tenant / White-label total',
      'API Platform access',
      'SLA 99.9% garantido',
      'Deploy privado (VPS Hetzner on-prem)',
      'Integração personalizada (ERP / BI)',
      'Training + Onboarding presencial',
      'Contrato anual flexível',
    ],
    disabled: [],
  },
];

const FAQS = [
  { q: 'Posso cancelar em qualquer altura?', a: 'Nos planos mensais, cancelas quando quiseres sem penalização. No anual, reembolso proporcional nos primeiros 30 dias.' },
  { q: 'O hardware NFC está incluído?', a: 'No plano Diamond o hardware está incluído (kiosk + 200 wristbands). Nos planos inferiores podes adicionar hardware por contrato separado. Kiosk NFC: Kz 1.400.000 · Wristbands ×100: Kz 700.000.' },
  { q: 'Como funciona o Hexis AI?', a: 'O Hexis usa similaridade de cossenos em vectores de perfil (pgvector) para calcular o MatchScore™. Não é um LLM — é matemática pura, auditável e determinística.' },
  { q: 'Integra com o nosso CRM?', a: 'Integramos nativamente com HubSpot e Salesforce. Para outros CRMs, usamos a API REST ou Zapier.' },
  { q: 'Existe um período de trial?', a: 'Sim. O plano Starter é gratuito para sempre. Nos planos pagos oferecemos 14 dias de trial sem cartão.' },
  { q: 'Como é feito o deploy?', a: 'Docker Compose em VPS Hetzner (soberania de dados EU). Sem AWS Lambda, sem vendor lock-in.' },
];

const PlanCard = ({ plan, annual, onCTA }) => {
  const price = annual ? plan.price_annual : plan.price_monthly;
  const isPopular = plan.badge === 'Mais popular';
  const isGold = plan.cta_kind === 'gold';
  const isFree = price === 0;
  const isCustom = price === null;

  return (
    <div className={`plan-card ${isPopular ? 'plan-popular' : ''} ${isGold ? 'plan-diamond' : ''}`}>
      {plan.badge && (
        <div className={`plan-badge ${isGold ? 'gold' : isPopular ? 'purple' : ''}`}>{plan.badge}</div>
      )}
      <div className="plan-header">
        <h3 className="plan-name">{plan.name}</h3>
        <p className="plan-tagline">{plan.tagline}</p>
      </div>
      <div className="plan-price">
        {isCustom ? (
          <span className="price-custom">Sob consulta</span>
        ) : isFree ? (
          <><span className="price-amount">Kz 0</span><span className="price-period">/mês</span></>
        ) : (
          <>
            <span className="price-amount">Kz {price.toLocaleString('pt-PT')}</span>
            <span className="price-period">/mês</span>
            {annual && <span className="price-note">faturado anualmente</span>}
          </>
        )}
      </div>
      <button
        className={`btn btn-lg plan-cta btn-${plan.cta_kind}`}
        onClick={() => { SoundFX.tap(); onCTA(plan); }}
      >
        {plan.cta} <Icon name="arrow-right" size={16} />
      </button>
      <div className="plan-features">
        {plan.features.map((f, i) => (
          <div key={i} className="plan-feature on">
            <Icon name="check" size={14} color="var(--success)" /> <span>{f}</span>
          </div>
        ))}
        {plan.disabled.map((f, i) => (
          <div key={i} className="plan-feature off">
            <Icon name="minus" size={14} color="var(--text-3)" /> <span>{f}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

const PricingPage = ({ onNav }) => {
  const [annual, setAnnual] = useStatePI(false);
  const auth = window.useAuth ? window.useAuth() : { user: null };
  const { user } = auth;

  const onCTA = (plan) => {
    SoundFX.tap();
    if (plan.id === 'starter') {
      if (user) { ToastBus.push({ kind: 'success', icon: 'check-circle', title: 'Já tens o plano Starter activo!', desc: 'Cria o teu primeiro evento em Criar Experiência.' }); if (onNav) onNav('criar-experiencia'); }
      else { if (onNav) onNav('entrar'); }
    } else if (plan.id === 'enterprise') {
      ToastBus.push({ icon: 'mail', title: 'Pedido enviado à equipa Marcianus', desc: 'Resposta em menos de 24h. Proposta à medida.' });
      if (window.HexisEngine) HexisEngine.awardXP(20, 'Enterprise Contact');
    } else {
      SoundFX.success();
      if (window.HexisEngine) HexisEngine.awardXP(15, `Plano ${plan.name} selecionado`);
      ToastBus.push({ kind: 'gold', icon: 'rocket', title: `Plano ${plan.name} · Demo agendada`, desc: 'Convite por email em breve. Redireccionando…' });
      setTimeout(() => { if (onNav) onNav('criar-experiencia'); }, 1200);
    }
  };

  return (
    <div className="page active">
      <section className="page-section" style={{ paddingTop: 56 }}>
        <div className="container">
          <div className="section-head" style={{ flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
            <div className="left" style={{ maxWidth: 640, margin: '0 auto' }}>
              <span className="eyebrow">Preços transparentes</span>
              <h2>Escolhe o teu <span className="hl-grad">nível de operação</span>.</h2>
              <p className="section-lead" style={{ margin: '16px auto 0' }}>
                Sem surpresas. Sem vendor lock-in. Cada plano inclui onboarding, documentação e suporte humano.
              </p>
            </div>
          </div>

          {/* Annual toggle */}
          <div className="pricing-toggle">
            <span className={!annual ? 'active' : ''}>Mensal</span>
            <button
              className={`toggle-switch ${annual ? 'on' : ''}`}
              onClick={() => { SoundFX.tap(); setAnnual(!annual); }}
              aria-label="Alternar anual/mensal"
            >
              <span className="toggle-thumb" />
            </button>
            <span className={annual ? 'active' : ''}>Anual <span className="save-badge">-20%</span></span>
          </div>

          <div className="plans-grid">
            {PLANS.map(p => <PlanCard key={p.id} plan={p} annual={annual} onCTA={onCTA} />)}
          </div>

          {/* Compare table teaser */}
          <div className="pricing-note">
            <Icon name="shield-check" size={14} color="var(--success)" />
            <span>Todos os planos incluem: RGPD compliance · ISO 27001 alignment · Deploy EU · Zero vendor lock-in</span>
          </div>

          {/* Game Widget */}
          {window.InfiniteGameWidget && React.createElement(window.InfiniteGameWidget, { title: 'Pricing Challenge™', accentColor: '#FFD700', compact: true })}

          {/* Affiliate CTA */}
          <div style={{ marginTop: 40, background: 'linear-gradient(135deg, rgba(123,97,255,0.08), rgba(0,209,255,0.04))', border: '1px solid var(--border-purple)', borderRadius: 20, padding: '28px 36px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 6 }}>Programa de Afiliados Marcianus</div>
              <h3 style={{ fontSize: 20, fontWeight: 900, marginBottom: 6 }}>Ganha 12% em cada venda.</h3>
              <p style={{ fontSize: 13, color: 'var(--text-2)', maxWidth: 440 }}>
                Partilha links únicos (AES-256 UUID) e recebe comissão automática na tua Wallet por cada plano vendido.
              </p>
            </div>
            <button className="btn btn-gold" onClick={() => {
              SoundFX.success();
              if (window.HexisEngine) HexisEngine.handleAction('affiliate_enroll', { source: 'pricing_page' });
              if (window.HexisBLS) HexisBLS.track('cta_click', 'affiliate_pricing', 1);
              ToastBus.push({ kind: 'gold', icon: 'gift', title: 'Candidatura Enviada!', desc: 'Hexis AI avalia o teu perfil em 24h. Comissão: 12% por plano vendido.', duration: 6000 });
            }}>
              <Icon name="gift" size={16} /> Candidatar ao Programa
            </button>
          </div>

          {/* FAQ */}
          <div style={{ marginTop: 80 }}>
            <div className="section-head" style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
              <div className="left">
                <span className="eyebrow">Dúvidas frequentes</span>
                <h2 style={{ fontSize: 'clamp(1.75rem, 3vw, 2.5rem)' }}>Respostas <span className="hl">diretas</span>.</h2>
              </div>
            </div>
            <div className="faq-grid">
              {FAQS.map((f, i) => (
                <div key={i} className="faq-item">
                  <h4 className="faq-q"><Icon name="circle-dot" size={14} color="var(--purple-soft)" /> {f.q}</h4>
                  <p className="faq-a">{f.a}</p>
                </div>
              ))}
            </div>
          </div>

          {/* CTA band */}
          <div className="pricing-cta-band">
            <div>
              <h3>Não tens a certeza qual o plano certo?</h3>
              <p>Agenda 30 minutos com a nossa equipa. Sem compromisso.</p>
            </div>
            <button className="btn btn-gold btn-lg" onClick={() => { SoundFX.success(); ToastBus.push({ kind: 'gold', icon: 'calendar', title: 'Sessão agendada', desc: 'Link de calendário enviado por email.' }); }}>
              <Icon name="calendar" size={18} /> Agendar conversa
            </button>
          </div>
        </div>
      </section>
    </div>
  );
};

window.PricingPage = PricingPage;