/* Standalone interior pages for ArchDaily Business — each reached via the nav.
   Every page leads with a photographic banner (visual-first), then the content. */

function PageHero({ eyebrow, title, intro, banner, height = 360, credit }) {
  return (
    <section style={{ position: "relative", minHeight: height, display: "flex", alignItems: "flex-end", overflow: "hidden", background: "var(--ad-deep)" }}>
      <img src={banner} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      <div style={{ position: "absolute", inset: 0, background: "rgba(0,24,71,0.32)" }} />
      <Container style={{ position: "relative", padding: "0 var(--space-6) var(--space-7)" }}>
        <div style={{ maxWidth: 720 }}>
          <Eyebrow color="var(--ad-grey-100)">{eyebrow}</Eyebrow>
          <h1 style={{ fontSize: "var(--fs-h1)", lineHeight: "var(--lh-tight)", letterSpacing: "var(--ls-tight)", fontWeight: "var(--fw-bold)", color: "var(--ad-grey-100)", margin: "var(--space-3) 0 var(--space-3)", textWrap: "balance" }}>{title}</h1>
          {intro && <p style={{ fontSize: "var(--fs-body-lg)", lineHeight: "var(--lh-relaxed)", color: "var(--ad-grey-100)", maxWidth: 600, margin: 0 }}>{intro}</p>}
        </div>
      </Container>
      {credit && <div style={{ position: "absolute", right: "var(--space-6)", bottom: "var(--space-4)", textAlign: "right", fontFamily: "var(--font-sans)", fontSize: 11, lineHeight: 1.4, color: "rgba(244,244,245,0.75)" }}>{credit}</div>}
    </section>
  );
}

function PageCTA({ onNav, label = "Partner with us", title = "The conversation starts here.", body = "Tell us about your brand and the architects you want to reach." }) {
  const { Button } = window.ArchDailyDesignSystem_788ad7;
  return (
    <section style={{ padding: "var(--space-9) 0" }}>
      <Container>
        <div style={{ background: "var(--ad-electric)", borderRadius: "var(--radius-lg)", padding: "var(--space-8)", display: "grid", gridTemplateColumns: "1.3fr 0.7fr", gap: "var(--space-6)", alignItems: "center" }}>
          <div>
            <h2 style={{ color: "var(--ad-grey-100)", fontSize: "var(--fs-h1)", letterSpacing: "var(--ls-tight)", margin: "0 0 var(--space-3)" }}>{title}</h2>
            <p style={{ color: "var(--ad-grey-100)", fontSize: "var(--fs-body-lg)", margin: 0 }}>{body}</p>
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <Button variant="secondary" size="lg" href={routeHref("contact")} style={{ background: "#fff", color: "var(--ad-electric)", borderColor: "#fff" }} onClick={(e) => { e.preventDefault(); onNav("contact"); }} iconRight={<Icon n="arrow-up-right" size={18} />}>{label}</Button>
          </div>
        </div>
      </Container>
    </section>
  );
}

