// Shared UI bits: header, footer, icons, console
const { useState, useEffect, useRef } = React;

function Icon({ name, size = 20 }) {
  const s = size;
  const stroke = "currentColor";
  const sw = 1.6;
  const common = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "monitor":
      return <svg {...common}><rect x="2" y="4" width="20" height="13" rx="2" /><path d="M8 21h8M12 17v4" /></svg>;
    case "shield":
      return <svg {...common}><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z" /><path d="M9 12l2 2 4-4" /></svg>;
    case "cloud":
      return <svg {...common}><path d="M7 18a5 5 0 010-10 6 6 0 0111-2 4 4 0 012 7.5" /><path d="M7 18h11" /></svg>;
    case "backup":
      return <svg {...common}><path d="M21 12a9 9 0 11-3-6.7" /><path d="M21 4v5h-5" /></svg>;
    case "strategy":
      return <svg {...common}><path d="M3 21V8l9-5 9 5v13" /><path d="M9 21v-7h6v7" /></svg>;
    case "compliance":
      return <svg {...common}><path d="M9 3h6l1 3h4v15H4V6h4l1-3z" /><path d="M9 14l2 2 4-4" /></svg>;
    case "phone":
      return <svg {...common}><path d="M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6 19.8 19.8 0 01-3.1-8.7A2 2 0 014 2h3a2 2 0 012 1.7c.1.9.3 1.8.6 2.6a2 2 0 01-.5 2.1L7.9 9.7a16 16 0 006 6l1.3-1.3a2 2 0 012.1-.5c.8.3 1.7.5 2.6.6a2 2 0 011.7 2.1z" /></svg>;
    case "arrow":
      return <svg {...common}><path d="M5 12h14M13 5l7 7-7 7" /></svg>;
    case "sun":
      return <svg {...common}><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></svg>;
    case "factory":
      return <svg {...common}><path d="M3 21V10l5 3V10l5 3V10l8 5v6z" /><path d="M9 21v-4M14 21v-4" /></svg>;
    case "stethoscope":
      return <svg {...common}><path d="M6 3v6a4 4 0 008 0V3" /><path d="M10 13v3a4 4 0 008 0v-2" /><circle cx="18" cy="11" r="2" /></svg>;
    case "scale":
      return <svg {...common}><path d="M12 3v18M5 7h14M7 7l-3 7a4 4 0 008 0L9 7M17 7l-3 7a4 4 0 008 0l-3-7" /></svg>;
    case "briefcase":
      return <svg {...common}><rect x="2" y="7" width="20" height="14" rx="2" /><path d="M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2" /></svg>;
    default:
      return null;
  }
}

function Brand() {
  return (
    <a href="index.html" className="brand">
      <span className="brand-mark">A</span>
      <span className="brand-name">AMAAC</span>
      <span className="brand-sep">/</span>
      <span className="brand-sub">TECH</span>
    </a>);

}

function LangToggle({ lang, setLang }) {
  return (
    <div className="lang-toggle" role="group" aria-label="language">
      <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
      <button className={lang === "es" ? "on" : ""} onClick={() => setLang("es")}>ES</button>
    </div>);

}

function Header({ lang, setLang, active = "home" }) {
  const t = window.I18N[lang];
  return (
    <header className="header">
      <div className="wrap header-inner">
        <Brand />
        <nav className="nav">
          <a href="index.html" className={active === "home" ? "active" : ""}>{t.nav.home}</a>
          <a href="services.html" className={active === "services" ? "active" : ""}>{t.nav.services}</a>
          <a href="industries.html" className={active === "industries" ? "active" : ""}>{t.nav.industries}</a>
          <a href="about.html" className={active === "about" ? "active" : ""}>{t.nav.about}</a>
          <a href="contact.html" className={active === "contact" ? "active" : ""}>{t.nav.contact}</a>
        </nav>
        <div className="header-actions">
          <LangToggle lang={lang} setLang={setLang} />
          <a href="tel:+17868815417" className="phone-pill">
            <span className="dot"></span>
            (786) 881-5417
          </a>
          <a href="contact.html" className="btn btn-primary">
            {t.nav.bookCall}
            <span className="arrow"><Icon name="arrow" size={14} /></span>
          </a>
        </div>
      </div>
    </header>);

}

