 /*
  LUMUS FILMS — Site One Page · Versão Final
  ============================================================
  Stack: React (sem dependências externas além das listadas)
  Fontes: Syne (display) + DM Sans (corpo) via Google Fonts
  Cor principal: #E8890C

  COMO PERSONALIZAR — procure os comentários com ⚠️
  ─────────────────────────────────────────────────
  1. LOGO          → src="/assets/logo-site.png"
  2. VÍDEO HERO    → descomente <source src="SEU-VIDEO.mp4">
  3. FOTO "DESDE"  → src da .since-left img
  4. PORTFÓLIO     → array PORT
  5. CLIENTES      → array LOGOS
  6. DEPOIMENTOS   → array TESTIS
  7. WHATSAPP      → buscar "5531996485655"
  8. EMAIL         → buscar "filmeslumus@gmail.com.br"
  9. INSTAGRAM     → buscar href="#" nos botões de instagram
*/



// ─── Dados editáveis ─────────────────────────────────────────────────────────

const PORT = [
  { t: "Aguiar Horta & Afins", c: "Empresas", img: "/assets/aguiar2.png", video: "/assets/aguiar-video.mp4" },
  { t: "Gellak + Supermercados BH", c: "Eventos", img: "/assets/evento-corrida.png", video: "/assets/bh.mp4" },
  { t: "Pôr do sol no Bosque", c: "Eventos", img: "/assets/bosque2.png", video: "/assets/bosque.mp4" },
  { t: "Congadar | Especial Teatro Redenção", c: "Social Media", img: "/assets/congadar-dvd.png", video: "/assets/congadar.mp4" },
  { t: "Papai Noel na Feirinha", c: "Eventos", img: "/assets/noel.png", video: "/assets/noel.mp4" },
  { t: "Institucional Gellak Sorvetes 2025", c: "Empresas", img: "/assets/institucional2.png", video: "/assets/institucional.mp4" }, 
  { t: "ISHOW - Lobo Guará prod. Flow Key", c: "Videoclipes", img: "/assets/ishow.png", video: "/assets/ishow.mp4" },
  { t: "Motorsete — Institucional", c: "Empresas", img: "/assets/motorsete.png", video: "/assets/motorsete.mp4" },
  { t: "Gellak Sorvetes", c: "Social Media", img: "/assets/gellak-foto.png", video: "/assets/picole.mp4" },
  { t: "Brenda Mendes Tattoo", c: "Social Media", img: "/assets/brenda2.png", video: "/assets/brenda.mp4" },
  { t: "Stand-Up Comedy", c: "Social Media", img: "/assets/chu2.png", video: "/assets/chu.mp4" },
  { t: "Lenovo + Gabriel de Pinho", c: "Social Media", img: "/assets/gabs.png", img: "/assets/gabs.png", video: "/assets/gabs.mp4" },
  { t: "Fenex + Gellak", c: "Eventos", img: "/assets/fenex.png", img: "/assets/fenex.png", video: "/assets/fenex.mp4" },
];

const CATS = ["Todos", "Empresas", "Eventos", "Social Media"];

const LOGOS = [
  "Gellak Sorvetes", "Ishow", "Cervejaria Capim Branco", "Motorsete",
  "Body Health Brasil", "Paloma Cipriano", "Amar Veterinária",
  "Festival do Folclore de Jequitibá", "Aguiar Horta & Afins", "Jean Karllo Imóveis", "Congadar",
  "Só no Sapatinho Calçados", "Brenda Mendes Tattoo", "4 Estações Grill", "Banda No Label"
];

const TESTIS = [
  { n: "Ricardo Fonseca", r: "Dir. de Marketing — Motorsete", s: 5, t: "Profissionalismo absurdo. Desde o briefing até a entrega, cada detalhe foi cuidado. O institucional ficou acima das expectativas." },
  { n: "Ana Carolina M.", r: "CEO — Clínica Renovare", s: 5, t: "A Lumus transformou como o mercado enxerga nossa marca. Trouxe a autoridade que levou anos para construirmos — em semanas." },
  { n: "Juliana Braga", r: "Fundadora — Studio Alma", s: 5, t: "Não é só um vídeo bonito — é estratégia. Eles entenderam meu negócio e criaram conteúdo que realmente converte." },
];

const SIM_STEPS = [
  { q: "Que tipo de vídeo você precisa?", opts: ["Vídeo Institucional", "Reels / Social Media", "Cobertura de Evento", "Motion Design"] },
  { q: "Qual é o principal objetivo?", opts: ["Aumentar vendas", "Fortalecer a marca", "Engajar nas redes", "Registrar um evento"] },
  { q: "Qual é o prazo ideal?", opts: ["Urgente (até 2 semanas)", "Normal (até 1 mês)", "Planejado (1–3 meses)", "Ainda não sei"] },
];


// ─── CSS global ───────────────────────────────────────────────────────────────

