/* TDD — page components */

const { useState: useS, useEffect: useE, useMemo, useRef: useR } = React;

/* ---------------- HOME ---------------- */
function HomePage({ onNavigate, openBrand, audience, heroImage }) {
  useReveal();
  const d = window.TDD_DATA;
  const featured = ["alhambra", "lizzo", "gruppo-mastrotto", "william-morris", "voyage", "kai"]
    .map(s => d.brands.find(b => b.slug === s)).filter(Boolean);

  const heroOpts = {
    "orange": "media/insitu-orange-cushions.webp",
    "greenery": "media/insitu-greenery-sofa.webp",
    "yellow": "media/insitu-yellow-chair.webp",
    "dining": "media/insitu-dining-room.webp",
  };
  const heroSrc = heroOpts[heroImage] || heroOpts.orange;

  return (
    <div className="page-fade">
      {/* HERO */}
      <section className="hero">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="eyebrow"><span className="dot"></span>{audience === "trade" ? "Trade Studio · Dubai d3" : "By-appointment Studio · Dubai d3"}</div>
            <h1 className="display">
              <span className="stack">European</span>
              <span className="stack"><em>furnishings,</em></span>
              <span className="stack">made for the</span>
              <span className="stack">Middle East.</span>
            </h1>
            <p className="hero-lede">Sixteen of Europe's leading textile, leather, wallpaper and carpet houses — curated for the climate, projects and design culture of the Gulf. Specified from a studio you can actually visit.</p>
            <div className="hero-ctas">
              <button className="btn btn-primary" onClick={() => onNavigate("contact")}>
                {audience === "trade" ? "Book a Studio Visit" : "Plan a Visit"} <span className="arr">→</span>
              </button>
              <button className="btn btn-ghost" onClick={() => onNavigate("brands")}>
                Browse the Brand Library
              </button>
            </div>
            <div className="hero-meta">
              <div className="item"><div className="k">Brands</div><div className="v">16 houses</div></div>
              <div className="item"><div className="k">Materials</div><div className="v">5 categories</div></div>
              <div className="item"><div className="k">Pedigree</div><div className="v">Two decades</div></div>
            </div>
          </div>
          <div className="hero-media">
            <img src={heroSrc} alt="Interior in TDD-curated fabrics" />
            <div className="hero-stamp">
              <div className="swatch"></div>
              <div className="swatch moss"></div>
              <div className="swatch rose"></div>
              <div>In-situ · Dubai project</div>
            </div>
          </div>
        </div>
      </section>

      {/* PROPOSITION STRIP */}
      <section className="section alt tight">
        <div className="wrap">
          <div className="pull reveal">
            <em>Curation · Craft · Colour.</em>
            <br/>A textile-led, design-district resource for the people who specify interiors — where fabrics are shown applied in real spaces, brands organised as a navigable library, and material conversations happen in a studio.
            <span className="by">The Design Destination · Dubai d3 · Sharjah SAIF · Doha</span>
          </div>
        </div>
      </section>

      {/* BRAND LIBRARY TEASER */}
      <section className="section">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow"><span className="dot"></span>Brand Library · 16 European houses</div>
              <h2 className="display">A library, not a list.</h2>
            </div>
            <div className="right">
              <p className="lede">Each represented house — Spanish weaving, Italian leather, French rugs, British heritage — is given a room of its own, with the materials, applications and projects that distinguish it.</p>
              <button className="btn-link" onClick={() => onNavigate("brands")}>Open the full library →</button>
            </div>
          </div>

          <div className="brand-grid reveal">
            {featured.map(b => (
              <button className="brand-card" key={b.slug} onClick={() => openBrand(b.slug)}>
                <div className="b-img"><img src={b.image} alt={b.name} loading="lazy" /></div>
                <div className="b-meta">
                  <div>
                    <div className="b-name">{b.name}</div>
                    <div className="b-tag" style={{ marginTop: 4 }}>{b.origin} · {b.categories[0]}</div>
                  </div>
                  <div className="b-tag">{b.since}</div>
                </div>
                <div className="b-arr">↗</div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* MATERIALS IN-SITU */}
      <section className="section alt">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow"><span className="dot"></span>Materials, applied</div>
              <h2 className="display">Not a swatch grid.<br/><em>A scene per material.</em></h2>
            </div>
            <div className="right">
              <p className="lede">Fabrics, leather, wallpaper, carpets and accessories — shown the way they're specified: in rooms, against light, paired with the other materials of the project.</p>
              <button className="btn-link" onClick={() => onNavigate("materials")}>See all five categories →</button>
            </div>
          </div>

          {d.materials.slice(0, 3).map((m, i) => (
            <div key={m.key} className={"material-row reveal " + (i % 2 === 1 ? "reverse" : "")}>
              <div className="material-img">
                <img src={m.image} alt={m.name} loading="lazy" />
                <div className="tag">{m.num} · {m.name}</div>
              </div>
              <div className="material-copy">
                <div className="eyebrow">Category {m.num}</div>
                <h3 className="display">{m.name}.</h3>
                <p>{m.lede}</p>
                <div className="material-brands">
                  <div className="label">From the library</div>
                  <div className="chip-row">{m.brands.slice(0, 5).map(b => <span key={b} className="chip">{b}</span>)}{m.brands.length > 5 && <span className="chip">+{m.brands.length - 5}</span>}</div>
                </div>
                <button className="btn-link" onClick={() => onNavigate("materials")}>Open {m.name.toLowerCase()} →</button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* STUDIO INVITE */}
      <section className="section">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow"><span className="dot"></span>The Studio · Office 105B, d3</div>
              <h2 className="display">A studio you can <em>actually visit.</em></h2>
            </div>
            <div className="right">
              <p className="lede">Hands on the materials. Design and technical advice from the team that represents the brands. Conversations that move a specification forward in an afternoon, not a fortnight.</p>
              <button className="btn btn-primary" onClick={() => onNavigate("studio")}>Plan a studio visit →</button>
            </div>
          </div>

          <div className="studio-grid reveal">
            <div className="cell tall"><img src="media/studio-reception.webp" alt="Studio reception" loading="lazy" /></div>
            <div className="cell"><img src="media/studio-swatches.webp" alt="Swatches" loading="lazy" /></div>
            <div className="cell"><img src="media/studio-fabric-racks.webp" alt="Fabric racks" loading="lazy" /></div>
            <div className="cell"><img src="media/studio-leather-rail.webp" alt="Leather rail" loading="lazy" /></div>
            <div className="cell"><img src="media/studio-display-wall.webp" alt="Display wall" loading="lazy" /></div>
          </div>
        </div>
      </section>

      {/* GROUP */}
      <section className="section dark">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow"><span className="dot"></span>The TDD Group · Three entities, one library</div>
              <h2 className="display" style={{ color: "var(--ivory)" }}>Dubai. Sharjah. Doha.</h2>
            </div>
            <div className="right">
              <p className="lede">Three legally distinct entities, served from one curated library — so a project specified in Dubai can be sourced through Sharjah's free zone or fulfilled to Qatar without the contract changing shape.</p>
            </div>
          </div>
          <div className="group-cards reveal">
            {d.group.map(g => (
              <div key={g.city} className="gc">
                <div className="ent">{g.role}</div>
                <div className="city">{g.city}</div>
                <div className="row" style={{ marginTop: 16 }}>{g.entity}</div>
                <div className="row" style={{ whiteSpace: "pre-line", marginTop: 8 }}>{g.address}</div>
                <div className="row" style={{ marginTop: 14 }}><a href={`tel:${g.phone.replace(/\s/g, "")}`}>{g.phone}</a></div>
                <div className="row" style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".1em", color: "rgba(247,241,230,.55)", marginTop: 4, textTransform: "uppercase" }}>{g.hours}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------------- BRANDS LIBRARY ---------------- */
function BrandsPage({ openBrand }) {
  useReveal();
  const d = window.TDD_DATA;
  const [filter, setFilter] = useS("All");
  const cats = ["All", "Fabrics", "Leather", "Wallpaper", "Carpets", "Accessories"];
  const filtered = filter === "All" ? d.brands : d.brands.filter(b => b.categories.includes(filter));

  return (
    <div className="page-fade">
      <section className="section tight">
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>The Brand Library · {d.brands.length} houses</div>
          <h1 className="display" style={{ fontSize: "clamp(54px, 7vw, 110px)", margin: "20px 0 30px", maxWidth: 1100 }}>
            Sixteen European houses,<br/><em>one room each.</em>
          </h1>
          <p style={{ fontSize: 17, color: "var(--ink-soft)", maxWidth: 640, lineHeight: 1.6, marginBottom: 40 }}>
            Each house has a different reason to exist — heritage, performance, colour, leather craft. Filter the library by material category, or browse the full set below.
          </p>
          <div className="filter-bar">
            {cats.map(c => (
              <button key={c} className={"filter-btn " + (filter === c ? "active" : "")} onClick={() => setFilter(c)}>
                {c} {filter === c && `· ${filtered.length}`}
              </button>
            ))}
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 110 }}>
        <div className="wrap">
          <div className="brand-grid">
            {filtered.map(b => (
              <button className="brand-card reveal" key={b.slug} onClick={() => openBrand(b.slug)}>
                <div className="b-img"><img src={b.image} alt={b.name} loading="lazy" /></div>
                <div className="b-meta">
                  <div>
                    <div className="b-name">{b.name}</div>
                    <div className="b-tag" style={{ marginTop: 4 }}>{b.origin} · {b.categories.join(" · ")}</div>
                  </div>
                  <div className="b-tag">{b.since}</div>
                </div>
                <div className="b-arr">↗</div>
              </button>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------------- BRAND DETAIL ---------------- */
function BrandDetail({ slug, onNavigate, openBrand }) {
  useReveal();
  const d = window.TDD_DATA;
  const b = d.brands.find(x => x.slug === slug);
  if (!b) return null;
  const related = d.brands.filter(x => x.slug !== b.slug && x.categories.some(c => b.categories.includes(c))).slice(0, 4);
  const applicationImages = [
    b.hero,
    "media/insitu-greenery-sofa.webp",
    "media/insitu-orange-cushions.webp",
    "media/insitu-dining-room.webp",
  ].filter(Boolean).slice(0, 4);

  return (
    <div className="page-fade">
      <section style={{ padding: "30px 0 0" }}>
        <div className="wrap">
          <button className="btn-link" onClick={() => onNavigate("brands")}>← Back to library</button>
        </div>
      </section>
      <section className="section tight">
        <div className="bd-hero">
          <div className="img"><img src={b.hero} alt={b.name} /></div>
          <div className="body">
            <div className="eyebrow"><span className="dot"></span>Brand · {b.origin}</div>
            <h1>{b.name}</h1>
            <p style={{ fontFamily: "var(--serif)", fontSize: 24, lineHeight: 1.35, color: "var(--ink-soft)" }}>{b.tagline}</p>
            <p style={{ fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.65, marginTop: 18 }}>{b.blurb}</p>
            <div className="meta-row">
              <div className="m">Since<strong>{b.since}</strong></div>
              <div className="m">Origin<strong>{b.origin}</strong></div>
              <div className="m">Materials<strong>{b.materials.join(", ")}</strong></div>
            </div>
            <div style={{ display: "flex", gap: 14, marginTop: 36 }}>
              <button className="btn btn-primary" onClick={() => onNavigate("contact")}>Request samples from {b.name} →</button>
              <button className="btn btn-ghost" onClick={() => onNavigate("studio")}>See in studio</button>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow"><span className="dot"></span>Applications</div>
              <h2 className="display">In rooms.</h2>
            </div>
            <div className="right">
              <p className="lede">Selected installations where {b.name}'s materials carry the room. Project names withheld pending client permission; in-studio we can show you the full reference set.</p>
            </div>
          </div>
          <div className="applications reveal">
            {applicationImages.map((src, i) => (
              <div className="app-img" key={i}><img src={src} alt="Application" loading="lazy" /></div>
            ))}
          </div>
        </div>
      </section>

      <section className="section alt">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow"><span className="dot"></span>Adjacent in the library</div>
              <h2 className="display">Houses you might pair.</h2>
            </div>
            <div className="right">
              <button className="btn-link" onClick={() => onNavigate("brands")}>Open full library →</button>
            </div>
          </div>
          <div className="brand-grid reveal">
            {related.map(rb => (
              <button className="brand-card" key={rb.slug} onClick={() => openBrand(rb.slug)}>
                <div className="b-img"><img src={rb.image} alt={rb.name} loading="lazy" /></div>
                <div className="b-meta">
                  <div>
                    <div className="b-name">{rb.name}</div>
                    <div className="b-tag" style={{ marginTop: 4 }}>{rb.origin} · {rb.categories[0]}</div>
                  </div>
                  <div className="b-tag">{rb.since}</div>
                </div>
                <div className="b-arr">↗</div>
              </button>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------------- MATERIALS PAGE ---------------- */
function MaterialsPage({ onNavigate, openBrand }) {
  useReveal();
  const d = window.TDD_DATA;
  const [activeKey, setActiveKey] = useS(null);

  return (
    <div className="page-fade">
      <section className="section tight">
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>Materials</div>
          <h1 className="display" style={{ fontSize: "clamp(54px, 7vw, 110px)", margin: "20px 0 26px", maxWidth: 1100 }}>
            Five categories.<br/><em>Always shown in rooms.</em>
          </h1>
          <p style={{ fontSize: 17, color: "var(--ink-soft)", maxWidth: 640, lineHeight: 1.6 }}>
            What each material is, the houses that produce it from TDD's library, and the rooms in which it's been specified. Where a material's performance matters — Aqua Clean's water-cleanable upholstery, Mastrotto's contract-grade hides — we say what the brand says, no more.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 80 }}>
        <div className="wrap">
          {d.materials.map((m, i) => (
            <div className={"mat-cat-row reveal " + (i % 2 === 0 ? "" : "reverse-flip")} key={m.key} style={{ gridTemplateColumns: i % 2 === 0 ? "1.3fr 1fr" : "1fr 1.3fr" }}>
              {i % 2 === 0 ? (
                <>
                  <div className="img"><img src={m.image} alt={m.name} loading="lazy" /></div>
                  <MatCopy m={m} onBrand={(slug) => openBrand(slug)} d={d} />
                </>
              ) : (
                <>
                  <MatCopy m={m} onBrand={(slug) => openBrand(slug)} d={d} />
                  <div className="img"><img src={m.image} alt={m.name} loading="lazy" /></div>
                </>
              )}
            </div>
          ))}
        </div>
      </section>

      <section className="section dark">
        <div className="wrap-narrow">
          <div className="pull reveal">
            Want a material brief for a specific room, palette or budget?
            <span className="by" style={{ color: "rgba(247,241,230,.55)" }}>Trade & private — by appointment</span>
            <div style={{ marginTop: 28 }}><button className="btn btn-ghost" style={{ color: "var(--ivory)", borderColor: "rgba(247,241,230,.4)" }} onClick={() => onNavigate("contact")}>Send us the brief →</button></div>
          </div>
        </div>
      </section>
    </div>
  );
}

function MatCopy({ m, onBrand, d }) {
  return (
    <div className="copy">
      <div className="num">{m.num} / 05</div>
      <h2 className="display" style={{ fontSize: "clamp(42px, 4.4vw, 72px)", margin: "12px 0 22px", lineHeight: 1 }}>{m.name}.</h2>
      <p style={{ fontSize: 16, color: "var(--ink-soft)", maxWidth: 520, lineHeight: 1.6 }}>{m.lede}</p>
      <div style={{ marginTop: 28 }}>
        <div className="label" style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 12 }}>From the library</div>
        <div className="chip-row" style={{ marginBottom: 0 }}>
          {m.brands.map(name => {
            const b = d.brands.find(x => x.name === name);
            return (
              <button key={name} className="chip" style={{ cursor: b ? "pointer" : "default" }} onClick={() => b && onBrand(b.slug)}>{name}</button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

/* ---------------- STUDIO PAGE ---------------- */
function StudioPage({ onNavigate, onBook }) {
  useReveal();
  const d = window.TDD_DATA;
  return (
    <div className="page-fade">
      <section className="hero" style={{ paddingBottom: 60 }}>
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="eyebrow"><span className="dot"></span>The Studio · Office 105B, Building 7 · d3</div>
            <h1 className="display" style={{ fontSize: "clamp(48px, 6vw, 84px)", margin: "20px 0 26px" }}>
              The library,<br/><em>in person.</em>
            </h1>
            <p className="hero-lede">A by-appointment studio in Dubai Design District where the brands TDD represents are organised, racked and ready to handle. Bring the project brief; leave with samples.</p>
            <div className="hero-ctas">
              <button className="btn btn-primary" onClick={onBook}>Book a visit →</button>
              <button className="btn btn-ghost" onClick={() => onNavigate("brands")}>See what's in the library</button>
            </div>
            <div className="hero-meta">
              <div className="item"><div className="k">Hours</div><div className="v">Sun – Thu</div></div>
              <div className="item"><div className="k">Format</div><div className="v">By appointment</div></div>
              <div className="item"><div className="k">For</div><div className="v">Trade · Private</div></div>
            </div>
          </div>
          <div className="hero-media">
            <img src="media/studio-reception.webp" alt="Studio reception" />
            <div className="hero-stamp"><div className="swatch moss"></div><div>Office 105B · d3 · Dubai</div></div>
          </div>
        </div>
      </section>

      <section className="section alt tight">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow"><span className="dot"></span>The visit</div>
              <h2 className="display">What happens in the room.</h2>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }} className="reveal">
            {[
              { n: "01", t: "Brief", b: "Bring the room, the palette, the constraints. We'll start with what's fixed (light, sightlines, existing furniture) before we open swatches." },
              { n: "02", t: "Hands on", b: "Pull the actual hides, the actual sheers, the actual carpets — the library is racked by application, not by brand alphabet." },
              { n: "03", t: "Moodboard", b: "We can build the curation in-room or send it as a moodboard the next day. Materials shown together, with codes, references and lead times." },
              { n: "04", t: "Samples", b: "Cut samples to take with you. Larger lengths sent to the project address; brochures and brand boxes by request." },
            ].map(s => (
              <div key={s.n} style={{ borderTop: "1px solid var(--line)", paddingTop: 22 }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".16em", color: "var(--brass)" }}>{s.n}</div>
                <h3 style={{ fontFamily: "var(--serif)", fontSize: 28, margin: "10px 0 12px" }}>{s.t}</h3>
                <p style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.6 }}>{s.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow"><span className="dot"></span>The space</div>
              <h2 className="display">Racked, labelled, lit.</h2>
            </div>
            <div className="right">
              <p className="lede">Office 105B was built around the way fabrics, leather and wallpaper need to be seen — daylight, neutral walls, racks at the right height, and a meeting room when the moodboard takes over the bench.</p>
            </div>
          </div>
          <div className="studio-grid reveal">
            <div className="cell tall"><img src="media/studio-swatches.webp" alt="" loading="lazy" /></div>
            <div className="cell"><img src="media/studio-fabric-racks.webp" alt="" loading="lazy" /></div>
            <div className="cell"><img src="media/studio-display-wall.webp" alt="" loading="lazy" /></div>
            <div className="cell"><img src="media/studio-leather-rail.webp" alt="" loading="lazy" /></div>
            <div className="cell"><img src="media/about-studio.webp" alt="" loading="lazy" /></div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------------- ABOUT ---------------- */
function AboutPage({ onNavigate }) {
  useReveal();
  const d = window.TDD_DATA;
  return (
    <div className="page-fade">
      <section className="section tight">
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>About TDD · The Design Destination</div>
          <h1 className="display" style={{ fontSize: "clamp(54px, 7vw, 110px)", margin: "20px 0 30px", maxWidth: 1100 }}>
            Two decades of<br/><em>interior textile</em><br/>in one library.
          </h1>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="story-grid reveal">
            <div className="body">
              <p>TDD — The Design Destination — represents Europe's senior textile, leather, wallpaper and carpet houses to the design districts of the Gulf.</p>
              <p>The studio in Dubai Design District (Office 105B, Block B, Building 7) is built around the way materials are actually specified: in-hand, in-light, against the room's other surfaces. Sixteen European brands are racked, labelled and ready to handle — Spanish weaves, Italian leather, French rugs, British heritage prints, Belgian carpets, German publishers, Scottish watercolour textiles.</p>
              <p>The work is split across three legally distinct entities — Dubai (d3), Sharjah (SAIF) and Doha — so a project specified once can be sourced and fulfilled across the region without changing shape.</p>
              <p>It's a trade resource first: interior designers, architects, fit-out and procurement teams account for most of the studio's diary. Private clients — discerning homeowners specifying premium furnishings — are welcomed by appointment.</p>
            </div>
            <div className="stats">
              <div className="stat"><div className="num">16</div><div className="k">European houses</div></div>
              <div className="stat"><div className="num">5</div><div className="k">Material categories</div></div>
              <div className="stat"><div className="num">3</div><div className="k">Group entities</div></div>
              <div className="stat"><div className="num">~20</div><div className="k">Years in the trade</div></div>
            </div>
          </div>
        </div>
      </section>

      <section className="section dark">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow"><span className="dot"></span>The Group · Three entities</div>
              <h2 className="display" style={{ color: "var(--ivory)" }}>Dubai. Sharjah. Doha.</h2>
            </div>
            <div className="right">
              <p className="lede">Each entity is contractable in its own jurisdiction. Phone numbers are direct and verified; for project-routing questions write to the studio.</p>
            </div>
          </div>
          <div className="group-cards reveal">
            {d.group.map(g => (
              <div key={g.city} className="gc">
                <div className="ent">{g.role}</div>
                <div className="city">{g.city}</div>
                <div className="row" style={{ marginTop: 16 }}>{g.entity}</div>
                <div className="row" style={{ whiteSpace: "pre-line", marginTop: 8 }}>{g.address}</div>
                <div className="row" style={{ marginTop: 14 }}><a href={`tel:${g.phone.replace(/\s/g, "")}`}>{g.phone}</a></div>
                <div className="row" style={{ marginTop: 4 }}><a href={`mailto:${g.email}`}>{g.email}</a></div>
                <div className="row" style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".1em", color: "rgba(247,241,230,.55)", marginTop: 10, textTransform: "uppercase" }}>{g.hours}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow"><span className="dot"></span>The full roster</div>
              <h2 className="display">Brands we represent.</h2>
            </div>
            <div className="right">
              <button className="btn-link" onClick={() => onNavigate("brands")}>Open the library →</button>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }} className="reveal">
            {d.brands.map(b => (
              <div key={b.slug} style={{ padding: "22px 22px", borderBottom: "1px solid var(--line)", borderInlineEnd: "1px solid var(--line)", cursor: "pointer" }} onClick={() => onNavigate("brands")}>
                <div style={{ fontFamily: "var(--serif)", fontSize: 24, lineHeight: 1 }}>{b.name}</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--muted)", marginTop: 6 }}>{b.origin} · {b.categories.join(" · ")}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, BrandsPage, BrandDetail, MaterialsPage, StudioPage, AboutPage });