// Ofok — navbar, hero carousel, footer

function OfokNavbar({ t, lang, onToggleLang, onNav }) {
  const [open, setOpen] = React.useState(false);
  const links = [
    { key: "home", target: "top" },
    { key: "projects", target: "flow" },
    { key: "about", target: "about" },
    { key: "contact", target: "submit" },
  ];
  const go = (target) => {
    setOpen(false);
    onNav(target);
  };
  return (
    <header className="ofk-nav">
      <div className="ofk-nav-inner">
        <a
          className="ofk-brand"
          href="#"
          onClick={(e) => {
            e.preventDefault();
            go("top");
          }}
        >
          <img className="ofk-brand-logo" src="assets/alofok-mark-gold.png" alt=""></img>
          <span className="ofk-brand-text">
            <span className="ofk-brand-name">{t.brand}</span>
            <span className="ofk-brand-sub">{t.brandSub}</span>
          </span>
        </a>
        <nav className={"ofk-nav-links" + (open ? " is-open" : "")}>
          {links.map((l) => (
            <a
              key={l.key}
              href="#"
              onClick={(e) => {
                e.preventDefault();
                go(l.target);
              }}
            >
              {t.nav[l.key]}
            </a>
          ))}
        </nav>
        <div className="ofk-nav-actions">
          <a className="ofk-hotline" href="tel:19408" dir="ltr">
            {t.hotline}
          </a>
          <button className="ofk-lang" onClick={onToggleLang}>
            {t.langToggle}
          </button>
          <button
            className="ofk-burger"
            aria-label="Menu"
            onClick={() => setOpen(!open)}
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>
    </header>
  );
}

function OfokHero({ t, lang, autoplay, onCta }) {
  const slides = t.heroSlides;
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const n = slides.length;

  React.useEffect(() => {
    if (!autoplay || paused) return;
    const id = setInterval(() => setIdx((i) => (i + 1) % n), 6000);
    return () => clearInterval(id);
  }, [autoplay, paused, n]);

  const prev = () => setIdx((i) => (i - 1 + n) % n);
  const next = () => setIdx((i) => (i + 1) % n);

  return (
    <section
      className="ofk-hero"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      {slides.map((s, i) => (
        <div
          key={i}
          className={"ofk-slide" + (i === idx ? " is-active" : "")}
          aria-hidden={i !== idx}
        >
          <image-slot
            id={"hero-" + (i + 1)}
            class="ofk-slide-img"
            shape="rect"
            src={s.image || ""}
            placeholder={
              i === 0
                ? "Drop a New Cairo skyline / development photo"
                : "Drop a project photo for this slide"
            }
          ></image-slot>
          <div className="ofk-slide-shade"></div>
          <div className="ofk-slide-copy">
            <p className="ofk-kicker ofk-kicker-light">{t.heroKicker}</p>
            <h1 className="ofk-slide-title">{s.title}</h1>
            <p className="ofk-slide-body">{s.body}</p>
            <button className="ofk-btn ofk-btn-light" onClick={onCta}>
              {s.cta}
            </button>
          </div>
        </div>
      ))}
      <div className="ofk-hero-controls">
        <button className="ofk-hero-arrow" onClick={prev} aria-label="Previous">
          {lang === "ar" ? "›" : "‹"}
        </button>
        <div className="ofk-hero-dots">
          {slides.map((_, i) => (
            <button
              key={i}
              className={"ofk-dot" + (i === idx ? " is-active" : "")}
              onClick={() => setIdx(i)}
              aria-label={"Slide " + (i + 1)}
            ></button>
          ))}
        </div>
        <button className="ofk-hero-arrow" onClick={next} aria-label="Next">
          {lang === "ar" ? "‹" : "›"}
        </button>
      </div>
    </section>
  );
}

function OfokFooter({ t }) {
  return (
    <footer className="ofk-footer">
      <div className="ofk-footer-inner">
        <div className="ofk-footer-brand">
          <img className="ofk-footer-logo" src="assets/alofok-logo-white.png" alt="Alofok"></img>
          <div>
            <p className="ofk-footer-tag">{t.footerTag}</p>
          </div>
        </div>
        <div className="ofk-footer-meta">
          <p>{t.footerAddress}</p>
          <p dir="ltr">{t.hotline}</p>
        </div>
      </div>
      <div className="ofk-footer-rights">{t.footerRights}</div>
    </footer>
  );
}

Object.assign(window, { OfokNavbar, OfokHero, OfokFooter });