/* ---- Why ArchDaily ---- */
function WhyPage({ onNav }) {
  return (
    <div>
      <PageHero title="The global reference architects return to." banner="assets/why-hero.jpg"
        intro="We know what it takes to earn attention from architects — because we've spent two decades building it." credit={<React.Fragment>Torres de Satélite<br />Luis Barragán<br />Image © Armando Salas Portugal / Fundación Barragán</React.Fragment>} />
      <section style={{ padding: "var(--space-9) 0 var(--space-7)" }}>
        <Container>
          <p className="ad-lead" style={{ color: "var(--text-secondary)", margin: 0, maxWidth: 880 }}>
            ArchDaily connects architects with the products, ideas, and expertise that shape what they build. For partner brands, that means more than visibility. It means being seen as a trusted voice in the decisions architects make every day.
          </p>
        </Container>
      </section>
      <section style={{ padding: "0 0 var(--space-9)" }}>
        <Container>
          <Eyebrow>Our Pillars</Eyebrow>
          <h2 style={{ fontSize: "var(--fs-h2)", letterSpacing: "var(--ls-tight)", margin: "var(--space-3) 0 var(--space-6)" }}>What we stand on.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-5)" }}>
            {[
              { n: "shield-check", t: "Credibility & Trust", d: "We don't sell exposure, we build authority." },
              { n: "globe", t: "Global Relevance", d: "We position products within real architectural projects, shaping global relevance through context." },
              { n: "lightbulb", t: "Knowledge, Applied", d: "We bridge academia, practice, and industry to turn expertise into real-world architectural solutions." },
              { n: "handshake", t: "Built for the Long Term", d: "We grow brands over time, not campaigns." },
            ].map((p, i) => (
              <article key={p.t} style={{ background: "var(--surface-card)", border: "var(--hairline)", borderRadius: "var(--radius-md)", padding: "var(--space-6)" }}>
                <div style={{ marginBottom: "var(--space-4)" }}>
                  <span style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-sm)", fontWeight: "var(--fw-bold)", color: "var(--ad-electric)" }}>{String(i + 1).padStart(2, "0")}</span>
                </div>
                <h3 style={{ margin: "0 0 8px", fontSize: "var(--fs-h4)" }}>{p.t}</h3>
                <p style={{ margin: 0, fontSize: "var(--fs-body)", color: "var(--text-secondary)" }}>{p.d}</p>
              </article>
            ))}
          </div>
        </Container>
      </section>
      <section style={{ background: "var(--surface-card)", padding: "var(--space-9) 0" }}>
        <Container>
          <Eyebrow>The ArchDaily Team</Eyebrow>
          <h2 style={{ fontSize: "var(--fs-h2)", letterSpacing: "var(--ls-tight)", margin: "var(--space-3) 0 var(--space-4)" }}>The people behind the platform.</h2>
          <p className="ad-lead" style={{ color: "var(--text-secondary)", margin: "0 0 var(--space-6)", maxWidth: 820 }}>
            ArchDaily's real strength isn't just the platform — it's the team of editors, architects, and specialists who shape what gets published, and how it reaches the right audience.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--space-4)" }}>
            {[
              { n: "users-round", t: "Architects, editors, and strategists from over 20 countries." },
              { n: "pen-tool", t: "Led by editors who've shaped architectural media for years." },
              { n: "network", t: "Insight drawn from every corner of the platform, not just one desk." },
              { n: "layout-template", t: "Dedicated teams for video, social, and long-form content." },
            ].map((m) => (
              <div key={m.t} style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)", background: "var(--surface-page)", border: "var(--hairline)", borderRadius: "var(--radius-md)", padding: "var(--space-5)" }}>
                <span style={{ color: "var(--ad-electric)" }}><Icon n={m.n} size={22} /></span>
                <span style={{ fontSize: "var(--fs-body)", fontWeight: "var(--fw-semibold)", color: "var(--text-primary)" }}>{m.t}</span>
              </div>
            ))}
          </div>
        </Container>
      </section>
      <VoiceSection
        eyebrow="Our Community"
        title="What ArchDaily means to architects."
        bg="var(--surface-page)"
        quoteColor="var(--ad-electric)"
        quotes={[
          { q: "If you want to know and understand what's going on in the built and natural environments around the world, look no further. ArchDaily manages to be thoughtful, invaluable, and eye-opening at the same time. No one else combs the planet in such a thorough, unbiased way.", who: "Prof Lesley Lokko OBE", where: "Founder and Chair, African Futures Institute and Curator of the Venice Architecture Biennale 2023" },
          { q: "ArchDaily is one of the most interesting digital platforms in the field of architecture today, capable of maintaining high quality content along with independence of choices and wideness of readership.", who: "Stefano Boeri", where: "Founder, Stefano Boeri Architetti" },
          { q: "ArchDaily has helped connect our work with a global audience, creating opportunities to share ideas, inspire others, and contribute to the international architectural dialogue.", who: "Studio Saxe", where: "Costa Rica" },
        ]} />
      <VoiceSection
        eyebrow="Our Partners"
        title="What ArchDaily means to brands."
        bg="var(--surface-page)"
        quoteColor="var(--ad-electric)"
        quotes={[
          { q: "ArchDaily didn't just amplify our presence; it strengthened our credibility among the architects defining the projects of the future. For Porcelanosa, being present at the moment they look for inspiration, solutions, and materials means being part of the process right from the start. That is where specification truly begins, and where long-term relationships with the architecture community are built.", who: "Marketing Manager", where: "Porcelanosa Mexico" },
          { q: "Being present inside the projects architects study changed how the profession sees our systems.", who: "Brand Lead", where: "Façade Systems" },
          { q: "It's the rare partner that thinks in years, not campaigns. That's why we keep coming back.", who: "Head of Communications", where: "Glazing Manufacturer" },
        ]} />
    </div>
  );
}

function VoiceSection({ eyebrow, title, quotes, bg, quoteColor = "var(--text-primary)" }) {
  const cardBg = bg === "var(--surface-card)" ? "var(--surface-page)" : "var(--surface-card)";
  return (
    <section style={{ background: bg, padding: "var(--space-9) 0" }}>
      <Container>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h2 style={{ fontSize: "var(--fs-h2)", letterSpacing: "var(--ls-tight)", margin: "var(--space-3) 0 var(--space-6)" }}>{title}</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-5)" }}>
          {quotes.map((c, i) => (
            <figure key={i} style={{ margin: 0, background: cardBg, borderRadius: "var(--radius-md)", padding: "var(--space-6)", display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
              <blockquote style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: "var(--fs-body-lg)", lineHeight: "var(--lh-relaxed)", color: quoteColor }}>{c.q}</blockquote>
              <figcaption style={{ marginTop: "auto", fontSize: "var(--fs-sm)", color: "var(--text-secondary)" }}>
                <span style={{ fontWeight: "var(--fw-semibold)", color: "var(--text-primary)" }}>{c.who}</span> · {c.where}
              </figcaption>
            </figure>
          ))}
        </div>
      </Container>
    </section>
  );
}

