/* Landing page — hero, modules, CTA */

function Landing({ navigate }) {
  return (
    <div style={{ background: 'var(--white)', minHeight: '100vh' }}>
      <LandingNav navigate={navigate} />
      <LandingHero navigate={navigate} />
      <LandingMetrics />
      <LandingModules />
      <LandingFooter />
    </div>
  );
}

function LandingNav({ navigate }) {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 10,
      background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--ink-200)',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '16px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <Logo size={28} />
        <nav style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
          <a href="#modulos" style={navLink}>Módulos</a>
          <a href="#metricas" style={navLink}>Resultados</a>
          <a href="#sobre" style={navLink}>Sobre</a>
          <button className="btn btn-ghost btn-sm" onClick={() => navigate('login')}>
            Entrar
          </button>
          <button className="btn btn-primary btn-sm" onClick={() => navigate('login')}>
            Acessar painel
          </button>
        </nav>
      </div>
    </header>
  );
}

const navLink = {
  color: 'var(--ink-700)', textDecoration: 'none',
  fontSize: 14, fontWeight: 500,
};

function LandingHero({ navigate }) {
  return (
    <section style={{
      maxWidth: 1280, margin: '0 auto', padding: '80px 32px 60px',
      position: 'relative',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: 'var(--brand-50)', color: 'var(--brand-700)',
            padding: '6px 12px', borderRadius: 999, fontSize: 13, fontWeight: 600,
            border: '1px solid var(--brand-200)', marginBottom: 24
          }}>
            <Icon name="sparkle" size={14} />
            Plataforma para redes de farmácia
          </div>
          <h1 style={{
            fontSize: 64, fontWeight: 800, lineHeight: 1.04,
            letterSpacing: '-0.035em', margin: 0,
            color: 'var(--ink-900)',
          }}>
            A operação da sua farmácia,<br/>
            <span style={{ color: 'var(--brand-500)' }}>em tempo real.</span>
          </h1>
          <p style={{
            fontSize: 19, lineHeight: 1.55, color: 'var(--ink-600)',
            margin: '24px 0 36px', maxWidth: 540, textWrap: 'pretty'
          }}>
            Vendas, estoque, metas, compras e contas a pagar — todos os dados
            das suas lojas em um único painel, atualizado automaticamente.
          </p>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <button className="btn btn-primary btn-lg" onClick={() => navigate('login')}>
              Acessar painel
              <Icon name="arrow-right" size={16} />
            </button>
            <a
              href="https://wa.me/5521997197834?text=Desejo%20saber%20mais%20sobre%20o%20SmartFarma"
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn-outline btn-lg"
              style={{ textDecoration: 'none' }}
            >
              Falar com vendas
            </a>
          </div>
        </div>

        <HeroMockup />
      </div>
    </section>
  );
}

function Pill({ icon, text }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      color: 'var(--ink-600)', fontSize: 13, fontWeight: 500
    }}>
      <Icon name={icon} size={15} color="var(--brand-500)" />
      {text}
    </div>
  );
}

