/* eslint-disable */
// Eleven Ten — main site · final deck copy (navy)
// Home · About · Collaboration (+ audiences) · Projects (hidden) · Signals (+ articles) · Contact

const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;
const STAGING = !!window.STAGING; // set in components.jsx — reveals hidden sections on staging

// ============================================================
// DATA
// ============================================================
const AUD_LABEL = {
  brands: "Brands", talent: "Talent", destinations: "Destinations",
  investors: "Investors", "rights-holders": "Rights Holders",
};

const COLLAB = [
  { slug: "brands", t: "Brands",
    lead: "Build relevance where people actually spend their time.",
    body: "The strongest brands become part of culture, not just media plans. We create opportunities for brands to connect through places, experiences, talent, and communities.",
    offer: [
      { t: "Brand Partnerships", d: "Collaborations across our ventures and platforms." },
      { t: "Experiential Marketing", d: "Experiences people remember, not campaigns they scroll past." },
      { t: "Content & Storytelling", d: "Placing brands inside authentic moments and communities." },
      { t: "Strategic Collaborations", d: "Concepts developed with long-term partners." },
    ], cta: "Let's Talk" },
  { slug: "talent", t: "Talent",
    lead: "A career is bigger than competition.",
    body: "The strongest careers extend beyond performance. We represent talent through commercial partnerships, long-term strategy, and opportunities that grow with them.",
    offer: [
      { t: "Representation", d: "Commercial partnerships and career direction." },
      { t: "Brand Opportunities", d: "Connecting talent with brands that fit." },
      { t: "Original Projects", d: "Business, experiences, and intellectual property developed together." },
      { t: "Long-Term Strategy", d: "Planning for what comes after the next season." },
    ], cta: "Start the Conversation" },
  { slug: "destinations", t: "Destinations",
    lead: "Great venues deserve more than bookings.",
    body: "The best destinations become part of people's routines. We develop destinations through programming, commercial strategy, partnerships, and operational expertise.",
    offer: [
      { t: "Programming", d: "Events, leagues, coaching, and community activation." },
      { t: "Commercial Growth", d: "Partnerships, sponsorships, and new revenue streams." },
      { t: "Operations", d: "Day-to-day execution and long-term growth support." },
      { t: "Strategic Development", d: "Helping venues evolve into enduring businesses." },
    ], cta: "Explore Opportunities" },
  { slug: "investors", t: "Investors",
    lead: "Backing opportunities with long-term potential.",
    body: "The strongest businesses combine patient capital with active ownership. We create, invest in, and grow ventures built for long-term commercial value.",
    offer: [
      { t: "New Ventures", d: "Starting businesses from the ground up." },
      { t: "Growth Capital", d: "Supporting expansion across existing platforms." },
      { t: "Strategic Investments", d: "Co-investing alongside aligned partners." },
      { t: "Platform Development", d: "Long-term value through active ownership." },
    ], cta: "Connect With Us" },
  { slug: "rights-holders", t: "Rights Holders",
    lead: "Turn the rights you hold into businesses that grow.",
    body: "We help federations, leagues and owners build, package and protect the value of what they already own, unlocking long-term worth from rights, formats and IP.",
    offer: [
      { t: "Commercial Strategy", d: "Packaging and positioning rights for growth." },
      { t: "Format & IP Development", d: "Original, ownable concepts built to scale." },
      { t: "Broadcast & Distribution", d: "Getting rights in front of the right audiences." },
      { t: "Governance & Structure", d: "Foundations built to last beyond a season." },
    ], cta: "Start the Conversation" },
];
const collabBySlug = (s) => COLLAB.find(c => c.slug === s);

const PROJECTS = [
  {
    slug: "scbd-sport-district", title: "SCBD Sport District",
    cat: "Destination · Development", year: "2024–27", types: ["destination", "development"],
    audience: "destinations", span: "span-8", feat: true, img: "assets/photos/proj-scbd.webp",
    summary: "A 200,000 m² sport, wellness and lifestyle district in the heart of South Jakarta. A destination designed and operated to score eleven out of ten on opening day.",
    meta: [{ k: "Partner", v: "Sovereign developer" }, { k: "Type", v: "Destination · Development" }, { k: "Timeline", v: "2024–2027" }, { k: "Location", v: "Jakarta, Indonesia" }],
    lead: "We lead the sport and lifestyle programming for a landmark destination, from the masterplan brief to operating the venues that anchor it.",
    paras: [
      "Eleven Ten was brought in before a single line was drawn, to answer one question: how do you make a destination that fills itself, every day, for ten years? Our answer runs from the masterplan to match day. Six purpose-built courts, two indoor arenas, a flagship F&B promenade, and a year-round calendar engineered to keep them full.",
      "The work spans programming, commercial strategy and operations at once. That is the difference between a venue that hosts bookings and a destination people build their week around.",
    ],
    stats: [{ v: "200K", l: "Square metres" }, { v: "6", l: "Outdoor courts" }, { v: "2", l: "Indoor arenas" }, { v: "365", l: "Days programmed" }],
  },
  {
    slug: "eleven-ten-event", title: "The Eleven Ten Event",
    cat: "Original IP", year: "2025–", types: ["ip"], audience: "brands",
    span: "span-4", feat: true, img: "assets/photos/proj-event.webp",
    summary: "Our flagship event: a one-night celebration of the year's most over-the-line moments in sport, wellness, entertainment and culture.",
    meta: [{ k: "Format", v: "Annual flagship" }, { k: "Type", v: "Original IP" }, { k: "Edition", v: "Inaugural · 2025" }, { k: "Location", v: "Jakarta, Indonesia" }],
    lead: "An event we created, own and grow, built to become a fixture in the region's cultural calendar.",
    paras: [
      "The Eleven Ten Event scores the year: the people, performances and moments that broke the ten-out-of-ten ceiling. Created, programmed and owned end-to-end. Not a sponsorship we bought, but IP we built.",
      "The 2025 inaugural edition brought together 600 guests, nine award categories and a region-wide broadcast. Edition II opens for partners in 2026.",
    ],
    stats: [{ v: "600", l: "Guests, invite-only" }, { v: "9", l: "Award categories" }, { v: "3", l: "Broadcast partners" }, { v: "1", l: "Night, every year" }],
  },
  {
    slug: "national-league-rebrand", title: "National League Rebrand",
    cat: "Rights · Strategy", year: "2025", types: ["rights", "strategy"], audience: "rights-holders",
    span: "span-4", img: "assets/photos/proj-rebrand.webp",
    summary: "A full strategic and commercial reset for a national league, from competition format to brand and broadcast.",
    meta: [{ k: "Partner", v: "National federation" }, { k: "Type", v: "Rights · Strategy" }, { k: "Timeline", v: "2025" }, { k: "Location", v: "Southeast Asia" }],
    lead: "We rewrote the brief for a league that had outgrown its own structure.",
    paras: [
      "Beginning with a two-week diagnostic, we reframed everything from the competition format and calendar to the commercial model, brand and broadcast packaging. The goal was not a new logo. It was a league worth investing in.",
      "The result is a clearer product for fans, a more valuable proposition for partners, and a governance model built to last beyond any single season.",
    ],
    stats: [{ v: "1", l: "League, reframed" }, { v: "3x", l: "Commercial inventory" }, { v: "12", l: "Clubs aligned" }, { v: "10yr", l: "Operating horizon" }],
  },
  {
    slug: "padel-destination", title: "Padel Destination",
    cat: "Destination", year: "2025", types: ["destination"], audience: "destinations",
    span: "span-4", img: "assets/photos/work-2.webp",
    summary: "A flagship padel destination and development programme: designed, opened and operated by Eleven Ten.",
    meta: [{ k: "Model", v: "Owned & operated" }, { k: "Type", v: "Destination" }, { k: "Status", v: "Operating since 2025" }, { k: "Location", v: "Jakarta, Indonesia" }],
    lead: "We didn't consult on a padel venue. We built and run one.",
    paras: [
      "From court specification to coaching pathway to membership model, the padel destination is an end-to-end Eleven Ten operation. It proves a simple thesis: the best way to understand destinations is to operate them yourself.",
      "Today it runs at high utilisation seven days a week, with a junior development programme feeding the region's fastest-growing racquet sport.",
    ],
    stats: [{ v: "8", l: "Pro courts" }, { v: "7", l: "Days a week" }, { v: "1.2K", l: "Active members" }, { v: "90%", l: "Peak utilisation" }],
  },
  {
    slug: "regional-league-format", title: "Regional League Format",
    cat: "IP · Rights", year: "2024", types: ["ip", "rights"], audience: "rights-holders",
    span: "span-6", img: "assets/photos/proj-regional.webp",
    summary: "An original, ownable competition format designed to travel across markets, and built to be franchised.",
    meta: [{ k: "Type", v: "Original format" }, { k: "Discipline", v: "IP · Rights" }, { k: "Timeline", v: "2024–present" }, { k: "Reach", v: "Multi-market" }],
    lead: "A format we own, designed to be licensed and grown across the region.",
    paras: [
      "Rather than import a competition, we designed one: a fast, broadcast-native format built around the rhythms of regional audiences and the economics of regional clubs.",
      "It now operates as live IP, a platform Eleven Ten can package, license and scale, with the upside that comes from owning the format rather than renting the rights.",
    ],
    stats: [{ v: "1", l: "Original format" }, { v: "4", l: "Markets in play" }, { v: "40", l: "Match-nights / yr" }, { v: "100%", l: "Owned IP" }],
  },
  {
    slug: "brand-activation-series", title: "Brand Activation Series",
    cat: "Brand Partnership", year: "2026", types: ["brand"], audience: "brands",
    span: "span-6", img: "assets/photos/cta.webp",
    summary: "A season-long activation platform connecting a global brand to fans through our IP, talent and destinations.",
    meta: [{ k: "Partner", v: "Global brand" }, { k: "Type", v: "Brand Partnership" }, { k: "Timeline", v: "2026 season" }, { k: "Channels", v: "IP · Destinations · Talent" }],
    lead: "Partnership that feels like culture, not advertising.",
    paras: [
      "We built a single activation platform that lets a global brand show up across the whole ecosystem: inside our events, through our talent, and at our destinations. It shows up as a participant in the culture rather than an interruption to it.",
      "Measured on attention and affinity, not just impressions, the series turns brand spend into moments fans actually seek out.",
    ],
    stats: [{ v: "1", l: "Brand platform" }, { v: "6", l: "Activations / yr" }, { v: "3", l: "Ecosystem channels" }, { v: "8-fig", l: "Value delivered" }],
  },
  {
    slug: "national-training-centre", title: "National Training Centre",
    cat: "Destination · Development", year: "2023", types: ["destination", "development"], audience: "destinations",
    span: "span-12", img: "assets/photos/proj-training.webp",
    summary: "A high-performance training destination, from feasibility and design brief to the operating model that runs it.",
    meta: [{ k: "Partner", v: "National sporting body" }, { k: "Type", v: "Destination · Development" }, { k: "Delivered", v: "2023" }, { k: "Location", v: "Indonesia" }],
    lead: "The home of a generation of athletes: planned, specified and operationalised end-to-end.",
    paras: [
      "We led the work from pre-feasibility through to the operating model: performance spaces, sports science, recovery, accommodation and the day-to-day systems that keep a high-performance environment running.",
      "Delivered in 2023, it now anchors a national talent pathway: long-horizon infrastructure that compounds for decades.",
    ],
    stats: [{ v: "1", l: "National centre" }, { v: "8", l: "Sports housed" }, { v: "24/7", l: "Operations" }, { v: "2023", l: "Delivered" }],
  },
];
const projectBySlug = (s) => PROJECTS.find(p => p.slug === s);

