// Home page — hero, craft strip, selected projects, sectors, capabilities, manufacturing teaser, CTA.

function HomeHero({ setRoute, heroVariant }) {
  const imgMap = {
    lobby:    "media/home-section-04.webp",
    council:  "media/public-areas-01.webp",
    palace:   "media/hospitality-05.webp",
    suite:    "media/hospitality-14.webp",
    atrium:   "media/headquarters-02.webp",
  };
  const heroImg = imgMap[heroVariant] || imgMap.lobby;
  return (
    <section className="hero">
      <div className="hero-img"><img src={heroImg} alt="" /></div>
      <div className="hero-content">
        <div className="container">
          <div className="hero-meta">
            <div style={{ display: "flex", gap: 32, alignItems: "center" }}>
              <span className="mono" style={{ color: "rgba(255,255,255,0.7)" }}>EST · 1976</span>
              <span className="mono" style={{ color: "rgba(255,255,255,0.5)" }}>—</span>
              <span className="mono" style={{ color: "rgba(255,255,255,0.7)" }}>JEBEL ALI · DUBAI</span>
            </div>
            <div style={{ display: "flex", gap: 32, alignItems: "center" }}>
              <span className="mono" style={{ color: "rgba(255,255,255,0.7)" }}>1,000+ PROJECTS</span>
              <span className="mono" style={{ color: "rgba(255,255,255,0.5)" }}>—</span>
              <span className="mono" style={{ color: "rgba(255,255,255,0.7)" }}>7 CITIES</span>
            </div>
          </div>
          <h1 className="display-xxl hero-title" style={{ margin: 0 }}>
            Designed,<br />
            <span className="hero-made"><em>made</em></span><br />
            &amp; installed.
          </h1>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: 56, gap: 48, flexWrap: "wrap" }}>
            <p className="lede" style={{ color: "rgba(255,255,255,0.85)", maxWidth: "44ch", margin: 0 }}>
              Luxury turnkey interiors for hotels, palaces and public space. From first sketch to final
              snag — manufactured under one roof in our 240,000&nbsp;sq.ft Dubai factory.
            </p>
            <div style={{ display: "flex", gap: 16 }}>
              <button className="btn" style={{ borderColor: "rgba(255,255,255,0.3)", color: "#fff" }} onClick={() => setRoute({ page: "projects" })}>
                Selected projects
              </button>
              <button className="btn btn-solid" style={{ background: "#fff", color: "var(--ink)", borderColor: "#fff" }} onClick={() => setRoute({ page: "contact" })}>
                Start a project &nbsp;→
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CredibilityStrip() {
  const { STATS } = window.GLI_DATA;
  return (
    <section style={{ background: "var(--paper-2)" }}>
      <div className="container">
        <div className="hgrid-4" style={{ borderTop: 0, borderBottom: 0 }}>
          {STATS.slice(0, 4).map((s, i) => (
            <div key={i} style={{ padding: "40px 32px", borderRight: i < 3 ? "1px solid var(--line)" : 0 }}>
              <div className="stat-val" style={{ color: "var(--ink)" }}>{s.v}</div>
              <div className="stat-lbl">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CraftStrip({ setRoute }) {
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 96, alignItems: "center" }}>
          <div>
            <Eyebrow n="01">The differentiator</Eyebrow>
            <h2 className="display-xl" style={{ margin: "20px 0 28px" }}>
              We <em style={{ fontStyle: "italic", color: "var(--green-deep)" }}>make</em> what we design.
            </h2>
            <p className="lede" style={{ marginBottom: 16 }}>
              Most fit-out houses draw the work and sub-contract the build. We do both.
              Joinery, loose furniture, soft furnishings and architectural metalwork —
              all manufactured by our own craftsmen, in our own 240,000&nbsp;sq.ft factory,
              alongside the design studio that drew them.
            </p>
            <p className="lede" style={{ marginBottom: 32 }}>
              The latest in machine and laser technology, combined with traditional
              craftsmanship. The same hand from the first concept board to the final
              hand-rubbed lacquer.
            </p>
            <button className="btn-ghost" onClick={() => setRoute({ page: "manufacturing" })}>
              Inside the factory
            </button>
          </div>
          <div style={{ position: "relative" }}>
            <div className="img-wrap craft-img" style={{ aspectRatio: "4/5" }}>
              <img src="media/home-service-manufacturing.webp" alt="Inside the factory" />
              <span className="sweep" />
              <span className="craft-tick" />
              <span className="craft-stamp">FACTORY · JEBEL ALI</span>
              <div className="craft-cap">
                <div>
                  <div className="mono">EST 1976 · IN-HOUSE</div>
                  <div className="ttl">Joinery hall, machine bay &amp; finishing room.</div>
                </div>
                <div className="mono" style={{ whiteSpace: "nowrap" }}>240k SQ.FT →</div>
              </div>
            </div>
            <div style={{ position: "absolute", bottom: -32, left: -32, width: "55%", background: "var(--surface)", padding: 28, border: "1px solid var(--line)" }}>
              <div className="eyebrow">In-house · since 1976</div>
              <div style={{ marginTop: 12, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                {[
                  ["Joinery", "·"],
                  ["Furniture", "·"],
                  ["Upholstery", "·"],
                  ["Metalwork", "·"],
                ].map(([k]) => (
                  <div key={k} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ width: 6, height: 6, background: "var(--green-deep)", borderRadius: "50%" }}/>
                    <span style={{ fontSize: 14 }}>{k}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SelectedProjects({ setRoute }) {
  const { PROJECTS } = window.GLI_DATA;
  const featured = [PROJECTS[0], PROJECTS[3], PROJECTS[5], PROJECTS[4], PROJECTS[7], PROJECTS[1]];
  const onOpen = (id) => setRoute({ page: "project", id });
  return (
    <section className="section-lg">
      <div className="container">
        <SectionHead
          eyebrow="Selected projects"
          eyebrowN="02"
          title="Six fit-outs across hospitality, public space and private residences."
          lede="A small selection from over a thousand. Royal and palace work is anonymised; named hotel marks are shown only where operators have given permission."
          action={<button className="btn-ghost" onClick={() => setRoute({ page: "projects" })}>View all projects</button>}
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48, rowGap: 72 }}>
          {featured.map(p => <ProjectCard key={p.id} p={p} onOpen={onOpen} />)}
        </div>
      </div>
    </section>
  );
}

function SectorsBlock({ setRoute }) {
  const { SECTORS } = window.GLI_DATA;
  return (
    <section className="section" style={{ background: "var(--paper-2)" }}>
      <div className="container">
        <SectionHead
          eyebrow="Sectors"
          eyebrowN="03"
          title="Three places where we make most of our work."
          lede="Each sector is a separate portfolio — explore the hub or filter the full project index by sector."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {SECTORS.map(s => (
            <div key={s.id} className="img-wrap" style={{ aspectRatio: "3/4", cursor: "pointer", position: "relative" }}
              onClick={() => setRoute({ page: "projects", sector: s.name })}>
              <img src={s.image} alt={s.name} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(20,33,63,0) 50%, rgba(20,33,63,0.78) 100%)" }} />
              <div style={{ position: "absolute", bottom: 28, left: 28, right: 28, color: "#fff" }}>
                <div className="mono" style={{ color: "rgba(255,255,255,0.7)" }}>{s.count}+ PROJECTS</div>
                <div className="display-m" style={{ color: "#fff", marginTop: 8 }}>{s.name}</div>
                <p style={{ fontSize: 14, color: "rgba(255,255,255,0.82)", marginTop: 12, maxWidth: "32ch" }}>{s.blurb}</p>
                <div style={{ marginTop: 18, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.08em" }}>EXPLORE →</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CapabilitiesBlock({ setRoute }) {
  const { CAPABILITIES } = window.GLI_DATA;
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="Capabilities"
          eyebrowN="04"
          title="One signature. Three disciplines."
          lede="Most clients come to us for all three. A few come for only one — we work with consulting designers as their manufacturer, or with operators as their interior contractor."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {CAPABILITIES.map((c, i) => (
            <div key={c.id} style={{ borderTop: "1px solid var(--ink)", paddingTop: 28 }}>
              <div className="img-wrap" style={{ aspectRatio: "4/3", marginBottom: 24 }}>
                <img src={c.image} alt={c.name} />
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
                <span className="mono" style={{ color: "var(--brass)" }}>0{i+1}</span>
                <h3 className="display-m" style={{ margin: 0 }}>{c.name}</h3>
              </div>
              <p style={{ marginTop: 14, fontSize: 15, color: "var(--ink-2)", lineHeight: 1.6 }}>{c.blurb}</p>
              <ul style={{ listStyle: "none", padding: 0, margin: "18px 0", fontSize: 13, color: "var(--graphite)" }}>
                {c.items.map(it => (
                  <li key={it} style={{ padding: "8px 0", borderBottom: "1px solid var(--line)" }}>{it}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MfgTeaser({ setRoute }) {
  return (
    <section className="mfg section-lg">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 96, alignItems: "end" }}>
          <div>
            <Eyebrow n="05">Manufacturing &amp; Craft</Eyebrow>
            <h2 className="display-xl" style={{ marginTop: 20, marginBottom: 28, color: "#fff" }}>
              A factory the size of four football pitches.
            </h2>
            <p className="lede" style={{ color: "rgba(255,255,255,0.78)", marginBottom: 32 }}>
              Inside our Jebel Ali headquarters, 240,000&nbsp;sq.ft of joinery, upholstery,
              metalwork and finishing — a single floor where the designers, machinists and
              craftsmen build every fixed and loose piece we specify.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginBottom: 40 }}>
              <StatBlock v="240k" l="Sq.ft factory" />
              <StatBlock v="520k" l="Sq.ft HQ" />
              <StatBlock v="2,000+" l="Craftsmen" />
              <StatBlock v="50 yrs" l="Of in-house build" />
            </div>
            <button className="btn" style={{ borderColor: "rgba(255,255,255,0.32)", color: "#fff" }} onClick={() => setRoute({ page: "manufacturing" })}>
              Inside the factory &nbsp;→
            </button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <div className="img-wrap" style={{ aspectRatio: "3/4" }}>
              <img src="media/home-service-contracting.webp" alt="" />
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, paddingTop: 48 }}>
              <div className="img-wrap" style={{ aspectRatio: "4/3" }}>
                <img src="media/home-service-design.webp" alt="" />
              </div>
              <div className="img-wrap" style={{ aspectRatio: "4/3" }}>
                <img src="media/headquarters-03.webp" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CitiesStrip() {
  const { CITIES } = window.GLI_DATA;
  return (
    <section style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container" style={{ display: "flex", gap: 48, padding: "28px 32px", alignItems: "center", flexWrap: "wrap" }}>
        <div className="mono" style={{ color: "var(--graphite)" }}>An international network</div>
        <div style={{ display: "flex", gap: 32, flexWrap: "wrap" }}>
          {CITIES.map(c => (
            <div key={c} style={{ fontFamily: "var(--font-serif)", fontSize: 18, color: "var(--ink)" }}>{c}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTAStrip({ setRoute }) {
  return (
    <section className="section-lg" style={{ background: "var(--ink)", color: "#fff" }}>
      <div className="container" style={{ textAlign: "center" }}>
        <Eyebrow n="06">
          <span style={{ color: "rgba(255,255,255,0.6)" }}>Start a project</span>
        </Eyebrow>
        <h2 className="display-xxl" style={{ color: "#fff", marginTop: 24, marginBottom: 40, maxWidth: "18ch", marginInline: "auto" }}>
          Tell us what<br />you're building.
        </h2>
        <p className="lede" style={{ color: "rgba(255,255,255,0.78)", margin: "0 auto 40px", textAlign: "center" }}>
          We respond to every brief within two working days. Discreet on royal and private residential.
        </p>
        <button className="btn btn-solid" style={{ background: "#fff", color: "var(--ink)", borderColor: "#fff", padding: "16px 32px" }} onClick={() => setRoute({ page: "contact" })}>
          Request a quote &nbsp;→
        </button>
        <div style={{ marginTop: 32, fontSize: 13, color: "rgba(255,255,255,0.5)" }}>
          Or call <a href="tel:+97148862220" style={{ color: "rgba(255,255,255,0.85)", textDecoration: "underline", textUnderlineOffset: 4 }}>+971 4 886 2220</a> · <a href="mailto:glinfo@gli.ae" style={{ color: "rgba(255,255,255,0.85)", textDecoration: "underline", textUnderlineOffset: 4 }}>glinfo@gli.ae</a>
        </div>
      </div>
    </section>
  );
}

function Home({ setRoute, heroVariant }) {
  const { REFERENCES } = window.GLI_DATA;
  return (
    <div className="page-enter">
      <HomeHero setRoute={setRoute} heroVariant={heroVariant} />
      <CredibilityStrip />
      <CraftStrip setRoute={setRoute} />
      <Marquee items={REFERENCES} />
      <SelectedProjects setRoute={setRoute} />
      <SectorsBlock setRoute={setRoute} />
      <CapabilitiesBlock setRoute={setRoute} />
      <MfgTeaser setRoute={setRoute} />
      <CitiesStrip />
      <CTAStrip setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { Home });