/* ============================================================
   chrome.jsx — Nav, Footer, primitive atoms
   ============================================================ */

const Container = ({ children, narrow, wide, className = "" }) => (
  <div className={"container" + (narrow ? " narrow" : "") + (wide ? " wide" : "") + (className ? " " + className : "")}>
    {children}
  </div>
);

const Eyebrow = ({ children, bare }) => (
  <span className={"eyebrow" + (bare ? " bare" : "")}>{children}</span>
);

const Section = ({ children, dark, band, tight, className = "", id }) => (
  <section id={id} className={"section" + (dark ? " dark" : "") + (band ? " band" : "") + (tight ? " tight" : "") + (className ? " " + className : "")}>
    {children}
  </section>
);

const Btn = ({ children, variant = "primary", onClick, href }) => {
  const cls = "btn" + (variant === "ghost" ? " ghost" : variant === "dark" ? " dark" : "");
  if (href) return <a className={cls} href={href} onClick={onClick}>{children}</a>;
  return <button type="button" className={cls} onClick={onClick}>{children}</button>;
};

const Icon = ({ name }) => <i data-lucide={name} />;

const Photo = ({ kind = "team", label }) => (
  <div className={"photo " + kind}>
    <div className="ph-grad" />
    <div className="ph-grain" />
    <div className="ph-accent" />
    {label ? <div className="ph-label">{label}</div> : null}
  </div>
);

/* Brand wordmark — used in nav + footer */
const Brand = ({ light }) => (
  <a className="brand" href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("vira:nav", { detail: "home" })); }}>
    <svg viewBox="0 0 64 64" className="mark" aria-hidden="true">
      <g fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="square">
        <path d="M10 12 L32 52 L54 12" />
        <path d="M22 12 L32 30" opacity="0.55" />
      </g>
    </svg>
    <span className="wm">
      <span className="wm-main">VIRA</span>
      <span className="wm-sub">Enterprise Service Solutions</span>
    </span>
  </a>
);

/* ============================================================
   NAV
   ============================================================ */
const NAV_ITEMS = [
  { id: "home" }, { id: "expertise" }, { id: "turquality" }, { id: "about" }, { id: "contact" },
];

function Nav({ route, setRoute, lang, setLang }) {
  const t = window.STR[lang].nav;
  return (
    <header className="nav">
      <Container>
        <div className="nav-row">
          <a className="brand" href="#" onClick={(e) => { e.preventDefault(); setRoute("home"); }}>
            <img className="mark-img" src="assets/vira-mark.png" alt="VIRA" />
            <span className="wm">
              <span className="wm-main">VIRA <span className="wm-svc">SERVICES</span></span>
              <span className="wm-sub">{lang === "en" ? "Enterprise Service Solutions" : "Kurumsal Servis Çözümleri"}</span>
            </span>
          </a>
          <nav className="nav-links">
            {NAV_ITEMS.map((item) => (
              <a key={item.id} href={"#" + item.id}
                 className={"nav-link" + (route === item.id ? " active" : "")}
                 onClick={(e) => { e.preventDefault(); setRoute(item.id); }}>
                {t[item.id]}
              </a>
            ))}
          </nav>
          <div className="nav-right">
            <button className="lang-btn" onClick={() => setLang(lang === "en" ? "tr" : "en")} title="Switch language">
              <svg viewBox="0 0 30 20" aria-hidden="true">
                <rect width="30" height="20" fill="#e30a17"/>
                <circle cx="11.5" cy="10" r="4.5" fill="#fff"/>
                <circle cx="13" cy="10" r="3.6" fill="#e30a17"/>
                <polygon fill="#fff" points="17.4,10 14.2,11.05 16.2,8.3 16.2,11.7 14.2,8.95"/>
              </svg>
              <span>{t.switchLang}</span>
            </button>
            <Btn variant="primary" onClick={() => setRoute("contact")}>
              <Icon name="message-circle" /> {t.askFree}
            </Btn>
          </div>
        </div>
      </Container>
    </header>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer({ lang, setRoute }) {
  const t = window.STR[lang].footer;
  const exp = lang === "en"
    ? ["Consultancy", "Training", "Project Management", "Process Improvement", "Asset & Inventory"]
    : ["Danışmanlık", "Eğitim", "Proje Yönetimi", "Süreç İyileştirme", "Envanter Yönetimi"];
  const co = lang === "en"
    ? ["About", "Turquality", "Privacy Policy", "Contact"]
    : ["Hakkımızda", "Turquality", "Gizlilik", "İletişim"];

  return (
    <footer className="footer">
      <Container>
        <div className="footer-grid">
          <div>
            <a className="brand" href="#" onClick={(e) => { e.preventDefault(); setRoute("home"); }} style={{ color: "#fff" }}>
              <img className="mark-img" src="assets/vira-mark.png" alt="VIRA" />
              <span className="wm">
                <span className="wm-main">VIRA <span className="wm-svc">SERVICES</span></span>
                <span className="wm-sub">{lang === "en" ? "Enterprise Service Solutions" : "Kurumsal Servis Çözümleri"}</span>
              </span>
            </a>
            <p className="nl">{lang === "en" ? "Subscribe for ITIL4 insights, project case studies and the rare announcement." : "ITIL4 içerikleri, proje vakaları ve seyrek duyurular için abone olun."}</p>
            <form className="footer-form" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder={lang === "en" ? "you@enterprise.com" : "siz@kurum.com"} />
              <button>{lang === "en" ? "Subscribe" : "Abone Ol"}</button>
            </form>
            <div className="footer-social">
              <a href="#" aria-label="LinkedIn">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.4v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.59 0 4.25 2.36 4.25 5.43v6.31zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/></svg>
              </a>
              <a href="#" aria-label="WhatsApp"><Icon name="message-circle" /></a>
              <a href="#" aria-label="Email"><Icon name="mail" /></a>
            </div>
          </div>
          <div>
            <h5>{t.col1}</h5>
            <ul>{exp.map((i) => <li key={i}><a href="#" onClick={(e) => { e.preventDefault(); setRoute("expertise"); }}>{i}</a></li>)}</ul>
          </div>
          <div>
            <h5>{t.col2}</h5>
            <ul>{co.map((i) => <li key={i}><a href="#" onClick={(e) => { e.preventDefault(); setRoute(i.toLowerCase().includes("about") || i.toLowerCase().includes("hakk") ? "about" : "contact"); }}>{i}</a></li>)}</ul>
          </div>
          <div>
            <h5>{t.col3}</h5>
            <ul>
              <li><a href="tel:+905326004972" style={{ display: "inline-flex", gap: 8, alignItems: "center" }}><Icon name="phone" /> +90 532 600 4972</a></li>
              <li><a href="mailto:contact@viraservices.com" style={{ display: "inline-flex", gap: 8, alignItems: "center" }}><Icon name="mail" /> contact@viraservices.com</a></li>
              <li style={{ display: "inline-flex", gap: 8, alignItems: "center", color: "var(--on-dark-2)" }}><Icon name="map-pin" /> İstanbul, Türkiye</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t.rights}</span>
          <span>{t.built}</span>
        </div>
      </Container>
    </footer>
  );
}

/* expose */
Object.assign(window, { Container, Eyebrow, Section, Btn, Icon, Photo, Brand, Nav, Footer });