/* ---- Audience Insights ---- */
function AudiencePage({ onNav }) {
  const audience = [
    { k: "Principals & Firm Leaders", d: "Making the final call on what gets specified." },
    { k: "Project Architects & Designers", d: "Researching materials and solutions day to day." },
    { k: "Students & Emerging Talent", d: "Discovering the brands they'll specify for decades." },
    { k: "Industry Partners", d: "Brands and manufacturers reaching architects at every stage." },
  ];
  const journey = [
    { n: "01", t: "Research", d: "Discover ideas, products and inspiration.", icon: "search" },
    { n: "02", t: "Design Inspiration", d: "Explore solutions and narrow down possibilities.", icon: "lightbulb" },
    { n: "03", t: "Technical Evaluation", d: "Compare, learn and evaluate with confidence.", icon: "ruler" },
    { n: "04", t: "Specification", d: "Make informed decisions and bring projects to life.", icon: "check-circle" },
  ];
  const numbers = [
    { v: "126M", l: "Annual Visits" },
    { v: "1.8B", l: "Annual Page Views" },
    { v: "+59K", l: "Architecture Projects" },
    { v: "97%", l: "Direct Traffic" },
    { v: "+40", l: "Global Reach" },
    { v: "652K", l: "Newsletter Subscribers" },
    { v: "15M", l: "Social Followers" },
    { v: "+10M", l: "Registered Users*" },
  ];
  return (
    <div>
      <PageHero title="Who's reading, and how they use us." banner="assets/audience-hero.jpg"
        intro="Read at every stage of an architect's career." credit={<React.Fragment>Xinhepu Historical and Cultural Precinct Core Area Enhancement Project<br />Atelier cnS<br />Image © Siming Wu</React.Fragment>} />

      {/* Connection diagram */}
      <section style={{ padding: "var(--space-9) 0" }}>
        <Container>
          <h2 style={{ fontSize: "var(--fs-h3)", letterSpacing: "var(--ls-tight)", color: "var(--ad-legacy)", textAlign: "center", maxWidth: 820, margin: "0 auto var(--space-8)", textWrap: "balance" }}>
            Most platforms reach architects too early, or too late, in the decision. ArchDaily connects architects and industry partners at the exact moment design and specification decisions are being made.
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: "var(--space-5)", maxWidth: 920, margin: "0 auto" }}>
            <DiagramNode icon="users-round" label="Architects" desc="Design professionals researching, specifying, and building better projects." />
            <div style={{ display: "flex", alignItems: "center", gap: "var(--space-3)", color: "var(--ad-electric)" }}>
              <Icon n="arrow-left-right" size={20} />
              <span style={{ width: 96, height: 96, display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
                <img src="../../assets/logo/archdaily-isotype-electric.png" alt="ArchDaily" style={{ height: 72 }} />
              </span>
              <Icon n="arrow-left-right" size={20} />
            </div>
            <DiagramNode icon="building-2" label="Industry Partners" desc="Brands and manufacturers researching, positioning, and reaching the architects who specify for a living." align="right" />
          </div>
        </Container>
      </section>

      {/* Our numbers */}
      <section style={{ background: "var(--surface-card)", padding: "var(--space-9) 0" }}>
        <Container>
          <Eyebrow>Our numbers</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--space-7) var(--space-5)", margin: "var(--space-6) 0 var(--space-5)" }}>
            {numbers.map((s) => (
              <div key={s.l}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "52px", lineHeight: 1, color: "var(--ad-electric)" }}>{s.v}</div>
                <div style={{ fontSize: "var(--fs-sm)", color: "var(--text-secondary)", marginTop: 8 }}>{s.l}</div>
              </div>
            ))}
          </div>
          <p style={{ fontSize: "var(--fs-xs)", color: "var(--text-muted)", margin: 0 }}>*Over 100K new users per month</p>
        </Container>
      </section>

      {/* Social followers */}
      <section style={{ background: "var(--ad-electric)", color: "var(--ad-grey-100)" }}>
        <Container style={{ padding: "var(--space-8) var(--space-6)" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--space-5)" }}>
            {[
              { n: "facebook", v: "3.4M", l: "Facebook followers" },
              { n: "pinterest", v: "2.4M", l: "Pinterest followers" },
              { n: "instagram", v: "4.8M", l: "Instagram followers" },
              { n: "linkedin", v: "1.3M", l: "LinkedIn followers" },
            ].map((s) => (
              <div key={s.l} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10, textAlign: "center" }}>
                <span style={{ color: "var(--ad-grey-100)" }}>{s.n === "pinterest" ? <PinterestGlyph /> : <Icon n={s.n} size={26} />}</span>
                <span style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h2)", lineHeight: 1, color: "var(--ad-grey-100)" }}>{s.v}</span>
                <span style={{ fontSize: "var(--fs-sm)", color: "var(--ad-grey-100)" }}>{s.l}</span>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* Specification journey */}
      <section style={{ padding: "var(--space-9) 0" }}>
        <Container>
          <Eyebrow>The specification journey</Eyebrow>
          <h2 style={{ fontSize: "var(--fs-h2)", letterSpacing: "var(--ls-tight)", margin: "var(--space-3) 0 var(--space-7)", maxWidth: 620 }}>Present at every step, from idea to built work.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--space-4)" }}>
            {journey.map((j, i) => (
              <div key={j.n} style={{ position: "relative", display: "flex", flexDirection: "column" }}>
                
                <div style={{ marginBottom: "var(--space-5)", position: "relative", zIndex: 1 }}>
                  <span style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--ad-electric)", color: "var(--ad-grey-100)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontSize: "var(--fs-body-lg)", fontWeight: "var(--fw-bold)" }}>{j.n}</span>
                </div>
                <div style={{ borderTop: "2px solid var(--ad-legacy)", paddingTop: "var(--space-4)" }}>
                  <h3 style={{ margin: "0 0 8px", fontSize: "var(--fs-body-lg)", color: "var(--ad-legacy)" }}>{j.t}</h3>
                  <p style={{ margin: 0, fontSize: "var(--fs-sm)", color: "var(--text-secondary)" }}>{j.d}</p>
                </div>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* Our audience */}
      <section style={{ background: "var(--surface-card)", padding: "var(--space-9) 0" }}>
        <Container>
          <Eyebrow>Our audience</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--space-5)", margin: "var(--space-5) 0 0" }}>
            {audience.map((a) => (
              <article key={a.k} style={{ background: "var(--surface-page)", border: "var(--hairline)", borderRadius: "var(--radius-md)", padding: "var(--space-6)" }}>
                <h3 style={{ margin: "0 0 var(--space-3)", fontSize: "var(--fs-h4)", color: "var(--ad-legacy)" }}>{a.k}</h3>
                <p style={{ margin: 0, fontSize: "var(--fs-body)", color: "var(--text-secondary)" }}>{a.d}</p>
              </article>
            ))}
          </div>
        </Container>
      </section>

      {/* Our Global Community */}
      <section style={{ background: "var(--ad-electric)", color: "var(--ad-grey-100)" }}>
        <Container style={{ padding: "var(--space-9) var(--space-6)" }}>
          <div style={{ display: "grid", gridTemplateColumns: "0.85fr 2.15fr", gap: "var(--space-8)" }}>
            <div>
              <h2 style={{ fontSize: "var(--fs-h2)", letterSpacing: "var(--ls-tight)", color: "var(--ad-grey-100)", margin: "0 0 var(--space-4)" }}>Our global community</h2>
              <p style={{ fontSize: "var(--fs-body-lg)", lineHeight: "var(--lh-relaxed)", color: "var(--ad-grey-100)", margin: 0 }}>
                Global reach, across every region and every stage of practice. Here's the breakdown.
              </p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-6) var(--space-5)" }}>
              {[
                { p: "38%", r: "Asia" },
                { p: "20%", r: "Latin America" },
                { p: "19%", r: "North America" },
                { p: "19%", r: "Europe" },
                { p: "2%", r: "Africa" },
                { p: "2%", r: "Oceania" },
              ].map((c) => (
                <div key={c.r}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", lineHeight: 1, color: "var(--ad-grey-100)" }}>{c.p}</div>
                  <div style={{ fontSize: "var(--fs-body)", color: "var(--ad-grey-100)", marginTop: 8 }}>{c.r}</div>
                </div>
              ))}
            </div>
          </div>
          <p style={{ fontSize: "var(--fs-xs)", color: "rgba(244,244,245,0.6)", margin: "var(--space-7) 0 0" }}>
            *Detailed, market-level metrics available on request.
          </p>
        </Container>
      </section>

    </div>
  );
}

