// Home page

function Home({ navigate, headlineStyle }) {
  const data = window.DS_DATA;
  const heroImage = "media/home-og-hero.webp";
  const featured = data.projects.filter((p) => p.featured).slice(0, 5);

  return (
    <div className="page-enter" data-screen-label="01 Home">
      {/* Hero */}
      <section className="hero" data-screen-label="01 Home / Hero">
        <div className="hero-image">
          <img src={heroImage} alt="Designsmith reception — Al Quoz Dubai" />
        </div>
        <div className="hero-content">
          <div className="inner">
            <div className="hero-tagline">Designsmith — Dubai · Since 1988</div>
            {headlineStyle === "tagline" ? (
              <h1 className="hero-headline">
                Your go-to partner for all things <em>construction,</em> fit out & joinery.
              </h1>
            ) : headlineStyle === "build" ? (
              <h1 className="hero-headline">
                We <em>build</em> Dubai's most demanding interiors and towers.
              </h1>
            ) : (
              <h1 className="hero-headline">
                <em>37 years</em> of build. 1,600 projects. One factory.
              </h1>
            )}
            <div className="hero-actions">
              <Button onClick={() => navigate({ name: "contact" })}>Start a project</Button>
              <Button variant="ghost" onClick={() => navigate({ name: "projects" })}>See the work</Button>
            </div>
          </div>
        </div>

        <div className="hero-ledger">
          <LedgerStat num="37+" label="Years" />
          <LedgerStat num="1,600+" label="Projects" />
          <LedgerStat num="G+12" label="Licence" />
        </div>
      </section>

      {/* Statement strip */}
      <section style={{ background: "var(--bg)" }}>
        <div className="container" style={{ paddingTop: "clamp(56px, 6vw, 96px)", paddingBottom: "clamp(56px, 6vw, 96px)" }}>
          <div className="two-col" style={{ alignItems: "start" }}>
            <Reveal>
              <Eyebrow>About — 01</Eyebrow>
              <h3 className="h-3" style={{ marginTop: 14 }}>A Dubai contractor, since 1988.</h3>
            </Reveal>
            <Reveal delay={80}>
              <p className="lede" style={{ marginBottom: 18 }}>
                Designsmith is a turnkey design-and-build contractor — construction, fit-out and in-house joinery, delivered as a single trade-coordinated programme.
              </p>
              <p className="paragraph muted">
                Founded by the Sanganee family in 1988, we run a 200,000 sq ft joinery factory in Al Quoz, hold a G+12 high-rise licence, and have completed more than 1,600 projects across hospitality, commercial, residential, healthcare, wellness and tower construction. We deliver across the UAE, India and KSA.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
                <BtnLink onClick={() => navigate({ name: "studio" })}>Inside the studio</BtnLink>
                <BtnLink onClick={() => navigate({ name: "how-we-build" })}>How we build</BtnLink>
              </div>
            </Reveal>
          </div>
        </div>

        <div className="container">
          <StatsStrip />
        </div>
      </section>

      {/* Featured case study — large editorial split */}
      <section className="section" style={{ paddingBottom: "clamp(48px, 5vw, 80px)" }}>
        <div className="container">
          <SectionHeader
            eyebrow="Selected work — 02"
            title="Case studies of recent build."
            action={<BtnLink onClick={() => navigate({ name: "projects" })}>All projects ({data.projects.length})</BtnLink>}
          />
        </div>

        <FeaturedCaseStudy project={featured[0]} navigate={navigate} layout="split-left" />
        <FeaturedCaseStudy project={featured[1]} navigate={navigate} layout="split-right" />
        <FeaturedCaseStudy project={featured[2]} navigate={navigate} layout="split-left" />

        <div className="container" style={{ marginTop: 64 }}>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <Button variant="ghost" onClick={() => navigate({ name: "projects" })}>Browse all {data.projects.length} projects</Button>
          </div>
        </div>
      </section>

      {/* Sectors */}
      <section className="section" style={{ background: "var(--surface)" }} data-screen-label="01 Home / Sectors">
        <div className="container">
          <SectionHeader
            eyebrow="Sectors — 03"
            title="Six typologies. One delivery method."
            action={<BtnLink onClick={() => navigate({ name: "sectors" })}>All sectors</BtnLink>}
          />
        </div>
        <div className="container">
          <div className="sector-grid">
            {data.sectors.map((s) => (
              <SectorTile key={s.id} sector={s} onClick={() => navigate({ name: "projects", filter: s.id })} />
            ))}
          </div>
        </div>
      </section>

      {/* How we build teaser */}
      <section className="section" data-screen-label="01 Home / How we build">
        <div className="container">
          <SectionHeader
            eyebrow="Capability — 04"
            title="Six stages, one accountable contractor."
            action={<BtnLink onClick={() => navigate({ name: "how-we-build" })}>How we build</BtnLink>}
          />

          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: "clamp(28px, 4vw, 64px)", alignItems: "stretch" }} className="hwb-grid">
            <Reveal>
              <div style={{ aspectRatio: "4/3", overflow: "hidden", background: "var(--surface)" }}>
                <img src="media/capability-building.webp" alt="Construction site" className="img-fill" />
              </div>
            </Reveal>
            <Reveal delay={100}>
              <div className="stack-md">
                <p className="lede" style={{ maxWidth: "30ch" }}>
                  Earthwork to handover, in one programme — coordinated by people who own the joinery line, the MEP package and the authority approvals.
                </p>
                <ol style={{ margin: 0, padding: 0, listStyle: "none", borderTop: "1px solid var(--border)" }}>
                  {data.capabilities.map((c) => (
                    <li key={c.code} style={{ display: "grid", gridTemplateColumns: "44px 1fr", padding: "16px 0", borderBottom: "1px solid var(--border)", alignItems: "baseline" }}>
                      <span className="step-num">{c.code}</span>
                      <div>
                        <div className="h-4">{c.title}</div>
                      </div>
                    </li>
                  ))}
                </ol>
                <div style={{ marginTop: 8 }}>
                  <BtnLink onClick={() => navigate({ name: "how-we-build" })}>Read the build method</BtnLink>
                </div>
              </div>
            </Reveal>
          </div>
          <style>{`@media (max-width: 880px) { .hwb-grid { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>

      {/* Factory pitch — dark band */}
      <section style={{ background: "var(--noir)", color: "#F4F1EA" }} data-screen-label="01 Home / Factory">
        <div className="container section">
          <div className="two-col" style={{ alignItems: "end" }}>
            <Reveal>
              <Eyebrow light>The factory — 05</Eyebrow>
              <h2 className="h-2" style={{ color: "#F4F1EA", marginTop: 12 }}>
                The real moat: <span style={{ color: "var(--bronze)" }}>200,000 sq ft</span> of joinery in Al Quoz.
              </h2>
            </Reveal>
            <Reveal delay={100}>
              <p className="paragraph" style={{ color: "rgba(244,241,234,0.78)", maxWidth: "44ch" }}>
                Joinery, carpentry, metalwork, marble and finishes — under one roof, on one programme, accountable to one contractor. Our factory is why our finishes ship on time and our show floors hand over first-pass.
              </p>
              <div style={{ marginTop: 24, display: "flex", gap: 12 }}>
                <Button onClick={() => navigate({ name: "how-we-build" })}>See the factory</Button>
              </div>
            </Reveal>
          </div>

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

      {/* Awards marquee */}
      <section data-screen-label="01 Home / Awards">
        <div className="container" style={{ paddingTop: "clamp(72px, 8vw, 120px)", paddingBottom: "clamp(40px, 5vw, 64px)" }}>
          <SectionHeader
            eyebrow="Recognition — 06"
            title="Attributed, year by year."
            action={<BtnLink onClick={() => navigate({ name: "awards" })}>Full ledger</BtnLink>}
          />
        </div>
        <div className="marquee" aria-hidden="true">
          <div className="marquee-track">
            {[...data.awards, ...data.awards].map((a, i) => (
              <span className="marquee-item" key={i}>
                <span className="dot"></span>
                <span>{a.name}</span>
                <span className="year">{a.year} · {a.issuer}</span>
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section data-screen-label="01 Home / CTA">
        <div className="container section">
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: "clamp(28px, 4vw, 64px)", alignItems: "end" }} className="cta-band">
            <Reveal>
              <h2 className="h-1" style={{ maxWidth: "16ch" }}>
                Got a brief? <span style={{ color: "var(--accent)" }}>Let's price the build.</span>
              </h2>
            </Reveal>
            <Reveal delay={80}>
              <p className="lede muted" style={{ marginBottom: 20 }}>
                Send us a scope, a programme and any drawings you have. We respond within two working days with a sector lead.
              </p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <Button onClick={() => navigate({ name: "contact" })}>Start a project</Button>
                <Button variant="ghost" arrow={false} href={`tel:${window.DS_DATA.brand.phone.replace(/\s/g, "")}`}>Call {window.DS_DATA.brand.phone}</Button>
              </div>
            </Reveal>
          </div>
          <style>{`@media (max-width: 880px) { .cta-band { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>
    </div>
  );
}

// Editorial split-layout featured case study row used on the home page.
function FeaturedCaseStudy({ project, navigate, layout = "split-left" }) {
  if (!project) return null;
  const isLeft = layout === "split-left";

  const ImageCol = (
    <Reveal>
      <div
        style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--surface)", cursor: "pointer" }}
        onClick={() => navigate({ name: "project", id: project.id })}
      >
        <img src={project.heroImage} alt={project.name} className="img-fill" />
      </div>
    </Reveal>
  );

  const TextCol = (
    <Reveal delay={120}>
      <div style={{ display: "flex", flexDirection: "column", gap: 22, maxWidth: 480 }}>
        <div className="label">{project.sectorLabel} / {project.location} / {project.year}</div>
        <h3 className="h-2" style={{ maxWidth: "12ch" }}>{project.name}</h3>
        <p className="paragraph">{project.summary}</p>

        <dl style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "10px 28px", margin: 0, fontSize: 13 }}>
          <dt className="label">Scope</dt><dd style={{ margin: 0 }}>{project.scope}</dd>
          {project.area !== "—" ? (<><dt className="label">Area</dt><dd style={{ margin: 0 }} className="numerals">{project.area}</dd></>) : null}
          <dt className="label">Services</dt><dd style={{ margin: 0 }}>{project.services.join(" · ")}</dd>
        </dl>

        <div style={{ marginTop: 8 }}>
          <Button variant="ghost" onClick={() => navigate({ name: "project", id: project.id })}>Read case study</Button>
        </div>
      </div>
    </Reveal>
  );

  return (
    <div style={{ padding: "clamp(48px, 6vw, 96px) 0" }}>
      <div className="container">
        <div className="featured-split" style={{ display: "grid", gridTemplateColumns: isLeft ? "1.3fr 1fr" : "1fr 1.3fr", gap: "clamp(28px, 5vw, 80px)", alignItems: "center" }}>
          {isLeft ? ImageCol : TextCol}
          {isLeft ? TextCol : ImageCol}
        </div>
        <style>{`@media (max-width: 880px) { .featured-split { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </div>
  );
}

Object.assign(window, { Home });