/* global React, Icon, Reveal, Eyebrow, Pill, Section */
const { useState: useStateTop, useEffect: useEffectTop } = React;

const NAV_LINKS = [
  { href: "#sobre", label: "Sobre" },
  { href: "#servicos", label: "Serviços" },
  { href: "#diferenciais", label: "Diferenciais" },
  { href: "#cases", label: "Cases" },
  { href: "#processo", label: "Processo" },
  { href: "#contato", label: "Contato" },
];

function Navbar() {
  const [scrolled, setScrolled] = useStateTop(false);
  const [open, setOpen] = useStateTop(false);
  useEffectTop(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      transition: "all .5s var(--ease-smooth)",
      background: scrolled ? "rgba(245,242,236,.85)" : "transparent",
      backdropFilter: scrolled ? "blur(18px)" : "none",
      boxShadow: scrolled ? "var(--shadow-soft)" : "none",
    }}>
      <nav style={{ maxWidth: 1200, margin: "0 auto", padding: "0 clamp(24px,5vw,40px)", height: 80, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <a href="#inicio" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
          <img src="assets/vittalure-symbol.png" alt="Vittalure" style={{ height: 38, width: 38, objectFit: "contain" }} />
          <span style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 17, letterSpacing: ".18em", color: "var(--graphite)" }}>VITTALURE</span>
        </a>
        <ul style={{ display: "flex", gap: 28, listStyle: "none", margin: 0, padding: 0 }} className="vl-navlinks">
          {NAV_LINKS.map((l) => <li key={l.href}><NavLink {...l} /></li>)}
        </ul>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span className="vl-nav-cta"><Pill variant="accent" href="#contato">Falar com a Vittalure</Pill></span>
          <button aria-label="Menu" onClick={() => setOpen(!open)} className="vl-burger"
            style={{ display: "none", background: "none", border: "none", color: "var(--graphite)", cursor: "pointer", padding: 6 }}>
            <Icon name={open ? "x" : "menu"} size={22} />
          </button>
        </div>
      </nav>
      {open && (
        <div style={{ background: "rgba(245,242,236,.97)", backdropFilter: "blur(18px)", borderTop: "1px solid var(--line)" }}>
          <ul style={{ maxWidth: 1200, margin: "0 auto", padding: "22px clamp(24px,5vw,40px)", listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
            {NAV_LINKS.map((l) => (
              <li key={l.href}><a href={l.href} onClick={() => setOpen(false)} style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--graphite)", textDecoration: "none" }}>{l.label}</a></li>
            ))}
          </ul>
        </div>
      )}
    </header>
  );
}

function NavLink({ href, label }) {
  const [h, setH] = useStateTop(false);
  return (
    <a href={href} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
       style={{ position: "relative", fontFamily: "var(--font-sans)", fontSize: 14, color: h ? "var(--steel)" : "rgba(44,44,42,.8)", textDecoration: "none", transition: "color .3s", paddingBottom: 4 }}>
      {label}
      <span style={{ position: "absolute", left: 0, bottom: 0, height: 1, width: h ? "100%" : 0, background: "var(--steel)", transition: "width .3s var(--ease-smooth)" }} />
    </a>
  );
}

