// Home page
function Home({ onNav, tweaks }) {
  const { PROJECTS, SERVICES, AWARDS, TESTIMONIALS, SECTORS, SECTOR_COUNTS } = window.DI;
  const featured = PROJECTS.filter((p) => p.featured);
  const heroes = ["media/hero-01.webp", "media/hero-02.webp", "media/hero-03.webp"];
  const [heroIdx, setHeroIdx] = useState(0);
  const [testimonialIdx, setTestimonialIdx] = useState(0);
  const heroMode = tweaks?.heroMode || "slider";

  useEffect(() => {
    if (heroMode !== "slider") return;
    const id = setInterval(() => setHeroIdx((i) => (i + 1) % heroes.length), 6000);
    return () => clearInterval(id);
  }, [heroMode, heroes.length]);

  return (
    <div className="page-enter">
      {/* HERO */}
      <section style={{ position: "relative", minHeight: "92vh", display: "flex", flexDirection: "column", justifyContent: "flex-end", overflow: "hidden", background: "var(--ink)" }}>
        {/* Background */}
        {heroMode === "slider" && heroes.map((src, i) => (
          <div key={src} style={{
            position: "absolute", inset: 0, backgroundImage: `url(${src})`,
            backgroundSize: "cover", backgroundPosition: "center",
            opacity: i === heroIdx ? 1 : 0, transition: "opacity 1200ms ease",
          }}></div>
        ))}
        {heroMode === "still" && (
          <div style={{ position: "absolute", inset: 0, backgroundImage: `url(${heroes[0]})`, backgroundSize: "cover", backgroundPosition: "center" }}></div>
        )}
        {heroMode === "video" && (
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, #15161A 0%, #2a2c33 100%)", overflow: "hidden" }}>
            <div style={{ position: "absolute", inset: 0, opacity: 0.4, backgroundImage: `url(${heroes[0]})`, backgroundSize: "cover", backgroundPosition: "center", filter: "grayscale(1)" }}></div>
            <div style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", display: "flex", alignItems: "center", gap: "1rem", color: "var(--paper)" }}>
              <div style={{ width: 64, height: 64, borderRadius: "50%", border: "1px solid rgba(255,255,255,0.4)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <svg width="14" height="16" viewBox="0 0 14 16" fill="currentColor"><polygon points="0,0 14,8 0,16" /></svg>
              </div>
              <div className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>Factory tour · 2:14</div>
            </div>
          </div>
        )}
        {/* Vignette */}
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.85) 100%)" }}></div>

        {/* Content */}
        <div className="container" style={{ position: "relative", zIndex: 2, paddingTop: "8rem", paddingBottom: "5rem", color: "var(--paper)" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "1.5rem", alignItems: "end" }}>
            <div style={{ gridColumn: "span 8" }} className="hero-headline">
              <span className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>
                <span className="dot"></span>Dubai · Abu Dhabi · est. 2012
              </span>
              <h1 className="h1" style={{ marginTop: "1.25rem", color: "var(--paper)", fontWeight: 300 }}>
                Designed, made and<br/>
                <span style={{ fontStyle: "italic", fontWeight: 300 }}>built</span>
                <span style={{ color: "var(--accent)" }}>.</span> One contract.
              </h1>
              <p className="lead" style={{ marginTop: "1.75rem", color: "rgba(255,255,255,0.75)", maxWidth: "36rem" }}>
                A one-stop shop for fit-out and interior design — design + build, turnkey,
                with seven manufacturing divisions under our roof in Dubai Investment Park.
              </p>
              <div style={{ marginTop: "2.25rem", display: "flex", gap: "0.75rem", flexWrap: "wrap" }}>
                <button className="btn btn--accent" onClick={() => onNav("contact")}>Start a project <Arrow /></button>
                <button className="btn btn--ghost-light" onClick={() => onNav("projects")}>See projects <Arrow /></button>
              </div>
            </div>
            <div style={{ gridColumn: "span 4" }} className="hero-side">
              <div style={{ borderLeft: "1px solid rgba(255,255,255,0.18)", paddingLeft: "1.5rem" }}>
                <div className="eyebrow" style={{ color: "rgba(255,255,255,0.55)" }}>Currently in build</div>
                <p style={{ marginTop: "0.75rem", color: "var(--paper)", fontFamily: "var(--font-display)", fontSize: "1.1rem", lineHeight: 1.3 }}>
                  Odoo Dubai South — 90,000 sq ft corporate HQ across six in-house divisions.
                </p>
                <button
                  onClick={() => onNav("project:odoo")}
                  style={{ marginTop: "1rem", background: "transparent", border: 0, color: "var(--paper)", fontFamily: "var(--font-mono)", fontSize: "0.7rem", letterSpacing: "0.14em", textTransform: "uppercase", padding: 0, display: "inline-flex", alignItems: "center", gap: "0.5rem" }}>
                  View case study <Arrow size={16} />
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Hero slider dots */}
        {heroMode === "slider" && (
          <div style={{ position: "absolute", bottom: "2rem", right: "var(--pad-page)", display: "flex", gap: "0.5rem", zIndex: 3 }}>
            {heroes.map((_, i) => (
              <button key={i} onClick={() => setHeroIdx(i)} aria-label={`Hero slide ${i + 1}`}
                style={{ width: i === heroIdx ? 32 : 16, height: 2, background: i === heroIdx ? "var(--paper)" : "rgba(255,255,255,0.4)", border: 0, padding: 0, transition: "width 300ms ease" }}></button>
            ))}
          </div>
        )}

        <style>{`
          @media (max-width: 880px) {
            .hero-headline { grid-column: 1 / -1 !important; }
            .hero-side { grid-column: 1 / -1 !important; margin-top: 2rem; }
          }
        `}</style>
      </section>

      {/* STAT BAND */}
      <section className="bg-paper" style={{ padding: "4rem 0", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "1.5rem", alignItems: "start" }}>
            <div style={{ gridColumn: "span 3" }} className="stat-cell">
              <div className="eyebrow"><span className="dot"></span>Years</div>
              <div className="stat-num num" style={{ marginTop: "0.75rem" }}>13<sup>+</sup></div>
              <p className="text-graphite" style={{ fontSize: "0.9rem", marginTop: "0.5rem" }}>of design and delivery</p>
            </div>
            <div style={{ gridColumn: "span 3" }} className="stat-cell">
              <div className="eyebrow"><span className="dot"></span>Completed</div>
              <div className="stat-num num" style={{ marginTop: "0.75rem" }}>1,200<sup>+</sup></div>
              <p className="text-graphite" style={{ fontSize: "0.9rem", marginTop: "0.5rem" }}>commercial projects</p>
            </div>
            <div style={{ gridColumn: "span 3" }} className="stat-cell">
              <div className="eyebrow"><span className="dot"></span>Team</div>
              <div className="stat-num num" style={{ marginTop: "0.75rem" }}>1,400<sup>+</sup></div>
              <p className="text-graphite" style={{ fontSize: "0.9rem", marginTop: "0.5rem" }}>across studio, factory & site</p>
            </div>
            <div style={{ gridColumn: "span 3" }} className="stat-cell">
              <div className="eyebrow"><span className="dot"></span>Production</div>
              <div className="stat-num num" style={{ marginTop: "0.75rem" }}>100k<sup>sf</sup></div>
              <p className="text-graphite" style={{ fontSize: "0.9rem", marginTop: "0.5rem" }}>in-house manufacturing footprint</p>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .stat-cell { grid-column: span 6 !important; }
          }
        `}</style>
      </section>

      {/* SELECTED PROJECTS */}
      <section className="section bg-paper">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "1.5rem", alignItems: "end", marginBottom: "4rem" }}>
            <div style={{ gridColumn: "span 7" }}>
              <Eyebrow>Selected projects · 2022 — 2024</Eyebrow>
              <h2 className="h2" style={{ marginTop: "1rem" }}>
                Real briefs. Real sectors.<br/>Built by the people who designed them.
              </h2>
            </div>
            <div style={{ gridColumn: "span 5", display: "flex", justifyContent: "flex-end" }}>
              <button className="btn" onClick={() => onNav("projects")}>All projects <Arrow /></button>
            </div>
          </div>

          {/* Asymmetric showcase grid */}
          <div className="featured-grid" style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "1.5rem" }}>
            {/* Odoo - hero card */}
            <FeaturedCard project={PROJECTS[0]} onNav={onNav} span={8} aspect="4/3" />
            <FeaturedCard project={PROJECTS[1]} onNav={onNav} span={4} aspect="3/4" />
            <FeaturedCard project={PROJECTS[10]} onNav={onNav} span={4} aspect="3/4" />
            <FeaturedCard project={PROJECTS[3]} onNav={onNav} span={4} aspect="3/4" />
            <FeaturedCard project={PROJECTS[11]} onNav={onNav} span={4} aspect="3/4" />
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .featured-grid > div { grid-column: 1 / -1 !important; }
          }
        `}</style>
      </section>

      {/* SECTORS MARQUEE */}
      <section className="section--tight" style={{ background: "var(--mist)", padding: "2.5rem 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", overflow: "hidden" }}>
        <div style={{ display: "flex", gap: "3rem", alignItems: "center", animation: "marquee 50s linear infinite", whiteSpace: "nowrap" }}>
          {[...SECTORS.filter((s) => s.key !== "all"), ...SECTORS.filter((s) => s.key !== "all")].map((s, i) => (
            <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: "1rem" }}>
              <span className="display" style={{ fontSize: "2.2rem", letterSpacing: "-0.02em", color: i % 2 === 0 ? "var(--ink)" : "transparent", WebkitTextStroke: i % 2 === 1 ? "1px var(--ink)" : "0" }}>
                {s.label}
              </span>
              <span style={{ width: 6, height: 6, background: "var(--accent)", borderRadius: "50%" }}></span>
            </span>
          ))}
        </div>
      </section>

      {/* SERVICES */}
      <section className="section bg-paper">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "1.5rem", alignItems: "end", marginBottom: "4rem" }}>
            <div style={{ gridColumn: "span 6" }}>
              <Eyebrow>Capabilities</Eyebrow>
              <h2 className="h2" style={{ marginTop: "1rem" }}>Six services. One accountable team.</h2>
            </div>
            <div style={{ gridColumn: "span 6" }}>
              <p className="lead">
                Built around a single contract for design AND build. Every service below is delivered by an in-house
                division — so the people who quoted your project also fabricate, install, and stand behind the 2-year DLP.
              </p>
            </div>
          </div>

          <div className="services-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--line)", borderLeft: "1px solid var(--line)" }}>
            {SERVICES.map((s) => (
              <div key={s.num} className="service-cell" style={{ padding: "2.5rem", borderRight: "1px solid var(--line)", borderBottom: "1px solid var(--line)", minHeight: "16rem", display: "flex", flexDirection: "column", justifyContent: "space-between", transition: "background 200ms", cursor: "default" }}
                onMouseEnter={(e) => e.currentTarget.style.background = "var(--mist)"}
                onMouseLeave={(e) => e.currentTarget.style.background = ""}>
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
                  <span className="num" style={{ fontSize: "0.85rem", color: "var(--graphite)" }}>{s.num}</span>
                  <span style={{ width: 28, height: 1, background: "var(--accent)" }}></span>
                </div>
                <div>
                  <h3 className="h3" style={{ marginTop: "0", fontSize: "1.5rem" }}>{s.title}</h3>
                  <p className="text-graphite" style={{ marginTop: "0.75rem", fontSize: "0.95rem", lineHeight: 1.55 }}>{s.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .services-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* IN-HOUSE TEASER */}
      <section className="section bg-charcoal" style={{ position: "relative", overflow: "hidden" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "3rem", alignItems: "center" }}>
            <div style={{ gridColumn: "span 6" }} className="inhouse-text">
              <Eyebrow accent={false}><span style={{ color: "var(--accent)" }}>●</span>&nbsp;&nbsp;The differentiator</Eyebrow>
              <h2 className="h2" style={{ marginTop: "1rem", color: "var(--paper)" }}>
                100,000 sq ft of in-house manufacturing in Dubai Investment Park.
              </h2>
              <p className="lead" style={{ color: "rgba(255,255,255,0.7)", marginTop: "1.5rem" }}>
                Joinery, glass, metal, signage, furniture, MEP, and Fire-Life-Safety — seven divisions, one yard.
                We don't sub-contract the things that decide whether a fit-out lands on programme.
              </p>
              <div style={{ marginTop: "2rem" }}>
                <button className="btn btn--ghost-light" onClick={() => onNav("in-house")}>How we deliver <Arrow /></button>
              </div>
              <div style={{ marginTop: "3rem", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "1.5rem", borderTop: "1px solid rgba(255,255,255,0.15)", paddingTop: "2rem" }}>
                {[
                  { num: "40k", label: "Glass · Metal · Signage", sub: "2025 factory" },
                  { num: "7", label: "In-house divisions", sub: "MEP to FLS" },
                  { num: "2yr", label: "Defect liability", sub: "all turnkey projects" },
                ].map((s) => (
                  <div key={s.label}>
                    <div className="display num" style={{ fontSize: "2.25rem", color: "var(--paper)", fontWeight: 300 }}>{s.num}<span style={{ color: "var(--accent)", fontSize: "0.5em" }}>{s.num === "2yr" ? "" : "+"}</span></div>
                    <div className="eyebrow" style={{ color: "rgba(255,255,255,0.6)", marginTop: "0.5rem" }}>{s.label}</div>
                    <div style={{ fontSize: "0.8rem", color: "rgba(255,255,255,0.5)", marginTop: "0.25rem", fontFamily: "var(--font-mono)" }}>{s.sub}</div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ gridColumn: "span 6", position: "relative" }} className="inhouse-img">
              <div className="img-hover" style={{ aspectRatio: "4/5", position: "relative" }}>
                <img src="media/service-turnkey.webp" alt="In-house joinery" />
                <div style={{ position: "absolute", bottom: "1rem", left: "1rem", color: "var(--paper)", fontFamily: "var(--font-mono)", fontSize: "0.7rem", letterSpacing: "0.14em", textTransform: "uppercase", background: "rgba(0,0,0,0.5)", padding: "0.5rem 0.75rem", backdropFilter: "blur(4px)" }}>
                  Workshop · DIP, Dubai
                </div>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .inhouse-text, .inhouse-img { grid-column: 1 / -1 !important; }
          }
        `}</style>
      </section>

      {/* TESTIMONIALS */}
      <section className="section bg-paper">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "1.5rem", marginBottom: "3rem" }}>
            <div style={{ gridColumn: "span 8" }}>
              <Eyebrow>Voices from the brief</Eyebrow>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "3rem", alignItems: "start" }}>
            <div style={{ gridColumn: "span 8" }} className="testimonial-quote">
              <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(1.5rem, 2.2vw, 2rem)", lineHeight: 1.3, color: "var(--ink)", fontWeight: 400 }}>
                <span style={{ color: "var(--accent)" }}>“</span>{TESTIMONIALS[testimonialIdx].quote}<span style={{ color: "var(--accent)" }}>”</span>
              </div>
              <div style={{ marginTop: "2rem", borderTop: "1px solid var(--line)", paddingTop: "1rem" }}>
                <div style={{ fontWeight: 500 }}>{TESTIMONIALS[testimonialIdx].name}</div>
                <div className="eyebrow" style={{ marginTop: "0.25rem" }}>{TESTIMONIALS[testimonialIdx].role} · {TESTIMONIALS[testimonialIdx].org}</div>
              </div>
            </div>
            <div style={{ gridColumn: "span 4", display: "flex", flexDirection: "column", gap: "0.75rem" }} className="testimonial-list">
              {TESTIMONIALS.map((t, i) => (
                <button key={t.name} onClick={() => setTestimonialIdx(i)}
                  style={{
                    textAlign: "left", background: i === testimonialIdx ? "var(--mist)" : "transparent",
                    border: 0, borderLeft: i === testimonialIdx ? "1px solid var(--accent)" : "1px solid var(--line)",
                    padding: "1rem 1.25rem", transition: "all 150ms",
                  }}>
                  <div style={{ fontSize: "0.95rem", fontWeight: 500, color: i === testimonialIdx ? "var(--ink)" : "var(--graphite)" }}>{t.org}</div>
                  <div className="eyebrow" style={{ marginTop: "0.25rem", color: i === testimonialIdx ? "var(--ink)" : "var(--graphite)" }}>{t.name.split(" ")[0]} {t.name.split(" ")[1]?.charAt(0)}.</div>
                </button>
              ))}
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .testimonial-quote, .testimonial-list { grid-column: 1 / -1 !important; }
          }
        `}</style>
      </section>

      {/* AWARDS */}
      <section className="section--tight" style={{ background: "var(--mist)", paddingTop: "5rem", paddingBottom: "5rem" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "2.5rem", flexWrap: "wrap", gap: "1rem" }}>
            <h3 className="display" style={{ fontSize: "1.5rem", color: "var(--ink)" }}>Recognised work — attributed</h3>
            <span className="eyebrow">{AWARDS.length} awards · 2018 — 2026</span>
          </div>
          <div style={{ borderTop: "1px solid var(--line)" }}>
            {AWARDS.map((a) => (
              <div key={`${a.name}-${a.year}`} style={{
                display: "grid", gridTemplateColumns: "80px 1fr auto", gap: "1.5rem",
                alignItems: "center", padding: "1.25rem 0", borderBottom: "1px solid var(--line)",
              }} className="award-row">
                <span className="num" style={{ fontSize: "1rem", color: "var(--graphite)" }}>{a.year}</span>
                <span style={{ fontFamily: "var(--font-display)", fontSize: "1.1rem", color: "var(--ink)", lineHeight: 1.3 }}>{a.name}</span>
                <span className="eyebrow" style={{ textAlign: "right" }}>{a.issuer}</span>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 720px) {
            .award-row { grid-template-columns: 60px 1fr !important; }
            .award-row > span:last-child { grid-column: 2 !important; text-align: left !important; margin-top: 0.25rem; }
          }
        `}</style>
      </section>
    </div>
  );
}

function FeaturedCard({ project, onNav, span = 4, aspect = "3/4" }) {
  return (
    <div style={{ gridColumn: `span ${span}` }}>
      <a href="#" onClick={(e) => { e.preventDefault(); onNav(`project:${project.slug}`); }} style={{ display: "block" }}>
        <div className="img-hover" style={{ aspectRatio: aspect, position: "relative" }}>
          <img src={project.cover} alt={project.name} />
          <div style={{ position: "absolute", top: "1rem", left: "1rem", display: "inline-flex", alignItems: "center", gap: "0.5rem", background: "rgba(255,255,255,0.92)", padding: "0.35rem 0.7rem" }}>
            <span style={{ width: 4, height: 4, background: "var(--accent)", borderRadius: "50%" }}></span>
            <span className="eyebrow" style={{ color: "var(--ink)" }}>{project.sectorLabel}</span>
          </div>
        </div>
        <div style={{ marginTop: "1.25rem", display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "1rem" }}>
          <div>
            <h3 className="h3" style={{ margin: 0 }}>{project.name}</h3>
            <div className="eyebrow" style={{ marginTop: "0.4rem" }}>
              {project.location} · {project.scope}{project.size ? ` · ${project.size}` : ""}
            </div>
          </div>
          <Arrow />
        </div>
      </a>
    </div>
  );
}

Object.assign(window, { Home });