/* =============================================================
   LivingLab marketing — extracted components
   ============================================================= */

// ---- NAV ----
function Nav() {
  return (
    <nav className="ll-nav">
      <div className="ll-nav__brand">
        <img src="assets/logos/fbrc-icon.png" className="ll-nav__icon" alt="FBRC" />
        <span className="ll-nav__mono">FBRC.AI</span>
        <span className="ll-nav__slash">/</span>
        <span className="ll-nav__studio">LivingLab</span>
      </div>
      <ul className="ll-nav__menu">
        <li><a href="#products">Products</a></li>
        <li><a href="#journey">Journey</a></li>
        <li><a href="#network">Network</a></li>
        <li><a href="#manifesto">Manifesto</a></li>
      </ul>
      <div className="ll-nav__cta">
        <a href="#" className="ll-link">Investor memo</a>
        <a href="hans/index.html" className="ll-btn ll-btn--ink">Talk to Hans <i className="ph ph-arrow-up-right" /></a>
      </div>
    </nav>
  );
}

// ---- HERO MANIFESTO ----
function Manifesto() {
  return (
    <header className="ll-hero" id="manifesto">
      <div className="ll-eyebrow ll-hero__eyebrow">
        <span className="ll-eyebrow__square" />
        00 — FBRC.AI / LIVINGLAB · SINGAPORE
      </div>
      <h1 className="ll-hero__h1">
        <em>We are building</em><br/>
        <em>living story products</em><br/>
        to make the world<br/>
        a better place.
      </h1>
      <div className="ll-hero__lede">
        <p>
          LivingLab is FBRC's venture studio — the engine that designs, builds, and deploys
          the operating system for the experiential economy. We give creators the tools to turn
          a URL into an IRL activation in days, not quarters.
        </p>
        <p>
          We sharpen the sword of every David out there.
        </p>
      </div>
      <div className="ll-hero__ctas">
        <a href="hans/index.html" className="ll-btn ll-btn--ink ll-btn--lg">Talk to Hans <i className="ph ph-arrow-up-right" /></a>
        <a href="#products" className="ll-btn ll-btn--ghost ll-btn--lg">See the products</a>
      </div>
      <div className="ll-hero__strip">
        <span className="ll-mono">PLATFORM · OPERATOR · STUDIO · NETWORK</span>
      </div>
    </header>
  );
}

// ---- PILLARS ----
function Pillars() {
  const items = [
    ['01', 'Content is marketing.', 'Revenue lives in merch, events, licensing, sponsorships, and owned experiences.'],
    ['02', 'The analog renaissance is a correction.', 'Digital became too cheap, too fast, too forgettable. The pendulum swings.'],
    ['03', 'IRL is the trust accelerator.', 'One hour in a room together does more than a year of content.'],
    ['04', 'Operators make the best product people.', 'Our venues are our laboratory. Our tools get proven before they get sold.'],
  ];
  return (
    <section className="ll-section ll-pillars">
      <div className="ll-section__head">
        <div className="ll-eyebrow"><span className="ll-eyebrow__square" />01 — WHAT WE BELIEVE</div>
        <h2 className="ll-section__h2"><em>Convictions, not assumptions.</em></h2>
      </div>
      <ol className="ll-pillars__grid">
        {items.map(([n, t, b]) => (
          <li key={n} className="ll-pillar">
            <div className="ll-pillar__n">{n}</div>
            <div className="ll-pillar__title">{t}</div>
            <div className="ll-pillar__body">{b}</div>
          </li>
        ))}
      </ol>
    </section>
  );
}

