// Top bar + Nav + Hero

const TopBar = () => (
  <div style={{
    background: "transparent", color: "var(--paper)",
    fontFamily: "'Inter Tight', system-ui, sans-serif", fontSize: 12,
    letterSpacing: "0.02em", padding: "10px 0", borderBottom: "1px solid rgba(255,255,255,.12)",
    position: "relative", zIndex: 10,
  }}>
    <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
      <div style={{ display: "flex", gap: 24, opacity: .85 }}>
        <span>OAB/SC</span>
        <span style={{ opacity: .5 }}>—</span>
        <span>Atendimento: Seg–Sex, 9h às 18h</span>
      </div>
      <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
        <a href="#" style={{ color: "inherit", textDecoration: "none", opacity: .85 }}>contato@costaemeurer.adv.br</a>
        <span style={{ opacity: .3 }}>|</span>
        <a href="#" style={{ color: "var(--accent)", textDecoration: "none", fontWeight: 500 }}> 47 991121386</a>
      </div>
    </div>
  </div>
);

const Nav = ({ onNav }) => {
  const items = ["Escritório", "Áreas de atuação", "Sócios", "Blog Jurídico", "Contato"];
  return (
    <nav style={{
      position: "relative", zIndex: 10,
      background: "transparent",
      borderBottom: "1px solid rgba(255,255,255,.1)",
    }}>
      <div className="container" style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: "20px 0",
      }}>
        <a href="#" style={{ textDecoration: "none", display: "flex", alignItems: "center", flexShrink: 0 }}>
          <img src="./logo.png" alt="Costa & Meurer Advocacia" style={{ height: 72, width: "auto", display: "block" }} />
        </a>
        <div className="nav-items" style={{ display: "flex", gap: 32, alignItems: "center" }}>
          {items.map(it => (
            <a key={it} href="#" onClick={(e) => { e.preventDefault(); onNav && onNav(it); }}
              style={{
                fontFamily: "'Inter Tight', system-ui, sans-serif",
                fontSize: 13, color: "#ffffff", textDecoration: "none",
                letterSpacing: "0.04em", position: "relative", padding: "6px 0",
                textTransform: "uppercase", fontWeight: 400,
              }}
              onMouseEnter={e => e.currentTarget.style.color = "var(--accent)"}
              onMouseLeave={e => e.currentTarget.style.color = "#ffffff"}
            >{it}</a>
          ))}
          <Btn variant="gold" icon={false} style={{ padding: "10px 18px", fontSize: 12 }}>
            Agendar consulta
          </Btn>
        </div>
      </div>
    </nav>
  );
};

const HeroWrap = ({ children }) => (
  <div style={{ position: "relative", background: "var(--ink)", color: "var(--paper)", overflow: "hidden" }}>
    {/* Blurred office photo background — covers TopBar + Nav + Hero */}
    <div style={{
      position: "absolute", inset: 0, zIndex: 0,
      backgroundImage: "url('https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=2000&q=80')",
      backgroundSize: "cover", backgroundPosition: "center",
      filter: "blur(8px)",
      transform: "scale(1.06)",
    }} />
    <div style={{
      position: "absolute", inset: 0, zIndex: 1, pointerEvents: "none",
      background: "linear-gradient(100deg, rgba(26,39,68,.78) 0%, rgba(15,26,51,.55) 55%, rgba(26,39,68,.35) 100%)",
    }} />
    <div style={{
      position: "absolute", inset: 0, opacity: .05, pointerEvents: "none", zIndex: 2,
      backgroundImage: "radial-gradient(circle at 1px 1px, var(--paper) 1px, transparent 0)",
      backgroundSize: "40px 40px",
    }} />
    <div style={{ position: "relative", zIndex: 3 }}>{children}</div>
  </div>
);

const Hero = () => {
  return (
    <section style={{ position: "relative", paddingBottom: 0 }}>
      <div className="container" style={{ paddingTop: 80, paddingBottom: 120, position: "relative" }}>
        <div style={{ maxWidth: 720 }}>
          <Eyebrow style={{ color: "var(--accent)" }}>
            Direito do Servidor Público
          </Eyebrow>
          <h1 style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(56px, 7vw, 104px)",
            lineHeight: 1.05, letterSpacing: "-0.025em",
            fontWeight: 400, margin: "28px 0 0",
            textWrap: "balance", paddingBottom: 8,
          }}>
            A defesa de quem<br/>
            <span style={{ fontStyle: "italic", color: "var(--accent)" }}>serve ao público.</span>
          </h1>
          <p style={{
            fontFamily: "'Inter Tight', system-ui, sans-serif",
            fontSize: 17, lineHeight: 1.6, marginTop: 44, maxWidth: 520,
            color: "rgba(245,240,230,.75)", textWrap: "pretty",
          }}>
            Há mais de 18 anos, atuamos na defesa dos direitos de servidores
            públicos federais, estaduais e municipais — individualmente ou
            por meio de sindicatos.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 44 }}>
            <Btn variant="gold">Agendar consulta</Btn>
            <Btn variant="light">Conheça o escritório</Btn>
          </div>
        </div>

        {/* Bottom strip of credentials */}
        <div style={{
          marginTop: 120, paddingTop: 40, borderTop: "1px solid rgba(255,255,255,.12)",
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", columnGap: 56, rowGap: 0,
          alignItems: "start",
        }}>
          {[
            ["18 anos", "na defesa do servidor público"],
            ["1º Escritório", "dedicado exclusivamente a servidores do norte de SC"],
            ["2000+", "servidores representados"],
          ].map(([n, l]) => (
            <div key={n} style={{ display: "flex", flexDirection: "column", gap: 14, minHeight: 130 }}>
              <div style={{
                fontFamily: "var(--font-display)", fontSize: 40,
                lineHeight: 1.05, letterSpacing: "-0.02em",
              }}>{n}</div>
              <div style={{
                fontSize: 18, opacity: .85, lineHeight: 1.5,
                maxWidth: 280, textWrap: "pretty",
              }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { TopBar, Nav, Hero, HeroWrap });