const GlobalStyles = () => (
  <style>{`
    @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg: #080808; --bg2: #0f0f0f; --bg3: #141414;
      --gold: #E8890C; --gold2: #F5A030; --gold3: #C4720A;
      --text: #f0ede8; --muted: rgba(240,237,232,.45);
      --border: rgba(240,237,232,.07); --border-g: rgba(232,137,12,.2);
    }
    html { scroll-behavior: smooth; }
    body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; overflow-x: hidden; }
    ::-webkit-scrollbar { width: 3px; }
    ::-webkit-scrollbar-thumb { background: var(--gold); }
    .syne { font-family: 'Syne', sans-serif; }
    .tg { background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 55%, #FFD27A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .tag { font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 6px; }
    .glass-g { background: rgba(232,137,12,.06); border: 1px solid var(--border-g); }
    .btn-g { background: linear-gradient(135deg, var(--gold), var(--gold3)); color: #fff; font-weight: 700; font-family: 'Syne', sans-serif; border-radius: 999px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: transform .2s, box-shadow .2s; }
    .btn-g:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(232,137,12,.3); }
    .btn-o { border: 1.5px solid rgba(232,137,12,.5); color: var(--gold); background: transparent; font-family: 'Syne', sans-serif; font-weight: 700; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all .2s; }
    .btn-o:hover { background: rgba(232,137,12,.08); border-color: var(--gold); transform: translateY(-2px); }

    /* Nav */
.lf-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 5%;
  transition: all .4s;
}

     .lf-nav.scrolled {
  background: rgba(8,8,8,.95);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
    .lf-nav a { font-size: 13px; color: var(--muted); cursor: pointer; text-decoration: none; transition: color .2s; }
    .lf-nav a:hover { color: var(--gold); }

    /* Hero */
    .lf-hero { height: 100vh; min-height: 600px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow: hidden; padding-bottom: 72px; }
    .lf-hero-grain { position: absolute; inset: 0; z-index: 1; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; }
    .lf-hero-grid { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(232,137,12,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(232,137,12,.03) 1px, transparent 1px); background-size: 80px 80px; pointer-events: none; }

    /* Seção Desde */
    .lf-since { display: grid; grid-template-columns: 1fr 1fr; }
    .lf-since-left { position: relative; overflow: hidden; min-height: 660px; }
    .lf-since-left img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%) contrast(1.08); }
    .lf-since-left::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.1) 60%, transparent 100%); }
    .lf-since-right { background: var(--bg2); padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
    .lf-since-right::before { content: '2017'; position: absolute; right: -18px; bottom: -44px; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 12rem; color: rgba(232,137,12,.04); line-height: 1; pointer-events: none; user-select: none; }

    /* Serviços */
    .lf-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 44px; }
    .lf-svc-card { border-radius: 16px; padding: 30px 24px; position: relative; overflow: hidden; transition: all .3s; cursor: default; background: var(--bg3); border: 1px solid var(--border); }
    .lf-svc-card:hover { border-color: var(--border-g); background: rgba(232,137,12,.04); transform: translateY(-5px); }

    /* Processo */
    .lf-proc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin-top: 44px; }

    /* Portfólio */
    .lf-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0; }
    .lf-pitem { border-radius: 0; overflow: hidden; position: relative; aspect-ratio: 16/10; cursor: pointer; }
    .lf-pitem img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1); }
    
    .lf-pov { position: absolute; inset: 0; opacity: 1; background: linear-gradient(135deg, rgba(232,137,12,.55), rgba(8,8,8,.55)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: background .3s; }
    .lf-pitem:hover .lf-pov { background: linear-gradient(135deg, rgba(232,137,12,.82), rgba(8,8,8,.5)); }

    /* Simulador */
    .lf-sim-ov { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,4,4,.92); backdrop-filter: blur(14px); }
    .lf-sopt { text-align: left; padding: 13px 17px; border-radius: 11px; background: rgba(255,255,255,.03); border: 1px solid var(--border); color: rgba(240,237,232,.62); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s; display: flex; justify-content: space-between; align-items: center; font-family: 'DM Sans', sans-serif; width: 100%; }
    .lf-sopt:hover { background: rgba(232,137,12,.1); border-color: rgba(232,137,12,.32); color: var(--text); }

    /* Misc */
    .lf-logo-p { border-radius: 9px; padding: 11px 20px; font-size: 11px; font-weight: 600; color: rgba(240,237,232,.25); letter-spacing: .07em; text-transform: uppercase; transition: all .2s; cursor: default; background: var(--bg3); border: 1px solid var(--border); }
    .lf-logo-p:hover { color: var(--gold); border-color: rgba(232,137,12,.2); }
    .lf-ftab { padding: 7px 17px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: all .2s; font-family: 'DM Sans', sans-serif; }
    .lf-ftab.on { background: linear-gradient(135deg, var(--gold), var(--gold3)); color: #fff; }
    .lf-ftab.off { background: rgba(255,255,255,.04); color: rgba(240,237,232,.38); border: 1px solid var(--border); }
    .lf-ftab.off:hover { background: rgba(232,137,12,.07); color: var(--gold); }
    .lf-fab { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; transition: transform .2s; font-size: 17px; text-decoration: none; }
    .lf-fab:hover { transform: scale(1.1); }
    .lf-bchip { border-radius: 999px; padding: 4px 12px; font-size: 10px; font-weight: 600; color: rgba(240,237,232,.45); background: rgba(8,8,8,.65); border: 1px solid rgba(240,237,232,.09); backdrop-filter: blur(6px); }

    /* Animações */
    @keyframes lf-bounce { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(7px); opacity: .4; } }
    @keyframes lf-fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
    @keyframes lf-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
    .lf-fu { animation: lf-fadeUp .7s ease forwards; }
    .lf-flt { animation: lf-float 3.5s ease-in-out infinite; }

    @media (max-width: 720px) {
      .lf-nav-links { display: none; }
      .lf-since { grid-template-columns: 1fr; }
      .lf-since-left { min-height: 260px; }
      .lf-since-right { padding: 40px 26px; }
      .lf-year-solid, .lf-year-outline { font-size: 3rem !important; }
      .lf-brand-chips { display: none; }
    }
  `}</style>
);