// ---- PRODUCT GRID ----
function ProductGrid() {
  const products = [
    {
      id: 'hans',
      mark: 'ember',
      mono: 'AI SHOWRUNNER',
      name: 'Hans',
      tag: 'URL → IRL',
      desc: 'The creative partner and operational co-pilot for digital IP owners. Plans, recommends, and executes — turning any URL into a launchable activation.',
      cta: 'Talk to Hans',
      href: 'hans/index.html',
    },
    {
      id: 'worldbldr',
      mark: 'navy',
      mono: 'DIGITAL TWIN',
      name: 'Worldbldr',
      tag: 'Economics, modeled',
      desc: 'Design, simulate, and stress-test any physical experience before a dollar is spent. Layout, ticketing, sponsorship — all modeled against the footprint.',
      cta: 'Open Worldbldr',
      href: 'worldbldr/index.html',
    },
    {
      id: 'emergentic',
      mark: 'forest',
      mono: 'CHARACTERS · NARRATIVE',
      name: 'Emergentic',
      tag: 'Story lives here',
      desc: 'The shared layer where character design, story architecture, and embodied AI agents live — so the world feels alive when it lands in physical space.',
      cta: 'Coming Q3',
      href: '#',
    },
    {
      id: 'getinvite',
      mark: 'clay',
      mono: 'CREATOR-FIRST TICKETING',
      name: 'Get Invite',
      tag: 'Tickets as narrative',
      desc: 'Tickets as narrative devices — pre-event community, access tiers that reward devotion, post-event loyalty, and data that belongs to the creator.',
      cta: 'Open Get Invite',
      href: 'get-invite/index.html',
    },
  ];
  return (
    <section className="ll-section" id="products">
      <div className="ll-section__head">
        <div className="ll-eyebrow"><span className="ll-eyebrow__square" />02 — THE STUDIO</div>
        <h2 className="ll-section__h2"><em>Four products. One operating system.</em></h2>
        <p className="ll-section__lede">Every product starts as something we need ourselves. Every product gets proven in our own venues before it goes to market. Every product is built to complement the others.</p>
      </div>
      <div className="ll-prodgrid">
        {products.map(p => (
          <a key={p.id} href={p.href} className={`ll-prod ll-prod--${p.mark}`}>
            <div className="ll-prod__mono">{p.mono}</div>
            <div className="ll-prod__name">{p.name}</div>
            <div className="ll-prod__tag"><em>{p.tag}</em></div>
            <div className="ll-prod__desc">{p.desc}</div>
            <div className="ll-prod__cta">
              {p.cta} <i className="ph ph-arrow-right" />
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ---- JOURNEY TAPE ----
function Journey() {
  const phases = [
    'BRIEF', 'WORLD', 'SIMULATE', 'STORY', 'ECONOMICS',
    'VENUE', 'PERMITS', 'BUILD', 'HIRE', 'DEMAND',
    'LIVE', 'DATA', 'NEXT WORLD'
  ];
  return (
    <section className="ll-section ll-journey" id="journey">
      <div className="ll-section__head">
        <div className="ll-eyebrow"><span className="ll-eyebrow__square" />03 — THE AGENTIC OS</div>
        <h2 className="ll-section__h2"><em>Thirteen phases. One agent. One brief.</em></h2>
        <p className="ll-section__lede">From the napkin sketch to the next world. Hans absorbs the operational gauntlet — venue, permits, vendors, hiring, ticketing — so the creator stays on vision.</p>
      </div>
      <div className="ll-tape">
        {phases.map((p, i) => (
          <span key={p} className="ll-tape__cell">
            <span className="ll-tape__n">{String(i + 1).padStart(2, '0')}</span>
            <span className="ll-tape__name">{p}</span>
          </span>
        ))}
      </div>
    </section>
  );
}

// ---- BIG QUOTE ----
function Quote() {
  return (
    <section className="ll-section ll-quotesection">
      <div className="ll-pullquote">
        <em>Bits scale infinitely.<br />Atoms obey physics.</em>
        <div className="ll-quotesection__by">— TODD &nbsp;·&nbsp;  BRAND NARRATIVE v2</div>
      </div>
    </section>
  );
}

// ---- NETWORK STRIP ----
function Network() {
  return (
    <section className="ll-section ll-network" id="network">
      <div className="ll-section__head">
        <div className="ll-eyebrow ll-eyebrow--light"><span className="ll-eyebrow__square ll-eyebrow__square--light" />04 — THE FBRC NETWORK</div>
        <h2 className="ll-section__h2 ll-section__h2--light"><em>Distribution is built into the infrastructure.</em></h2>
      </div>
      <div className="ll-network__grid">
        <div>
          <div className="ll-stat">
            <div className="ll-stat__n">12</div>
            <div className="ll-stat__label">VENUES IN NETWORK</div>
          </div>
          <p className="ll-network__body">FBRC operates its own venues in addition to licensing software to other agencies and venues. Our spaces are where LivingLab products get used in production — under real conditions, with real audiences, with real revenue on the line.</p>
        </div>
        <div>
          <div className="ll-stat">
            <div className="ll-stat__n">$1T+</div>
            <div className="ll-stat__label">LIVE EXPERIENCE MARKET · 2030</div>
          </div>
          <p className="ll-network__body">Every brand is becoming a media company. Every creator is a showrunner. The conversion layer is physical — and the back-end infrastructure for it doesn't exist yet in a unified, accessible form.</p>
        </div>
        <div>
          <div className="ll-stat">
            <div className="ll-stat__n">200M+</div>
            <div className="ll-stat__label">INDEPENDENT CREATORS</div>
          </div>
          <p className="ll-network__body">Subculture brands, podcasters, indie studios — fans-rich, infrastructure-poor. The Davids who are defining the next decade of culture, ahead of the market and behind on the toolkit.</p>
        </div>
      </div>
    </section>
  );
}

// ---- FOOTER ----
function Footer() {
  return (
    <footer className="ll-footer">
      <div className="ll-footer__row">
        <div className="ll-footer__brand">
          <img src="assets/logos/fbrc-icon.png" alt="FBRC" />
          <div>
            <div className="ll-mono" style={{ fontWeight: 600 }}>FBRC.AI</div>
            <div className="ll-mono ll-mono--dim">SINGAPORE · LOS ANGELES</div>
          </div>
        </div>
        <div className="ll-footer__cols">
          <div>
            <div className="ll-footer__label">STUDIO</div>
            <a>Hans</a><a>Worldbldr</a><a>Emergentic</a><a>Get Invite</a>
          </div>
          <div>
            <div className="ll-footer__label">NETWORK</div>
            <a>Venues</a><a>Partners</a><a>Become an operator</a>
          </div>
          <div>
            <div className="ll-footer__label">COMPANY</div>
            <a>Manifesto</a><a>Team</a><a>Press</a><a>Careers</a>
          </div>
        </div>
      </div>
      <div className="ll-footer__rule" />
      <div className="ll-footer__small">
        <span>FBRC.AI / LIVINGLAB &nbsp;·&nbsp;  INTERNAL CONFIDENTIAL DOCUMENT &nbsp;·&nbsp;  MARCH 2026</span>
        <span><em>The future belongs to the systems that use bits to orchestrate atoms.</em></span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Manifesto, Pillars, ProductGrid, Journey, Quote, Network, Footer });