function Hero() {
  return (
    <section id="inicio" style={{ position: "relative", minHeight: "100vh", display: "flex", alignItems: "center", paddingTop: 112, paddingBottom: 80, overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, zIndex: -1 }}>
        <img src="assets/hero.jpg" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: .9 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, var(--champagne) 0%, rgba(245,242,236,.85) 42%, rgba(245,242,236,.3) 100%)" }} />
        <div className="vl-float" style={{ position: "absolute", bottom: -128, right: -128, width: 640, height: 640, borderRadius: "50%", background: "rgba(183,198,212,.4)", filter: "blur(80px)" }} />
      </div>
      <div className="vl-hero-grid" style={{ maxWidth: 1200, margin: "0 auto", padding: "0 clamp(24px,5vw,40px)", display: "grid", gridTemplateColumns: "repeat(12,1fr)", gap: 48, alignItems: "center", width: "100%" }}>
        <div className="vl-hero-copy" style={{ gridColumn: "span 7" }}>
          <Reveal><div style={{ marginBottom: 28 }}><Eyebrow withRule>Posicionamento · Branding · Social</Eyebrow></div></Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(2.6rem,5.5vw,5rem)", lineHeight: 1.04, letterSpacing: "-0.02em", color: "var(--graphite)", margin: 0, textWrap: "balance" }}>
              Presença digital com
              <em style={{ display: "block", fontStyle: "italic", fontWeight: 300, color: "var(--steel)" }}> beleza, estratégia </em>
              e autoridade.
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p className="vl-lead" style={{ maxWidth: 540, marginTop: 28 }}>
              A Vittalure une posicionamento, social media, branding e direção criativa para marcas que desejam crescer com sofisticação, clareza e percepção de alto valor.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 16, marginTop: 36 }}>
              <Pill variant="primary" icon="arrow-right" href="#contato">Quero posicionar minha marca</Pill>
              <Pill variant="outline" href="#servicos">Conhecer serviços</Pill>
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 24, marginTop: 44, fontSize: 11, letterSpacing: ".3em", textTransform: "uppercase", color: "var(--graphite-soft)" }}>
              <span>Estratégia</span><span style={{ height: 1, width: 24, background: "var(--line)" }} />
              <span>Identidade</span><span style={{ height: 1, width: 24, background: "var(--line)" }} />
              <span>Presença</span>
            </div>
          </Reveal>
        </div>
        <div className="vl-hero-art" style={{ gridColumn: "span 5", position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6,1fr)", gridAutoRows: "1fr", gap: 12, aspectRatio: "4/5" }}>
            <div style={{ gridColumn: "span 4", gridRow: "span 4", borderRadius: 24, overflow: "hidden", boxShadow: "var(--shadow-elegant)" }}>
              <img src="assets/collage-1.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /></div>
            <div style={{ gridColumn: "span 2", gridRow: "span 2", borderRadius: 16, overflow: "hidden", boxShadow: "var(--shadow-soft)" }}>
              <img src="assets/collage-3.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /></div>
            <div style={{ gridColumn: "span 2", gridRow: "span 2", borderRadius: 16, overflow: "hidden", boxShadow: "var(--shadow-soft)" }}>
              <img src="assets/collage-2.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /></div>
            <div style={{ gridColumn: "span 6", gridRow: "span 2", borderRadius: 16, overflow: "hidden", boxShadow: "var(--shadow-elegant)" }}>
              <img src="assets/collage-4.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /></div>
          </div>
          <div className="vl-hero-quote" style={{ position: "absolute", bottom: -32, left: -32, background: "rgba(250,248,244,.9)", backdropFilter: "blur(10px)", padding: 24, borderRadius: 16, boxShadow: "var(--shadow-soft)", border: "1px solid var(--line)", maxWidth: 256 }}>
            <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 19, color: "var(--graphite)", lineHeight: 1.3, margin: 0 }}>"Marcas memoráveis são construídas com intenção."</p>
            <p style={{ fontSize: 11, letterSpacing: ".3em", textTransform: "uppercase", color: "var(--graphite-soft)", marginTop: 12, marginBottom: 0 }}>— Vittalure</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function About() {
  const stats = [{ n: "+20", l: "Marcas posicionadas" }, { n: "2 anos", l: "De direção criativa" }, { n: "100%", l: "Atendimento dedicado" }];
  return (
    <Section id="sobre">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(12,1fr)", gap: 56, alignItems: "start" }} className="vl-about-grid">
        <Reveal className="vl-about-head" style={{ gridColumn: "span 4" }}>
          <Eyebrow>A agência</Eyebrow>
          <h2 className="vl-h1" style={{ marginTop: 24 }}>Estratégica, sofisticada e <em style={{ fontStyle: "italic", fontWeight: 300, color: "var(--steel)" }}>profundamente</em> visual.</h2>
        </Reveal>
        <Reveal delay={120} className="vl-about-body" style={{ gridColumn: "6 / span 7" }}>
          <p style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: "clamp(1.1rem,1.6vw,1.35rem)", lineHeight: 1.6, color: "var(--graphite)", margin: 0 }}>
            A Vittalure é uma agência digital dedicada a marcas que entendem o valor de uma presença construída com intenção. Atendemos clínicas, marcas pessoais, empresas de alto padrão e profissionais que desejam comunicar autoridade com sofisticação.
          </p>
          <p className="vl-body" style={{ marginTop: 22 }}>
            Não entregamos apenas posts bonitos. Construímos posicionamento, percepção de valor, consistência e desejo. Cada decisão estética nasce de uma estratégia, e cada estratégia é desenhada para amadurecer a marca em quem a encontra.
          </p>
          <div className="vl-stats-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 32, paddingTop: 40, marginTop: 40, borderTop: "1px solid var(--line)" }}>
            {stats.map((s) => (
              <div key={s.l}><div className="vl-stat">{s.n}</div><div className="vl-caption" style={{ marginTop: 10 }}>{s.l}</div></div>
            ))}
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