// ─── Simulador ───────────────────────────────────────────────────────────────

function Simulador({ onClose }) {
  const [step, setStep] = useState(0);
  const [answers, setAnswers] = useState([]);
  const [done, setDone] = useState(false);

  const pick = (opt) => {
    const next = [...answers, opt];
    setAnswers(next);
    if (step < SIM_STEPS.length - 1) setStep(step + 1);
    else setDone(true);
  };

  return (
    <div className="lf-sim-ov" onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div style={{ width: "100%", maxWidth: 460, borderRadius: 22, padding: "32px 28px", position: "relative", background: "var(--bg3)", border: "1px solid var(--border-g)", boxShadow: "0 0 60px rgba(232,137,12,.08)" }}>
        <button onClick={onClose} style={{ position: "absolute", top: 12, right: 14, background: "none", border: "none", color: "rgba(240,237,232,.3)", cursor: "pointer", fontSize: 22, lineHeight: 1 }}>✕</button>
        <div style={{ display: "flex", gap: 5, marginBottom: 20 }}>
          {SIM_STEPS.map((_, i) => (
            <div key={i} style={{ height: 3, flex: 1, borderRadius: 999, background: i <= step || done ? "var(--gold)" : "rgba(240,237,232,.1)", transition: "background .4s" }} />
          ))}
        </div>
        {!done ? (
          <>
            <p className="tag" style={{ marginBottom: 8 }}>{step + 1} de {SIM_STEPS.length}</p>
            <p className="syne" style={{ fontWeight: 800, fontSize: "1.15rem", color: "var(--text)", marginBottom: 20, lineHeight: 1.3 }}>{SIM_STEPS[step].q}</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
              {SIM_STEPS[step].opts.map((opt) => (
                <button key={opt} className="lf-sopt" onClick={() => pick(opt)}>
                  <span>{opt}</span>
                  <span style={{ color: "var(--gold)", fontSize: 16 }}>›</span>
                </button>
              ))}
            </div>
          </>
        ) : (
          <div style={{ textAlign: "center", padding: "6px 0" }}>
            <div style={{ width: 56, height: 56, borderRadius: "50%", background: "rgba(232,137,12,.1)", border: "1px solid rgba(232,137,12,.25)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 14px", fontSize: 24 }}>✨</div>
            <h3 className="syne" style={{ fontWeight: 800, color: "var(--text)", fontSize: "1.15rem", marginBottom: 10 }}>Perfeito!</h3>
            <div style={{ marginBottom: 14 }}>
              {answers.map((a) => (
                <div key={a} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "rgba(240,237,232,.55)", marginBottom: 5 }}>
                  <span style={{ color: "var(--gold)" }}>✓</span>{a}
                </div>
              ))}
            </div>
            <p style={{ fontSize: 13, color: "var(--muted)", marginBottom: 20 }}>
              Receba sua proposta em até <strong style={{ color: "var(--gold)" }}>24 horas.</strong>
            </p>
            {/* ⚠️ Substitua o número */}
<a
  href={
    "https://wa.me/5531933008785?text=" +
    encodeURIComponent(
      "Olá! Acabei de simular meu projeto.\n\n" +
      "Tipo de vídeo: " + answers[0] + "\n" +
      "Objetivo: " + answers[1] + "\n" +
      "Prazo: " + answers[2]
    )
  }
  target="_blank"
  rel="noreferrer"
>
  <button
    className="btn-g"
    style={{
      padding: "13px 26px",
      fontSize: 13,
      margin: "0 auto"
    }}
  >
    💬 Enviar Simulação
  </button>
</a>
          </div>
        )}
      </div>
    </div>
  );
}

