/* global React */
const { useState } = React;

/* ---------- Language switcher ---------- */
function LanguageSwitcher({ lang, setLang, langs }) {
  return (
    <div className="flex items-center gap-3">
      {langs.map((l) => (
        <button
          key={l.code}
          onClick={() => setLang(l.code)}
          className={"flag-btn " + (lang === l.code ? "active" : "")}
          title={l.label}
          aria-label={l.label}
        >
          <span className="mr-1">{l.flag}</span>
          <span style={{ fontSize: "0.62rem", letterSpacing: "0.08em", fontWeight: 600 }}>{l.label}</span>
        </button>
      ))}
    </div>
  );
}

/* ---------- Slim top bar ---------- */
function TopBar({ t, lang, setLang, langs }) {
  return (
    <div className="w-full" style={{ background: "var(--burgundy-dark)", color: "rgba(248,244,237,0.82)" }}>
      <div className="mx-auto flex items-center justify-between gap-4 px-6 lg:px-12" style={{ maxWidth: 1340, height: 38 }}>
        <p className="hidden md:block" style={{ fontSize: "0.66rem", letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 500 }}>
          {t.topCred}
        </p>
        <p className="md:hidden" style={{ fontSize: "0.6rem", letterSpacing: "0.1em", textTransform: "uppercase" }}>AICAT 403 · Col·legiats API</p>
        <LanguageSwitcher lang={lang} setLang={setLang} langs={langs} />
      </div>
    </div>
  );
}

/* ---------- Logo monogram ---------- */
function Logo({ compact }) {
  return (
    <a href="#top" className="flex flex-col items-center select-none" style={{ lineHeight: 1 }}>
      <span
        className="font-serif"
        style={{
          color: "var(--burgundy)",
          fontWeight: 600,
          fontSize: compact ? "1.9rem" : "2.4rem",
          letterSpacing: "0.02em",
          transition: "font-size 0.4s ease",
        }}
      >
        GB
      </span>
      <span
        className="font-serif"
        style={{
          color: "var(--charcoal)",
          textTransform: "uppercase",
          letterSpacing: "0.22em",
          fontSize: compact ? "0.5rem" : "0.58rem",
          marginTop: 4,
          fontWeight: 500,
          transition: "all 0.4s ease",
        }}
      >
        Grup GCB Immobiliaris · GironaCostaBrava
      </span>
    </a>
  );
}

/* ---------- Header (sticky) ---------- */
function Header({ t, lang, setLang, langs, scrolled, favCount, onOpenChat }) {
  const nav = t.nav;
  return (
    <header
      className="sticky top-0 z-40"
      style={{
        background: scrolled ? "rgba(248,244,237,0.92)" : "var(--cream)",
        backdropFilter: scrolled ? "saturate(180%) blur(12px)" : "none",
        borderBottom: "1px solid var(--line)",
        boxShadow: scrolled ? "0 8px 30px -20px rgba(42,42,42,0.4)" : "none",
        transition: "all 0.4s ease",
      }}
    >
      <div className="mx-auto px-6 lg:px-12" style={{ maxWidth: 1340 }}>
        <div className="flex flex-col items-center" style={{ paddingTop: scrolled ? 12 : 20, paddingBottom: scrolled ? 12 : 18, transition: "all 0.4s ease" }}>
          <Logo compact={scrolled} />
          <nav className="mt-4 hidden lg:flex items-center gap-7" style={{ marginTop: scrolled ? 12 : 18, transition: "margin 0.4s ease" }}>
            {nav.map((item, i) => (
              <a
                key={i}
                href="#"
                onClick={(e) => e.preventDefault()}
                className={"nav-link font-sans " + (i === 0 ? "is-active" : "")}
                style={{
                  fontSize: "0.72rem",
                  letterSpacing: "0.16em",
                  textTransform: "uppercase",
                  fontWeight: 500,
                  color: "var(--charcoal)",
                  display: "flex",
                  alignItems: "center",
                  gap: 6,
                }}
              >
                {item}
                {i === nav.length - 1 && (
                  <span
                    style={{
                      background: favCount ? "var(--burgundy)" : "transparent",
                      color: favCount ? "#fff" : "var(--burgundy)",
                      border: favCount ? "none" : "1px solid var(--line)",
                      borderRadius: 999,
                      minWidth: 18, height: 18,
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      fontSize: "0.6rem", fontWeight: 700, padding: "0 5px",
                    }}
                  >
                    {favCount}
                  </span>
                )}
              </a>
            ))}
          </nav>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { TopBar, Header, Logo, LanguageSwitcher });