// Two founders only (placeholders until real names/photos)
const TEAM = [
  { n: "Aldy Indartono", r: "Group CEO", img: "assets/photos/team-1.webp" },
  { n: "Gabriella Witdarmono", r: "CEO", img: "assets/photos/team-3.webp" },
];

// ---- Articles (Signals) ------------------------------------
const ARTICLES = [
  {
    slug: "the-next-great-market", cat: "Market", featured: true, date: "June 2026", read: "8 min read",
    img: "assets/photos/art-next-great-market.webp",
    t: "The next great market",
    tags: ["Market", "Region", "Growth"],
    ex: "The demographics, digital adoption and ambition reshaping sport, wellness and entertainment across the region.",
    lead: "The region is about to become the most exciting market in the world for sport, wellness and culture.",
    body: [
      "Three forces are converging at once: a young, digitally native population, fast-rising disposable income, and a generation of homegrown athletes who are becoming genuine cultural figures. Individually, each is interesting. Together, they reset what's possible.",
      "What's missing is infrastructure: physical, commercial and cultural. Destinations that fill themselves. Leagues worth investing in. IP that travels. Brands that show up as participants in the culture rather than interruptions to it.",
      "That gap is the whole point of Eleven Ten. We're not waiting for the market to mature; we're building the pieces that mature it, and partnering with the brands, owners and talent ready to move first.",
    ],
  },
  {
    slug: "the-athlete-is-the-channel", cat: "Community", date: "May 2026", read: "6 min read",
    img: "assets/photos/art-athlete-channel.webp",
    t: "The athlete is the channel",
    tags: ["Talent", "Media", "Community"],
    ex: "Why representation now means building media businesses, not just negotiating deals.",
    lead: "Representation used to mean negotiating deals. Now it means building businesses.",
    body: [
      "The most valuable athletes are no longer just performers. They're media companies with a following, a point of view, and a direct line to an audience that brands can't reach any other way.",
      "That changes the job. Our role isn't to broker a sponsorship and move on; it's to help talent build something that outlasts their playing career: content, products, communities and equity.",
      "Treat the athlete as the channel, and the commercial model flips: instead of renting attention, you're building an asset that compounds.",
    ],
  },
  {
    slug: "venues-as-everyday-destinations", cat: "Infrastructure", date: "May 2026", read: "5 min read",
    img: "assets/photos/art-venues.webp",
    t: "Venues as everyday destinations",
    tags: ["Destinations", "Infrastructure", "Community"],
    ex: "The shift from match-day assets to seven-day-a-week community destinations.",
    lead: "The best venues aren't match-day assets. They're seven-day-a-week destinations.",
    body: [
      "A stadium that lights up twelve times a year is a liability dressed up as a landmark. The economics only work when a venue becomes part of daily life: sport, food, retail, community and culture under one roof.",
      "Designing for that starts long before construction: programming, tenant mix, utilisation and operating model are the real architecture. Get them right and the building fills itself.",
      "It's why we operate the destinations we help design. The discipline of running a space teaches you things no feasibility study can.",
    ],
  },
  {
    slug: "sponsorship-that-feels-like-culture", cat: "Events", date: "April 2026", read: "4 min read",
    img: "assets/photos/art-sponsorship.webp",
    t: "Sponsorship that feels like culture",
    tags: ["Brands", "Events", "Commercial"],
    ex: "How the best brand partnerships are now indistinguishable from the content people seek out.",
    lead: "The best brand partnerships are indistinguishable from the content people seek out.",
    body: [
      "Audiences have never been better at ignoring advertising, and never more willing to lean into things they love. The gap between those two facts is where modern partnership lives.",
      "That means building platforms, not placements: brand presence woven through events, talent and destinations in ways people actually want to share.",
      "Measured on attention and affinity rather than impressions, this kind of partnership turns spend into something people seek out instead of skip.",
    ],
  },
  {
    slug: "owning-the-format", cat: "Market", date: "April 2026", read: "7 min read",
    img: "assets/photos/art-owning-format.webp",
    t: "Owning the format, not renting the rights",
    tags: ["IP", "Market", "Strategy"],
    ex: "The case for building original IP in a market still importing most of its sport.",
    lead: "There's a case for building original IP in a market still importing most of its sport.",
    body: [
      "Licensing someone else's competition is fast, but you're renting. The value, and the rules, belong to someone else.",
      "Owning a format is harder and slower, and far more valuable. You control the calendar, the economics and the story, and you build an asset you can package, license and grow.",
      "In a region still importing most of its sport, the opportunity to build ownable, exportable IP may be the single biggest prize on the table.",
    ],
  },
  {
    slug: "patient-capital", cat: "Infrastructure", date: "March 2026", read: "5 min read",
    img: "assets/photos/art-patient-capital.webp",
    t: "Patient capital, compounding returns",
    tags: ["Investment", "Infrastructure", "Strategy"],
    ex: "Why sport and wellness infrastructure rewards owners who think in decades, not exits.",
    lead: "Sport and wellness infrastructure rewards owners who think in decades, not exits.",
    body: [
      "Destinations, academies, leagues and IP don't pay off on a two-year horizon. They compound, slowly at first, then meaningfully.",
      "That's a feature, not a bug. It keeps out tourists and rewards operators willing to stay through the unglamorous middle.",
      "We structure for that: aligned, operator-led ventures where the people building the thing have skin in the long-term outcome.",
    ],
  },
];
const articleBySlug = (s) => ARTICLES.find(a => a.slug === s);

// ---- shared cards ------------------------------------------
function WorkCard({ p, onOpen, span }) {
  return (
    <a className={"work-card " + (span || p.span)} href={"/projects/" + p.slug}
       onClick={(e) => { e.preventDefault(); onOpen(p.slug); }}>
      <div className="work-img photo">
        <div className="img" style={{ backgroundImage: "url(" + p.img + ")" }}></div>
        <div className="ph">{p.title}</div>
      </div>
      <div className="work-meta"><div className="ttl">{p.title}</div><div className="cat">{p.cat} · {p.year}</div></div>
    </a>
  );
}
function ArticleCard({ a, onPath }) {
  return (
    <a className="insight-card" href={"/insights/" + a.slug}
       onClick={(e) => { e.preventDefault(); onPath("/insights/" + a.slug); }}>
      <div className="thumb"><div className="im" style={{ backgroundImage: "url(" + a.img + ")" }}></div></div>
      <div className="cat">{a.cat}</div>
      <div className="t">{a.t}</div>
      <div className="ex">{a.ex}</div>
      <div className="meta">{a.date} · {a.read}</div>
    </a>
  );
}

// ---- "Everything is connected" diagram ----------------------
function DiagramSVG({ cls, w, h, lf, cf }) {
  const mx = Math.round(w * 0.12), my = Math.round(h * 0.2);
  const nodes = [
    { x: mx, y: my, l: "Sports", a: "start" },
    { x: w - mx, y: my, l: "Wellness", a: "end" },
    { x: mx, y: h - my, l: "Community", a: "start" },
    { x: w - mx, y: h - my, l: "Entertainment", a: "end" },
  ];
  const cx = w / 2, cy = h / 2, r = Math.round(Math.min(w, h) * 0.135);
  return (
    <svg className={cls} viewBox={"0 0 " + w + " " + h} preserveAspectRatio="xMidYMid meet" role="img" aria-label="Everything is connected">
      <g className="cd-lines">
        {nodes.map((n, i) => <line key={i} x1={cx} y1={cy} x2={n.x} y2={n.y} />)}
        <line x1={nodes[0].x} y1={nodes[0].y} x2={nodes[1].x} y2={nodes[1].y} />
        <line x1={nodes[1].x} y1={nodes[1].y} x2={nodes[3].x} y2={nodes[3].y} />
        <line x1={nodes[3].x} y1={nodes[3].y} x2={nodes[2].x} y2={nodes[2].y} />
        <line x1={nodes[2].x} y1={nodes[2].y} x2={nodes[0].x} y2={nodes[0].y} />
      </g>
      {nodes.map((n, i) => (
        <g key={i} className="cd-node">
          <circle cx={n.x} cy={n.y} r={Math.round(h * 0.015)} />
          <text x={n.x} y={n.y - Math.round(h * 0.038)} textAnchor={n.a} style={{ fontSize: lf }}>{n.l}</text>
        </g>
      ))}
      <g className="cd-core">
        <circle cx={cx} cy={cy} r={r} />
        <text x={cx} y={cy + cf * 0.34} textAnchor="middle" style={{ fontSize: cf }}>11/10</text>
      </g>
    </svg>
  );
}
function ConnectionsDiagram() {
  // wide layout fills the desktop column; square layout for mobile
  return (
    <>
      <DiagramSVG cls="connect-diagram cd-wide" w={900} h={520} lf={26} cf={42} />
      <DiagramSVG cls="connect-diagram cd-square" w={620} h={560} lf={27} cf={40} />
    </>
  );
}

