// Shared layout: top nav + footer.
// Exposes <SiteNav active> and <SiteFooter />, plus useTweaks proxy that just calls global setTweak.

const { useState, useEffect, useRef } = React;

function YouTubeGlyph({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.546 15.568V8.432L15.818 12l-6.272 3.568z"/>
    </svg>
  );
}
function LinkedInGlyph({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.063 2.063 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
    </svg>
  );
}

const NAV_ITEMS = [
  { labelKey: "nav.home",      href: "index.html#top",  key: "home",
    children: [
      { labelKey: "nav.aboutUs", href: "about.html" },
    ],
  },
  { labelKey: "nav.services",  href: "services.html",   key: "services"  },
  { labelKey: "nav.courses",   href: "courses.html",    key: "courses"   },
  { labelKey: "nav.booksTemplates", href: "books-templates.html", key: "books-templates" },
  { labelKey: "nav.resources", href: "resources.html",  key: "resources",
    children: [
      { labelKey: "nav.freeDownloads", href: "free-downloads.html" },
      { labelKey: "nav.articles", href: "articles.html" },
      { labelKey: "nav.youtube",  href: SITE.ytChannel(), external: true },
    ],
  },
  { labelKey: "nav.pricing",   href: "enroll.html",     key: "pricing"   },
];

function LangSwitcher() {
  const cur = window.CURRENT_LANG || "en";
  const langs = window.SUPPORTED_LANGS || ["en"];
  return (
    <div className="lang-switch" role="group" aria-label={t("nav.language")}>
      {langs.map((lng, i) => (
        <React.Fragment key={lng}>
          {i > 0 && <span className="lang-switch-sep">/</span>}
          <button
            type="button"
            className={"lang-switch-btn" + (cur === lng ? " is-active" : "")}
            aria-pressed={cur === lng}
            onClick={() => window.setLang(lng)}>
            {lng.toUpperCase()}
          </button>
        </React.Fragment>
      ))}
    </div>
  );
}

function SiteNav({ active }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="index.html" className="brand">
          <img src="assets/logo-pmo.png" alt="PMO Simplified" className="brand-logo" />
        </a>
        <div className="nav-links">
          {NAV_ITEMS.map(item => item.children ? (
            <div key={item.key} className={"nav-item has-dropdown" + (active === item.key ? " is-active" : "")}>
              <a href={item.href} className={"nav-link" + (active === item.key ? " is-active" : "")}>
                {t(item.labelKey)}
                <i data-lucide="chevron-down" className="nav-chevron"></i>
              </a>
              <div className="nav-dropdown" role="menu">
                {item.children.map(c => (
                  <a key={c.labelKey}
                     href={c.href}
                     target={c.external ? "_blank" : undefined}
                     rel={c.external ? "noopener noreferrer" : undefined}
                     className="nav-dropdown-link"
                     role="menuitem">
                    {t(c.labelKey)}
                    {c.external && <i data-lucide="external-link" className="nav-dropdown-ext"></i>}
                  </a>
                ))}
              </div>
            </div>
          ) : (
            <a key={item.key}
               href={item.href}
               className={"nav-link" + (active === item.key ? " is-active" : "")}>
              {t(item.labelKey)}
            </a>
          ))}
        </div>
        <div className="nav-actions">
          <LangSwitcher />
          <a href="signin.html" className="btn btn--outline btn--sm">{t("nav.signIn")}</a>
          <a href="enroll.html" className="btn btn--primary btn--sm">{t("nav.enroll")}</a>
        </div>
      </div>
    </nav>
  );
}