function DiagramNode({ icon, label, desc, align = "left" }) {
  return (
    <div style={{ textAlign: "center" }}>
      <div style={{ width: 64, height: 64, borderRadius: "50%", background: "rgba(5,76,216,0.08)", color: "var(--ad-electric)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto var(--space-3)" }}>
        <Icon n={icon} size={28} />
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-sm)", letterSpacing: "var(--ls-label)", textTransform: "uppercase", color: "var(--ad-electric)", fontWeight: "var(--fw-bold)" }}>{label}</div>
      <p style={{ fontSize: "var(--fs-sm)", color: "var(--text-secondary)", margin: "8px auto 0", maxWidth: 220 }}>{desc}</p>
    </div>
  );
}

function Chip({ children }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", padding: "6px 14px", borderRadius: "var(--radius-pill)", border: "1px solid var(--ad-electric)", color: "var(--ad-electric)", fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)" }}>{children}</span>
  );
}


function PinterestGlyph() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345c-.091.378-.293 1.193-.333 1.36-.052.22-.174.266-.401.16-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.608 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12C24 5.372 18.627 0 12 0" /></svg>
  );
}

/* ---- Shared: case-study grid ---- */
function CaseGrid({ items, onOpen }) {
  const { ProjectCard } = window.ArchDailyDesignSystem_788ad7;
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-5)" }}>
      {items.map((w) => (
        <ProjectCard key={w.id}
          image={w.img} kicker={w.kicker} title={w.title} office={w.client}
          location={w.location} badge={w.id === "concrete-futures" ? "Collaboration" : w.badge} badgeVariant={w.badgeVariant}
          href={caseHref(w.id)} onClick={(e) => { if (onOpen) { e.preventDefault(); onOpen(w.id); } }} />
      ))}
    </div>
  );
}

/* ---- Standard Solutions ---- */
function StandardSolutionsPage({ onNav, onOpen }) {
  const products = [
    { icon: "layers", t: "Memberships", d: "A dedicated microsite and product catalog, featured inside the real projects architects specify from." },
    { icon: "newspaper", t: "Editorial Integration", d: "Your brand, woven into the editorial conversations already shaping architecture." },
    { icon: "mail", t: "Newsletters", d: "A presence in the briefings 652K subscribers open every week." },
    { icon: "layout-template", t: "Banners", d: "Prominent visual placements across ArchDaily's most-visited pages." },
    { icon: "share-2", t: "Social Media", d: "Visibility across the channels architects follow." },
  ];
  const cases = window.ADBIZ.work.filter((w) => w.kicker.startsWith("Product Catalog")).slice(0, 3);
  return (
    <div>
      <PageHero title="Packaged ways to reach the profession." banner="assets/standard-hero.jpg"
        intro="Product catalogs, editorials, newsletters, and social media — the complete portfolio, ready to plan and scale." credit={<React.Fragment>Capital International Exhibition and Convention Center<br />Zaha Hadid Architects + BIAD<br />Image © Virgile Simon Bertrand</React.Fragment>} />
      <section style={{ padding: "var(--space-9) 0" }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "var(--space-5)" }}>
            {products.map((c) => (
              <a key={c.t} href={solutionHref(c.t)} onClick={(e) => { if (onOpen) { e.preventDefault(); onOpen(c.t); } }} style={{ textDecoration: "none", cursor: "pointer", display: "flex", gap: "var(--space-4)", background: "var(--surface-card)", border: "var(--hairline)", borderRadius: "var(--radius-md)", padding: "var(--space-6)" }}>
                <div style={{ flex: "none", width: 44, height: 44, borderRadius: "var(--radius-sm)", background: "rgba(5,76,216,0.08)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ad-electric)" }}>
                  <Icon n={c.icon} size={22} />
                </div>
                <div>
                  <h3 style={{ margin: "0 0 6px", fontSize: "var(--fs-h4)" }}>{c.t}</h3>
                  <p style={{ margin: 0, fontSize: "var(--fs-sm)", color: "var(--text-secondary)" }}>{c.d}</p>
                </div>
              </a>
            ))}
          </div>
        </Container>
      </section>
      <section style={{ background: "var(--surface-card)", padding: "var(--space-9) 0" }}>
        <Container>
          <p style={{ fontSize: "var(--fs-body-lg)", color: "var(--text-secondary)", margin: "0 0 var(--space-5)" }}>And you'll always know it's working:</p>
          <article style={{ display: "flex", gap: "var(--space-4)", background: "var(--surface-page)", border: "var(--hairline)", borderRadius: "var(--radius-md)", padding: "var(--space-6)", maxWidth: 640 }}>
            <div style={{ flex: "none", width: 44, height: 44, borderRadius: "var(--radius-sm)", background: "rgba(5,76,216,0.08)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ad-electric)" }}>
              <Icon n="bar-chart-3" size={22} />
            </div>
            <div>
              <h3 style={{ margin: "0 0 6px", fontSize: "var(--fs-h4)" }}>DAAily Insights</h3>
              <p style={{ margin: 0, fontSize: "var(--fs-sm)", color: "var(--text-secondary)" }}>Real-time visibility into performance, competitive benchmarking, and market trends so your investment is never a black box.</p>
            </div>
          </article>
        </Container>
      </section>
      <PageCTA onNav={onNav} label="Talk to our team" title="Find the right placement for your brand." body="We'll map your goals to the formats architects actually engage with." />
    </div>
  );
}

