/* eslint-disable */
// 11/10 — Eleven Ten · shared components

const { useState, useEffect, useRef } = React;

// ---- Icon set (line icons, currentColor) --------------------
function Icon({ name, className = "ico" }) {
  const p = {
    fill: "none", stroke: "currentColor", strokeWidth: 1.6,
    strokeLinecap: "round", strokeLinejoin: "round",
  };
  const paths = {
    // ecosystem / collaboration
    brand:   <><rect x="3" y="3" width="18" height="18" rx="3" {...p} /><path d="M8 12h8M12 8v8" {...p} /></>,
    talent:  <><circle cx="12" cy="7" r="3.2" {...p} /><path d="M5 21c0-3.9 3.1-7 7-7s7 3.1 7 7" {...p} /></>,
    facility:<><path d="M3 21V8l9-5 9 5v13" {...p} /><path d="M3 21h18M9 21v-6h6v6" {...p} /></>,
    investor:<><path d="M4 19h16M7 19v-7M12 19V8M17 19v-10" {...p} /><path d="M5 9l6-4 4 2 4-3" {...p} /></>,
    rights:  <><path d="M12 3l7 3v5c0 4.2-2.9 7.8-7 9-4.1-1.2-7-4.8-7-9V6l7-3z" {...p} /><path d="M9.5 12l1.8 1.8 3.4-3.6" {...p} /></>,
    // pillars
    event:   <><path d="M3 9h18M7 3v4M17 3v4" {...p} /><rect x="3" y="5" width="18" height="16" rx="2" {...p} /></>,
    academy: <><path d="M12 4l9 4-9 4-9-4 9-4z" {...p} /><path d="M5 10v5c0 1.7 3.1 3 7 3s7-1.3 7-3v-5" {...p} /></>,
    // misc
    consult: <><circle cx="11" cy="11" r="7" {...p} /><path d="M16 16l4 4" {...p} /></>,
    commerce:<><path d="M5 7h14l-1.2 10.5a2 2 0 01-2 1.5H8.2a2 2 0 01-2-1.5L5 7z" {...p} /><path d="M9 7a3 3 0 016 0" {...p} /></>,
    arrow:   <><path d="M5 12h14M13 6l6 6-6 6" {...p} /></>,
    arrowUR: <><path d="M7 17L17 7M9 7h8v8" {...p} /></>,
    pin:     <><path d="M12 21s7-5.5 7-11a7 7 0 10-14 0c0 5.5 7 11 7 11z" {...p} /><circle cx="12" cy="10" r="2.5" {...p} /></>,
    mail:    <><rect x="3" y="5" width="18" height="14" rx="2" {...p} /><path d="M4 7l8 6 8-6" {...p} /></>,
    chart:   <><path d="M4 4v16h16" {...p} /><path d="M8 14l3-3 3 2 4-5" {...p} /></>,
  };
  // Default 1em sizing so an icon without a CSS-sized class never balloons to its
  // intrinsic size. CSS rules (e.g. .ico { width: 34px }) still override these attrs.
  return <svg className={className} width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true">{paths[name] || null}</svg>;
}

// ---- Brand mark (image) -------------------------------------
function Mark({ variant = "slate", className = "mark" }) {
  const src = variant === "cream" ? "assets/brand/mono-cream.png" : "assets/brand/mono-slate.png";
  return <img className={className} src={src} alt="11/10" />;
}

// ---- Nav (6 sections, solid, becomes opaque on scroll) ------
// Staging flag: reveals the client-hidden sections. True on a staging URL
// (hostname contains "staging", or ?staging) and on the /v2 preview route
// (a copy of the homepage with the hidden sections shown). Production hidden.
const STAGING = (typeof location !== "undefined") &&
  (/staging/i.test(location.hostname) || /[?&]staging\b/i.test(location.search) ||
   /^\/v2(\/|$)/i.test(location.pathname));
window.STAGING = STAGING;