// ─── Depoimentos ─────────────────────────────────────────────────────────────

function Depoimentos() {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % TESTIS.length), 5000);
    return () => clearInterval(t);
  }, []);
  const t = TESTIS[idx];
  return (
    <div style={{ textAlign: "center", maxWidth: 600, margin: "0 auto" }}>
      <div style={{ color: "var(--gold)", fontSize: 15, marginBottom: 12 }}>{"★".repeat(t.s)}</div>
      <p style={{ fontSize: "1rem", color: "rgba(240,237,232,.68)", lineHeight: 1.82, fontStyle: "italic", marginBottom: 16 }}>"{t.t}"</p>
      <p className="syne" style={{ fontWeight: 700, color: "var(--text)" }}>{t.n}</p>
      <p style={{ fontSize: 13, color: "var(--gold)", marginTop: 2 }}>{t.r}</p>
      <div style={{ display: "flex", justifyContent: "center", gap: 6, marginTop: 20 }}>
        {TESTIS.map((_, i) => (
          <button key={i} onClick={() => setIdx(i)} style={{ width: 7, height: 7, borderRadius: "50%", border: "none", cursor: "pointer", background: i === idx ? "var(--gold)" : "rgba(240,237,232,.18)", transform: `scale(${i === idx ? 1.4 : 1})`, transition: "all .3s" }} />
        ))}
      </div>
    </div>
  );
}

// ─── Portfólio ───────────────────────────────────────────────────────────────

function Portfolio() {
  const [filter, setFilter] = useState("Todos");
  const [videoOpen, setVideoOpen] = useState(false);
  const [currentVideo, setCurrentVideo] = useState("");

  const items =
    filter === "Todos"
      ? PORT
      : PORT.filter((p) => p.c === filter);

  return (
    <>
      <div
        style={{
          display: "flex",
          gap: 7,
          flexWrap: "wrap",
          marginBottom: 30
        }}
      >
        {CATS.map((c) => (
          <button
            key={c}
            className={`lf-ftab ${c === filter ? "on" : "off"}`}
            onClick={() => setFilter(c)}
          >
            {c}
          </button>
        ))}
      </div>

      <div className="lf-pgrid">
        {items.map((p) => (
          <div
            key={p.t}
            className="lf-pitem"
            onClick={() => {
              setCurrentVideo(p.video);
              setVideoOpen(true);
            }}
          >
            <img src={p.img} alt={p.t} loading="lazy" />

            <div className="lf-pov">
              <span
  style={{
    fontSize: 34,
    color: "#fff",
    fontWeight: 700,
    lineHeight: 1
  }}
>
  ►
</span>
              <span
                className="syne"
                style={{
                  fontWeight: 700,
                  color: "#fff",
                  fontSize: 12
                }}
              >
                {p.t}
              </span>

              <span
                style={{
                  fontSize: 10,
                  color: "rgba(255,255,255,.5)",
                  textTransform: "uppercase",
                  letterSpacing: ".1em"
                }}
              >
                {p.c}
              </span>
            </div>

            <span
              style={{
                position: "absolute",
                top: 10,
                left: 10,
                background: "rgba(8,8,8,.7)",
                backdropFilter: "blur(6px)",
                borderRadius: 999,
                padding: "3px 10px",
                fontSize: 10,
                color: "rgba(240,237,232,.5)",
                fontWeight: 600
              }}
            >
              {p.c}
            </span>
          </div>
        ))}
      </div>

      {videoOpen && (
        <div
          style={{
            position: "fixed",
            inset: 0,
            background: "rgba(0,0,0,.95)",
            zIndex: 9999,
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            padding: "20px"
          }}
        >
          <button
            onClick={() => {
              setVideoOpen(false);
              setCurrentVideo("");
            }}
            style={{
              position: "absolute",
              top: "20px",
              right: "20px",
              fontSize: "32px",
              background: "none",
              border: "none",
              color: "#fff",
              cursor: "pointer"
            }}
          >
            ✕
          </button>

          <video
            src={currentVideo}
            controls
            autoPlay
            style={{
              width: "100%",
              maxWidth: "1200px",
              maxHeight: "85vh",
              borderRadius: "12px"
            }}
          />
        </div>
      )}
    </>
  );
}

// ─── App principal ────────────────────────────────────────────────────────────