/* ---- Standard Solution — generic detail page for one product ---- */
function SolutionDetailPage({ topic, onNav }) {
  const specs = {
    "Memberships": {
      included: ["A dedicated microsite for your brand", "Product placement inside the projects architects reference every day", "Full product catalog with downloadable specs", "Real-time performance tracking through DAAily Insights", "Visibility through editorial and newsletter content", "Amplification across social media", "Targeted traffic drivers across the platform", "Direct access to a B2B audience where over 75% are architects and industry professionals"],
      technical: ["Microsite: responsive, hosted on archdaily.com/product", "Catalog: PDF + web spec sheets, unlimited SKUs", "Placement: tagged in project posts as \"Materials Used\"", "Term: 12-month renewable license"],
    },
    "Editorial Integration": {
      included: ["Spotlight — An editorial article developed with our team, amplified through newsletter, banner, and LinkedIn", "Highlight — A standalone editorial feature, backed by newsletter and banner exposure", "ArchDaily Monthly Topics — Exclusive branded content paired with banners, newsletter, and social media"],
      technical: ["Format: 800–1,200 word feature + 6–10 images", "Turnaround: 3–4 weeks from brief to publish", "Placement: homepage feed + topic hub, 30-day pin", "Distribution: web, newsletter insert, 1 social post"],
    },
    "Newsletters": {
      included: ["Daily Newsletter — A prime spot in our Daily Newsletter, built for high visibility and click-through", "Weekly Newsletter — A featured spot in our Weekly Newsletter, driving traffic straight to your site", "Zoom In — A rich, visual showcase that puts your product's story and details front and center"],
      technical: ["Banner: 600×200px, static or animated GIF", "Placement: single sponsor slot per edition", "Send times: Daily 8am / Weekly Fri 10am (multi-timezone)", "Reporting: opens, clicks, CTR by edition"],
    },
    "Social Media": {
      included: ["Instagram — Spotlighting events and design highlights to a highly engaged audience", "Facebook — Showcasing your product inside real projects", "Pinterest — Long-lasting visual discovery for your product", "LinkedIn — Reaching the decision-makers who matter", "YouTube — In-depth video that puts your product's story front and center (early access)", "TikTok — Short-form video reaching the next generation of architects and designers (early access)"],
      technical: ["Formats: static post, carousel, Reels/Stories", "Specs: 1080×1350px (feed), 1080×1920px (Stories)", "Cadence: 1–3 posts per campaign, per channel", "Reporting: reach, engagement, saves per post"],
    },
    "Banners": {
      included: ["Homepage, article, and project page placements", "Rotation across high-traffic pages", "Monthly performance reports", "Traffic-growth packages"],
      technical: [],
    },
    "Exhibitions": {
      included: ["Development of the physical event concept and narrative framework", "Branded visual and editorial communication touch points", "Pre-event promotional campaign across key channels", "Live social media and editorial coverage", "Cross-channel amplification within the campaign ecosystem"],
      technical: ["Formats: booth branding, banners, printed materials", "Lead time: 6–8 weeks before the fair", "Coverage: dedicated recap article + gallery", "Reach: on-site attendees + online recap readers"],
    },
    "Talks": {
      included: ["Development of the physical event concept and narrative framework", "Definition of event format (talk, panel, etc.)", "Event identity and creative direction", "Branded visual and editorial communication touch points", "Identification and curation of relevant guests and stakeholders", "Audience positioning aligned with the initiative's scope", "Pre-event promotional campaign across key channels", "Live social media and editorial coverage", "Post-event editorial recap and key insights", "Cross-channel amplification within the campaign ecosystem", "Strategic reporting and performance insights"],
      technical: ["Format: 45–60 min panel, 3–5 speakers", "Recording: video + transcript published post-event", "Promotion: newsletter + social + homepage feature", "Lead time: 4–6 weeks"],
    },
    "Activations": {
      included: ["Sponsorship of an ArchDaily award launch", "Brand presence at the announcement moment", "Dedicated coverage of the launch", "On-the-ground presence at major industry events (biennales, congresses, fairs)", "Photo and video documentation of your brand's presence", "Cross-promotion across ArchDaily's editorial and social channels"],
      technical: ["Format: launch event + digital announcement", "Branding: logo on launch materials & recap", "Coverage: feature article + social rollout", "Lead time: aligned to award's annual calendar"],
    },
  };
  const s = specs[topic] || { included: ["Details for this solution are coming soon."], technical: [] };
  const backTo = ["Exhibitions", "Talks", "Activations"].includes(topic) ? "live" : "standard";
  const backLabel = backTo === "live" ? "ArchDaily LIVE" : "Standard Solutions";
  const intros = {
    "Exhibitions": "Award-winning projects don't stay on a screen. Through curated exhibitions of physical display panels, ArchDaily brings recognized work into the room. Each exhibition is flexible and built by ArchDaily's own team, presenting selected practices and projects from any of our award programs, in a format designed to be explored, not just viewed.",
    "Editorial Integration": "Get your expertise into the conversation. Editorial features on ArchDaily put you inside the stories shaping the built environment.",
    "Memberships": "Increase your brand's visibility where architects discover projects, explore materials, and identify the products shaping the built environment.",
    "Newsletters": "Show up in the daily routine of architects worldwide — right where they're already exploring new projects, materials, and industry insights.",
    "Banners": "Visibility across every high-traffic page, tracked and built to grow.",
    "Social Media": "Show up where architects already spend their time, reaching a global professional audience with your products, at scale.",
    "Talks": "Bring architecture's biggest stories to the stage. Spotlight regional winners and nominees of the Building of the Year Award, or be part of curated conversations that go behind a single project, bringing together architects, designers, manufacturers, builders, and everyone else who helped bring it to life.",
    "Activations": "Place your brand at the launch of an ArchDaily award, or extend that presence to the world's biggest architecture and design events — wherever ArchDaily shows up, so does your brand.",
  };
  const intro = intros[topic] || `Case studies and examples for ${topic} are coming soon.`;
  const eventDescriptions = {
    "UIA World Congress of Architects": "This year, ArchDaily continued a conversation that started at the Venice Architecture Biennale 2025: what do architecture awards actually do, beyond handing out recognition?\n\nOn June 29th, that conversation continued at the UIA World Congress of Architects 2026 in Barcelona, where six leading international awards came together again. The panel was moderated by three editors from across the field — Christele Harrouk (ArchDaily), Federica Sofia Zambeletti (koozarch), and Amit Gupta (STIR) — alongside architects, urbanists, and representatives from major award platforms. Together, they explored how awards move beyond a trophy: shaping how the profession works, what gets discussed publicly, and where the field is headed next.\n\nThe next day, on June 30th, ArchDaily hosted a second Open Forum, \"Agencies Between Past and Future,\" at Three Chimneys — again moderated by Harrouk. This conversation looked at how architecture's past still shapes the spaces we build today, and how that inheritance can point toward more hopeful, open-ended futures.",
  };
  const eventDescription = eventDescriptions[topic];
  const eventVideos = { "Venice Architecture Biennale": "assets/venice-biennale-2025.mp4" };
  const useVideo = topic !== "Social Media" && topic !== "Editorial Integration" && topic !== "Memberships" && topic !== "Newsletters" && topic !== "Banners" && (!eventDescription || eventVideos[topic]);
  return (
    <div>
      <section style={{ position: "relative", padding: "var(--space-9) 0", overflow: "hidden", minHeight: 420, display: "flex", alignItems: "center" }}>
        {useVideo ? (
          <video autoPlay muted loop playsInline style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}>
            <source src={eventVideos[topic] || (topic === "Talks" ? "assets/talks-bg.mp4" : topic === "Content Sponsorships" ? "assets/events-sponsorships-bg.mp4" : topic === "Activations" ? "assets/activations-bg.mp4" : "assets/exhibitions-bg.mp4")} type="video/mp4" />
          </video>
        ) : (
          <img src={topic === "Social Media" ? "assets/social-media-specs-cover.png" : topic === "Editorial Integration" ? "assets/editorial-integration-cover.png" : topic === "Memberships" ? "assets/memberships-cover.png" : topic === "Newsletters" ? "assets/newsletters-cover.png" : topic === "Banners" ? "assets/banners-cover.png" : window.ADBIZ.showcase[0].img} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        )}
        <div style={{ position: "absolute", inset: 0, background: "rgba(0,24,71,0.6)" }} />
        <Container style={{ position: "relative" }}>
          <a href={routeHref(backTo)} onClick={(e) => { e.preventDefault(); onNav(backTo); }} style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--ad-grey-100)", fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)", textDecoration: "none", marginBottom: "var(--space-5)" }}>
            <Icon n="arrow-left" size={16} /> {backLabel}
          </a>
          <h1 style={{ fontSize: "var(--fs-h1)", letterSpacing: "var(--ls-tight)", margin: "0 0 var(--space-4)", color: "var(--ad-grey-100)" }}>{topic}</h1>
          {!eventDescription && (
            <p className="ad-lead" style={{ color: "var(--ad-grey-100)", maxWidth: 640, margin: 0, whiteSpace: "pre-line" }}>
              {intro}
            </p>
          )}
        </Container>
      </section>
      <section style={{ padding: "var(--space-9) 0" }}>
        <Container>
          {eventDescription ? (
            <React.Fragment>
              <p className="ad-lead" style={{ color: "var(--text-secondary)", maxWidth: 760, margin: "0 0 var(--space-7)", whiteSpace: "pre-line" }}>{eventDescription}</p>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-4)" }}>
                {[window.ADBIZ.showcase[1].img, window.ADBIZ.showcase[2].img, window.ADBIZ.showcase[3].img].map((img, i) => (
                  <div key={i} style={{ aspectRatio: "4 / 3", borderRadius: "var(--radius-md)", overflow: "hidden" }}>
                    <img src={img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                  </div>
                ))}
              </div>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <h2 style={{ fontSize: "var(--fs-h2)", letterSpacing: "var(--ls-tight)", margin: "var(--space-3) 0 var(--space-6)" }}>What's included.</h2>
              <ul style={{ listStyle: "none", padding: 0, margin: "0 0 var(--space-8)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-4) var(--space-6)", maxWidth: 760 }}>
                {s.included.map((r, i) => (
                  <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: "var(--fs-body)", color: "var(--text-secondary)" }}>
                    <span style={{ color: "var(--ad-electric)", flex: "none", marginTop: 2 }}><Icon n="check" size={16} /></span>
                    {r}
                  </li>
                ))}
              </ul>
              {topic === "Banners" && s.technical && s.technical.length > 0 && (
                <React.Fragment>
                  <h2 style={{ fontSize: "var(--fs-h2)", letterSpacing: "var(--ls-tight)", margin: "0 0 var(--space-6)" }}>Specs.</h2>
                  <ul style={{ listStyle: "none", padding: 0, margin: "0 0 var(--space-8)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-4) var(--space-6)", maxWidth: 760 }}>
                    {s.technical.map((r) => (
                      <li key={r} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: "var(--fs-body)", color: "var(--text-secondary)" }}>
                        <span style={{ color: "var(--ad-electric)", flex: "none", marginTop: 2 }}><Icon n="dot" size={16} /></span>
                        {r}
                      </li>
                    ))}
                  </ul>
                </React.Fragment>
              )}
            </React.Fragment>
          )}
        </Container>
      </section>
      <PageCTA onNav={onNav} label="Talk to our team" title="Find the right placement for your brand." body="We'll map your goals to the formats architects actually engage with." />
    </div>
  );
}