const PAGES = [
  { id: "home",     label: "Home",          path: "/" },
  { id: "about",    label: "About",         path: "/about" },
  { id: "collab",   label: "Collaboration", path: "/collaboration" },
  { id: "insights", label: "Insights",      path: "/insights" },
  // "career" is hidden on production, shown on staging (still routable either way).
  ...(STAGING ? [{ id: "career", label: "Career", path: "/career" }] : []),
  { id: "contact",  label: "Contact",       path: "/contact" },
].map((p, i) => ({ ...p, num: ("0" + (i + 1)).slice(-2) }));

// Map a logical id to its real URL path.
// "Projects" (formerly "Our Work") is hidden from the nav for now but still routable.
// "start" is consolidated into the Contact inquiry form. Case studies: /projects/<slug>.
function PATH(id) {
  if (id === "start" || id === "contact") return "/contact";
  if (id === "projects" || id === "work") return "/projects";
  const p = PAGES.find(x => x.id === id);
  return p ? p.path : "/";
}

function Nav({ page, onGo, variant }) {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; }, [open]);
  useEffect(() => { setOpen(false); }, [page]);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <nav className={"nav" + (variant === "transparent" ? " nav--transparent" : "") + (scrolled ? " scrolled" : "")}>
        <a className="nav-logo" href={PATH("home")} onClick={(e) => { e.preventDefault(); onGo("home"); }}>
          <Mark variant="slate" />
          <span className="tag">Eleven Ten</span>
        </a>
        <div className="nav-links">
          {PAGES.map(p => (
            <a key={p.id} className="nav-link" data-active={p.id === page}
               href={p.path} onClick={(e) => { e.preventDefault(); onGo(p.id); }}>
              {p.label}
            </a>
          ))}
        </div>
        <a className="nav-cta" href={PATH("contact")} onClick={(e) => { e.preventDefault(); onGo("contact"); }}>
          Get in touch
        </a>
        <button className={"nav-burger" + (open ? " open" : "")} onClick={() => setOpen(o => !o)} aria-label="Menu">
          <span></span><span></span><span></span>
        </button>
      </nav>

      <div className={"mobile-menu" + (open ? " open" : "")}>
        <div className="mm-meta">
          <span>Eleven Ten · Menu</span>
          <span>{("0" + PAGES.length).slice(-2)} sections</span>
        </div>
        <ul className="mm-list">
          {PAGES.map((p, i) => (
            <li key={p.id} style={{ animationDelay: open ? (i * 55 + 70) + "ms" : "0ms" }}>
              <a href={p.path} data-active={p.id === page}
                 onClick={(e) => { e.preventDefault(); onGo(p.id); }}>
                <span className="num">{p.num}</span>
                <span className="label">{p.label}</span>
                <span className="arr"><Icon name="arrowUR" className="" /></span>
              </a>
            </li>
          ))}
        </ul>
        <div className="mm-foot">
          <a className="mm-cta" href={PATH("contact")} onClick={(e) => { e.preventDefault(); onGo("contact"); }}>
            Get in touch <Icon name="arrow" className="" />
          </a>
          <div className="mm-addr">Jakarta · Singapore · contact@eleventengroup.com</div>
        </div>
      </div>
    </>
  );
}

// ---- Static brand strip (no scrolling marquee) --------------
function BrandStrip({ items, dark }) {
  return (
    <div className={"brandstrip" + (dark ? " dark" : "")}>
      {items.map((t, i) => <span className="item" key={i}>{t}</span>)}
    </div>
  );
}

// ---- CTA band -----------------------------------------------
function CTABand({ onGo }) {
  return (
    <section className="cta-band">
      <div className="display h-mega">The best is <span className="script">still ahead.</span></div>
      <p className="cta-sub-lead">We're just getting started.</p>
      <a className="btn on-dark lg" href={PATH("contact")} onClick={(e) => { e.preventDefault(); onGo("contact"); }}>
        Get in touch<span className="arr"></span>
      </a>
    </section>
  );
}