function LumusFilms() {
  const [scrolled, setScrolled] = useState(false);
  const [simOpen, setSimOpen] = useState(false);

  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 55);
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);

  const go = (id) => document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });

  const Pad = ({ id, children, style = {} }) => (
    <div id={id} style={{ padding: "84px 5%", ...style }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>{children}</div>
    </div>
  );

  const SecHead = ({ tag, line1, line2 }) => (
    <>
      <p className="tag" style={{ marginBottom: 14 }}>{tag}</p>
      <h2 className="syne" style={{ fontWeight: 800, fontSize: "clamp(1.8rem,4vw,2.8rem)", color: "var(--text)", letterSpacing: "-.03em", lineHeight: 1.08, marginBottom: 44 }}>
        {line1}<br /><span className="tg">{line2}</span>
      </h2>
    </>
  );

  return (
    <>
      <GlobalStyles />

      {/* NAV */}
      <nav className={`lf-nav ${scrolled ? "scrolled" : ""}`}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }} onClick={() => go("hero")}>
          {/* ⚠️ Troque o src pela logo real */}
          <img src="/assets/logo-site.png" alt="Lumus Films" style={{ height: 70, width: "auto", filter: "brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(0deg)" }} />
        </div>
        <div className="lf-nav-links" style={{ display: "flex", gap: 30, alignItems: "center" }}>
          {[
  ["servicos", "Serviços"],
  ["portfolio", "Portfólio"],
  ["clientes", "Clientes"],
  ["contato", "Contato"]
].map(([id, label]) => (
  <a key={id} onClick={() => go(id)}>
    {id === "desde" ? (
      <img
        src={label}
        alt="Lumus"
        style={{
          height: "24px",
          width: "auto",
          verticalAlign: "middle"
        }}
      />
    ) : (
      label
    )}
  </a>
))}
          <button className="btn-g" style={{ padding: "9px 20px", fontSize: 12 }} onClick={() => setSimOpen(true)}>Orçamento →</button>
        </div>
      </nav>

      {/* HERO */}
      <section className="lf-hero" id="hero">
        <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
          <video autoPlay muted loop playsInline style={{ width: "100%", height: "100%", objectFit: "cover", opacity: .4 }}>
            {/* ⚠️ Descomente e aponte pro seu vídeo de melhores trabalhos em loop: */}
            {/* <source src="/assets/video-hero-loop.mp4" type="video/mp4" /> */}
          </video>
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg,rgba(8,8,8,.98),rgba(20,20,20,.9))" }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(0deg,var(--bg) 0%,rgba(8,8,8,.55) 45%,rgba(8,8,8,.1) 100%)" }} />
        </div>
        <div className="lf-hero-grain" />
        <div className="lf-hero-grid" />
        <div style={{ position: "absolute", top: "15%", left: "50%", transform: "translateX(-50%)", width: 700, height: 400, background: "radial-gradient(ellipse,rgba(232,137,12,.07) 0%,transparent 68%)", zIndex: 1, pointerEvents: "none" }} />
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", opacity: .04, pointerEvents: "none", zIndex: 1 }}>
          <img src="/assets/logo-site.png" alt="" style={{ width: 360, height: 360, objectFit: "contain", filter: "brightness(0) invert(1)" }} />
        </div>

        <div style={{ position: "relative", zIndex: 2, textAlign: "center", padding: "0 24px", width: "100%", maxWidth: 960, margin: "0 auto" }}>
          <p className="tag lf-fu lf-flt" style={{ animationDelay: ".1s", opacity: 0, justifyContent: "center", marginBottom: 18 }}>
            ✦ Produtora Audiovisual · Sete Lagoas / MG · Desde 2017
          </p>
          <h1 className="syne lf-fu" style={{ animationDelay: ".2s", opacity: 0, fontWeight: 800, fontSize: "clamp(2.5rem,6vw,5rem)", lineHeight: 1.02, letterSpacing: "-.04em", color: "var(--text)", marginBottom: 20 }}>
            Vídeos que <span className="tg">iluminam</span><br />seu negócio.
          </h1>
          <p className="lf-fu" style={{ animationDelay: ".35s", opacity: 0, fontSize: "clamp(.93rem,2vw,1.1rem)", color: "var(--muted)", maxWidth: 560, margin: "0 auto 36px", lineHeight: 1.8, fontWeight: 300 }}>
            Produção audiovisual estratégica para marcas que buscam autoridade, presença e resultados reais. Da câmera à tela do seu cliente.
          </p>
          <div className="lf-fu" style={{ animationDelay: ".5s", opacity: 0, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginBottom: 52 }}>
<button
  className="btn-g"
  style={{ padding: "14px 30px", fontSize: 14 }}
  onClick={() => go("portfolio")}
>
  ► Ver Portfólio