/* ---- Custom Solutions ---- */
function CustomSolutionsPage({ onNav, onOpen }) {
  const cobe = window.ADBIZ.work.find((w) => w.id === "concrete-futures");
  const partnerships = [cobe, ...window.ADBIZ.work.filter((w) => w.kicker.startsWith("Brand Partnership"))].filter(Boolean).slice(0, 3);
  return (
    <div>
      <PageHero title="Built for brands that want to lead the conversation." banner="assets/custom-hero.jpg"
        intro="Website presence, curated editorial, product placement, and social and offline amplification — one integrated program, built around your brand." credit={<React.Fragment>Paris Fondation Cartier for Contemporary Art<br />Ateliers Jean Nouvel<br />Image © Martin Argyroglo</React.Fragment>} />
      <section style={{ padding: "var(--space-9) 0 var(--space-7)" }}>
        <Container>
          <p style={{ fontSize: "var(--fs-xs)", fontStyle: "italic", color: "var(--text-muted)", margin: "0 0 var(--space-6)" }}>*Reserved for a limited number of partners each year.</p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--space-5)" }}>
            {[
              { icon: "layout-template", t: "Dedicated Presence", d: "A curated space on ArchDaily built entirely around your brand." },
              { icon: "pen-tool", t: "Editorial & Narrative", d: "Long-form content and storytelling, developed with our editors." },
              { icon: "layers", t: "Product Integration", d: "Your products featured within real, published architectural projects." },
              { icon: "share-2", t: "Amplification", d: "Extended reach through social campaigns and offline events." },
            ].map((c) => (
              <article key={c.t} style={{ background: "var(--surface-card)", border: "var(--hairline)", borderRadius: "var(--radius-md)", padding: "var(--space-6)" }}>
                <span style={{ color: "var(--ad-electric)" }}><Icon n={c.icon} size={22} /></span>
                <h3 style={{ margin: "var(--space-4) 0 6px", fontSize: "var(--fs-h4)" }}>{c.t}</h3>
                <p style={{ margin: 0, fontSize: "var(--fs-sm)", color: "var(--text-secondary)" }}>{c.d}</p>
              </article>
            ))}
          </div>
        </Container>
      </section>
      <section style={{ background: "var(--surface-card)", padding: "var(--space-9) 0" }}>
        <Container>
          <Eyebrow>Case Studies</Eyebrow>
          <h2 style={{ fontSize: "var(--fs-h2)", letterSpacing: "var(--ls-tight)", margin: "var(--space-3) 0 var(--space-3)" }}>Partnerships in practice</h2>
          <p className="ad-lead" style={{ margin: "0 0 var(--space-6)", maxWidth: 640 }}>A selection of bespoke campaigns from the brands already part of ArchDaily.</p>
          <CaseGrid items={partnerships} onOpen={onOpen} />
        </Container>
      </section>
      <PageCTA onNav={onNav} />
    </div>
  );
}

