"use client";

import { RevealSection } from "@/components/landing/reveal-section";
import { ScrollFilm } from "@/components/landing/scroll-film";
import { SiteFooter } from "@/components/landing/site-footer";
import { SiteHeader } from "@/components/landing/site-header";
import { VisionBoard } from "@/components/landing/vision-board";

const quotes = [
  { tag: "Melhor custo", name: "Rota Sul", value: "R$ 412" },
  { tag: "Menor prazo", name: "Express RJ", value: "14h" },
  { tag: "Melhor opção", name: "Litoral Mix", value: "R$ 468" },
];

const insights = [
  "Custo médio aumentou 12%.",
  "A Litoral Mix tem o melhor desempenho nesta rota.",
  "23% das simulações têm uma opção mais econômica.",
];

const carriers = [
  { name: "Litoral Mix", cost: "R$ 468", sla: "18h", score: "96", ops: "214" },
  { name: "Rota Sul", cost: "R$ 412", sla: "26h", score: "91", ops: "180" },
  { name: "Express RJ", cost: "R$ 531", sla: "14h", score: "88", ops: "97" },
];

const liveEvents = [
  "Nova simulação",
  "Cotação atualizada",
  "Frete atualizado",
  "Nova análise disponível",
];

export function SinkaLanding() {
  return (
    <div className="bg-black text-[#E8F4E5]">
      <SiteHeader />

      <ScrollFilm src="/film/sinka-hero.mp4?v=2" poster="/film/sinka-hero-poster.jpg">
        <section className="hero-copy">
          <h1 className="mt-0 max-w-3xl font-display text-5xl font-extrabold leading-[0.95] md:text-7xl">
            A inteligência que move sua operação.
          </h1>
          <p className="mt-6 max-w-lg text-lg text-[#E8F4E5]/65">
            Simule fretes, analise custos e transforme dados logísticos em decisões mais
            inteligentes.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <a href="#problema" className="btn-ghost">
              Conhecer a plataforma
            </a>
            <a href="/demo/login" className="btn-sinka">
              Começar agora
            </a>
          </div>
        </section>
        <div className="orbit-spacer" aria-hidden />
      </ScrollFilm>

      <RevealSection id="problema">
        <p className="kicker">O dia a dia</p>
        <h2>A cotação existe. A decisão some.</h2>
        <p className="lede">
          Peso, destino e valor já estão na operação. O que falta é um lugar em que isso vire
          comparação, não print de conversa nem aba de planilha.
        </p>
        <ul className="pain-list">
          <li>
            <strong>No grupo</strong>
            <span>O frete vai no WhatsApp e ninguém acha o número depois.</span>
          </li>
          <li>
            <strong>Na planilha</strong>
            <span>Cada analista tem a sua. O custo médio não fecha.</span>
          </li>
          <li>
            <strong>Na escolha</strong>
            <span>A transportadora entra “porque sempre foi essa”, sem histórico.</span>
          </li>
        </ul>
      </RevealSection>

      <RevealSection id="visao">
        <p className="kicker">Visão</p>
        <h2>Uma visão inteligente da sua logística.</h2>
        <VisionBoard />
      </RevealSection>

      <RevealSection id="simulacao">
        <p className="kicker">Simulação</p>
        <h2>Simule antes de decidir.</h2>
        <p className="lede">Compare cenários e encontre a melhor alternativa para cada operação.</p>
        <p className="route-line">São Paulo → Rio de Janeiro</p>
        <p className="meta-line">250 kg · 120 × 80 × 70 cm · R$ 18.500</p>
        <div className="quote-row">
          {quotes.map((item) => (
            <article key={item.tag}>
              <p>{item.tag}</p>
              <strong>{item.name}</strong>
              <span>{item.value}</span>
            </article>
          ))}
        </div>
      </RevealSection>

      <RevealSection>
        <p className="kicker">Inteligência</p>
        <h2>Dados que ajudam você a decidir.</h2>
        <ol className="insight-list">
          {insights.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ol>
      </RevealSection>

      <RevealSection>
        <p className="kicker">Transportadoras</p>
        <h2>Mais clareza na escolha da transportadora.</h2>
        <table className="carrier-table">
          <thead>
            <tr>
              <th>Nome</th>
              <th>Custo</th>
              <th>Prazo</th>
              <th>Desempenho</th>
              <th>Operações</th>
            </tr>
          </thead>
          <tbody>
            {carriers.map((item) => (
              <tr key={item.name}>
                <td>{item.name}</td>
                <td>{item.cost}</td>
                <td>{item.sla}</td>
                <td>{item.score}</td>
                <td>{item.ops}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </RevealSection>

      <RevealSection className="chapter-live">
        <p className="kicker">
          <span className="live">LIVE</span> Tempo real
        </p>
        <h2>Sua operação em movimento.</h2>
        <ul className="live-feed">
          {liveEvents.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </RevealSection>

      <RevealSection className="metrics">
        <div>
          <strong>10k+</strong>
          <p>simulações</p>
        </div>
        <div>
          <strong>500+</strong>
          <p>rotas analisadas</p>
        </div>
        <div>
          <strong>120+</strong>
          <p>transportadoras</p>
        </div>
      </RevealSection>

      <RevealSection id="acesso" className="cta">
        <div className="cta-copy">
          <h2>Mova sua logística com inteligência.</h2>
          <p className="lede">Menos incerteza. Mais dados. Melhores decisões.</p>
          <div className="mt-8 flex flex-wrap gap-3">
            <a href="#topo" className="btn-ghost">
              Conhecer a Sinka
            </a>
            <a href="/demo/login" className="btn-sinka">
              Começar agora
            </a>
          </div>
        </div>
      </RevealSection>

      <SiteFooter />
    </div>
  );
}