// Shared NavanExport components: <Nav>, <Footer>, <Placeholder>, <Reveal>, useReveal()

const { useEffect, useRef, useState } = React;

function ThemeToggle() {
  const [theme, setTheme] = useState(() => document.documentElement.getAttribute('data-theme') || 'light');
  const toggle = () => {
    const next = theme === 'light' ? 'dark' : 'light';
    document.documentElement.setAttribute('data-theme', next);
    try { localStorage.setItem('navan-theme', next); } catch (e) {}
    setTheme(next);
  };
  return (
    <button onClick={toggle} className="theme-toggle" aria-label={"Switch to " + (theme === 'light' ? 'dark' : 'light') + " mode"} title="Toggle theme">
      <span className="knob">{theme === 'light' ? '☀' : '☾'}</span>
    </button>
  );
}

function Nav({ active }) {
  const c = window.NAVAN_DATA.company;
  const links = [
    { href: "index.html",    label: "Home",     id: "home" },
    { href: "products.html", label: "Products", id: "products" },
    { href: "about.html",    label: "About",    id: "about" },
    { href: "contact.html",  label: "Contact",  id: "contact" }
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="index.html" className="nav-logo">
          <span className="mark">LOGO</span>
          <span>{c.short}</span>
        </a>
        <div className="nav-links">
          {links.map(l => (
            <a key={l.id} href={l.href} className={"nav-link " + (l.id === active ? "active" : "")}>
              {l.label}
            </a>
          ))}
          <ThemeToggle />
          <a href="contact.html" className="nav-cta">Request a quote →</a>
        </div>
        <div className="nav-mobile-controls">
          <ThemeToggle />
        </div>
      </div>
    </nav>
  );
}

function WhatsAppFAB() {
  const c = window.NAVAN_DATA.company;
  const [hovered, setHovered] = useState(false);
  return (
    <a
      href={"https://wa.me/" + c.phoneRaw}
      target="_blank"
      rel="noopener noreferrer"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      aria-label="Chat on WhatsApp"
      style={{
        position: "fixed",
        bottom: 28,
        right: 28,
        width: 56,
        height: 56,
        borderRadius: "50%",
        background: "#25D366",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        boxShadow: hovered ? "0 6px 28px rgba(37,211,102,0.45)" : "0 4px 16px rgba(0,0,0,0.2)",
        zIndex: 9999,
        transform: hovered ? "scale(1.12)" : "scale(1)",
        transition: "transform 0.2s ease, box-shadow 0.2s ease",
        textDecoration: "none"
      }}
    >
      <img src="media/icons/whatsapp.webp" alt="WhatsApp" width="30" height="30" style={{ objectFit: "contain" }} />
    </a>
  );
}

function Footer() {
  const c = window.NAVAN_DATA.company;
  return (
    <>
      <WhatsAppFAB />
      <footer className="footer">
        <div className="wrap">
          <div className="footer-grid">
            <div>
              <div className="nav-logo" style={{color: "#fff", marginBottom: 18}}>
                <span className="mark" style={{borderColor: "rgba(255,255,255,0.3)", color: "rgba(255,255,255,0.5)"}}>LOGO</span>
                <span style={{fontSize: 26}}>{c.short}</span>
              </div>
              <p style={{color: "rgba(255,255,255,0.7)", fontSize: 14, maxWidth: 360, lineHeight: 1.6}}>
                {c.legal} — an Indonesian commodity export company headquartered in {c.location}, sourcing and shipping raw materials to buyers worldwide.
              </p>
            </div>
            <div>
              <h4>Sitemap</h4>
              <a className="footer-link" href="index.html">Home</a>
              <a className="footer-link" href="products.html">Products</a>
              <a className="footer-link" href="about.html">About</a>
              <a className="footer-link" href="contact.html">Contact</a>
            </div>
            <div>
              <h4>Catalog</h4>
              {window.NAVAN_DATA.categories.map(cat => (
                <a key={cat.id} className="footer-link" href={"products.html#" + cat.id} style={cat.status === "coming-soon" ? {opacity: 0.5} : null}>
                  {cat.label}{cat.status === "coming-soon" ? " — soon" : ""}
                </a>
              ))}
            </div>
            <div>
              <h4>Contact</h4>
              <a className="footer-link" href={"tel:" + c.phoneRaw}>{c.contactName} · {c.phone}</a>
              <a className="footer-link" href={"tel:" + c.phone2Raw}>{c.contactName2} · {c.phone2}</a>
              <a className="footer-link" href={"mailto:" + c.email}>{c.email}</a>
              <p style={{color: "rgba(255,255,255,0.5)", fontSize: 13, marginTop: 14, lineHeight: 1.6}}>{c.address}</p>
            </div>
          </div>
          <div className="footer-bottom">
            <span>© {new Date().getFullYear()} {c.legal}</span>
            <span>Palembang · Indonesia · ID</span>
          </div>
        </div>
      </footer>
    </>
  );
}

function Placeholder({ label, ratio = "4 / 3", style, children }) {
  return (
    <div className="placeholder" style={{ aspectRatio: ratio, ...style }}>
      <span className="placeholder-corner"></span>
      <div className="placeholder-label">{label}</div>
      {children}
    </div>
  );
}

// IntersectionObserver-based reveal — adds .in to elements with .reveal once they enter viewport.
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    if (!('IntersectionObserver' in window)) {
      els.forEach(el => el.classList.add('in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// Reveal wrapper with optional staggered delay
function Reveal({ children, delay = 0, as: Tag = 'div', className = '', style, ...rest }) {
  return (
    <Tag
      className={"reveal " + className}
      style={{ "--reveal-delay": delay + "ms", ...style }}
      {...rest}
    >
      {children}
    </Tag>
  );
}

Object.assign(window, { Nav, Footer, Placeholder, Reveal, useReveal, ThemeToggle, WhatsAppFAB });