function HeroMockup() {
  return (
    <div style={{ position: 'relative', height: 480 }}>
      {/* Soft backdrop */}
      <div style={{
        position: 'absolute', inset: '-40px -40px -40px 20px',
        background: 'radial-gradient(circle at 70% 50%, var(--brand-100), transparent 65%)',
        zIndex: 0,
      }}/>
      {/* Main card */}
      <div style={{
        position: 'absolute', top: 20, left: 40, right: 0, bottom: 20,
        background: 'var(--white)',
        border: '1px solid var(--ink-200)',
        borderRadius: 16,
        boxShadow: 'var(--shadow-lg)',
        padding: 20,
        display: 'flex', flexDirection: 'column', gap: 14,
        zIndex: 1,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--ink-500)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
              Vendas — Últimos 7 dias
            </div>
            <div className="mono" style={{ fontSize: 28, fontWeight: 700, marginTop: 4 }}>
              R$ 487.320,55
            </div>
          </div>
          <Delta value={12.4} />
        </div>
        <MiniChart />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
          <MiniKpi label="Ticket médio" value="R$ 84,20" delta={3.1} />
          <MiniKpi label="Itens vendidos" value="14.821" delta={8.2} />
          <MiniKpi label="Margem" value="32,4%" delta={-0.6} />
        </div>
      </div>
      {/* Floating store card */}
      <div style={{
        position: 'absolute', top: 280, left: -10, width: 240,
        background: 'var(--white)',
        border: '1px solid var(--ink-200)',
        borderRadius: 14,
        boxShadow: 'var(--shadow-lg)',
        padding: 16, zIndex: 2,
      }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-500)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 12 }}>
          Top lojas hoje
        </div>
        {[
          { name: 'Farma Centro', val: 'R$ 18.420', pct: 92 },
          { name: 'Farma Sul', val: 'R$ 14.880', pct: 76 },
          { name: 'Farma Norte', val: 'R$ 11.230', pct: 58 },
        ].map((s, i) => (
          <div key={i} style={{ marginBottom: i < 2 ? 10 : 0 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 4 }}>
              <span style={{ fontWeight: 600, color: 'var(--ink-900)' }}>{s.name}</span>
              <span className="mono" style={{ color: 'var(--ink-700)' }}>{s.val}</span>
            </div>
            <div style={{ height: 4, background: 'var(--ink-100)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: s.pct + '%', background: 'var(--brand-500)', borderRadius: 999 }}/>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MiniChart() {
  // Simple area chart, 7 points
  const data = [38, 52, 47, 64, 58, 78, 86];
  const max = 100;
  const w = 480, h = 160, pad = 8;
  const step = (w - pad * 2) / (data.length - 1);
  const pts = data.map((v, i) => [pad + i * step, h - pad - (v / max) * (h - pad * 2)]);
  const path = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
  const area = path + ` L${pts.at(-1)[0]},${h - pad} L${pts[0][0]},${h - pad} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 160 }}>
      <defs>
        <linearGradient id="hg" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--brand-500)" stopOpacity="0.22" />
          <stop offset="100%" stopColor="var(--brand-500)" stopOpacity="0" />
        </linearGradient>
      </defs>
      {[0.25, 0.5, 0.75].map((f, i) => (
        <line key={i} x1={pad} x2={w - pad} y1={h * f} y2={h * f} stroke="var(--ink-100)" strokeDasharray="2 4" />
      ))}
      <path d={area} fill="url(#hg)" />
      <path d={path} fill="none" stroke="var(--brand-500)" strokeWidth="2" strokeLinejoin="round" />
      {pts.map((p, i) => (
        <circle key={i} cx={p[0]} cy={p[1]} r={i === pts.length - 1 ? 4 : 2.5}
          fill={i === pts.length - 1 ? 'var(--brand-500)' : 'var(--white)'}
          stroke="var(--brand-500)" strokeWidth="1.5" />
      ))}
    </svg>
  );
}

function MiniKpi({ label, value, delta }) {
  return (
    <div style={{ background: 'var(--ink-50)', padding: 10, borderRadius: 8 }}>
      <div style={{ fontSize: 10.5, color: 'var(--ink-500)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{label}</div>
      <div className="mono" style={{ fontSize: 15, fontWeight: 700, marginTop: 4 }}>{value}</div>
      <div style={{ marginTop: 2 }}><Delta value={delta} /></div>
    </div>
  );
}

function LandingMetrics() {
  const stats = [
    { v: '+ R$ 1,2 bi', l: 'Em vendas processadas / ano' },
    { v: '99,9%',       l: 'Disponibilidade do painel'   },
    { v: 'Tempo real',  l: 'Atualização dos dados'        },
  ];
  return (
    <section id="metricas" style={{
      maxWidth: 1280, margin: '0 auto', padding: '40px 32px',
      borderTop: '1px solid var(--ink-200)',
      borderBottom: '1px solid var(--ink-200)',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48, maxWidth: 860, margin: '0 auto' }}>
        {stats.map((s, i) => (
          <div key={i}>
            <div className="mono" style={{ fontSize: 36, fontWeight: 700, color: 'var(--brand-500)', letterSpacing: '-0.02em' }}>
              {s.v}
            </div>
            <div style={{ fontSize: 14, color: 'var(--ink-600)', marginTop: 6 }}>{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function LandingModules() {
  const modules = [
    { icon: 'sf-sales',       title: 'Vendas',         desc: 'Ranking de produtos, ticket médio, vendas por loja e por hora.' },
    { icon: 'sf-purchases',   title: 'Compras',        desc: 'Acompanhe pedidos, fornecedores e custos de aquisição.' },
    { icon: 'sf-goals',       title: 'Metas',          desc: 'Metas mensais por loja com acompanhamento diário do realizado.' },
    { icon: 'sf-stock',       title: 'Estoque',        desc: 'Posição em tempo real, cobertura, ruptura e itens parados.' },
    { icon: 'sf-comparative', title: 'Comparativo',    desc: 'Compare períodos, lojas e categorias lado a lado.' },
    { icon: 'sf-overview',    title: 'Análises',       desc: 'Tendências, evolução mensal e histórico de desempenho.' },
    { icon: 'sf-deliveries',  title: 'Entregas',       desc: 'Status de pedidos delivery e prazo médio por loja.' },
    { icon: 'sf-bills',       title: 'Contas a Pagar', desc: 'Fluxo de caixa, vencimentos e conciliação financeira.' },
    { icon: 'dre',            title: 'DRE',            desc: 'Demonstração do Resultado do Exercício, exclusiva do painel web.' },
    { icon: 'users',          title: 'Usuários',       desc: 'Controle de acesso por loja, módulo e perfil de usuário.' },
  ];
  return (
    <section id="modulos" style={{ maxWidth: 1280, margin: '0 auto', padding: '80px 32px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 48 }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--brand-500)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            Módulos
          </div>
          <h2 style={{ fontSize: 42, fontWeight: 700, letterSpacing: '-0.025em', margin: '8px 0 0', maxWidth: 640, lineHeight: 1.1 }}>
            Tudo o que o gestor precisa, em um único painel.
          </h2>
        </div>
        <p style={{ color: 'var(--ink-600)', fontSize: 15, maxWidth: 360, lineHeight: 1.55 }}>
          Você decide quais módulos cada usuário acessa. Sem treinamento longo —
          a curva de aprendizagem é de minutos.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
        {modules.map((m, i) => (
          <div key={i} className="card" style={{ padding: 24, transition: 'all .2s', cursor: 'pointer' }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--brand-300)'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--ink-200)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }}
          >
            <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: 'var(--brand-50)', color: 'var(--brand-500)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: '1px solid var(--brand-100)',
            }}>
              <Icon name={m.icon} size={20} />
            </div>
            <div style={{ marginTop: 16, fontSize: 15, fontWeight: 700 }}>{m.title}</div>
            <div style={{ marginTop: 6, fontSize: 13, color: 'var(--ink-600)', lineHeight: 1.5 }}>{m.desc}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function LandingFooter() {
  return (
    <footer id="sobre" style={{
      background: 'var(--ink-900)', color: 'rgba(255,255,255,0.7)',
      padding: '64px 32px 32px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 48, marginBottom: 48 }}>
          <div>
            <Logo variant="light" size={28} />
            <p style={{ fontSize: 14, lineHeight: 1.6, marginTop: 16, maxWidth: 340 }}>
              Plataforma de gestão para redes de farmácia.
              Dados em tempo real, decisões mais rápidas.
            </p>
          </div>
          <FooterCol title="Produto" items={['Módulos', 'Integrações', 'Segurança', 'Mudanças']} />
          <FooterCol title="Empresa" items={['Sobre', 'Clientes', 'Contato', 'Imprensa']} />
          <FooterCol title="Suporte" items={['Central de ajuda', 'Documentação', 'Status', 'WhatsApp']} />
        </div>
        <div style={{
          borderTop: '1px solid rgba(255,255,255,0.08)',
          paddingTop: 24,
          display: 'flex', justifyContent: 'space-between',
          fontSize: 13, color: 'rgba(255,255,255,0.5)',
        }}>
          <div>© 2026 smartfarma — Todos os direitos reservados</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <span>Termos</span><span>Privacidade</span><span>LGPD</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{ color: 'var(--white)', fontWeight: 700, fontSize: 14, marginBottom: 16 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
        {items.map((it, i) => <span key={i} style={{ cursor: 'pointer' }}>{it}</span>)}
      </div>
    </div>
  );
}

Object.assign(window, { Landing });