</button>
            <button className="btn-o" style={{ padding: "14px 30px", fontSize: 14 }} onClick={() => setSimOpen(true)}>Fazer Orçamento →</button>
          </div>
          <div className="lf-fu" style={{ animationDelay: ".65s", opacity: 0, display: "flex", gap: 36, justifyContent: "center", flexWrap: "wrap" }}>
            {[["900+", "Projetos"], ["8+", "Anos de estrada"], ["5", "Estados atendidos"]].map(([n, l]) => (
  <div key={n}>
    <div
      className="syne"
      style={{
        fontWeight: 800,
        fontSize: "2rem",
        color: "var(--gold)",
        lineHeight: 1
      }}
    >
      {n}
    </div>

    <div
      style={{
        fontSize: 10,
        color: "rgba(240,237,232,.3)",
        marginTop: 4,
        letterSpacing: ".1em",
        textTransform: "uppercase"
      }}
    >
      {l}
    </div>
  </div>
))}
          </div>
        </div>

        <div style={{ position: "absolute", bottom: 26, left: "50%", transform: "translateX(-50%)", zIndex: 3, display: "flex", flexDirection: "column", alignItems: "center", gap: 5, cursor: "pointer", opacity: .45 }} onClick={() => go("desde")}>
          <div style={{ width: 1, height: 42, background: "linear-gradient(var(--gold),transparent)" }} />
          <div style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--gold)", animation: "lf-bounce 1.8s ease-in-out infinite" }} />
        </div>
      </section>

      {/* DESDE 2017 */}
      <section id="desde" style={{ borderTop: "1px solid var(--border)" }}>
        <div className="lf-since">
          <div className="lf-since-left">
            {/* ⚠️ Troque pela foto real do set */}
        <img src="/assets/foto.png" alt="Lumus Films nos bastidores" />
            <div className="lf-brand-chips" style={{ position: "absolute", top: 22, right: 22, display: "flex", flexDirection: "column", gap: 6, zIndex: 2 }}>
              {["Gellak Sorvetes", "Jean Karllo Imóveis", "Congadar", "Só no Sapatinho", "Body Health Brasil", "Mimuai"].map((b) => (
                <span key={b} className="lf-bchip">{b}</span>
              ))}
            </div>
            <div className="glass-g" style={{ position: "absolute", bottom: 24, left: 24, zIndex: 2, borderRadius: 14, padding: "14px 18px", backdropFilter: "blur(14px)" }}>
              <p className="tag" style={{ marginBottom: 5 }}>✦ Nossa missão</p>
              <p className="syne" style={{ fontWeight: 700, color: "var(--text)", fontSize: ".92rem", lineHeight: 1.4 }}>"Filmes que elevam<br /> a percepção da sua marca."</p>
            </div>
          </div>

          <div className="lf-since-right">
            <p className="tag" style={{ marginBottom: 14 }}>✦ Produtora desde</p>
            <div style={{ display: "flex", alignItems: "flex-end", lineHeight: 1, marginBottom: 4 }}>
              <span className="lf-year-solid syne" style={{ fontWeight: 800, fontSize: "clamp(3.5rem,5.5vw,5.5rem)", color: "var(--gold)", lineHeight: 1 }}>20</span>
              <span className="lf-year-outline syne" style={{ fontWeight: 800, fontSize: "clamp(3.5rem,5.5vw,5.5rem)", lineHeight: 1, WebkitTextStroke: "2px rgba(232,137,12,.28)", WebkitTextFillColor: "transparent" }}>17</span>
            </div>
            <p className="syne" style={{ fontSize: "clamp(.78rem,1.3vw,.92rem)", color: "rgba(240,237,232,.25)", fontWeight: 600, letterSpacing: ".14em", textTransform: "uppercase" }}>Iluminando marcas</p>
            <div style={{ width: 48, height: 2, background: "linear-gradient(90deg,var(--gold),transparent)", margin: "16px 0" }} />
            <p style={{ fontSize: ".88rem", color: "var(--muted)", lineHeight: 1.85, fontWeight: 300, maxWidth: 420, marginBottom: 18 }}>
              Fundada em <strong style={{ color: "var(--text)", fontWeight: 500 }}>2017</strong> A Lumus surgiu da crença de que a atenção é uma das coisas mais valiosas do nosso tempo.

Em um mundo onde conteúdos são consumidos em segundos e esquecidos com a mesma velocidade, acreditamos que bons filmes ainda têm o poder de fazer alguém parar, observar e se conectar.

Por isso, não enxergamos o audiovisual apenas como uma ferramenta de divulgação. Para nós, vídeo é uma forma de transformar ideias em experiências, mensagens em conexão e momentos em memória.

Desde 2017, produzimos filmes para empresas, eventos, artistas e pessoas que entendem a importância de comunicar algo que realmente importe. Cada projeto é único, mas todos compartilham o mesmo objetivo: criar algo que continue fazendo sentido mesmo depois que a tela é desligada.

