/* Case-study detail view. */

function CaseStudy({ id, onNav, onOpen }) {
  const { Badge, Button, Tag } = window.ArchDailyDesignSystem_788ad7;
  const w = window.ADBIZ.work.find((x) => x.id === id) || window.ADBIZ.work[0];
  const more = window.ADBIZ.work.filter((x) => x.id !== w.id).slice(0, 3);

  return (
    <div>
      {/* Hero */}
      <section style={{ background: "var(--ad-deep)", color: "var(--ad-grey-100)" }}>
        <Container style={{ padding: "var(--space-6) var(--space-6) 0" }}>
          <a href={routeHref("work")} onClick={(e) => { e.preventDefault(); onNav("work"); }} style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "none", border: "none", color: "var(--ad-sky-200)", cursor: "pointer", fontSize: "var(--fs-sm)", fontFamily: "var(--font-sans)", padding: 0, textDecoration: "none" }}>
            <Icon n="arrow-left" size={16} /> All work
          </a>
        </Container>
        <Container style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-8)", alignItems: "center", padding: "var(--space-6) var(--space-6) var(--space-8)" }}>
          <div>
            <div style={{ display: "flex", gap: 8, marginBottom: "var(--space-4)" }}>
              <Badge variant={w.badgeVariant}>{w.badge}</Badge>
              <Badge variant="neutral" solid={false}>{w.client}</Badge>
            </div>
            <h1 style={{ fontSize: "var(--fs-display)", lineHeight: "var(--lh-tight)", letterSpacing: "var(--ls-tight)", color: "var(--ad-grey-100)", margin: "0 0 var(--space-4)" }}>{w.title}</h1>
            <p style={{ fontSize: "var(--fs-body-lg)", color: "var(--ad-sky-200)", lineHeight: "var(--lh-relaxed)", maxWidth: 440, margin: 0 }}>{w.summary}</p>
          </div>
          {w.id === "concrete-futures" ? (
            <video autoPlay muted loop playsInline style={{ width: "100%", aspectRatio: "3 / 2", objectFit: "cover", borderRadius: "var(--radius-md)", display: "block" }}>
              <source src="assets/cobe-event-cph-2026.mp4" type="video/mp4" />
            </video>
          ) : w.id === "city-sections" ? (
            <video autoPlay muted loop playsInline style={{ width: "100%", aspectRatio: "3 / 2", objectFit: "cover", borderRadius: "var(--radius-md)", display: "block" }}>
              <source src="assets/boty-2026-winners.mp4" type="video/mp4" />
            </video>
          ) : w.id === "year-of-stone" ? (
            <video autoPlay muted loop playsInline style={{ width: "100%", aspectRatio: "3 / 2", objectFit: "cover", borderRadius: "var(--radius-md)", display: "block" }}>
              <source src="assets/next-practices-2025.mp4" type="video/mp4" />
            </video>
          ) : w.id === "modular-now" ? (
            <img src="assets/vitrocsa-light-lighter-lightest.jpg" alt={w.title} style={{ width: "100%", aspectRatio: "3 / 2", objectFit: "cover", borderRadius: "var(--radius-md)", display: "block" }} />
          ) : w.id === "raw-earth" ? (
            <video autoPlay muted loop playsInline style={{ width: "100%", aspectRatio: "3 / 2", objectFit: "cover", borderRadius: "var(--radius-md)", display: "block" }}>
              <source src="assets/obel-award-video.mp4" type="video/mp4" />
            </video>
          ) : (
            <Plate tone="legacy" ratio="3 / 2" label="Hero photograph — no filters" style={{ borderRadius: "var(--radius-md)" }} />
          )}
        </Container>
      </section>

      {/* Metrics */}
      <section style={{ background: "var(--ad-legacy)", color: "var(--ad-grey-100)" }}>
        <Container style={{ display: "grid", gridTemplateColumns: `repeat(${w.metrics.length}, 1fr)`, gap: "var(--space-5)", padding: "var(--space-6) var(--space-6)" }}>
          {w.metrics.map((m) => (
            <div key={m.l}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", lineHeight: 1 }}>{m.v}</div>
              <div style={{ fontSize: "var(--fs-sm)", color: "var(--ad-sky-200)", marginTop: 6 }}>{m.l}</div>
            </div>
          ))}
        </Container>
      </section>

      {/* Body */}
      <section style={{ padding: "var(--space-9) 0" }}>
        <Container size="md">
          <div style={{ display: (w.id === "concrete-futures" || w.id === "city-sections" || w.id === "year-of-stone" || w.id === "raw-earth" || w.id === "modular-now") ? "block" : "grid", gridTemplateColumns: "200px 1fr", gap: "var(--space-7)" }}>
            {(w.id !== "concrete-futures" && w.id !== "city-sections" && w.id !== "year-of-stone" && w.id !== "raw-earth" && w.id !== "modular-now") && (
              <div>
                <Eyebrow>Engagement</Eyebrow>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: "var(--space-3)" }}>
                  {w.tags.map((t) => <Tag key={t} size="sm">{t}</Tag>)}
                </div>
              </div>
            )}
            <div>
              <h2 style={{ fontSize: "var(--fs-h2)", letterSpacing: "var(--ls-tight)" }}>The brief</h2>
              <p className="ad-lead" style={{ color: "var(--text-secondary)", whiteSpace: "pre-line" }}>
                {w.id === "concrete-futures"
                  ? "On June 10, at Cobe Bookcafé, we celebrated the launch of the guest-edited Cobe Notes × ArchDaily edition in connection with 3daysofdesign. The event featured a conversation between Christele Harrouk, Editor-in-Chief of ArchDaily; Mads Birgens, Head of Urbanism at Cobe; and Jacob Blak, Head of Sustainability at Cobe. The discussion was moderated by Kristoffer Lindhardt Weiss, CEO and Publisher of the Danish Architectural Press. Centered on the theme thresholds, the title of this edition, the conversation explored architecture as a space of transition, negotiation, and transformation."
                  : w.id === "city-sections"
                  ? "The ArchDaily Building of the Year Awards celebrate architectural excellence, recognizing the most inspiring and innovative projects from around the globe. Selected by our global community of readers, these awards honor buildings that push boundaries, address contemporary challenges and shape the future of the built environment.\n\nTogether, these choices reveal broader societal currents: in times of environmental urgency and social reckoning, architectural relevance is defined by the responsibility it demonstrates in responding to challenges, context, and everyday life. For the brands behind this initiative, that relevance extends outward — sponsorship places them at the center of the values 100,000+ architects and designers are actively voting for, not just adjacent to them.\n\nUltimately, in line with ArchDaily's broader initiatives, this selection embodies a world built with care, not as a slogan but as a shared architectural aspiration — one that a sponsoring brand becomes part of authoring, not simply funding."
                  : w.id === "year-of-stone"
                  ? "In 2025, Best New Practices became the ArchDaily Next Practices Awards — now built on a more rigorous format, with an external jury and a structured voting and selection process. Presented by Buildner, the awards spotlight the architects, designers, planners, and visionaries whose work points to where the field is headed next.\n\nThis fifth edition selected 20 practices from 25 countries, led by Asia (9), Europe (6), and Africa, South America, and North America (3 each). The winners were chosen by a jury including Josephine Michau (Copenhagen Architecture Festival), Gabriela Carrillo (Taller Gabriela Carrillo), Lucia Pedrana (European Cultural Centre), Vinu Daniel (Wallmakers, and the first-ever Next Practices winner in 2020), and Eloisa Ramos and Moreno Castellano (RamosCastellano Arquitectos).\n\nThe campaign reached over 1.26 million people on social media, generated more than 1.3 million website banner impressions, and drove 167,464 pageviews across all related articles — with the awards landing page alone drawing nearly 7,000 pageviews since launch. Buildner's presence was carried across every one of these touchpoints, from social to newsletter placements.\n\nAcross all 20 winning practices — different in scale, geography, and method — one thread held: architecture defined by care for context, community, memory, and ecology."
                  : w.id === "raw-earth"
                  ? "ArchDaily partnered with the OBEL Foundation to spotlight its Award and its winners, aimed towards recognizing architecture's potential to act as tangible agents of change. Through editorial coverage, exclusive interviews, and dedicated social content, the partnership put OBEL's work in front of the architects who care most about it.\n\nThe partnership included editorial coverage of OBEL Award announcements and initiatives, a dedicated landing page on ArchDaily, exclusive video interviews with OBEL Award winners, Instagram reels and collaborative posts for major announcements, and spotlight articles on OBEL's ongoing initiatives."
                  : w.id === "modular-now"
                  ? "Monthly Topics function as curated editorial lenses that guide content development throughout the year. Each topic is carefully selected to reflect contemporary challenges, intellectual shifts, and long-term questions shaping the built environment. They ensure cohesion across editorial, projects, news, and sponsored content, allowing the entire platform to explore a subject from multiple perspectives.\n\nRather than isolated themes, Monthly Topics serve as strategic anchors, connecting research, case studies, interviews, clients and critical essays into a unified conversation.\n\nPresented by Vitrocsa, \u201cLight, Lighter, Lightest: Redefining How Architecture Touches the Earth\u201d explores the many meanings of architectural lightness\u2014from suspended and ultra-light structures to conceptual and technological forms of elevation\u2014questioning how we can build more with less while revealing what lies behind the desire to rise above the ground."
                  : `${w.client} wanted to reach architects at the moment of specification — not interrupt them, but become part of how they research and decide.`}
              </p>
              {w.id === "raw-earth" && (
                <a href="https://www.archdaily.com/tag/obel-foundation" target="_blank" rel="noopener noreferrer" style={{
                  display: "inline-flex", alignItems: "center", gap: 8, margin: "var(--space-6) 0",
                  fontSize: "var(--fs-body)", fontWeight: "var(--fw-semibold)", color: "var(--ad-electric)", textDecoration: "none",
                  borderBottom: "1px solid var(--ad-electric)", paddingBottom: 2,
                }}>
                  The Obel Foundation landing page <Icon n="arrow-up-right" size={16} />
                </a>
              )}
              {(w.id !== "concrete-futures" && w.id !== "city-sections" && w.id !== "year-of-stone" && w.id !== "raw-earth" && w.id !== "modular-now") && (
                <figure style={{ margin: "var(--space-6) 0" }}>
                  <Plate tone="light" ratio="16 / 9" label="Detail study — materials highlighted" style={{ borderRadius: "var(--radius-md)" }} />
                  <figcaption style={{ fontSize: "var(--fs-xs)", color: "var(--text-muted)", marginTop: 8 }}>The teaser effect — zoom into the detail, the shadow, the quiet area.</figcaption>
                </figure>
              )}
              {w.id === "city-sections" && (
                <a href="https://boty.archdaily.com/us/2026" target="_blank" rel="noopener noreferrer" style={{
                  display: "inline-flex", alignItems: "center", gap: 8, margin: "var(--space-6) 0",
                  fontSize: "var(--fs-body)", fontWeight: "var(--fw-semibold)", color: "var(--ad-electric)", textDecoration: "none",
                  borderBottom: "1px solid var(--ad-electric)", paddingBottom: 2,
                }}>
                  The Building of the Year Awards landing page <Icon n="arrow-up-right" size={16} />
                </a>
              )}
              {w.id === "year-of-stone" && (
                <a href="https://www.archdaily.com/tag/archdaily-next-practices" target="_blank" rel="noopener noreferrer" style={{
                  display: "inline-flex", alignItems: "center", gap: 8, margin: "var(--space-6) 0",
                  fontSize: "var(--fs-body)", fontWeight: "var(--fw-semibold)", color: "var(--ad-electric)", textDecoration: "none",
                  borderBottom: "1px solid var(--ad-electric)", paddingBottom: 2,
                }}>
                  The Next Practices Awards landing page <Icon n="arrow-up-right" size={16} />
                </a>
              )}
              {w.id === "modular-now" && (
                <a href="https://www.archdaily.com/tag/archdaily-topic-2026-light-lighter-lightest" target="_blank" rel="noopener noreferrer" style={{
                  display: "inline-flex", alignItems: "center", gap: 8, margin: "var(--space-6) 0",
                  fontSize: "var(--fs-body)", fontWeight: "var(--fw-semibold)", color: "var(--ad-electric)", textDecoration: "none",
                  borderBottom: "1px solid var(--ad-electric)", paddingBottom: 2,
                }}>
                  Light, Lighter, Lightest landing page <Icon n="arrow-up-right" size={16} />
                </a>
              )}
              {w.id === "concrete-futures" && (
                <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-4)", margin: "var(--space-6) 0" }}>
                  <img src="assets/cobe-coffee.jpg" alt="" style={{ width: "100%", aspectRatio: "3 / 4", objectFit: "cover", borderRadius: "var(--radius-md)", display: "block" }} />
                  <img src="assets/cobe-shelf.jpg" alt="" style={{ width: "100%", aspectRatio: "3 / 4", objectFit: "cover", borderRadius: "var(--radius-md)", display: "block" }} />
                  <img src="assets/cobe-reader.jpg" alt="" style={{ width: "100%", aspectRatio: "3 / 4", objectFit: "cover", borderRadius: "var(--radius-md)", display: "block" }} />
                </div>
              )}
              {(w.id !== "concrete-futures" && w.id !== "city-sections" && w.id !== "year-of-stone" && w.id !== "raw-earth" && w.id !== "modular-now") && (
                <blockquote style={{ margin: "var(--space-6) 0", padding: "0 0 0 var(--space-5)", borderLeft: "2px solid var(--ad-editorial)" }}>
                  <p style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h3)", lineHeight: "var(--lh-snug)", color: "var(--ad-editorial)", margin: 0 }}>
                    “It didn't feel like advertising. It felt like ArchDaily — and that's why it worked.”
                  </p>
                  <cite style={{ display: "block", marginTop: "var(--space-3)", fontStyle: "normal", fontSize: "var(--fs-sm)", color: "var(--text-muted)" }}>Brand Director, {w.client}</cite>
                </blockquote>
              )}
            </div>
          </div>
        </Container>
      </section>

      {(w.id !== "concrete-futures" && w.id !== "city-sections" && w.id !== "year-of-stone" && w.id !== "raw-earth" && w.id !== "modular-now") && (
        <section style={{ padding: "var(--space-8) 0" }}>
          <Container>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "var(--space-5)" }}>
              <h2 style={{ fontSize: "var(--fs-h3)", margin: 0 }}>More work</h2>
              <Button variant="ghost" href={routeHref("work")} onClick={(e) => { e.preventDefault(); onNav("work"); }} iconRight={<Icon n="arrow-right" size={18} />}>All work</Button>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-5)" }}>
              {more.map((m) => {
                const { ProjectCard } = window.ArchDailyDesignSystem_788ad7;
                return <ProjectCard key={m.id} image={null} kicker={m.kicker} title={m.title} office={m.client} location={m.location} badge={m.badge} badgeVariant={m.badgeVariant} href={caseHref(m.id)} onClick={(e) => { e.preventDefault(); onOpen(m.id); }} />;
              })}
            </div>
          </Container>
        </section>
      )}
    </div>
  );
}

Object.assign(window, { CaseStudy });