function ContactForm({ id }) {
  const { useState, useEffect } = React;
  const [status, setStatus] = useState("");
  useEffect(() => {
    if (window.location.hash === "#" + (id || "contact")) {
      const el = document.getElementById(id || "contact");
      if (el) setTimeout(() => el.scrollIntoView({ behavior: "smooth" }), 200);
    }
  }, []);
  async function handleSubmit(e) {
    e.preventDefault();
    const f = e.target;
    setStatus("sending");
    try {
      const res = await fetch("contact.php", { method: "POST", body: new FormData(f) });
      const data = await res.json();
      if (data.ok) { setStatus("sent"); f.reset(); }
      else setStatus("error");
    } catch (err) {
      setStatus("error");
    }
  }
  return (
    <section id={id || "contact"} className="section contact-section">
      <div className="container">
        <div className="contact-card">
          <div className="contact-head">
            <span className="eyebrow">{t("contact.eyebrow")}</span>
            <h2>{t("contact.title")}</h2>
            <p>{t("contact.sub")}</p>
          </div>
          <form className="contact-form" onSubmit={handleSubmit}>
            <div className="contact-row">
              <label className="contact-field">
                <span>{t("contact.fName")}</span>
                <input name="name" type="text" required />
              </label>
              <label className="contact-field">
                <span>{t("contact.fEmail")}</span>
                <input name="email" type="email" required />
              </label>
            </div>
            <label className="contact-field">
              <span>{t("contact.fCompany")}</span>
              <input name="company" type="text" />
            </label>
            <input type="text" name="website" tabIndex="-1" autoComplete="off" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} aria-hidden="true" />
            <label className="contact-field">
              <span>{t("contact.fMessage")}</span>
              <textarea name="message" rows="5" required></textarea>
            </label>
            <button type="submit" className="btn btn--primary btn--lg" disabled={status === "sending"}>
              {status === "sending" ? t("contact.sending") : t("contact.submit")} <i data-lucide="send"></i>
            </button>
            {status === "sent" && <p className="contact-note">{t("contact.success")}</p>}
            {status === "error" && <p className="contact-note contact-note--err">{t("contact.error")}</p>}
          </form>
        </div>
      </div>
    </section>
  );
}

function SiteFooter() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-inner">
          <div className="footer-brand">
            <a href="index.html" className="brand">
              <img src="assets/logo-pmo.png" alt="PMO Simplified" className="brand-logo brand-logo--footer" />
            </a>
            <p>{t("footer.brandDesc")}</p>
          </div>
          <div className="footer-col">
            <h4>{t("footer.course")}</h4>
            <ul>
              <li><a href="courses.html">{t("footer.allModules")}</a></li>
              <li><a href="resources.html">{t("footer.resources")}</a></li>
              <li><a href="books-templates.html">{t("footer.booksTemplates")}</a></li>
              <li><a href="articles.html">{t("footer.articles")}</a></li>
              <li><a href="enroll.html">{t("footer.pricing")}</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>{t("footer.company")}</h4>
            <ul>
              <li><a href="about.html">{t("footer.about")}</a></li>
              <li><a href="services.html">{t("footer.services")}</a></li>
              <li><a href="index.html#faq">{t("footer.faq")}</a></li>
              <li><a href={SITE.ytChannel()} target="_blank" rel="noopener">{t("footer.youtube")}</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>{t("footer.account")}</h4>
            <ul>
              <li><a href="signin.html">{t("footer.signIn")}</a></li>
              <li><a href={SITE.GUMROAD_LIBRARY} target="_blank" rel="noopener noreferrer">{t("footer.learnerPortal")}</a></li>
              <li><a href="mailto:info@pmosimplified.com">{t("footer.contact")}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>{t("footer.copyright")}</div>
          <div className="footer-bottom-links">
            <a href="datenschutz.html">{t("footer.privacy")}</a>
            <a href="agb.html">{t("footer.terms")}</a>
            <a href="impressum.html">{t("footer.imprint")}</a>
          </div>
          <div className="footer-socials">
            <a className="footer-social" href={SITE.ytChannel()} target="_blank" rel="noopener noreferrer" aria-label="YouTube"><YouTubeGlyph size={16} /></a>
            <a className="footer-social" href="#" aria-label="LinkedIn"><LinkedInGlyph size={15} /></a>
            <a className="footer-social" href="mailto:info@pmosimplified.com" aria-label="Email"><i data-lucide="mail"></i></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// Re-render lucide icons on each render pass.
function useLucideIcons(deps) {
  useEffect(() => {
    if (window.lucide && window.lucide.createIcons) {
      window.lucide.createIcons();
    }
  }, deps);
}

// Apply tweak-driven body classes (theme + density)
function useTweakBodyClasses({ themeColor, density }) {
  useEffect(() => {
    const body = document.body;
    body.classList.remove("theme-graphite", "theme-emerald", "theme-gold");
    if (themeColor && themeColor !== "navy") body.classList.add(`theme-${themeColor}`);
    body.classList.toggle("density-compact", density === "compact");
  }, [themeColor, density]);
}

window.SiteNav = SiteNav;
window.SiteFooter = SiteFooter;
window.ContactForm = ContactForm;
window.useLucideIcons = useLucideIcons;
window.useTweakBodyClasses = useTweakBodyClasses;
window.YouTubeGlyph = YouTubeGlyph;
window.LinkedInGlyph = LinkedInGlyph;