// ---- Footer --------------------------------------------------
function Footer({ onGo }) {
  return (
    <footer className="foot">
      <div className="foot-top">
        <div className="foot-brand">
          <Mark variant="cream" className="mark" />
          <p>Eleven Ten is an ecosystem building businesses, experiences and partnerships across sports, wellness, entertainment and community.</p>
          <img className="wm" src="assets/brand/wordmark-gold.png" alt="Eleven Ten" />
        </div>
        <div className="foot-col">
          <h5>Navigate</h5>
          <ul>
            {PAGES.map(p => <li key={p.id}><a href={p.path} onClick={(e) => { e.preventDefault(); onGo(p.id); }}>{p.label}</a></li>)}
          </ul>
        </div>
        <div className="foot-col">
          <h5>Studios</h5>
          <ul>
            <li>Jakarta, Indonesia</li>
            <li>Singapore</li>
          </ul>
          <h5 className="foot-sub">E-mail us</h5>
          <ul>
            <li><a href="mailto:contact@eleventengroup.com">contact@eleventengroup.com</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h5>Follow</h5>
          <ul>
            <li><a href="#">Instagram ↗</a></li>
            <li><a href="#">LinkedIn ↗</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <div>© 2026 Eleven Ten</div>
        <div>Sports · Wellness · Entertainment · Community</div>
        <div>Jakarta · Singapore</div>
      </div>
      {/* credit — placed under the footer line; blended into the background */}
      <div className="foot-credit">
        Proudly made with <span className="heart">♥</span> by{" "}
        <a href="https://omeoo.com" target="_blank" rel="noopener noreferrer">Omeoo Creative</a>{" "}
        and Powered by{" "}
        <a href="https://nautilyx.com" target="_blank" rel="noopener noreferrer">Nautilyx</a>{" "}
        — Where Creativity Meets Technology.
      </div>
    </footer>
  );
}

// ---- Floating WhatsApp button (right side) ------------------
// WhatsApp number (digits only, incl. country code) -> https://wa.me/<number>
const WHATSAPP_NUMBER = "62811861110";
function WhatsAppFab() {
  const href = WHATSAPP_NUMBER ? ("https://wa.me/" + WHATSAPP_NUMBER) : "https://wa.me/";
  return (
    <a className="wa-fab" href={href} target="_blank" rel="noopener noreferrer"
       aria-label="Chat with us on WhatsApp" title="Chat with us on WhatsApp">
      <svg className="wa-ico" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true" fill="currentColor">
        <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 1.67c2.2 0 4.27.86 5.83 2.42a8.2 8.2 0 0 1 2.42 5.82c0 4.54-3.7 8.24-8.25 8.24a8.2 8.2 0 0 1-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24zm-4.5 4.28c-.21 0-.55.08-.84.39s-1.1 1.08-1.1 2.62 1.13 3.04 1.29 3.25c.16.21 2.22 3.39 5.38 4.63.75.29 1.34.46 1.8.59.75.24 1.44.2 1.98.12.6-.09 1.85-.76 2.11-1.49.26-.73.26-1.36.18-1.49-.08-.13-.29-.21-.6-.37s-1.85-.91-2.14-1.02c-.29-.11-.5-.16-.71.16-.21.31-.81 1.02-1 1.23-.18.21-.37.24-.68.08-.31-.16-1.31-.48-2.5-1.54-.92-.82-1.55-1.84-1.73-2.15-.18-.31-.02-.48.14-.63.14-.14.31-.37.47-.55.16-.18.21-.31.31-.52.1-.21.05-.39-.03-.55-.08-.16-.71-1.71-.97-2.34-.26-.62-.52-.53-.71-.54l-.6-.01z"/>
      </svg>
      <span className="wa-label">Chat with us</span>
    </a>
  );
}

Object.assign(window, { Icon, Mark, Nav, BrandStrip, CTABand, Footer, WhatsAppFab, PAGES });