function Footer({ lang }) {
  const t = window.I18N[lang];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <Brand />
            <p style={{ color: "var(--fg-2)", maxWidth: 280, marginTop: 16, fontSize: 14 }}>
              {t.footer.tagline}
            </p>
            <p style={{ color: "var(--fg-3)", marginTop: 18, fontFamily: "var(--font-mono)", fontSize: 12 }}>
              {t.footer.address}
            </p>
          </div>
          <div>
            <h5>{t.footer.services}</h5>
            <ul>
              <li><a href="services.html">Managed IT</a></li>
              <li><a href="services.html">Cybersecurity</a></li>
              <li><a href="services.html">Cloud & M365</a></li>
              <li><a href="services.html">Backup & DR</a></li>
              <li><a href="services.html">vCIO</a></li>
              <li><a href="services.html">Compliance</a></li>
            </ul>
          </div>
          <div>
            <h5>{t.footer.company}</h5>
            <ul>
              <li><a href="about.html">{t.nav.about}</a></li>
              <li><a href="industries.html">{t.nav.industries}</a></li>
              <li><a href="contact.html">{t.nav.contact}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t.footer.contact}</h5>
            <ul>
              <li><a href="tel:+17868815417">(786) 881-5417</a></li>
              <li><a href="mailto:hello@amaactechs.com">amaactechsolutions@gmail.com</a></li>
              <li><a href="contact.html">Miami, FL</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t.footer.rights}</span>
          <span>v1.0 · MIA</span>
        </div>
      </div>
    </footer>);

}

function Console({ lang }) {
  const t = window.I18N[lang];
  const lines = [
  { type: "cmd", text: "amaac status --all" },
  { type: "ok", key: "endpoints.monitored", val: "412 healthy · 0 critical" },
  { type: "ok", key: "edr.active", val: "412 / 412 endpoints" },
  { type: "ok", key: "patches.applied", val: "this week · 1,284" },
  { type: "ok", key: "tickets.open", val: "3 · avg 11m response" },
  { type: "ok", key: "backup.last", val: lang === "es" ? "hace 12 min · verificado" : "12 min ago · verified" },
  { type: "prompt" }];

  return (
    <div className="console-wrap">
      <div className="console-tag">{t.hero.consoleTag}</div>
      <div className="console">
        <div className="console-header">
          <div className="dots"><span></span><span></span><span></span></div>
          <div className="console-title">amaac@ops · ~/clients</div>
        </div>
        <div className="console-body">
          {lines.map((l, i) => {
            if (l.type === "cmd") {
              return <div key={i}><span className="dim">$ </span>{l.text}</div>;
            }
            if (l.type === "ok") {
              const dots = ".".repeat(Math.max(2, 30 - l.key.length));
              return (
                <div key={i}>
                  <span className="ok">✓ </span>
                  <span className="key">{l.key}</span>
                  <span className="dim"> {dots} </span>
                  <span className="val">{l.val}</span>
                </div>);

            }
            return <div key={i}><span className="dim">$ </span><span className="cursor"></span></div>;
          })}
        </div>
      </div>
    </div>);

}

function CTABand({ lang }) {
  const t = window.I18N[lang];
  return (
    <section className="section">
      <div className="wrap">
        <div className="cta-band">
          <div>
            <span className="eyebrow">FREE · 30 MIN</span>
            <h2 style={{ marginTop: 14 }}>{t.cta.title}</h2>
            <p>{t.cta.desc}</p>
          </div>
          <div className="cta-side">
            <a href="tel:+17868815417" className="cta-call">
              <div className="icon-bubble"><Icon name="phone" size={20} /></div>
              <div>
                <div className="num">{t.cta.phone}</div>
                <div className="sub">{t.cta.callLabel}</div>
              </div>
            </a>
            <a href="contact.html" className="btn btn-primary" style={{ justifyContent: "center", padding: "14px 20px" }}>
              {t.cta.btn} <Icon name="arrow" size={14} />
            </a>
          </div>
        </div>
      </div>
    </section>);

}

function useLang() {
  const [lang, setLangState] = useState(() => {
    try {return localStorage.getItem("amaac_lang") || "en";} catch (e) {return "en";}
  });
  const setLang = (v) => {
    setLangState(v);
    try {localStorage.setItem("amaac_lang", v);} catch (e) {}
    document.documentElement.lang = v;
  };
  useEffect(() => {document.documentElement.lang = lang;}, [lang]);
  return [lang, setLang];
}

Object.assign(window, { Icon, Brand, LangToggle, Header, Footer, Console, CTABand, useLang });