/* ---- Activations ---- */
/* ---- Awards ---- */
function AwardsPage({ onNav, onOpen }) {
  const items = window.ADBIZ.work.filter((w) => w.tags.includes("Awards") || w.kicker.startsWith("Awards"));
  return (
    <div>
      <PageHero title="The programs the profession votes on." banner="assets/awards-hero.jpg"
        intro="Three awards, one standard: credibility decided by the community." credit={<React.Fragment>Building of the Year 2026 Winner for Best Applied Products<br />The ET-302 Memorial<br />Alebel Desta Consulting Architects and Engineers<br />Image © Aron Simeneh</React.Fragment>} />
      <section style={{ padding: "var(--space-9) 0 var(--space-7)" }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-5)" }}>
            {[
              { img: "assets/boty-2026-logo.png", t: "The Building of the Year Awards", d: "The profession's own award — editorial curation and the votes of 100,000+ architects and designers, combined." },
              { img: "assets/student-project-awards-logo.png", t: "Student Project Awards", d: "Recognizing the next generation of architects — student work that's shaping where the discipline goes next." },
              { img: "assets/next-practices-2026-logo.png", t: "Next Practices Awards", d: "105 emerging studios, 45 countries since 2020 — more than half from the Global South, redefining sustainability and community-driven design." },
            ].map((c) => (
              <article key={c.t} style={{ borderRadius: "var(--radius-md)", overflow: "hidden", border: "var(--hairline)", background: "var(--surface-card)" }}>
                <div style={{ aspectRatio: "4 / 3", overflow: "hidden", background: c.t === "Next Practices Awards" ? "var(--ad-legacy)" : "#fff" }}>
                  <img src={c.img} alt={c.t} style={{ width: "100%", height: "100%", objectFit: (c.t === "The Building of the Year Awards" || c.t === "Next Practices Awards" || c.t === "Student Project Awards") ? "contain" : "cover", display: "block", padding: (c.t === "Next Practices Awards" || c.t === "Student Project Awards") ? "var(--space-6)" : 0, boxSizing: "border-box", background: (c.t === "Next Practices Awards" || c.t === "Student Project Awards") ? "#fff" : undefined }} />
                </div>
                <div style={{ padding: "var(--space-5)" }}>
                  <h3 style={{ margin: "0 0 6px", fontSize: "var(--fs-h4)" }}>{c.t}</h3>
                  <p style={{ margin: 0, fontSize: "var(--fs-sm)", color: "var(--text-secondary)" }}>{c.d}</p>
                </div>
              </article>
            ))}
          </div>
        </Container>
      </section>
      {items.length > 0 && (
        <section style={{ background: "var(--surface-card)", padding: "var(--space-9) 0" }}>
          <Container>
            <h2 style={{ fontSize: "var(--fs-h2)", letterSpacing: "var(--ls-tight)", margin: "0 0 var(--space-6)" }}>Award programs in practice</h2>
            <CaseGrid items={items} onOpen={onOpen} />
          </Container>
        </section>
      )}
      <PageCTA onNav={onNav} label="Sponsor an award" title="Put your brand on the stage." body="Align with the programs architects trust and take part in." />
    </div>
  );
}

