/* Wood OS — Landing Page */
const { useState: useStateL, useEffect: useEffectL, useRef: useRefL } = React;

const Landing = ({ navigate }) => {
  const [scrolled, setScrolled] = useStateL(false);
  useEffectL(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className="wood-page" style={{ overflowX: "hidden" }}>
      <AnimatedBackground intensity="high" variant="blueprint" />

      {/* Navbar */}
      <nav
        className="fixed top-0 left-0 right-0 z-50"
        style={{
          padding: scrolled ? "10px 0" : "16px 0",
          background: scrolled ? "rgba(11,10,7,0.7)" : "transparent",
          backdropFilter: scrolled ? "blur(18px) saturate(160%)" : "none",
          borderBottom: scrolled ? "1px solid var(--wood-border)" : "1px solid transparent",
          transition: "all 0.3s var(--ease-out)"
        }}
      >
        <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
          <WoodLogo size={32} textSize={16} />
          <div className="flex items-center gap-7 md-hide text-sm text-3" style={{ fontWeight: 500 }}>
            <a href="#produto" style={{ cursor: "pointer", transition: "color 0.18s" }} onMouseEnter={e => e.target.style.color = "var(--text)"} onMouseLeave={e => e.target.style.color = "var(--text-3)"}>Produto</a>
            <a href="#recursos" style={{ cursor: "pointer" }} onMouseEnter={e => e.target.style.color = "var(--text)"} onMouseLeave={e => e.target.style.color = "var(--text-3)"}>Recursos</a>
            <a href="#como" style={{ cursor: "pointer" }} onMouseEnter={e => e.target.style.color = "var(--text)"} onMouseLeave={e => e.target.style.color = "var(--text-3)"}>Como funciona</a>
            <a href="#clientes" style={{ cursor: "pointer" }} onMouseEnter={e => e.target.style.color = "var(--text)"} onMouseLeave={e => e.target.style.color = "var(--text-3)"}>Clientes</a>
            <a href="#planos" style={{ cursor: "pointer" }} onMouseEnter={e => e.target.style.color = "var(--text)"} onMouseLeave={e => e.target.style.color = "var(--text-3)"}>Planos</a>
          </div>
          <div className="flex items-center gap-2">
            <button className="wood-btn wood-btn-ghost sm-hide" onClick={() => navigate("login")}>Entrar</button>
            <button className="wood-btn wood-btn-primary" onClick={() => navigate("login")}>
              Acessar Wood OS
              <Icon name="arrow-right" size={14} />
            </button>
          </div>
        </div>
      </nav>

      {/* Hero */}
      <section className="relative" style={{ paddingTop: 160, paddingBottom: 80 }}>
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-12 gap-8 items-center">
            <div className="col-span-6 slide-up" style={{ "--i": 1 }}>
              <div className="iflex items-center gap-2 mb-5 px-3 py-1.5 rounded-full"
                style={{ background: "rgba(16, 185, 129,0.08)", border: "1px solid rgba(16, 185, 129,0.25)" }}>
                <span className="wood-dot wood-dot-pulse" style={{ background: "var(--amber-bright)", color: "var(--amber-bright)" }} />
                <span className="text-xs text-amber-bright" style={{ fontWeight: 600, letterSpacing: "0.04em" }}>WOOD OS 2026 · MULTI-TENANT</span>
              </div>

              <h1 className="tracking-tighter mb-5 text-balance" style={{ fontSize: 64, lineHeight: 1.02, fontWeight: 500 }}>
                O sistema operacional<br />
                da <em className="font-display italic wood-gradient-text" style={{ fontWeight: 400 }}>sua marcenaria</em>.
              </h1>

              <p className="text-3 text-lg mb-8 max-w-xl text-pretty" style={{ lineHeight: 1.55 }}>
                Solicitações, obras, equipes, almoxarifado, frota e logística — em uma única plataforma feita para a operação real da marcenaria moderna. Sem planilhas, sem ruído, sem retrabalho.
              </p>

              <div className="flex items-center gap-3 mb-10 flex-wrap">
                <button className="wood-btn wood-btn-primary wood-btn-xl" onClick={() => navigate("login")}>
                  Começar gratuitamente
                  <Icon name="arrow-right" size={16} />
                </button>
                <button className="wood-btn wood-btn-secondary wood-btn-xl">
                  <Icon name="play" size={14} />
                  Ver demonstração
                </button>
              </div>

              <div className="flex items-center gap-6 text-sm text-3 flex-wrap">
                <div className="flex items-center gap-2">
                  <Icon name="check-circle" size={15} className="text-success" />
                  14 dias grátis
                </div>
                <div className="flex items-center gap-2">
                  <Icon name="check-circle" size={15} className="text-success" />
                  Sem cartão de crédito
                </div>
                <div className="flex items-center gap-2">
                  <Icon name="check-circle" size={15} className="text-success" />
                  Suporte em PT-BR
                </div>
              </div>
            </div>

            {/* Visual mockup */}
            <div className="col-span-6 relative slide-up" style={{ "--i": 3, minHeight: 540 }}>
              <HeroMockup />
            </div>
          </div>

          {/* Logos */}
          <div className="mt-20 pt-8 border-t">
            <div className="text-xs uppercase tracking-widest text-4 mb-5 text-center" style={{ fontWeight: 600 }}>
              Confiado por <span className="text-amber">+140 marcenarias</span> em todo o Brasil
            </div>
            <div className="flex items-center justify-center gap-10 flex-wrap" style={{ opacity: 0.6 }}>
              {["MadeireirA Boavista", "Olympus Movelaria", "Falcão Arquitetura", "Móveis Catarinense", "ArtCedro", "Carpintaria Real"].map((c, i) => (
                <div key={c} className="text-2 font-display italic" style={{ fontSize: 20, letterSpacing: "-0.02em" }}>{c}</div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Stats strip */}
      <section className="py-10">
        <div className="max-w-7xl mx-auto px-6">
          <div className="wood-card grid grid-cols-4 wood-veneer" style={{ padding: 0, overflow: "hidden" }}>
            {[
              { label: "Marcenarias ativas", value: "142", sub: "+12 este mês" },
              { label: "Obras gerenciadas", value: "2.480", sub: "no último ano" },
              { label: "Entregas no prazo", value: "94%", sub: "média da plataforma" },
              { label: "Tempo de resposta", value: "−47%", sub: "vs. antes do Wood OS" },
            ].map((s, i) => (
              <div key={i} style={{ padding: "32px 28px", borderRight: i < 3 ? "1px solid var(--wood-border)" : "none" }}>
                <div className="text-3 text-xs uppercase tracking-widest mb-3" style={{ fontWeight: 500 }}>{s.label}</div>
                <div className="font-semibold tracking-tighter" style={{ fontSize: 38, lineHeight: 1, fontVariantNumeric: "tabular-nums" }}>
                  <span className="wood-gradient-text">{s.value}</span>
                </div>
                <div className="text-sm text-3 mt-2">{s.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section id="recursos" className="py-20">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16 max-w-3xl mx-auto">
            <div className="text-xs uppercase tracking-widest text-amber mb-3" style={{ fontWeight: 600 }}>O QUE WOOD OS FAZ</div>
            <h2 className="text-5xl font-semibold tracking-tighter mb-4 text-balance">
              Toda a operação em uma<br />
              <em className="font-display italic" style={{ fontWeight: 400 }}>única superfície de controle.</em>
            </h2>
            <p className="text-3 text-lg text-pretty">
              Substitua planilhas, grupos de WhatsApp e blocos de papel por um cockpit operacional pensado para marcenarias que produzem todo dia.
            </p>
          </div>

          <div className="grid grid-cols-3 gap-5">
            {[
              { icon: "inbox", title: "Solicitações organizadas", desc: "Cada pedido com prioridade, prazo, anexos e histórico. Avance o status com um clique.", color: "amber" },
              { icon: "hammer", title: "Obras com progresso real", desc: "Visão clara do que está sendo produzido, montado e entregue em cada obra ativa.", color: "amber" },
              { icon: "users", title: "Equipes com carga visível", desc: "Saiba quem está sobrecarregado e quem pode pegar mais. Acabe com o feeling.", color: "info" },
              { icon: "package", title: "Almoxarifado e compras", desc: "Pedidos de material com fornecedor, prazo e indicadores de pendência por obra.", color: "amber" },
              { icon: "truck", title: "Frota e manutenção", desc: "Cada veículo com status, próximo serviço, motorista e carga em tempo real.", color: "info" },
              { icon: "boxes", title: "Carga e descarga em fluxo", desc: "Timeline de entradas e saídas com responsável, doca e horário. Sem mais confusão.", color: "amber" },
            ].map((f, i) => (
              <div key={i} className="wood-card p-6 slide-up lift" style={{ "--i": i + 1, animationDelay: `${i * 60}ms` }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12, marginBottom: 18,
                  background: f.color === "info" ? "rgba(56,189,248,0.12)" : "rgba(16, 185, 129,0.14)",
                  color: f.color === "info" ? "#38BDF8" : "#34D399",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  border: "1px solid var(--wood-border)"
                }}>
                  <Icon name={f.icon} size={20} />
                </div>
                <div className="text-lg font-semibold mb-2 tracking-tight">{f.title}</div>
                <div className="text-3 text-sm text-pretty">{f.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section id="como" className="py-20 relative">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16 max-w-3xl mx-auto">
            <div className="text-xs uppercase tracking-widest text-amber mb-3" style={{ fontWeight: 600 }}>FLUXO OPERACIONAL</div>
            <h2 className="text-5xl font-semibold tracking-tighter mb-4 text-balance">
              Do pedido à entrega,<br />
              <em className="font-display italic" style={{ fontWeight: 400 }}>sem perder nenhum nó.</em>
            </h2>
          </div>

          <div className="grid grid-cols-4 gap-5">
            {[
              { n: "01", icon: "inbox", title: "Solicitação registrada", desc: "Cliente, prazo, prioridade, anexos. Tudo num lugar só." },
              { n: "02", icon: "saw", title: "Em análise e produção", desc: "Time atribuído. Almoxarifado pede o material necessário." },
              { n: "03", icon: "truck", title: "Logística orquestrada", desc: "Veículo, motorista e doca alocados pela timeline." },
              { n: "04", icon: "check-circle", title: "Entregue e arquivado", desc: "Histórico completo, métricas e aprendizado para a próxima." },
            ].map((s, i) => (
              <div key={i} className="wood-card p-6 relative slide-up" style={{ animationDelay: `${i * 80}ms` }}>
                <div className="flex items-center justify-between mb-4">
                  <div className="font-mono text-amber" style={{ fontSize: 14, letterSpacing: "0.04em" }}>{s.n}</div>
                  <div style={{
                    width: 38, height: 38, borderRadius: 10,
                    background: "rgba(16, 185, 129,0.12)",
                    color: "#34D399",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    border: "1px solid var(--wood-border)"
                  }}>
                    <Icon name={s.icon} size={18} />
                  </div>
                </div>
                <div className="font-semibold mb-1.5 tracking-tight">{s.title}</div>
                <div className="text-3 text-sm">{s.desc}</div>
                {i < 3 && (
                  <div className="md-hide" style={{
                    position: "absolute", top: "50%", right: -22,
                    color: "var(--amber)", opacity: 0.5
                  }}>
                    <Icon name="arrow-right" size={20} />
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section id="clientes" className="py-20">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-12 max-w-3xl mx-auto">
            <div className="text-xs uppercase tracking-widest text-amber mb-3" style={{ fontWeight: 600 }}>QUEM USA WOOD OS</div>
            <h2 className="text-5xl font-semibold tracking-tighter mb-4 text-balance">
              O chão da marcenaria <em className="font-display italic" style={{ fontWeight: 400 }}>aprovou.</em>
            </h2>
          </div>

          <div className="grid grid-cols-3 gap-5">
            {[
              { quote: "Em três meses de Wood OS deixamos de perder solicitação em grupo de WhatsApp. A operação ficou previsível.", name: "Bernardo Falcão", role: "Sócio · Falcão Arquitetura", avatar: "Bernardo Falcão" },
              { quote: "O painel de obras é o que eu sempre quis. Vejo numa tela quem está atrasando, e o porquê. E o cliente vê também.", name: "Lara Schmidt", role: "Diretora · Móveis Catarinense", avatar: "Lara Schmidt" },
              { quote: "Reduzimos 47% do tempo de resposta para o cliente. O time de obra agora chega na hora certa com o material certo.", name: "Hélio Camargo", role: "CEO · Olympus Movelaria", avatar: "Hélio Camargo" },
            ].map((t, i) => (
              <div key={i} className="wood-card p-6 slide-up" style={{ animationDelay: `${i * 100}ms` }}>
                <div className="text-amber mb-4" style={{ fontSize: 24, lineHeight: 1, fontFamily: "var(--font-display)" }}>"</div>
                <p className="text-2 text-md mb-6 text-pretty" style={{ lineHeight: 1.55 }}>{t.quote}</p>
                <div className="flex items-center gap-3 pt-4 border-t">
                  <Avatar name={t.avatar} size={36} />
                  <div>
                    <div className="text-sm" style={{ fontWeight: 600 }}>{t.name}</div>
                    <div className="text-xs text-3">{t.role}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section id="planos" className="py-20">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-14 max-w-3xl mx-auto">
            <div className="text-xs uppercase tracking-widest text-amber mb-3" style={{ fontWeight: 600 }}>PLANOS</div>
            <h2 className="text-5xl font-semibold tracking-tighter mb-4 text-balance">
              Comece pequeno. <em className="font-display italic" style={{ fontWeight: 400 }}>Cresça inteiro.</em>
            </h2>
            <p className="text-3 text-lg">14 dias grátis em qualquer plano. Sem cartão de crédito.</p>
          </div>

          <div className="grid grid-cols-3 gap-5 max-w-5xl mx-auto">
            {MOCK.admin.plans.map((p, i) => {
              const featured = p.id === "pro";
              return (
                <div
                  key={p.id}
                  className="wood-card p-7 relative slide-up"
                  style={{
                    animationDelay: `${i * 80}ms`,
                    ...(featured ? {
                      border: "1px solid rgba(16, 185, 129,0.5)",
                      boxShadow: "0 0 0 1px rgba(16, 185, 129,0.2), 0 20px 50px -20px rgba(16, 185, 129,0.3), var(--shadow-md)",
                      transform: "scale(1.02)"
                    } : {})
                  }}
                >
                  {featured && (
                    <div style={{
                      position: "absolute", top: -10, left: "50%", transform: "translateX(-50%)",
                      padding: "4px 12px", borderRadius: 999,
                      background: "linear-gradient(180deg, #34D399, #047857)",
                      color: "#0a0a0a", fontSize: 11, fontWeight: 700, letterSpacing: "0.08em"
                    }}>MAIS POPULAR</div>
                  )}
                  <div className="flex items-center justify-between mb-2">
                    <div className="text-lg font-semibold tracking-tight">{p.name}</div>
                    <span className="wood-badge wood-badge-neutral">{p.id === "starter" ? "PME" : p.id === "pro" ? "Crescimento" : "Operação 24/7"}</span>
                  </div>
                  <div className="flex items-baseline gap-1 mb-1">
                    <span className="text-3 text-sm">R$</span>
                    <span className="font-semibold tracking-tighter" style={{ fontSize: 44, lineHeight: 1 }}>{p.price.toLocaleString("pt-BR")}</span>
                    <span className="text-3 text-sm">/mês</span>
                  </div>
                  <div className="text-3 text-sm mb-5">por marcenaria · cobrança mensal</div>
                  <button
                    className={featured ? "wood-btn wood-btn-primary wood-btn-lg w-full" : "wood-btn wood-btn-secondary wood-btn-lg w-full"}
                    onClick={() => navigate("login")}
                  >
                    {p.id === "enterprise" ? "Falar com vendas" : "Começar agora"}
                  </button>
                  <div className="mt-6 pt-5 border-t" style={{ borderColor: "var(--wood-border-soft)" }}>
                    {p.features.map((f, j) => (
                      <div key={j} className="flex items-start gap-2 mb-2.5 text-sm">
                        <Icon name="check" size={14} className="text-amber mt-0.5 shrink-0" />
                        <span className="text-2">{f}</span>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20">
        <div className="max-w-5xl mx-auto px-6">
          <div className="wood-card wood-veneer p-12 text-center relative overflow-hidden" style={{ borderColor: "rgba(16, 185, 129,0.35)" }}>
            <div style={{
              position: "absolute", inset: 0,
              background: "radial-gradient(circle at 50% 0%, rgba(16, 185, 129,0.15), transparent 60%)",
              pointerEvents: "none"
            }} />
            <div className="iflex items-center gap-2 mb-4 px-3 py-1.5 rounded-full"
              style={{ background: "rgba(16, 185, 129,0.1)", border: "1px solid rgba(16, 185, 129,0.3)" }}>
              <Icon name="spark" size={13} className="text-amber-bright" />
              <span className="text-xs text-amber-bright" style={{ fontWeight: 600, letterSpacing: "0.04em" }}>PRONTO PARA COMEÇAR</span>
            </div>
            <h2 className="text-5xl font-semibold tracking-tighter mb-4 text-balance">
              A operação da sua marcenaria<br />
              <em className="font-display italic wood-gradient-text" style={{ fontWeight: 400 }}>merece um sistema próprio.</em>
            </h2>
            <p className="text-3 text-lg mb-8 max-w-2xl mx-auto text-pretty">
              Configure sua marcenaria no Wood OS em menos de 10 minutos. Importe obras, equipes e veículos. Convide sua equipe. Comece a operar hoje.
            </p>
            <div className="flex items-center justify-center gap-3 flex-wrap">
              <button className="wood-btn wood-btn-primary wood-btn-xl" onClick={() => navigate("login")}>
                Acessar Wood OS
                <Icon name="arrow-right" size={16} />
              </button>
              <button className="wood-btn wood-btn-secondary wood-btn-xl">
                Agendar demonstração
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t py-12 mt-10">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-12 gap-8 mb-10">
            <div className="col-span-4">
              <WoodLogo size={32} textSize={16} />
              <p className="text-3 text-sm mt-4 max-w-sm">
                O sistema operacional para marcenarias modernas. Operação visível, equipe alinhada, cliente surpreso.
              </p>
            </div>
            {[
              { title: "Produto", items: ["Recursos", "Planos", "Roadmap", "Mudanças"] },
              { title: "Empresa", items: ["Sobre", "Clientes", "Carreiras", "Contato"] },
              { title: "Recursos", items: ["Central de ajuda", "Comunidade", "Status", "API docs"] },
              { title: "Legal", items: ["Termos", "Privacidade", "LGPD", "Cookies"] },
            ].map((g, i) => (
              <div key={i} className="col-span-2">
                <div className="text-sm font-semibold mb-3">{g.title}</div>
                {g.items.map(it => (
                  <a key={it} className="block text-sm text-3 py-1 cursor-pointer" style={{ transition: "color 0.18s" }}
                    onMouseEnter={e => e.target.style.color = "var(--text)"} onMouseLeave={e => e.target.style.color = "var(--text-3)"}>{it}</a>
                ))}
              </div>
            ))}
          </div>
          <div className="border-t pt-6 flex items-center justify-between flex-wrap gap-3">
            <div className="text-xs text-4">© 2026 Wood OS — Operação para marcenarias.</div>
            <div className="flex items-center gap-3 text-xs text-4">
              <span className="flex items-center gap-1"><span className="wood-dot wood-dot-pulse" style={{ background: "var(--success)", color: "var(--success)" }} /> Todos os sistemas operacionais</span>
              <span>·</span>
              <span>Hospedado em SP-1</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

/* ============================================================
   Hero mockup — fake dashboard preview
   ============================================================ */
const HeroMockup = () => {
  return (
    <div style={{ position: "relative", perspective: 1200 }}>
      {/* Glow */}
      <div style={{
        position: "absolute", inset: -20,
        background: "radial-gradient(circle at 60% 40%, rgba(16, 185, 129,0.3), transparent 60%)",
        filter: "blur(40px)", pointerEvents: "none"
      }} />

      {/* Browser frame */}
      <div
        className="wood-card relative"
        style={{
          padding: 0,
          overflow: "hidden",
          transform: "rotateY(-6deg) rotateX(4deg)",
          transformOrigin: "60% 50%",
          boxShadow: "0 40px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(16, 185, 129,0.18)",
          background: "var(--wood-surface)"
        }}
      >
        {/* Window chrome */}
        <div className="flex items-center gap-2 px-4 py-3" style={{ borderBottom: "1px solid var(--wood-border)", background: "rgba(0,0,0,0.2)" }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#EF4444" }} />
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#F59E0B" }} />
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#34D399" }} />
          <div className="ml-3 wood-cmd" style={{ height: 26, padding: "4px 12px", flex: 1, maxWidth: 320 }}>
            <Icon name="search" size={11} className="text-4" />
            <span className="text-xs text-4">app.woodos.com / painel-geral</span>
          </div>
          <span className="wood-badge wood-badge-amber" style={{ padding: "2px 8px", fontSize: 10 }}>
            <span className="wood-dot wood-dot-pulse" style={{ background: "var(--amber-bright)", color: "var(--amber-bright)" }} /> ao vivo
          </span>
        </div>

        {/* Mockup content */}
        <div style={{ padding: 18 }}>
          <div className="flex items-center justify-between mb-3">
            <div>
              <div className="text-xs text-4 uppercase tracking-widest mb-0.5" style={{ fontWeight: 600 }}>BOM DIA, EDUARDO</div>
              <div className="text-lg font-semibold tracking-tight">Painel Geral</div>
            </div>
            <button className="wood-btn wood-btn-primary wood-btn-sm">
              <Icon name="plus" size={12} />
              Nova Solicitação
            </button>
          </div>

          {/* KPI mini */}
          <div className="grid grid-cols-4 gap-2 mb-3">
            {[
              { label: "Solicitações", value: "38", trend: 12, color: "#34D399" },
              { label: "Obras ativas", value: "12", trend: 6, color: "#34D399" },
              { label: "No prazo", value: "92%", trend: 3, color: "#38BDF8" },
              { label: "Atrasadas", value: "3", trend: -25, color: "#EF4444" },
            ].map((k, i) => (
              <div key={i} className="wood-card p-3" style={{ background: "rgba(0,0,0,0.2)" }}>
                <div className="text-xs text-4 mb-1" style={{ fontSize: 9.5, letterSpacing: "0.06em", textTransform: "uppercase" }}>{k.label}</div>
                <div className="text-xl font-semibold tracking-tight" style={{ color: k.color, fontVariantNumeric: "tabular-nums", fontSize: 19 }}>{k.value}</div>
              </div>
            ))}
          </div>

          {/* List */}
          <div className="wood-card" style={{ padding: 0, background: "rgba(0,0,0,0.2)" }}>
            <div className="px-3 py-2 flex items-center justify-between" style={{ borderBottom: "1px solid var(--wood-border-soft)" }}>
              <div className="text-xs font-semibold">Solicitações urgentes</div>
              <span className="wood-badge wood-badge-error" style={{ padding: "1px 6px", fontSize: 9.5 }}>3</span>
            </div>
            {[
              { id: "WO-2814", title: "Painel ripado sala", deadline: "7 dias", priority: "alta" },
              { id: "WO-2813", title: "Bancada quartzo", deadline: "10 dias", priority: "alta" },
              { id: "WO-2808", title: "Reforma cozinha", deadline: "atrasado", priority: "atrasado" },
            ].map((r, i) => (
              <div key={i} className="flex items-center gap-2 px-3 py-2.5" style={{ borderBottom: i < 2 ? "1px solid var(--wood-border-soft)" : "none" }}>
                <span className="wood-dot" style={{
                  background: r.priority === "atrasado" ? "#EF4444" : "#34D399",
                  boxShadow: r.priority === "atrasado" ? "0 0 6px #EF4444" : "0 0 6px #34D399"
                }} />
                <span className="font-mono text-xs text-4" style={{ fontSize: 10 }}>{r.id}</span>
                <span className="text-xs flex-1 truncate" style={{ fontWeight: 500 }}>{r.title}</span>
                <span className="text-xs text-3" style={{ fontSize: 10 }}>{r.deadline}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @keyframes float {
          0%, 100% { transform: rotateY(-6deg) rotateX(4deg) translateY(0); }
          50% { transform: rotateY(-6deg) rotateX(4deg) translateY(-8px); }
        }
      `}</style>
    </div>
  );
};

window.Landing = Landing;