A tecnologia muda. Os formatos mudam. As plataformas mudam. O que permanece é a força de uma boa história bem contada.
            </p>
            <div style={{ display: "flex", gap: 20, marginBottom: 20, flexWrap: "wrap" }}>
              {[["8+", "Anos"], ["900+", "Projetos"], ["5", "Estados"]].map(([n, l], i) => (
                <div key={n} style={{ display: "flex", alignItems: "center", gap: 20 }}>
                  {i > 0 && <div style={{ width: 1, background: "var(--border)", alignSelf: "stretch" }} />}
                  <div>
                    <div className="syne" style={{ fontWeight: 800, fontSize: "1.4rem", color: "var(--gold)", lineHeight: 1 }}>{n}</div>
                    <div style={{ fontSize: 10, color: "rgba(240,237,232,.3)", letterSpacing: ".08em", textTransform: "uppercase", marginTop: 3 }}>{l}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", gap: 7, flexWrap: "wrap", marginBottom: 22 }}>
              {["Lei Aldir Blanc ✓", "Teatro Redenção ✓", "Videoclipes ✓", "Institucional ✓", "Social Media ✓"].map((tag) => (
                <span key={tag} className="glass-g" style={{ borderRadius: 999, padding: "5px 13px", fontSize: 11, fontWeight: 600, color: "var(--gold)" }}>{tag}</span>
              ))}
            </div>
            <button className="btn-g" style={{ padding: "13px 26px", fontSize: 13, width: "fit-content" }} onClick={() => setSimOpen(true)}>
              Quero meu vídeo →
            </button>
          </div>
        </div>
      </section>

      {/* QUOTE */}
      <div style={{ padding: "54px 5%", textAlign: "center", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)", background: "var(--bg2)" }}>
        <p className="syne" style={{ fontWeight: 700, fontSize: "clamp(1.2rem,3vw,1.9rem)", color: "rgba(240,237,232,.5)", maxWidth: 500, margin: "0 auto", letterSpacing: "-.02em" }}>
          "Transformamos <span style={{ color: "var(--gold)" }}>luz</span> em histórias."
        </p>
      </div>

      {/* SERVIÇOS */}
      <Pad id="servicos" style={{ background: "var(--bg2)" }}>
        <SecHead tag="🎬 O que fazemos" line1="Cada formato," line2="um propósito." />
        <div className="lf-svc-grid">
          {[
            { badge: "Autoridade", icon: "🏢", title: "Produção Institucional", desc: "Vídeos que constroem autoridade, geram confiança e convencem antes mesmo do contato." },
            { badge: "Engajamento", icon: "⚡", title: "Reels Estratégicos", desc: "Reels que retêm atenção e geram desejo. Criado para o algoritmo e para o ser humano." },
            { badge: "Memória", icon: "📷", title: "Cobertura de Eventos", desc: "Cada momento, eternizado. Direção criativa para transformar seu evento em conteúdo de valor." },
            { badge: "Inovação", icon: "✏️", title: "Motion Design", desc: "Animações que explicam o inexplicável e vendem o invisível. Design em movimento para marcas modernas." },
          ].map((s) => (
            <div key={s.title} className="lf-svc-card">
              <span style={{ position: "absolute", top: 16, right: 16, fontSize: 10, fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--gold)", background: "rgba(232,137,12,.1)", borderRadius: 999, padding: "3px 10px", border: "1px solid rgba(232,137,12,.18)" }}>{s.badge}</span>
              <div style={{ width: 48, height: 48, borderRadius: 11, background: "rgba(232,137,12,.1)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 16, border: "1px solid rgba(232,137,12,.15)", fontSize: 20 }}>{s.icon}</div>
              <h3 className="syne" style={{ fontWeight: 700, fontSize: "1rem", color: "var(--text)", marginBottom: 9 }}>{s.title}</h3>
              <p style={{ fontSize: 13, color: "var(--muted)", lineHeight: 1.75 }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </Pad>

      {/* PROCESSO */}
      <Pad style={{ borderTop: "1px solid var(--border)" }}>
        <SecHead tag="⏱ Como trabalhamos" line1="O processo" line2="Lumus." />
        <div className="lf-proc-grid">
          {[
            { icon: "👥", title: "Briefing", desc: "Imersão total no seu negócio, objetivos e diferenciais." },
            { icon: "🎯", title: "Planejamento", desc: "Roteiro, storyboard e estratégia visual completa." },
            { icon: "🎥", title: "Gravação", desc: "Equipamentos 4K e direção cinematográfica experiente." },
            { icon: "✂️", title: "Edição", desc: "Color grading, trilha, motion graphics e finalização." },
            { icon: "📦", title: "Entrega", desc: "Formatos otimizados por plataforma, prontos para converter." },
          ].map((s, i) => (
            <div key={s.title} style={{ textAlign: "center", padding: "18px 14px" }}>
              <div style={{ width: 66, height: 66, borderRadius: "50%", border: "1.5px solid rgba(232,137,12,.28)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 14px", position: "relative", fontSize: 22, background: "rgba(232,137,12,.07)" }}>
                {s.icon}
                <div style={{ position: "absolute", top: -7, right: -7, width: 20, height: 20, borderRadius: "50%", background: "var(--gold)", color: "#fff", fontSize: 10, fontWeight: 800, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'Syne',sans-serif" }}>{i + 1}</div>
              </div>
              <h4 className="syne" style={{ fontWeight: 700, fontSize: ".88rem", color: "var(--text)", marginBottom: 6 }}>{s.title}</h4>
              <p style={{ fontSize: 12, color: "var(--muted)", lineHeight: 1.65 }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </Pad>

      {/* PORTFÓLIO */}
      <Pad id="portfolio" style={{ background: "var(--bg2)", borderTop: "1px solid var(--border)" }}>
        <SecHead tag="📹 Nosso trabalho" line1="Filmes que elevam" line2="a percepção da sua marca." />
        <Portfolio />
      </Pad>

      {/* CLIENTES */}
      <Pad id="clientes" style={{ borderTop: "1px solid var(--border)" }}>
        <p className="tag" style={{ display: "flex", justifyContent: "center", marginBottom: 14 }}>⭐ Marcas que já iluminamos</p>
        <h2 className="syne" style={{ fontWeight: 800, fontSize: "clamp(1.8rem,4vw,2.8rem)", color: "var(--text)", letterSpacing: "-.03em", lineHeight: 1.08, textAlign: "center", marginBottom: 44 }}>
          Quem confia <span className="tg">na Lumus.</span>
        </h2>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, justifyContent: "center", marginBottom: 50 }}>
          {LOGOS.map((l) => <div key={l} className="lf-logo-p">{l}</div>)}
        </div>
        <Depoimentos />
      </Pad>

      {/* CONTATO */}
      <Pad id="contato" style={{ background: "var(--bg2)", borderTop: "1px solid var(--border)" }}>
        <div style={{ maxWidth: 680, margin: "0 auto", textAlign: "center" }}>
          <p className="tag" style={{ justifyContent: "center", marginBottom: 14 }}>💬 Vamos conversar</p>
          <h2 className="syne" style={{ fontWeight: 800, fontSize: "clamp(1.8rem,4vw,2.8rem)", color: "var(--text)", letterSpacing: "-.03em", lineHeight: 1.08, marginBottom: 10 }}>
            Pronto para <span className="tg">iluminar</span><br />sua marca?
          </h2>
          <p style={{ color: "var(--muted)", fontSize: 14, marginBottom: 36 }}>Resposta em até 24 horas.</p>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: "center" }}>
            <button className="btn-g" style={{ padding: "15px 40px", fontSize: 15, width: "100%", maxWidth: 360, justifyContent: "center" }} onClick={() => setSimOpen(true)}>
              ✨ Simular meu projeto
            </button>
            {/* ⚠️ Substitua pelo número real */}
            <a
  href="https://wa.me/5531933008785"
  target="_blank"
  rel="noreferrer"
>
  <button
    className="btn-o"
    style={{
      padding: "13px 26px",
      fontSize: 13
    }}
  >
    💬 Falar no Whatsapp
  </button>
</a>
            {/* ⚠️ Substitua pelo email real */}
            <p style={{ fontSize: 12, color: "rgba(240,237,232,.18)", marginTop: 4 }}>contato@lumusfilms.com.br</p>
          </div>
        </div>
      </Pad>

      {/* FOOTER */}
      <div style={{ borderTop: "1px solid var(--border)", padding: "32px 5%", display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "center", gap: 16, background: "var(--bg2)" }}>
        <img src="/assets/logo-site.png" alt="Lumus Films" style={{ height: 34, width: "auto", filter: "brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(0deg)" }} />
        <p style={{ fontSize: 12, color: "rgba(240,237,232,.15)" }}>© 2025 Lumus Films · Sete Lagoas, MG</p>
        <div style={{ display: "flex", gap: 8 }}>
          {/* ⚠️ Substitua os links reais */}
          <a
  className="lf-fab"
  style={{ background: "linear-gradient(135deg,#E1306C,#C13584)" }}
  href="https://instagram.com/lumusfilms"
>
  <img
    src="/assets/insta.png"
    alt="Insta"
    style={{ width: "22px", height: "22px" }}
  />
</a>
         <a
  className="lf-fab"
  style={{ background: "linear-gradient(135deg,#25D366,#128C7E)" }}
  href="https://wa.me/5531933008785"
>
  <img
    src="/assets/wpp.png"
    alt="wpp"
    style={{ width: "22px", height: "22px" }}
  />
</a>
        </div>
      </div>

      {/* BOTÕES FLUTUANTES */}
      <div style={{ position: "fixed", bottom: 22, right: 18, display: "flex", flexDirection: "column", gap: 9, zIndex: 99 }}>
        <a
  className="lf-fab"
  style={{
    background: "transparent",
    boxShadow: "none"
  }}
  href="https://instagram.com/lumusfilms"
>
  <img
    src="/assets/insta.png"
    alt="Instagram"
    style={{
      width: "35px",
      height: "35px"
    }}
  />
</a>
        <a
  className="lf-fab"
  href="https://wa.me/5531933008785"
>
  <img
    src="/assets/wpp.png"
    alt="WhatsApp"
    style={{ width: "28px", height: "28px" }}
  />
</a>
      </div>

      {/* SIMULADOR */}
      {simOpen && <Simulador onClose={() => setSimOpen(false)} />}
    </>
  );
}