/* ---- ArchDaily LIVE ---- */
function LivePage({ onNav, onOpen }) {
  const coverage = [
    { img: window.ADBIZ.showcase[0].img, kicker: "Moderation", title: "UIA World Congress of Architects", meta: "Barcelona, 2026" },
    { img: window.ADBIZ.showcase[1].img, kicker: "Moderation", title: "Salone del Mobile Riyadh", meta: "Riyadh, 2025" },
    { img: window.ADBIZ.showcase[2].img, kicker: "Roundtable", title: "Salone del Mobile", meta: "Milan, 2026" },
    { img: window.ADBIZ.showcase[3].img, kicker: "Coverage", title: "Venice Architecture Biennale", meta: "Venice, 2025" },
  ];
  return (
    <div>
      <PageHero title="Where your brand meets the profession, in person." banner="assets/live-hero.jpg"
        intro="Talks, exhibitions, and activations — sponsorship opportunities across ArchDaily's live programming." />
      <section style={{ padding: "var(--space-9) 0 var(--space-7)" }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--space-4)" }}>
            {[
              { icon: "image", t: "Exhibitions", d: "Brand presence at the fairs and exhibitions architects travel to see, not scroll past." },
              { icon: "mic", t: "Talks", d: "Curated conversations behind the world's globally-recognized projects, moderated by our Editor-in-Chief." },
              { icon: "sparkles", t: "Activations", d: "Wherever ArchDaily shows up — from award launches to the world's biggest architecture and design events — your brand shows up too." },
            ].map((c) => (
              <a key={c.t} href={solutionHref(c.t)} onClick={(e) => { if (onOpen) { e.preventDefault(); onOpen(c.t); } }} style={{ textDecoration: "none", cursor: "pointer", display: "flex", flexDirection: "column", gap: 12, border: "var(--hairline)", background: "var(--surface-card)", borderRadius: "var(--radius-md)", padding: "var(--space-5)" }}>
                <span style={{ color: "var(--ad-electric)" }}><Icon n={c.icon} size={22} /></span>
                <span style={{ fontSize: "var(--fs-body)", fontWeight: "var(--fw-semibold)", color: "var(--text-primary)" }}>{c.t}</span>
                <span style={{ fontSize: "var(--fs-sm)", color: "var(--text-secondary)" }}>{c.d}</span>
              </a>
            ))}
          </div>
        </Container>
      </section>
      <PageCTA onNav={onNav} label="Sponsor an event" title="See what's coming up, and put your brand where the profession gathers." body="" />
    </div>
  );
}

/* ---- Media Kit ---- */
function MediaKitPage({ onNav }) {
  const { Button } = window.ArchDailyDesignSystem_788ad7;
  return (
    <div>
      <section style={{ position: "relative", minHeight: "78vh", display: "flex", alignItems: "center", overflow: "hidden", background: "var(--ad-deep)" }}>
        <img src="assets/mediakit-hero.jpg" alt="Niyang River Visitor Center" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        <div style={{ position: "absolute", inset: 0, background: "rgba(0,24,71,0.32)" }} />
        <Container style={{ position: "relative" }}>
          <div style={{ maxWidth: 680 }}>
            <Eyebrow color="var(--ad-grey-100)">Media Kit</Eyebrow>
            <h1 style={{ fontSize: "var(--fs-display)", lineHeight: "var(--lh-tight)", letterSpacing: "var(--ls-tight)", fontWeight: "var(--fw-bold)", color: "var(--ad-grey-100)", margin: "var(--space-3) 0 var(--space-4)", textWrap: "balance" }}>
              Ready to plan your next campaign?
            </h1>
            <p style={{ fontSize: "var(--fs-body-lg)", lineHeight: "var(--lh-relaxed)", color: "var(--ad-grey-100)", maxWidth: 520, margin: "0 0 var(--space-6)" }}>
              Download our media kit or get in touch with our sales team.
            </p>
            <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap" }}>
              <a href="assets/ArchDaily Media Kit 2026.pdf" download style={{ textDecoration: "none" }}>
                <Button variant="secondary" size="lg" style={{ background: "#fff", color: "var(--ad-electric)", borderColor: "#fff" }} iconRight={<Icon n="download" size={18} />}>Download media kit</Button>
              </a>
              <Button variant="secondary" size="lg" href={routeHref("contact")} style={{ color: "var(--ad-grey-100)", borderColor: "rgba(244,244,245,0.5)", background: "rgba(244,244,245,0.06)" }} onClick={(e) => { e.preventDefault(); onNav("contact"); }}>Talk to us</Button>
            </div>
          </div>
        </Container>
        <div style={{ position: "absolute", right: "var(--space-6)", bottom: "var(--space-4)", textAlign: "right", fontFamily: "var(--font-sans)", fontSize: 11, lineHeight: 1.4, color: "rgba(244,244,245,0.75)" }}>
          Niyang River Visitor Center<br />
          Zhaoyang Architects + standardarchitecture<br />
          Image © Chen Su
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { WhyPage, AudiencePage, StandardSolutionsPage, CustomSolutionsPage, AwardsPage, LivePage, MediaKitPage, SolutionDetailPage });
