// How we build — capability / lifecycle story
// Also handles /sectors, /studio, /awards pages here as smaller routes.

function HowWeBuild({ navigate }) {
  const data = window.DS_DATA;
  return (
    <div className="page-enter" data-screen-label="04 How we build">
      <section style={{ background: "var(--bg)" }}>
        <div className="container" style={{ paddingTop: "clamp(56px, 6vw, 96px)", paddingBottom: "clamp(28px, 3vw, 48px)" }}>
          <Eyebrow>Capability</Eyebrow>
          <h1 className="h-1" style={{ maxWidth: "16ch", marginTop: 12 }}>
            One contractor. Six stages. One programme.
          </h1>
          <p className="lede muted" style={{ maxWidth: "52ch", marginTop: 18 }}>
            Earthwork through handover, coordinated by people who own the joinery line, the MEP package and the approvals process. We sub-contract the parts we don't run in-house — we don't sub-contract the schedule.
          </p>
        </div>

        {/* Lifecycle stages */}
        <div className="container" style={{ paddingTop: "clamp(40px, 5vw, 80px)", paddingBottom: "clamp(72px, 8vw, 120px)" }}>
          {data.capabilities.map((c, i) => (
            <div className="capability-row" key={c.code}>
              <div>
                <span className="step-num" style={{ fontSize: 14 }}>{c.code}</span>
                <h3 className="h-3" style={{ marginTop: 8 }}>{c.title}</h3>
              </div>
              <div>
                <p className="paragraph">{c.body}</p>
                <div style={{ marginTop: 24, display: "flex", gap: 8, flexWrap: "wrap" }}>
                  {capabilityChipsFor(c.code).map((chip) => (
                    <span key={chip} className="chip" style={{ pointerEvents: "none", fontSize: 12 }}>{chip}</span>
                  ))}
                </div>
              </div>
              <div>
                <div className="capability-image">
                  <img src={c.image} alt={c.title} loading="lazy" />
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Factory band */}
      <section style={{ background: "var(--noir)", color: "#F4F1EA" }}>
        <div className="container section">
          <Eyebrow light>The factory</Eyebrow>
          <h2 className="h-2" style={{ color: "#F4F1EA", maxWidth: "18ch", marginTop: 14 }}>
            200,000 sq ft of joinery, metalwork, marble and finishes — under one roof in Al Quoz.
          </h2>
          <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="factory-strip">
            {[
              { num: "200,000", lbl: "sq ft Al Quoz factory" },
              { num: "5", lbl: "Material divisions" },
              { num: "G+12", lbl: "Construction licence" },
              { num: "1,000+", lbl: "In-house professionals" },
            ].map((s, i) => (
              <div key={i} style={{ padding: "24px 0", borderTop: "1px solid rgba(244,241,234,0.18)" }}>
                <div className="stat-num" style={{ color: "#F4F1EA" }}>{s.num}</div>
                <div className="stat-label" style={{ color: "rgba(244,241,234,0.55)" }}>{s.lbl}</div>
              </div>
            ))}
          </div>
          <style>{`@media (max-width: 880px) { .factory-strip { grid-template-columns: repeat(2, 1fr) !important; } }`}</style>

          <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="factory-imgs">
            <div style={{ aspectRatio: "16/10", overflow: "hidden" }}>
              <img src="media/process-joinery.webp" alt="Joinery factory floor" className="img-fill" />
            </div>
            <div style={{ aspectRatio: "16/10", overflow: "hidden" }}>
              <img src="media/process-earthwork.webp" alt="Construction lifecycle" className="img-fill" />
            </div>
          </div>
          <style>{`@media (max-width: 880px) { .factory-imgs { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>

      {/* Approvals */}
      <section className="container section">
        <div className="two-col">
          <div>
            <Eyebrow>Approvals</Eyebrow>
            <h2 className="h-2" style={{ marginTop: 12 }}>We handle all approvals.</h2>
          </div>
          <div>
            <p className="paragraph">
              Authority NOCs, DEWA, DM, civil defence, DHA, building-management — coordinated by the in-house approvals team alongside the build. The owner never sees the paperwork; we just need them on the snag-list walks and at handover.
            </p>
            <ul style={{ marginTop: 18, padding: 0, listStyle: "none" }}>
              {["Authority NOCs", "DEWA & utilities", "Civil defence", "DM compliance", "DHA (healthcare)", "Final occupancy"].map((s) => (
                <li key={s} className="paragraph" style={{ display: "grid", gridTemplateColumns: "20px 1fr", padding: "10px 0", borderBottom: "1px solid var(--border)" }}>
                  <span className="step-num">·</span>
                  <span>{s}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="container section">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: "clamp(28px, 4vw, 64px)", alignItems: "end" }} className="cta-band">
          <h2 className="h-1" style={{ maxWidth: "16ch" }}>
            Bring us a brief. <span style={{ color: "var(--accent)" }}>We'll bring the build.</span>
          </h2>
          <div>
            <Button onClick={() => navigate({ name: "contact" })}>Start a project</Button>
          </div>
        </div>
        <style>{`@media (max-width: 880px) { .cta-band { grid-template-columns: 1fr !important; } }`}</style>
      </section>
    </div>
  );
}

function capabilityChipsFor(code) {
  return {
    "01": ["Excavation", "Shoring", "Dewatering", "Foundation pours"],
    "02": ["Substructure", "Superstructure", "Slab cycles", "Post-tensioning"],
    "03": ["Blockwork", "Screeds", "Envelope waterproofing", "Tanking"],
    "04": ["Stone", "Joinery", "Metalwork", "Specialist finishes"],
    "05": ["HVAC", "Electrical", "Plumbing", "BMS"],
    "06": ["Commissioning", "Snagging", "Authority sign-off", "Handover"],
  }[code] || [];
}

// --- Sectors index ---
function Sectors({ navigate }) {
  const data = window.DS_DATA;
  return (
    <div className="page-enter" data-screen-label="05 Sectors">
      <section className="container" style={{ paddingTop: "clamp(56px, 6vw, 96px)", paddingBottom: "clamp(28px, 3vw, 48px)" }}>
        <Eyebrow>Sectors</Eyebrow>
        <h1 className="h-1" style={{ maxWidth: "18ch", marginTop: 12 }}>Six typologies. One delivery method.</h1>
        <p className="lede muted" style={{ maxWidth: "52ch", marginTop: 18 }}>
          We organise the portfolio by what each sector actually demands of a build — programme pressure, finishes tolerance, compliance load, life-safety. Pick a sector to see the work.
        </p>
      </section>

      <section className="container" style={{ paddingBottom: "clamp(72px, 8vw, 120px)" }}>
        <div style={{ display: "grid", gap: 16 }}>
          {data.sectors.map((s, i) => (
            <Reveal key={s.id} delay={i * 60}>
              <button
                onClick={() => navigate({ name: "projects", filter: s.id })}
                style={{
                  display: "grid", gridTemplateColumns: "120px 1fr 1.6fr 200px 60px", gap: 24, alignItems: "center",
                  padding: "24px 16px", borderTop: i === 0 ? "1px solid var(--border)" : "none",
                  borderBottom: "1px solid var(--border)",
                  cursor: "pointer", textAlign: "left", width: "100%",
                  transition: "background 0.16s ease, padding 0.2s ease"
                }}
                className="sector-row"
                onMouseEnter={(e) => { e.currentTarget.style.background = "var(--surface)"; e.currentTarget.style.paddingLeft = "26px"; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.paddingLeft = "16px"; }}
              >
                <span className="step-num" style={{ fontSize: 13 }}>{String(i + 1).padStart(2, "0")} / 06</span>
                <span>
                  <span className="h-3" style={{ display: "block" }}>{s.label}</span>
                </span>
                <span className="paragraph muted">{s.blurb}</span>
                <span className="label numerals">{String(s.count).padStart(2, "0")} projects</span>
                <span style={{ fontFamily: "var(--font-mono)", color: "var(--accent)", fontSize: 18, textAlign: "right" }}>→</span>
              </button>
            </Reveal>
          ))}
        </div>
        <style>{`@media (max-width: 880px) { .sector-row { grid-template-columns: 60px 1fr 40px !important; } .sector-row .paragraph, .sector-row .label.numerals { display: none; } }`}</style>
      </section>
    </div>
  );
}

// --- Studio (about) ---
function Studio({ navigate }) {
  const data = window.DS_DATA;
  return (
    <div className="page-enter" data-screen-label="06 Studio">
      <section className="container" style={{ paddingTop: "clamp(56px, 6vw, 96px)", paddingBottom: "clamp(28px, 3vw, 48px)" }}>
        <Eyebrow>Studio · since 1988</Eyebrow>
        <h1 className="h-1" style={{ maxWidth: "16ch", marginTop: 12 }}>A family-built contractor, 37 years on.</h1>
      </section>

      <section style={{ background: "var(--bg)" }}>
        <div className="container" style={{ paddingTop: "clamp(28px, 3vw, 48px)", paddingBottom: "clamp(56px, 6vw, 96px)" }}>
          <div style={{ aspectRatio: "21/9", overflow: "hidden", background: "var(--surface)" }}>
            <img src="media/about-us-home.webp" alt="Designsmith office in Al Quoz" className="img-fill" />
          </div>
        </div>
      </section>

      <section className="container section-tight">
        <div className="two-col">
          <div>
            <Eyebrow>History</Eyebrow>
            <h2 className="h-2" style={{ marginTop: 12 }}>From Excel Engineering to Designsmith.</h2>
          </div>
          <div className="stack-lg">
            <p className="paragraph">
              Designsmith began in 1988 as Excel Engineering — a Dubai contractor founded by an architect with a workshop and a small civil team. Two brothers, Dhaval and Mihir Sanganee, grew the firm into a turnkey design-and-build contractor with one of the region's largest in-house joinery facilities.
            </p>
            <p className="paragraph">
              Today, Designsmith operates as two divisions — <strong>Designsmith Build</strong> (construction & high-rise) and <strong>Elevaré by Designsmith</strong> (ultra-luxury fit-out & residential) — under shared leadership and shared factory capacity.
            </p>
            <p className="paragraph muted small">
              Founders and leadership profiles are being reconfirmed with the team; portraits will be added once final.
            </p>
          </div>
        </div>
      </section>

      <section className="container section-tight">
        <SectionHeader eyebrow="People" title="The named team." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }} className="people-grid">
          {data.team.map((p) => (
            <div key={p.name} style={{ borderTop: "1px solid var(--border)", paddingTop: 18 }}>
              <div style={{ aspectRatio: "3/4", background: "var(--surface)", marginBottom: 16, position: "relative" }}>
                <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--steel-2)" }}>
                  <span className="label">Portrait pending</span>
                </div>
              </div>
              <div className="h-4">{p.name}</div>
              <div className="label" style={{ marginTop: 6 }}>{p.role}</div>
            </div>
          ))}
        </div>
        <style>{`@media (max-width: 880px) { .people-grid { grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
      </section>

      <section style={{ background: "var(--surface)" }}>
        <div className="container section">
          <StatsStrip />
        </div>
      </section>
    </div>
  );
}

// --- Awards ---
function Awards({ navigate }) {
  const data = window.DS_DATA;
  return (
    <div className="page-enter" data-screen-label="07 Awards">
      <section className="container" style={{ paddingTop: "clamp(56px, 6vw, 96px)", paddingBottom: "clamp(28px, 3vw, 48px)" }}>
        <Eyebrow>Recognition</Eyebrow>
        <h1 className="h-1" style={{ maxWidth: "16ch", marginTop: 12 }}>Awards & recognition.</h1>
        <p className="lede muted" style={{ maxWidth: "52ch", marginTop: 18 }}>
          Attributed by name, year and issuer. We list only what is verifiable; press mentions and unconfirmed shortlists are kept off this page until they're not.
        </p>
      </section>

      <section className="container" style={{ paddingBottom: "clamp(72px, 8vw, 120px)" }}>
        <div>
          {data.awards.map((a, i) => (
            <div key={i} className="awards-row">
              <span className="awards-year numerals">{a.year}</span>
              <span className="awards-name">{a.name}</span>
              <span className="awards-issuer">{a.issuer}{a.note ? " · " + a.note : ""}</span>
              <span className="awards-mark">✱</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 56 }}>
          <p className="small muted" style={{ maxWidth: "60ch" }}>
            ✱ Citations available on request. Designsmith does not publish a third-party star rating; aggregateRating is omitted from this site until a verified source exists.
          </p>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HowWeBuild, Sectors, Studio, Awards });