const SERVICES = [
  { icon: "sparkles", title: "Social Media Estratégico", desc: "Conteúdo que comunica posicionamento, gera desejo e constrói autoridade, não só engajamento." },
  { icon: "compass", title: "Posicionamento Digital", desc: "Clareza de quem você é, para quem fala e por que sua marca merece ser escolhida." },
  { icon: "palette", title: "Branding & Identidade", desc: "Identidade visual e verbal coerente, refinada e construída para durar." },
  { icon: "calendar", title: "Gestão de Conteúdo", desc: "Curadoria, planejamento e produção contínua com consistência editorial." },
  { icon: "camera", title: "Direção Criativa", desc: "Olhar editorial em cada peça, da fotografia ao movimento, da paleta ao texto." },
  { icon: "message-circle", title: "Consultoria Estratégica", desc: "Mentoria pontual para marcas que precisam de clareza antes de investir em execução." },
];

function ServiceCard({ icon, title, desc, delay }) {
  const [h, setH] = useStateTop(false);
  return (
    <Reveal delay={delay}>
      <article onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ padding: 36, borderRadius: 16, background: "var(--surface)", border: "1px solid var(--line)", height: "100%", boxSizing: "border-box",
          transform: h ? "translateY(-6px)" : "none", boxShadow: h ? "var(--shadow-elegant)" : "var(--shadow-soft)", transition: "all .5s var(--ease-smooth)" }}>
        <div style={{ width: 48, height: 48, borderRadius: 9999, background: h ? "var(--steel)" : "var(--slate-light)", color: h ? "#fff" : "var(--graphite)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 28, transition: "all .4s var(--ease-smooth)" }}>
          <Icon name={icon} size={20} />
        </div>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 23, color: "var(--graphite)", margin: "0 0 10px" }}>{title}</h3>
        <p className="vl-body-sm" style={{ margin: 0 }}>{desc}</p>
      </article>
    </Reveal>
  );
}

function Services() {
  return (
    <Section id="servicos" style={{ background: "var(--gradient-soft)" }}>
      <Reveal>
        <div style={{ maxWidth: 640, marginBottom: 72 }}>
          <Eyebrow>Serviços</Eyebrow>
          <h2 className="vl-display-2" style={{ marginTop: 24 }}>Um cuidado <em style={{ fontStyle: "italic", fontWeight: 300, color: "var(--steel)" }}>curado</em> para cada etapa da sua marca.</h2>
        </div>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }} className="vl-services-grid">
        {SERVICES.map((s, i) => <ServiceCard key={s.title} {...s} delay={i * 60} />)}
      </div>
    </Section>
  );
}

Object.assign(window, { Navbar, Hero, About, Services });