// ============================================================
// HOME
// ============================================================
// ============================================================
// HOME — editorial (v9 design, now the primary homepage)
// ============================================================
// Intersection observer wrapper — toggles `.in` (fade-rise, eyebrow
// line-draw, image clip-reveal all keyed off `.in`).
function Obs9({ cls = "", children, style }) {
  const ref = useRefP(null);
  const [inv, setInv] = useStateP(false);
  useEffectP(() => {
    const el = ref.current;
    if (!el || !("IntersectionObserver" in window)) { setInv(true); return; }
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setInv(true); io.disconnect(); }
    }, { threshold: 0.16, rootMargin: "0px 0px -6% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <div ref={ref} className={cls + (inv ? " in" : "")} style={style}>{children}</div>;
}

// Hero slideshow — crossfade + slow Ken-Burns, autoplay (pauses on hover),
// dots + hover arrows. Reveal-clips into view. Reduced-motion safe.
// To revert to the single static image, set HERO_SLIDES to one entry (or
// swap the <HeroSlideshow/> back to the old <Obs9 cls="v9-img">… block).
const HERO_SLIDES = [
  "assets/photos/hero-2.webp",           // tennis, action
  "assets/photos/banner-run.webp",       // running
  "assets/photos/banner-wellness.webp",  // wellness
  "assets/photos/hero-3.webp",           // tennis, lifestyle
  "assets/photos/banner-community.webp", // community
];
function HeroSlideshow({ slides }) {
  const [i, setI] = useStateP(0);
  const [on, setOn] = useStateP(false);
  const ref = useRefP(null);
  const n = slides.length;

  // clip-reveal on scroll-in
  useEffectP(() => {
    const el = ref.current;
    if (!el || !("IntersectionObserver" in window)) { setOn(true); return; }
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setOn(true); io.disconnect(); } },
      { threshold: 0.16, rootMargin: "0px 0px -6% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // autoplay — always running
  useEffectP(() => {
    if (n < 2) return;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;
    const id = setInterval(() => setI(x => (x + 1) % n), 5000);
    return () => clearInterval(id);
  }, [n]);

  return (
    <div ref={ref} className={"hero-slides" + (on ? " in" : "")}>
      <div className="hs-stage">
        {slides.map((s, k) => (
          <div key={k} className={"hslide" + (k === i ? " on" : "")}
               style={{ backgroundImage: "url(" + s + ")" }} aria-hidden={k !== i}></div>
        ))}
      </div>
      {n > 1 && (
        <div className="hs-dots">
          {slides.map((_, k) => (
            <button key={k} className={"hs-dot" + (k === i ? " on" : "")} onClick={() => setI(k)} aria-label={"Go to image " + (k + 1)}></button>
          ))}
        </div>
      )}
    </div>
  );
}

function HomeV9Page({ onGo, onPath, fullBleedHero, videoHero }) {
  const rows = [
    { n: "01", t: "Venture Creation", d: "Starting and backing businesses with long-term ambition." },
    { n: "02", t: "Destinations", d: "Building places people choose to return to." },
    { n: "03", t: "IP Development", d: "Concepts, formats and experiences with lasting relevance." },
    { n: "04", t: "Strategic Partnerships", d: "Founders, operators, brands, investors and rights holders, aligned around opportunities worth pursuing together." },
  ];
  const signals = [
    { slug: "the-next-great-market", cat: "Market", date: "June 2026", t: "The next great market", img: "assets/photos/art-next-great-market.webp" },
    { slug: "the-athlete-is-the-channel", cat: "Community", date: "May 2026", t: "The athlete is the channel", img: "assets/photos/art-athlete-channel.webp" },
    { slug: "venues-as-everyday-destinations", cat: "Infrastructure", date: "May 2026", t: "Venues as everyday destinations", img: "assets/photos/art-venues.webp" },
    { slug: "owning-the-format", cat: "Market", date: "April 2026", t: "Owning the format, not renting the rights", img: "assets/photos/art-owning-format.webp" },
  ];

  return (
    <div className="v9 page-enter">
      {/* HERO */}
      <section className="v9-hero">
        <div className="wrap">
          <Obs9 cls="r9"><span className="eyebrow">Sports · Wellness · Entertainment · Community</span></Obs9>
          <Obs9 cls="r9"><h1 className="t1">Beyond the <span className="it">game.</span></h1></Obs9>
          <Obs9 cls="r9"><p className="b1 lead">Eleven Ten is an ecosystem building businesses, experiences and partnerships across sports, wellness, entertainment and community.</p></Obs9>
          <Obs9 cls="r9">
            <div className="hero-actions">
              <a className="a9" href="/collaboration" onClick={(e) => { e.preventDefault(); onGo("collab"); }}>Collaborate<span className="ar"></span></a>
              <span className="hero-meta">Jakarta · Singapore</span>
            </div>
          </Obs9>
        </div>
      </section>

      {/* FIGURE — hero banner. video (/v1b), full-bleed slideshow (home), or contained (/v1a) */}
      {videoHero ? (
        <section className="v9-figure v9-figure--bleed">
          <div className="hero-video-banner">
            <video autoPlay muted loop playsInline preload="auto" poster="assets/video/poster.webp">
              <source src="assets/video/hero.webm" type="video/webm" />
              <source src="assets/video/hero.mp4" type="video/mp4" />
            </video>
          </div>
        </section>
      ) : fullBleedHero ? (
        <section className="v9-figure v9-figure--bleed">
          <HeroSlideshow slides={HERO_SLIDES} />
        </section>
      ) : (
        <section className="v9-figure">
          <div className="wrap">
            <HeroSlideshow slides={HERO_SLIDES} />
          </div>
        </section>
      )}

      {/* MANIFESTO */}
      <section className="v9-manifesto">
        <div className="wrap">
          <div className="grid">
            <Obs9 cls="r9"><h2 className="t2">Everything is <span className="it">connected.</span></h2></Obs9>
            <Obs9 cls="r9">
              <div className="aside">
                <p className="b2">People don't move through life in separate categories. One experience naturally leads to the next.</p>
                <p className="b2">That's where our work begins: across the businesses, places and partnerships that hold it together, and outlast the final whistle.</p>
                <a className="a9" href="/about" onClick={(e) => { e.preventDefault(); onGo("about"); }}>Our story<span className="ar"></span></a>
              </div>
            </Obs9>
          </div>
        </div>
      </section>

      {/* PRACTICE */}
      <section className="v9-practice">
        <div className="wrap">
          <Obs9 cls="r9">
            <div className="head">
              <span className="eyebrow">Where we participate</span>
              <h2 className="t2">What we're building.</h2>
            </div>
          </Obs9>
          <Obs9 cls="r9-stagger">
            {rows.map(r => (
              <a key={r.n} className="v9-row" href="/collaboration" onClick={(e) => { e.preventDefault(); onGo("collab"); }}>
                <div className="n">{r.n}</div>
                <div className="rt">{r.t}</div>
                <div className="rd b2">{r.d}</div>
              </a>
            ))}
          </Obs9>
        </div>
      </section>

      {/* QUOTE */}
      <section className="v9-quote">
        <div className="wrap">
          <Obs9 cls="r9"><h2 className="t2">We build the moments, and the <span className="it">businesses</span> that outlast the final whistle.</h2></Obs9>
          <Obs9 cls="r9"><a className="a9" href="/projects" onClick={(e) => { e.preventDefault(); onPath("/projects"); }}>See the work<span className="ar"></span></a></Obs9>
        </div>
      </section>

      {/* SIGNALS — hidden on production, shown on staging */}
      {STAGING && (
      <section className="v9-signals">
        <div className="wrap">
          <Obs9 cls="r9"><div className="head"><span className="eyebrow">Insights</span></div></Obs9>
          <div className="v9-cards">
            {signals.map(s => (
              <a key={s.slug} className="v9-card" href={"/insights/" + s.slug} onClick={(e) => { e.preventDefault(); onPath("/insights/" + s.slug); }}>
                <Obs9 cls="v9-img"><div className="im" style={{ backgroundImage: "url(" + s.img + ")" }}></div></Obs9>
                <div className="cmeta">{s.cat} · {s.date}</div>
                <h3 className="t3">{s.t}</h3>
              </a>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* CTA */}
      <section className="v9-cta">
        <div className="wrap">
          <Obs9 cls="r9"><span className="eyebrow">Start a conversation</span></Obs9>
          <Obs9 cls="r9"><h2 className="t1">Let's build something that <span className="it">lasts.</span></h2></Obs9>
          <Obs9 cls="r9"><a className="a9" href="/contact" onClick={(e) => { e.preventDefault(); onGo("contact"); }}>Get in touch<span className="ar"></span></a></Obs9>
        </div>
      </section>

      <Footer onGo={onGo} />
    </div>
  );
}

// ============================================================
// CAREER — open roles with Department / Employment type / Location filters
// ============================================================
const JOBS = [
  { id: "j1", title: "Head of Partnerships", dept: "Commercial", type: "Full-time", loc: "Jakarta", blurb: "Build and lead relationships with brands, rights holders and investors across the ecosystem." },
  { id: "j2", title: "Venue Operations Manager", dept: "Operations", type: "Full-time", loc: "Jakarta", blurb: "Run day-to-day operations for our destinations, from experience to service standards." },
  { id: "j3", title: "Brand & Content Lead", dept: "Marketing", type: "Full-time", loc: "Singapore", blurb: "Own the 11/10 brand voice across campaigns, social and editorial." },
  { id: "j4", title: "Investment Associate", dept: "Ventures", type: "Full-time", loc: "Singapore", blurb: "Source, evaluate and support ventures we start and back." },
  { id: "j5", title: "Community Manager", dept: "Marketing", type: "Contract", loc: "Jakarta", blurb: "Grow and nurture the communities forming around our places and IP." },
  { id: "j6", title: "Product Designer", dept: "Technology", type: "Full-time", loc: "Remote", blurb: "Design digital products and experiences across the group." },
  { id: "j7", title: "Events Producer", dept: "Operations", type: "Contract", loc: "Jakarta", blurb: "Produce formats and live experiences end-to-end." },
  { id: "j8", title: "Finance Analyst", dept: "Ventures", type: "Full-time", loc: "Singapore", blurb: "Support planning, reporting and diligence across the portfolio." },
  { id: "j9", title: "Sport Science Intern", dept: "Operations", type: "Internship", loc: "Jakarta", blurb: "Support performance and wellness programming at our facilities." },
];

function Career({ onGo, onPath }) {
  const [dept, setDept] = useStateP("all");
  const [type, setType] = useStateP("all");
  const [loc, setLoc] = useStateP("all");

  const uniq = (k) => Array.from(new Set(JOBS.map(j => j[k]))).sort();
  const depts = uniq("dept"), types = uniq("type"), locs = uniq("loc");
  const list = JOBS.filter(j =>
    (dept === "all" || j.dept === dept) &&
    (type === "all" || j.type === type) &&
    (loc === "all" || j.loc === loc)
  );
  const reset = () => { setDept("all"); setType("all"); setLoc("all"); };
  const filtered = dept !== "all" || type !== "all" || loc !== "all";

  return (
    <div className="page-enter career-page">
      <header className="page-head">
        <h1 style={{ gridColumn: 2 }}>Build what lasts, <span className="script">with us.</span></h1>
        <p className="page-head-sub" style={{ gridColumn: 2 }}>
          We're a small team building businesses, places and partnerships across sports, wellness,
          entertainment and community. If that sounds like your kind of work, we'd love to meet you.
        </p>
      </header>

      <section className="section career-sec">
        <div className="career-filters">
          <div className="cf-field">
            <label>Department</label>
            <select value={dept} onChange={e => setDept(e.target.value)}>
              <option value="all">All departments</option>
              {depts.map(d => <option key={d} value={d}>{d}</option>)}
            </select>
          </div>
          <div className="cf-field">
            <label>Employment type</label>
            <select value={type} onChange={e => setType(e.target.value)}>
              <option value="all">All types</option>
              {types.map(t => <option key={t} value={t}>{t}</option>)}
            </select>
          </div>
          <div className="cf-field">
            <label>Location</label>
            <select value={loc} onChange={e => setLoc(e.target.value)}>
              <option value="all">All locations</option>
              {locs.map(l => <option key={l} value={l}>{l}</option>)}
            </select>
          </div>
          <div className="cf-count">
            {list.length} {list.length === 1 ? "role" : "roles"}
            {filtered && <button className="cf-clear" onClick={reset}>Clear ×</button>}
          </div>
        </div>

        {list.length ? (
          <ul className="job-list">
            {list.map(j => (
              <li key={j.id} className="job-row" onClick={() => onGo("contact")}>
                <div className="job-main">
                  <div className="job-title">{j.title}</div>
                  <p className="job-blurb">{j.blurb}</p>
                </div>
                <div className="job-meta">
                  <span className="job-tag">{j.dept}</span>
                  <span className="job-tag">{j.type}</span>
                  <span className="job-tag">{j.loc}</span>
                </div>
                <div className="job-cta"><span className="btn ghost sm">Apply<span className="arr"></span></span></div>
              </li>
            ))}
          </ul>
        ) : (
          <div className="job-empty">
            <p className="lede">No open roles match these filters right now.</p>
            <button className="btn ghost" onClick={reset}>Clear filters<span className="arr"></span></button>
          </div>
        )}

        <div className="career-open">
          <div className="label">Don't see your role?</div>
          <p className="lede">We're always keen to meet exceptional people. Introduce yourself and tell us where you'd fit.</p>
          <a className="btn" href="/contact" onClick={(e) => { e.preventDefault(); onGo("contact"); }}>Get in touch<span className="arr"></span></a>
        </div>
      </section>

      <Footer onGo={onGo} />
    </div>
  );
}

function Home({ onGo, onPath, onOpenCase }) {
  const building = [
    { ico: "commerce", t: "Venture Creation", d: "Starting and backing businesses with long-term ambition." },
    { ico: "facility", t: "Destinations", d: "Building places people choose to return to." },
    { ico: "brand",    t: "IP Development", d: "Concepts, formats, and experiences with lasting relevance." },
    { ico: "talent",   t: "Strategic Partnerships", d: "Founders, operators, brands, investors, and rights holders around opportunities worth pursuing together." },
  ];
  const signals = ARTICLES.slice(0, 3);

  return (
    <div className="page-enter">
      {/* Video banner — no text */}
      <section className="hero hero-video banner-only">
        <video className="vid" autoPlay muted loop playsInline preload="auto" poster="assets/video/poster.webp">
          <source src="assets/video/hero.webm" type="video/webm" />
          <source src="assets/video/hero.mp4" type="video/mp4" />
        </video>
        <div className="hero-overlay"></div>
        <div className="hero-cue"><span className="dot"></span>Scroll</div>
      </section>

      {/* Hero copy */}
      <section className="section hero-copy">
        <h1 className="display h-mega hero-tagline">Beyond the <span className="script">Game.</span></h1>
        <p className="hero-copy-sub">Competition brings people together. Everything around it is the reason they stay.</p>
      </section>

      {/* The Category */}
      <section className="section panel category-sec">
        <div className="category-body">
          <div className="category-text">
            <div className="label">The category</div>
            <h2 className="display h-lg">Everything is connected.</h2>
            <p className="lede">People don't move through life in separate categories. One experience naturally leads to the next. That's where our work begins.</p>
          </div>
          <ConnectionsDiagram />
        </div>
      </section>

      {/* What we're building */}
      <section className="section">
        <div className="section-head">
          <div className="label">Where we participate</div>
          <h2 className="display h-lg">What we're building.</h2>
        </div>
        <div className="eco-grid participation">
          {building.map((c, i) => (
            <div key={i} className="eco-card" onClick={() => onGo("collab")}>
              <Icon name={c.ico} />
              <div className="t">{c.t}</div>
              <div className="d">{c.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Signals */}
      <section className="section">
        <div className="section-head">
          <div className="label">Signals</div>
          <h2 className="display h-lg">Perspectives from the field.</h2>
        </div>
        <p className="lede" style={{ maxWidth: 720, marginBottom: 44 }}>Perspectives shaped by conversations, partnerships, and time spent in the field.</p>
        <div className="insight-grid">
          {signals.map(a => <ArticleCard key={a.slug} a={a} onPath={onPath} />)}
        </div>
        <div className="center-cta">
          <a className="btn ghost lg" href="/insights" onClick={(e) => { e.preventDefault(); onGo("insights"); }}>All insights<span className="arr"></span></a>
        </div>
      </section>

      <CTABand onGo={onGo} />
      <Footer onGo={onGo} />
    </div>
  );
}

// ============================================================
// ABOUT
// ============================================================
// ============================================================
// ABOUT — /about/v2 · alternate "dossier" layout
// Same editorial system as the homepage, different composition:
// asymmetric masthead, sticky chapter rail, hairline rows, portraits.
// ============================================================
function AboutV2({ onGo, onPath }) {
  const practice = [
    { n: "01", t: "Represent", d: "Partnering with talent to build commercial partnerships and careers that extend beyond competition." },
    { n: "02", t: "Develop", d: "Creating destinations, experiences, and ventures where the right people find each other." },
    { n: "03", t: "Connect", d: "Bringing together people, partnerships, and platforms that create lasting engagement." },
  ];

  return (
    <div className="v9 a2 page-enter">
      {/* MASTHEAD */}
      <section className="a2-head">
        <div className="wrap">
          <Obs9 cls="r9 r9-line"><span className="eyebrow">About · Eleven Ten</span></Obs9>
          <div className="grid">
            <Obs9 cls="r9">
              <h1 className="t1">Built around people, places &amp; the ideas that <span className="it">bring them together.</span></h1>
            </Obs9>
            <Obs9 cls="r9">
              <div className="side">
                <p className="b1">The opportunity was there. The people were here. The demand was growing. What was missing was a platform that could bring them together.</p>
                <div className="facts">
                  <div><span className="k">Studios</span><span className="v">Jakarta · Singapore</span></div>
                  <div><span className="k">Focus</span><span className="v">Sports · Wellness · Entertainment · Community</span></div>
                </div>
              </div>
            </Obs9>
          </div>
        </div>
      </section>

      {/* FIGURE */}
      <section className="a2-figure">
        <div className="bleed">
          <Obs9 cls="v9-img"><div className="im" style={{ backgroundImage: "url(assets/photos/about-banner.webp)" }}></div></Obs9>
        </div>
        <div className="cap"><span>The Eleven Ten world</span><span>Jakarta · Singapore</span></div>
      </section>

      {/* CHAPTER 01 — Origin */}
      <section className="a2-chapter">
        <div className="wrap">
          <div className="grid">
            <Obs9 cls="r9">
              <div className="a2-rail"><span className="n">01</span><div className="ttl">Origin</div></div>
            </Obs9>
            <Obs9 cls="r9">
              <div className="a2-body">
                <p className="lead-line">Built for more.</p>
                <p className="b2">11/10 was initiated to connect those pieces, starting with sports and building outward into everything that gives it lasting value: people, places, partnerships, and community.</p>
                <p className="b2">Competition brings people together. Everything around it is the reason they stay.</p>
              </div>
            </Obs9>
          </div>
        </div>
      </section>

      {/* CHAPTER 02 — Practice */}
      <section className="a2-chapter">
        <div className="wrap">
          <div className="grid">
            <Obs9 cls="r9">
              <div className="a2-rail"><span className="n">02</span><div className="ttl">What we do</div></div>
            </Obs9>
            <Obs9 cls="r9-stagger">
              <div className="a2-rows">
                {practice.map(p => (
                  <div className="a2-row" key={p.n}>
                    <div className="n">{p.n}</div>
                    <div className="rt">{p.t}</div>
                    <div className="rd b2">{p.d}</div>
                  </div>
                ))}
              </div>
            </Obs9>
          </div>
        </div>
      </section>

      {/* CHAPTER 03 — People */}
      <section className="a2-people">
        <div className="wrap">
          <Obs9 cls="r9 r9-line">
            <div className="head">
              <span className="eyebrow">03 · The people behind 11/10</span>
              <h2 className="t2">Different backgrounds. <span className="it">One direction.</span></h2>
              <p className="b1">The people behind 11/10 have developed brands, run clubs, structured deals, and operated inside some of the most competitive sports markets in the world. That experience is the foundation. What comes next is the point.</p>
            </div>
          </Obs9>
          <div className="a2-portraits">
            {TEAM.map(p => (
              <div className="a2-person" key={p.n}>
                <Obs9 cls="v9-img"><div className="im" style={{ backgroundImage: "url(" + p.img + ")" }}></div></Obs9>
                <div className="nm">{p.n}</div>
                <div className="rl">{p.r}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CHAPTER 04 — Horizon */}
      <section className="a2-vision">
        <div className="wrap">
          <Obs9 cls="r9 r9-line"><span className="eyebrow">04 · Where we're going</span></Obs9>
          <Obs9 cls="r9"><h2 className="t2">Indonesia is the starting point, not the <span className="it">ceiling.</span></h2></Obs9>
          <Obs9 cls="r9"><p className="b1">The ambition is regional: connecting what's already here and creating what doesn't yet exist, in markets built to last.</p></Obs9>
          <Obs9 cls="r9"><a className="a9" href="/contact" onClick={(e) => { e.preventDefault(); onGo("contact"); }}>Get in touch<span className="ar"></span></a></Obs9>
        </div>
      </section>

      <Footer onGo={onGo} />
    </div>
  );
}

// ============================================================
// /<page>/v2 — alternate layouts (same editorial system, new compositions)
// ============================================================
function P2Head({ eyebrow, title, lead, meta }) {
  return (
    <section className="p2-head">
      <div className="wrap">
        <Obs9 cls="r9 r9-line"><span className="eyebrow">{eyebrow}</span></Obs9>
        <div className="grid">
          <Obs9 cls="r9"><h1 className="t1">{title}</h1></Obs9>
          <Obs9 cls="r9">
            <div className="side">
              <p className="b1">{lead}</p>
              {meta ? <div className="meta">{meta}</div> : null}
            </div>
          </Obs9>
        </div>
      </div>
    </section>
  );
}

function P2Cta({ eyebrow, title, cta, onGo, to = "contact" }) {
  return (
    <section className="p2-cta">
      <div className="wrap">
        <Obs9 cls="r9 r9-line"><span className="eyebrow">{eyebrow}</span></Obs9>
        <Obs9 cls="r9"><h2 className="t2">{title}</h2></Obs9>
        <Obs9 cls="r9"><a className="a9" href="/contact" onClick={(e) => { e.preventDefault(); onGo(to); }}>{cta}<span className="ar"></span></a></Obs9>
      </div>
    </section>
  );
}

// ---- Collaboration /collaboration/v2 · large index rows ------
function CollaborationV2({ onGo, onPath }) {
  return (
    <div className="v9 p2 page-enter">
      <P2Head
        eyebrow="Collaboration"
        title={<>Every partnership starts somewhere <span className="it">different.</span></>}
        lead="Some arrive with a clear brief. Others with an instinct worth exploring. Either way, the starting point is a conversation about what long-term value looks like for both sides."
        meta={COLLAB.length + " ways to work together"}
      />
      <section className="wrap">
        <Obs9 cls="r9-stagger">
          <div className="p2-index">
            {COLLAB.map((c, i) => (
              <a key={c.slug} className="p2-irow" href={"/collaboration/" + c.slug}
                 onClick={(e) => { e.preventDefault(); onPath("/collaboration/" + c.slug); }}>
                <div className="n">{("0" + (i + 1)).slice(-2)}</div>
                <div className="ttl">{c.t}</div>
                <div className="desc b2">{c.lead}</div>
                <span className="arr"></span>
              </a>
            ))}
          </div>
        </Obs9>
      </section>
      <P2Cta eyebrow="Start a conversation" title={<>Tell us what you're <span className="it">building.</span></>} cta="Get in touch" onGo={onGo} />
      <Footer onGo={onGo} />
    </div>
  );
}

// ---- Projects /projects/v2 · alternating entries -------------
function ProjectsV2({ onGo, onPath, onOpenCase }) {
  return (
    <div className="v9 p2 page-enter">
      <P2Head
        eyebrow="Selected work"
        title={<>A growing <span className="it">portfolio.</span></>}
        lead="Ventures, partnerships, and original concepts. The work in motion across sports, wellness, entertainment and community."
        meta={PROJECTS.length + " projects"}
      />
      <section className="wrap">
        <div className="p2-works">
          {PROJECTS.map(p => (
            <a key={p.slug} className="p2-work" href={"/projects/" + p.slug}
               onClick={(e) => { e.preventDefault(); onOpenCase(p.slug); }}>
              <div className="p2-wimg">
                <Obs9 cls="v9-img"><div className="im" style={{ backgroundImage: "url(" + p.img + ")" }}></div></Obs9>
              </div>
              <Obs9 cls="r9">
                <div>
                  <div className="wmeta"><span className="yr">{p.year}</span><span>{p.cat}</span></div>
                  <div className="wt">{p.title}</div>
                  <p className="b2">{p.summary}</p>
                  <span className="a9">View project<span className="ar"></span></span>
                </div>
              </Obs9>
            </a>
          ))}
        </div>
      </section>
      <P2Cta eyebrow="Have something in mind?" title={<>Let's build the <span className="it">next one.</span></>} cta="Connect with us" onGo={onGo} />
      <Footer onGo={onGo} />
    </div>
  );
}

// ---- Signals /insights/v2 · featured + dated archive ---------
function InsightsV2({ onGo, onPath }) {
  const feat = ARTICLES.find(a => a.featured) || ARTICLES[0];
  const rest = ARTICLES.filter(a => a.slug !== feat.slug);
  return (
    <div className="v9 p2 page-enter">
      <P2Head
        eyebrow="Insights"
        title={<>Where the game is <span className="it">heading.</span></>}
        lead="Observations from the industries we're helping shape, drawn from conversations, partnerships, and time spent in the field."
        meta={ARTICLES.length + " pieces"}
      />
      <section className="wrap">
        <a className="p2-feature" href={"/insights/" + feat.slug} onClick={(e) => { e.preventDefault(); onPath("/insights/" + feat.slug); }}>
          <Obs9 cls="v9-img"><div className="im" style={{ backgroundImage: "url(" + feat.img + ")" }}></div></Obs9>
          <Obs9 cls="r9">
            <div>
              <div className="fmeta">{feat.cat} · Featured</div>
              <div className="ft">{feat.lead}</div>
              <p className="b2">{feat.body[0]}</p>
              <span className="a9" style={{ marginTop: 24 }}>Read<span className="ar"></span></span>
            </div>
          </Obs9>
        </a>

        <Obs9 cls="r9-stagger">
          <div className="p2-archive">
            {rest.map(a => (
              <a key={a.slug} className="p2-arow" href={"/insights/" + a.slug} onClick={(e) => { e.preventDefault(); onPath("/insights/" + a.slug); }}>
                <span className="dt">{a.date}</span>
                <span className="ct">{a.cat}</span>
                <span className="at">{a.lead}</span>
                <span className="rd">{a.read}</span>
              </a>
            ))}
          </div>
        </Obs9>
      </section>
      <P2Cta eyebrow="Start a conversation" title={<>Let's talk about what's <span className="it">next.</span></>} cta="Get in touch" onGo={onGo} />
      <Footer onGo={onGo} />
    </div>
  );
}

// ---- Career /career/v2 · sticky filter rail + role entries ---
function CareerV2({ onGo, onPath }) {
  const [dept, setDept] = useStateP("all");
  const [type, setType] = useStateP("all");
  const [loc, setLoc] = useStateP("all");
  const uniq = (k) => Array.from(new Set(JOBS.map(j => j[k]))).sort();
  const list = JOBS.filter(j =>
    (dept === "all" || j.dept === dept) && (type === "all" || j.type === type) && (loc === "all" || j.loc === loc));
  const filtered = dept !== "all" || type !== "all" || loc !== "all";
  const reset = () => { setDept("all"); setType("all"); setLoc("all"); };

  return (
    <div className="v9 p2 page-enter">
      <P2Head
        eyebrow="Career"
        title={<>Build what lasts, <span className="it">with us.</span></>}
        lead="We're a small team building businesses, places and partnerships across sports, wellness, entertainment and community. If that sounds like your kind of work, we'd love to meet you."
        meta="Jakarta · Singapore · Remote"
      />
      <section className="wrap">
        <div className="p2-career">
          <div className="p2-rail">
            <div className="cf-field"><label>Department</label>
              <select value={dept} onChange={e => setDept(e.target.value)}>
                <option value="all">All departments</option>{uniq("dept").map(d => <option key={d} value={d}>{d}</option>)}
              </select></div>
            <div className="cf-field"><label>Employment type</label>
              <select value={type} onChange={e => setType(e.target.value)}>
                <option value="all">All types</option>{uniq("type").map(t => <option key={t} value={t}>{t}</option>)}
              </select></div>
            <div className="cf-field"><label>Location</label>
              <select value={loc} onChange={e => setLoc(e.target.value)}>
                <option value="all">All locations</option>{uniq("loc").map(l => <option key={l} value={l}>{l}</option>)}
              </select></div>
            <div className="rcount">
              <span>{list.length} {list.length === 1 ? "role" : "roles"}</span>
              {filtered && <button className="cf-clear" onClick={reset}>Clear ×</button>}
            </div>
          </div>

          <div>
            {list.length ? (
              <div className="p2-jobs">
                {list.map(j => (
                  <div key={j.id} className="p2-job" onClick={() => onGo("contact")}>
                    <div className="jt">{j.title}</div>
                    <p className="b2">{j.blurb}</p>
                    <div className="jtags">
                      <span className="jtag">{j.dept}</span><span className="jtag">{j.type}</span><span className="jtag">{j.loc}</span>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div style={{ padding: "56px 0", textAlign: "center" }}>
                <p className="b1">No open roles match these filters right now.</p>
                <button className="cf-clear" style={{ marginTop: 16 }} onClick={reset}>Clear filters</button>
              </div>
            )}
          </div>
        </div>

        <div className="p2-open">
          <Obs9 cls="r9 r9-line"><span className="eyebrow">Don't see your role?</span></Obs9>
          <Obs9 cls="r9"><h3 className="t3">We're always keen to meet exceptional people.</h3></Obs9>
          <Obs9 cls="r9"><a className="a9" href="/contact" onClick={(e) => { e.preventDefault(); onGo("contact"); }}>Introduce yourself<span className="ar"></span></a></Obs9>
        </div>
      </section>
      <Footer onGo={onGo} />
    </div>
  );
}

// ---- Contact /contact/v2 · centred form + office strip -------
function ContactV2({ onGo }) {
  const [sent, setSent] = useStateP(false);
  const [f, setF] = useStateP({ name: "", email: "", org: "", iam: "", subject: "", message: "" });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const valid = f.name.trim() && /\S+@\S+\.\S+/.test(f.email) && f.message.trim();

  return (
    <div className="v9 p2 page-enter">
      <P2Head
        eyebrow="Contact"
        title={<>Start a <span className="it">conversation.</span></>}
        lead="We work with brands, investors, destinations, talent, and rights holders across the world. Every opportunity starts with a simple introduction. If there's a fit, we'll take it from there."
        meta="Jakarta · Singapore"
      />
      <section className="wrap">
        <div className="p2-form">
          {sent ? (
            <Obs9 cls="r9">
              <div style={{ textAlign: "center" }}>
                <h2 className="t2">Inquiry <span className="it">received.</span></h2>
                <p className="b1" style={{ margin: "20px auto 28px", maxWidth: 460 }}>Thank you for your interest in 11/10. We appreciate the opportunity to connect and will be in touch soon.</p>
                <a className="a9" href="/" onClick={(e) => { e.preventDefault(); onGo("home"); }}>Back home<span className="ar"></span></a>
              </div>
            </Obs9>
          ) : (
            <Obs9 cls="r9">
              <form className="inquiry" onSubmit={(e) => { e.preventDefault(); if (valid) setSent(true); }}>
                <div className="row2">
                  <div className="field"><label>Name</label><input value={f.name} onChange={e => set("name", e.target.value)} placeholder="Your name" /></div>
                  <div className="field"><label>Email</label><input type="email" value={f.email} onChange={e => set("email", e.target.value)} placeholder="you@organisation.com" /></div>
                </div>
                <div className="row2">
                  <div className="field"><label>Organization</label><input value={f.org} onChange={e => set("org", e.target.value)} placeholder="Company / club / fund" /></div>
                  <div className="field"><label>I am a</label>
                    <select value={f.iam} onChange={e => set("iam", e.target.value)}>
                      <option value="">Select…</option><option value="brand">Brand</option><option value="investor">Investor</option>
                      <option value="destination-owner">Destination owner</option><option value="talent">Talent</option>
                      <option value="right-holder">Right holder</option><option value="other">Other</option>
                    </select></div>
                </div>
                <div className="field"><label>Subject</label><input value={f.subject} onChange={e => set("subject", e.target.value)} placeholder="What's this about?" /></div>
                <div className="field"><label>Message</label><textarea maxLength={1000} value={f.message} onChange={e => set("message", e.target.value)} placeholder="Tell us what you're building…"></textarea><div className="char">{f.message.length}/1000</div></div>
                <button className="submit" type="submit" disabled={!valid}>Send<span className="arr"></span></button>
              </form>
            </Obs9>
          )}
        </div>

        <div className="p2-offices">
          <div><span className="k">Jakarta</span><div className="v">Gandaria 8 Office Tower, Lt. 32<br />Jl. Sultan Iskandar Muda No.8<br />Kebayoran Lama, Jakarta Selatan 12240</div></div>
          <div><span className="k">Singapore</span><div className="v">Prudential Tower<br />30 Cecil Street, #17-01 to 04<br />Singapore 049712</div></div>
          <div>
            <span className="k">Direct</span>
            <div className="v"><a href="tel:+62811861110">+62 811 86 1110</a><br /><a href="mailto:contact@eleventengroup.com">contact@eleventengroup.com</a></div>
            <div className="p2-socials"><a href="#">Instagram ↗</a><a href="#">LinkedIn ↗</a></div>
          </div>
        </div>
      </section>
      <Footer onGo={onGo} />
    </div>
  );
}

// ---- Article /insights/<slug>/v2 · feature spread ------------
function ArticleV2({ slug, onGo, onPath }) {
  const a = articleBySlug(slug);
  if (!a) {
    return (
      <div className="v9 p2 page-enter">
        <P2Head eyebrow="Insights" title={<>Signal <span className="it">not found.</span></>} lead="That piece isn't here. It may have moved or been renamed." />
        <section className="wrap" style={{ paddingBottom: 80 }}>
          <a className="a9" href="/insights" onClick={(e) => { e.preventDefault(); onGo("insights"); }}>All insights<span className="ar"></span></a>
        </section>
        <Footer onGo={onGo} />
      </div>
    );
  }
  const more = ARTICLES.filter(x => x.slug !== a.slug).slice(0, 4);
  const tagPath = (t) => "/insights/tag/" + encodeURIComponent(t);
  // split the body so a pull-quote can break the column
  const mid = Math.max(1, Math.ceil(a.body.length / 2));
  const first = a.body.slice(0, mid), rest = a.body.slice(mid);

  return (
    <div className="v9 p2 page-enter">
      {/* MASTHEAD */}
      <section className="ar2-head">
        <div className="wrap">
          <Obs9 cls="r9">
            <a className="ar2-back" href="/insights" onClick={(e) => { e.preventDefault(); onGo("insights"); }}>← Back to insights</a>
          </Obs9>
          <Obs9 cls="r9">
            <div className="ar2-kicker">
              <a className="cat" href={tagPath(a.cat)} onClick={(e) => { e.preventDefault(); onPath(tagPath(a.cat)); }}>{a.cat}</a>
              <span className="dot">·</span><span>{a.date}</span><span className="dot">·</span><span>{a.read}</span>
            </div>
          </Obs9>
          <Obs9 cls="r9"><h1 className="ar2-title">{a.t}</h1></Obs9>
          <Obs9 cls="r9"><p className="ar2-lead">{a.lead}</p></Obs9>
        </div>
      </section>

      {/* FIGURE */}
      <section className="ar2-figure">
        <Obs9 cls="v9-img"><div className="im" style={{ backgroundImage: "url(" + a.img + ")" }}></div></Obs9>
        <div className="cap"><span>{a.cat}</span><span>Eleven Ten · {a.date}</span></div>
      </section>

      {/* BODY + STICKY RAIL */}
      <section className="wrap">
        <div className="ar2-grid">
          <div className="ar2-rail">
            <div><span className="k">Category</span><span className="v">{a.cat}</span></div>
            <div><span className="k">Published</span><span className="v">{a.date}</span></div>
            <div><span className="k">Length</span><span className="v">{a.read}</span></div>
            {a.tags && (
              <div>
                <span className="k">Tags</span>
                <div className="chips">
                  {a.tags.map(t => (
                    <a className="chip" key={t} href={tagPath(t)} onClick={(e) => { e.preventDefault(); onPath(tagPath(t)); }}>{t}</a>
                  ))}
                </div>
              </div>
            )}
          </div>

          <Obs9 cls="r9">
            <article className="ar2-body">
              {first.map((p, i) => <p key={"a" + i}>{p}</p>)}
              {a.ex && <blockquote className="ar2-quote">{a.ex}</blockquote>}
              {rest.map((p, i) => <p key={"b" + i}>{p}</p>)}
              <div className="ar2-sign">Eleven Ten · {a.date}</div>
            </article>
          </Obs9>
        </div>
      </section>

      {/* MORE SIGNALS — archive rows */}
      <section className="wrap">
        <div className="ar2-more">
          <Obs9 cls="r9 r9-line"><span className="eyebrow">More insights</span></Obs9>
          <Obs9 cls="r9-stagger">
            <div className="p2-archive">
              {more.map(x => (
                <a key={x.slug} className="p2-arow" href={"/insights/" + x.slug} onClick={(e) => { e.preventDefault(); onPath("/insights/" + x.slug); }}>
                  <span className="dt">{x.date}</span>
                  <span className="ct">{x.cat}</span>
                  <span className="at">{x.lead}</span>
                  <span className="rd">{x.read}</span>
                </a>
              ))}
            </div>
          </Obs9>
        </div>
      </section>

      <P2Cta eyebrow="Start a conversation" title={<>Let's talk about what's <span className="it">next.</span></>} cta="Get in touch" onGo={onGo} />
      <Footer onGo={onGo} />
    </div>
  );
}

function About({ onGo }) {
  return (
    <div className="page-enter">
      <header className="page-head">
        <h1 style={{ gridColumn: 2 }}>Built around people, places &amp; the ideas that <span className="script">bring them together.</span></h1>
      </header>

      {/* Brand story */}
      <section className="section narrative">
        <h2 className="display h-md sec-title">Built for more.</h2>
        <div className="narrative-body">
          <p className="lead-para">The opportunity was there. The people were here. The demand was growing. What was missing was a platform that could bring them together.</p>
          <p>11/10 was initiated to connect those pieces, starting with sports and building outward into everything that gives it lasting value: people, places, partnerships, and community.</p>
        </div>
      </section>

      <div className="media-band" style={{ backgroundImage: "url(assets/photos/about-banner.webp)" }}></div>

      {/* What we do */}
      <section className="section narrative">
        <h2 className="display h-md sec-title">What we do</h2>
        <div className="belief-grid three">
          <div className="belief"><div className="bt">Represent</div><div className="bd">Partnering with talent to build commercial partnerships and careers that extend beyond competition.</div></div>
          <div className="belief"><div className="bt">Develop</div><div className="bd">Creating destinations, experiences, and ventures where the right people find each other.</div></div>
          <div className="belief"><div className="bt">Connect</div><div className="bd">Bringing together people, partnerships, and platforms that create lasting engagement.</div></div>
        </div>
      </section>

      {/* The people (2 founders) — text left, photos right */}
      <section className="section team">
        <div className="team-layout">
          <div className="team-text">
            <div className="label">The people behind 11/10</div>
            <h2 className="display h-lg">Different backgrounds. <span className="script">One direction.</span></h2>
            <p className="team-intro">The people behind 11/10 have developed brands, run clubs, structured deals, and operated inside some of the most competitive sports markets in the world. That experience is the foundation. What comes next is the point.</p>
          </div>
          <div className="founders">
            {TEAM.map(p => (
              <div className="founder-card" key={p.n}>
                <div className="founder-photo" style={{ backgroundImage: "url(" + p.img + ")" }}></div>
                <div className="name">{p.n}</div>
                <div className="role">{p.r}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Vision */}
      <section className="section narrative vision">
        <h2 className="display h-md sec-title">Where we're going</h2>
        <p className="vision-statement">Indonesia is the starting point, not the <span className="script">ceiling.</span></p>
        <p className="vision-sub">The ambition is regional: connecting what's already here and creating what doesn't yet exist, in markets built to last.</p>
      </section>

      <CTABand onGo={onGo} />
      <Footer onGo={onGo} />
    </div>
  );
}

// ============================================================
// COLLABORATION (overview)
// ============================================================
function Collaboration({ onGo, onPath }) {
  return (
    <div className="page-enter">
      <header className="page-head">
        <h1 style={{ gridColumn: "1 / -1" }}>Every partnership starts somewhere <span className="script">different.</span></h1>
      </header>

      <section className="section" style={{ paddingTop: 64 }}>
        <p className="lede" style={{ maxWidth: 780 }}>
          Some arrive with a clear brief. Others with an instinct worth exploring. Either way, the starting
          point is a conversation about what long-term value looks like for both sides.
        </p>
        <div className="collab-list" style={{ marginTop: 48 }}>
          {COLLAB.map((c, i) => (
            <a key={c.slug} className="collab-row" href={"/collaboration/" + c.slug}
               onClick={(e) => { e.preventDefault(); onPath("/collaboration/" + c.slug); }}>
              <div className="num">{("0" + (i + 1)).slice(-2)}</div>
              <div className="ttl">{c.t}</div>
              <div className="desc">{c.lead}</div>
              <Icon name="arrowUR" className="ico" />
            </a>
          ))}
        </div>
      </section>

      <CTABand onGo={onGo} />
      <Footer onGo={onGo} />
    </div>
  );
}

// ============================================================
// COLLABORATION AUDIENCE (/collaboration/<slug>)
// ============================================================
function CollaborationAudience({ aud, onGo, onPath, onOpenCase }) {
  const c = collabBySlug(aud);
  if (!c) return <Collaboration onGo={onGo} onPath={onPath} />;
  const related = PROJECTS.filter(p => p.audience === c.slug).slice(0, 3);

  return (
    <div className="page-enter">
      <header className="page-head">
        <a className="case-back" href="/collaboration" onClick={(e) => { e.preventDefault(); onGo("collab"); }}>← Collaboration</a>
        <div className="label">{c.t}</div>
        <h1>{c.lead}</h1>
      </header>

      <section className="section aud-intro">
        <p className="lede" style={{ maxWidth: 720 }}>{c.body}</p>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="offer-grid">
          {c.offer.map((o, i) => (
            <div className="offer" key={i}>
              <div className="on">{("0" + (i + 1)).slice(-2)}</div>
              <div className="ot">{o.t}</div>
              <div className="od">{o.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Related projects — hidden on production, shown on staging */}
      {STAGING && related.length > 0 && (
        <section className="section">
          <div className="section-head" style={{ marginBottom: 40 }}>
            <div className="label">Related projects</div>
            <h2 className="display h-md">Work for {c.t.toLowerCase()}.</h2>
          </div>
          <div className="work-grid" style={{ padding: 0 }}>
            {related.map(p => <WorkCard key={p.slug} p={p} span="span-4" onOpen={onOpenCase} />)}
          </div>
        </section>
      )}

      {/* audience-specific CTA */}
      <section className="section aud-cta">
        <div className="display h-md">Let's find the fit.</div>
        <a className="btn on-dark lg" href="/contact" onClick={(e) => { e.preventDefault(); onGo("contact"); }}>{c.cta}<span className="arr"></span></a>
      </section>

      <Footer onGo={onGo} />
    </div>
  );
}

// ============================================================
// PROJECTS (hidden from nav)
// ============================================================
function Projects({ onGo, onPath, onOpenCase }) {
  const [filter, setFilter] = useStateP("all");
  const filters = [
    { id: "all", l: "All" }, { id: "destination", l: "Destinations" }, { id: "ip", l: "IP & Events" },
    { id: "brand", l: "Brands" }, { id: "rights", l: "Rights" },
  ];
  const filtered = filter === "all" ? PROJECTS : PROJECTS.filter(p => p.types.includes(filter));

  return (
    <div className="page-enter">
      <header className="page-head">
        <h1 style={{ gridColumn: 2 }}>A growing <span className="script">portfolio.</span></h1>
        <p className="page-head-sub" style={{ gridColumn: 2 }}>Ventures, partnerships, and original concepts. The work in motion across sports, wellness, entertainment and community.</p>
      </header>

      <div className="work-filter">
        {filters.map(f => (<button key={f.id} data-active={filter === f.id} onClick={() => setFilter(f.id)}>{f.l}</button>))}
        <span className="count">{filtered.length} projects</span>
      </div>
      <div className="work-grid">
        {filtered.map(p => <WorkCard key={p.slug} p={p} onOpen={onOpenCase} />)}
      </div>

      <section className="section connect-band">
        <div>
          <div className="label">Have something in mind?</div>
          <h2 className="display h-md">Let's build the next one together.</h2>
        </div>
        <a className="btn on-dark lg" href="/contact" onClick={(e) => { e.preventDefault(); onGo("contact"); }}>Connect with us<span className="arr"></span></a>
      </section>

      <Footer onGo={onGo} />
    </div>
  );
}

// ============================================================
// CASE STUDY (/projects/<slug>)
// ============================================================
function CaseStudyPage({ slug, onGo, onPath, onOpenCase }) {
  const p = projectBySlug(slug);
  if (!p) {
    return (
      <div className="page-enter">
        <header className="page-head"><h1 style={{ gridColumn: 2 }}>No such project.</h1></header>
        <section className="section"><a className="btn" href="/projects" onClick={(e) => { e.preventDefault(); onPath("/projects"); }}>All projects<span className="arr"></span></a></section>
        <Footer onGo={onGo} />
      </div>
    );
  }
  const others = PROJECTS.filter(x => x.slug !== p.slug).slice(0, 3);
  const audLabel = AUD_LABEL[p.audience];

  return (
    <div className="page-enter case-page">
      <header className="case-top">
        <a className="case-back" href="/projects" onClick={(e) => { e.preventDefault(); onPath("/projects"); }}>← Projects</a>
        <div className="label">{p.cat} · {p.year}</div>
        <h1 className="display">{p.title}</h1>
        <div className="case-meta">
          {p.meta.map(m => (<div key={m.k}><div className="k">{m.k}</div><div className="v">{m.v}</div></div>))}
        </div>
      </header>

      <div className="case-hero-img" style={{ backgroundImage: "url(" + p.img + ")" }}></div>

      <section className="case-body">
        <div className="case-lead">{p.lead}</div>
        <div className="case-text">
          {p.paras.map((t, i) => <p key={i}>{t}</p>)}
          {audLabel && (
            <a className="audience-link" href={"/collaboration/" + p.audience}
               onClick={(e) => { e.preventDefault(); onPath("/collaboration/" + p.audience); }}>
              Collaborate with us for {audLabel}<span className="arr"></span>
            </a>
          )}
        </div>
      </section>

      <section className="section dark" style={{ paddingTop: 72, paddingBottom: 72 }}>
        <div className="label" style={{ marginBottom: 36 }}>By the numbers</div>
        <div className="stats">
          {p.stats.map(s => (<div className="stat" key={s.l}><div className="v">{s.v}</div><div className="l">{s.l}</div></div>))}
        </div>
      </section>

      <section className="section">
        <div className="section-head" style={{ marginBottom: 40 }}>
          <div className="label">More projects</div>
          <h2 className="display h-md" style={{ gridColumn: 2 }}>Next on the board.</h2>
        </div>
        <div className="work-grid" style={{ padding: 0 }}>
          {others.map(o => <WorkCard key={o.slug} p={o} span="span-4" onOpen={onOpenCase} />)}
        </div>
      </section>

      <CTABand onGo={onGo} />
      <Footer onGo={onGo} />
    </div>
  );
}

// ============================================================
// SIGNALS (Insights) — listing + tag filter
// ============================================================
function Insights({ onGo, onPath, tag }) {
  if (tag) {
    const norm = s => (s || "").toLowerCase();
    const matches = ARTICLES.filter(a => norm(a.cat) === norm(tag) || (a.tags || []).some(t => norm(t) === norm(tag)));
    return (
      <div className="page-enter">
        <header className="page-head">
          <h1 className="signals-shift" style={{ gridColumn: "1 / -1" }}>Tagged <span className="script">{tag}.</span></h1>
          <p className="page-head-sub signals-shift" style={{ gridColumn: "1 / -1" }}>
            {matches.length} {matches.length === 1 ? "insight" : "insights"} on {tag}.{" "}
            <a className="inline-clear" href="/insights" onClick={(e) => { e.preventDefault(); onGo("insights"); }}>Clear filter ×</a>
          </p>
        </header>
        <section className="section" style={{ paddingTop: 56 }}>
          {matches.length ? (
            <div className="insight-grid">{matches.map(a => <ArticleCard key={a.slug} a={a} onPath={onPath} />)}</div>
          ) : (<p className="lede">No insights tagged "{tag}" yet.</p>)}
        </section>
        <CTABand onGo={onGo} />
        <Footer onGo={onGo} />
      </div>
    );
  }

  const feat = ARTICLES.find(a => a.featured) || ARTICLES[0];
  const rest = ARTICLES.filter(a => a.slug !== feat.slug);

  return (
    <div className="page-enter">
      <header className="page-head">
        <h1 className="signals-shift" style={{ gridColumn: "1 / -1" }}><span className="script">Insights.</span></h1>
        <p className="page-head-sub signals-shift" style={{ gridColumn: "1 / -1" }}>Observations from the industries we're helping shape.</p>
      </header>

      <section className="section" style={{ paddingTop: 64 }}>
        {/* section heading — hidden on production, shown on staging */}
        {STAGING && (
          <div className="section-head" style={{ marginBottom: 40 }}>
            <h2 className="display h-md signals-shift" style={{ gridColumn: "1 / -1" }}>Where the game is heading.</h2>
          </div>
        )}

        <a className="insight-feature" href={"/insights/" + feat.slug}
           onClick={(e) => { e.preventDefault(); onPath("/insights/" + feat.slug); }}>
          <div className="img" style={{ backgroundImage: "url(" + feat.img + ")" }} data-label={feat.cat + " · Featured"}></div>
          <div className="txt">
            <div className="cat">{feat.cat} · Featured</div>
            <div className="t">{feat.lead}</div>
            <p className="ex">{feat.body[0]}</p>
            <div className="meta">{feat.date} · {feat.read} <span className="read-cue">Read<span className="arr"></span></span></div>
          </div>
        </a>

        {/* metric band — hidden for now (placeholder figures); flip to STAGING to preview */}
        {false && (
          <div className="metric-band">
            <div className="metric"><div className="v">270M</div><div className="l">People in our home market</div></div>
            <div className="metric"><div className="v">60%</div><div className="l">Under the age of 40</div></div>
            <div className="metric"><div className="v">2x</div><div className="l">Sports media growth, 5-year</div></div>
            <div className="metric"><div className="v">2045</div><div className="l">The horizon we're building to</div></div>
          </div>
        )}

        <div className="insight-grid" style={{ marginTop: 64 }}>
          {rest.map(a => <ArticleCard key={a.slug} a={a} onPath={onPath} />)}
        </div>
      </section>

      <CTABand onGo={onGo} />
      <Footer onGo={onGo} />
    </div>
  );
}

// ---- Single article ----------------------------------------
function ArticlePage({ slug, onGo, onPath }) {
  const a = articleBySlug(slug);
  if (!a) {
    return (
      <div className="page-enter">
        <header className="page-head"><h1 style={{ gridColumn: 2 }}>Signal not found.</h1></header>
        <section className="section"><a className="btn" href="/insights" onClick={(e) => { e.preventDefault(); onGo("insights"); }}>All insights<span className="arr"></span></a></section>
        <Footer onGo={onGo} />
      </div>
    );
  }
  const more = ARTICLES.filter(x => x.slug !== a.slug).slice(0, 3);

  return (
    <div className="page-enter article-page">
      <header className="article-top">
        <a className="case-back" href="/insights" onClick={(e) => { e.preventDefault(); onGo("insights"); }}>← Back to insights</a>
        <div className="article-tags">
          <a className="cat" href={"/insights/tag/" + encodeURIComponent(a.cat)} onClick={(e) => { e.preventDefault(); onPath("/insights/tag/" + encodeURIComponent(a.cat)); }}>{a.cat}</a>
          <span className="dot">·</span><span>{a.date}</span><span className="dot">·</span><span>{a.read}</span>
        </div>
        <h1 className="display">{a.t}</h1>
        <p className="article-lead">{a.lead}</p>
        {a.tags && (
          <div className="article-taglist">
            {a.tags.map(t => (
              <a className="tag-chip" key={t} href={"/insights/tag/" + encodeURIComponent(t)}
                 onClick={(e) => { e.preventDefault(); onPath("/insights/tag/" + encodeURIComponent(t)); }}>{t}</a>
            ))}
          </div>
        )}
      </header>

      <div className="article-hero" style={{ backgroundImage: "url(" + a.img + ")" }}></div>

      <article className="article-body">
        {a.body.map((p, i) => <p key={i}>{p}</p>)}
        <div className="article-sign">Eleven Ten · {a.date}</div>
      </article>

      <section className="section">
        <div className="section-head" style={{ marginBottom: 40 }}>
          <h2 className="display h-md" style={{ gridColumn: 2 }}>More insights.</h2>
        </div>
        <div className="insight-grid">
          {more.map(x => <ArticleCard key={x.slug} a={x} onPath={onPath} />)}
        </div>
      </section>

      <CTABand onGo={onGo} />
      <Footer onGo={onGo} />
    </div>
  );
}

// ============================================================
// CONTACT
// ============================================================
function Contact({ onGo }) {
  const [sent, setSent] = useStateP(false);
  const [f, setF] = useStateP({ name: "", email: "", org: "", iam: "", subject: "", message: "" });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const valid = f.name.trim() && /\S+@\S+\.\S+/.test(f.email) && f.message.trim();

  return (
    <div className="page-enter contact-page">
      <header className="page-head">
        <h1 style={{ gridColumn: 2 }}>Start a <span className="script">Conversation.</span></h1>
        <p className="page-head-sub" style={{ gridColumn: 2 }}>
          We work with brands, investors, destinations, talent, and rights holders across the world.
          Every opportunity starts with a simple introduction. If there's a fit, we'll take it from there.
        </p>
      </header>

      <div className="contact-grid">
        <div className="contact-info">
          <div className="office">
            <div className="label">Jakarta</div>
            <div className="addr">Gandaria 8 Office Tower, Lt. 32<br />Jl. Sultan Iskandar Muda No.8<br />Kebayoran Lama, Jakarta Selatan 12240</div>
          </div>
          <div className="office">
            <div className="label">Singapore</div>
            <div className="addr">Prudential Tower<br />30 Cecil Street, #17-01 to 04<br />Singapore 049712</div>
          </div>
          <div className="office">
            <div className="label">Direct</div>
            <div className="addr">
              <a href="tel:+62811861110">+62 811 86 1110</a><br />
              <a href="mailto:contact@eleventengroup.com">contact@eleventengroup.com</a>
            </div>
          </div>
          <div className="office">
            <div className="label">Follow</div>
            <div className="socials"><a href="#">Instagram</a><a href="#">LinkedIn</a></div>
          </div>
        </div>

        <div className="contact-form-wrap">
          {sent ? (
            <div className="inquiry-done">
              <div className="display h-md">Inquiry Received.</div>
              <p>Thank you for your interest in 11/10. We appreciate the opportunity to connect and will be in touch soon.</p>
              <a className="btn" href="/" onClick={(e) => { e.preventDefault(); onGo("home"); }}>Back home<span className="arr"></span></a>
            </div>
          ) : (
            <form className="inquiry" onSubmit={(e) => { e.preventDefault(); if (valid) setSent(true); }}>
              <div className="label" style={{ marginBottom: 8 }}>Inquire</div>
              <div className="row2">
                <div className="field"><label>Name</label><input value={f.name} onChange={e => set("name", e.target.value)} placeholder="Your name" /></div>
                <div className="field"><label>Email</label><input type="email" value={f.email} onChange={e => set("email", e.target.value)} placeholder="you@organisation.com" /></div>
              </div>
              <div className="row2">
                <div className="field"><label>Organization</label><input value={f.org} onChange={e => set("org", e.target.value)} placeholder="Company / club / fund" /></div>
                <div className="field">
                  <label>I am a</label>
                  <select value={f.iam} onChange={e => set("iam", e.target.value)}>
                    <option value="">Select…</option>
                    <option value="brand">Brand</option>
                    <option value="investor">Investor</option>
                    <option value="destination-owner">Destination owner</option>
                    <option value="talent">Talent</option>
                    <option value="right-holder">Right holder</option>
                    <option value="other">Other</option>
                  </select>
                </div>
              </div>
              <div className="field"><label>Subject</label><input value={f.subject} onChange={e => set("subject", e.target.value)} placeholder="What's this about?" /></div>
              <div className="field"><label>Message</label><textarea maxLength={1000} value={f.message} onChange={e => set("message", e.target.value)} placeholder="Tell us what you're building…"></textarea><div className="char">{f.message.length}/1000</div></div>
              <button className="submit" type="submit" disabled={!valid}>Send<span className="arr"></span></button>
            </form>
          )}
        </div>
      </div>

      <Footer onGo={onGo} />
    </div>
  );
}

Object.assign(window, { Home, HomeV9Page, Career, CareerV2, About, AboutV2,
  CollaborationV2, ProjectsV2, InsightsV2, ArticleV2, ContactV2, Collaboration, CollaborationAudience, Projects, CaseStudyPage, Insights, ArticlePage, Contact, PROJECTS, TEAM, COLLAB, ARTICLES, JOBS });
