// Home screen — editorial architectural rebuild (enhanced)

// ─── Editorial top bar ─────────────────────────────────────────
function EditorialTopBar() {
  const items = [
    { label: "Issue 026", accent: true },
    { label: "Vol III" },
    { label: "Dubai · GCC" },
    { label: "Est. 2012", accent: true },
    { label: "CID Top-25 Fit-Out · 2023" },
    { label: "Design ME Powerlist · 2023" },
    { label: "Love That Design · 2023" },
    { label: "EN · العربية" }
  ];
  const dup = [...items, ...items, ...items];
  return (
    <div className="edit-bar">
      <div className="edit-track">
        {dup.map((x, i) => (
          <span className="edit-item" key={i}>
            {x.accent && <span className="accent-dot" />}
            {x.label}
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── Animated number counter ──────────────────────────────────
function CountUp({ to, suffix = "", duration = 1600 }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    let frame, started = false;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started) {
        started = true;
        const start = performance.now();
        const tick = (now) => {
          const t = Math.min(1, (now - start) / duration);
          const eased = 1 - Math.pow(1 - t, 3);
          setVal(Math.round(eased * to));
          if (t < 1) frame = requestAnimationFrame(tick);
        };
        frame = requestAnimationFrame(tick);
      }
    }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => { obs.disconnect(); if (frame) cancelAnimationFrame(frame); };
  }, [to, duration]);
  return <span ref={ref}>{val}{suffix}</span>;
}

// ─── HERO — enhanced ──────────────────────────────────────────
function HomeHero({ heroLight }) {
  return (
    <section className={`hero ${heroLight ? "light" : ""}`}>
      <div className="hero-bg" style={{ backgroundImage: `url(media/project-land-sterling-12.webp)` }} />
      <div className="hero-grid">
        <div className="hero-rail">
          <div className="rail-num">Issue 026 / Vol III</div>
          <div className="rail-bottom">↓</div>
        </div>

        <div className="hero-body wrap" style={{ maxWidth: "none", paddingLeft: 0, paddingRight: 0 }}>
          <div className="hero-eyebrow fade-in" style={{ animationDelay: "100ms" }}>
            <span className="pulse"></span>
            <span>Now booking — Q3 2026</span>
            <span className="line"></span>
            <span style={{ opacity: 0.7 }}>Dubai · Sheikh Zayed Road</span>
          </div>

          <h1 className="hero-headline fade-in" style={{ animationDelay: "180ms" }}>
            Design and build,
            <div className="hl-row">
              <em>under one</em>
              <span className="small">eight in-house disciplines</span>
            </div>
            <em>roof.</em>
          </h1>

          <div className="hero-lede fade-in" style={{ animationDelay: "320ms" }}>
            <div className="lede-meta">
              <div className="row"><span className="k">Founded</span><span className="v">2012 · Dubai</span></div>
              <div className="row"><span className="k">Practice</span><span className="v">Interior design + fit-out</span></div>
              <div className="row"><span className="k">Operating</span><span className="v">UAE · GCC</span></div>
            </div>
            <p className="lede-copy" style={{ opacity: 0.94 }}>
              We design and deliver commercial interiors across the Gulf —
              concept, MEP, approvals, build and fit-out, all in-house.
              Award-recognised by Commercial Interior Design and Design Middle East.
            </p>
          </div>

          <div className="hero-counters fade-in" style={{ animationDelay: "440ms" }}>
            <div className="hero-counter">
              <div className="big"><CountUp to={12} /><sup>YR</sup></div>
              <div className="lbl">In practice</div>
            </div>
            <div className="hero-counter">
              <div className="big"><CountUp to={40} suffix="+" /></div>
              <div className="lbl">Named projects</div>
            </div>
            <div className="hero-counter">
              <div className="big"><CountUp to={6} /></div>
              <div className="lbl">Sector practices</div>
            </div>
            <div className="hero-counter">
              <div className="big">100<span className="unit">%</span></div>
              <div className="lbl">In-house delivery</div>
            </div>
          </div>

          <div className="hero-cta-row fade-in" style={{ animationDelay: "560ms" }}>
            <div className="left">
              <a href="#/contact" className="btn btn-primary" style={{ background: "var(--paper)", color: "var(--ink)" }}>
                Start a project <ArrowRight />
              </a>
              <a href="#/projects" className="btn btn-ghost" style={{ color: "currentColor" }}>
                Selected work
              </a>
            </div>
            <div className="scroll-cue">
              <span className="line"></span>
              Scroll
            </div>
          </div>
        </div>

        <div className="hero-rail hero-rail-right">
          <div className="rail-num">Horton — Dubai · GCC</div>
          <div className="rail-bottom">25.15° N</div>
        </div>
      </div>
    </section>
  );
}

// ─── Manifesto pull ───────────────────────────────────────────
function Manifesto() {
  return (
    <section className="manifesto grain" style={{ position: "relative" }}>
      <div className="manifesto-content">
        <div className="manifesto-meta">
          A note on<br />the practice<br /><br />— 2026
        </div>
        <h2>
          Most fit-out work in this city is brokered through four or five outside firms.<br />
          We <em>refuse</em> to work that way.
        </h2>
        <div className="manifesto-meta right">
          Horton<br />Interiors<br /><br />Since 2012
        </div>
      </div>
    </section>
  );
}

// ─── Numbers band ────────────────────────────────────────────
function NumbersBand() {
  return (
    <section className="nums-band">
      <div className="wrap">
        <div className="eyebrow" style={{ color: "color-mix(in oklch, white 60%, transparent)", marginBottom: "3rem" }}>
          <span className="sector-dot" style={{ marginRight: "0.6rem" }}></span>
          By the numbers · As of 2026
        </div>
        <div className="nums-grid">
          <div className="nums-cell">
            <div className="nbig"><CountUp to={12} /><em>yr</em></div>
            <div className="nlbl">In practice — Dubai &amp; the GCC, founded 2012.</div>
          </div>
          <div className="nums-cell">
            <div className="nbig"><CountUp to={40} />+</div>
            <div className="nlbl">Named projects on the books, six sector practices.</div>
          </div>
          <div className="nums-cell">
            <div className="nbig"><CountUp to={850} /><span className="unit">m²</span></div>
            <div className="nlbl">Fabrication workshop in Al Quoz Industrial Area 3.</div>
          </div>
          <div className="nums-cell">
            <div className="nbig"><CountUp to={3} /><em>×</em></div>
            <div className="nlbl">Award-recognised in 2023 — CID, Design ME, Love That Design.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Capability block ENHANCED with workshop callout ──────
function CapabilityBlock() {
  const disciplines = window.HORTON.disciplines;
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: "4rem", marginBottom: "4rem", alignItems: "end" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: "1.25rem" }}>
              <span className="sector-dot" style={{ marginRight: "0.6rem" }}></span>
              How we work · 01
            </div>
            <h2 className="h-1">
              <em style={{ fontStyle: "italic" }}>Eight disciplines.</em><br />
              One project director.
            </h2>
          </div>
          <p className="body-lg" style={{ maxWidth: "52ch", color: "var(--graphite)" }}>
            Most fit-out contractors hand work between four or five outside firms —
            design here, MEP there, joinery somewhere else. We don't. Every
            discipline below sits inside Horton. One number, one schedule,
            one team accountable from concept through handover.
          </p>
        </div>
        <div className="capability-grid">
          {disciplines.map(d => (
            <div className="capability-cell" key={d.n}>
              <div className="num">{d.n}</div>
              <div className="label">{d.label}</div>
              <div className="desc">{d.desc}</div>
            </div>
          ))}
        </div>

        {/* Workshop callout band */}
        <div className="workshop-callout">
          <div className="ws-tag">+ Al Quoz Workshop</div>
          <div className="ws-text">
            Bespoke joinery, reception desks, library shelving and integrated millwork —
            <em> fabricated by our own team</em>, four kilometres from the studio.
          </div>
          <div className="ws-stat">850<span className="unit">m²</span></div>
          <a href="#/how-we-work" className="btn-arrow">Tour the workshop <ArrowRight /></a>
        </div>
      </div>
    </section>
  );
}

// ─── Featured projects — EDITORIAL INDEX TABLE ────────────
function FeaturedProjects() {
  const featured = ["landmark-group-jafza", "jamjoom-pharma", "giving-movement", "middlesex-university", "kurdos", "watania-takaful"]
    .map(slug => window.HORTON.projects.find(p => p.slug === slug));
  const navTo = slug => window.location.hash = `#/projects/${slug}`;

  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: "2rem", gap: "2rem", flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: "1.25rem" }}>
              <span className="sector-dot" style={{ marginRight: "0.6rem" }}></span>
              Selected work · 02
            </div>
            <h2 className="h-1">
              An <em style={{ fontStyle: "italic" }}>index</em> of recent projects.
            </h2>
          </div>
          <a href="#/projects" className="btn-arrow">All 40+ projects <ArrowRight /></a>
        </div>

        <table className="index-table">
          <thead>
            <tr>
              <th>№</th>
              <th></th>
              <th>Project</th>
              <th>Sector</th>
              <th>Location</th>
              <th>Scope</th>
              <th>Year</th>
            </tr>
          </thead>
          <tbody>
            {featured.map((p, i) => (
              <tr key={p.slug} onClick={() => navTo(p.slug)}>
                <td className="ix-num">{(i + 2).toString().padStart(2, "0")}</td>
                <td className="ix-thumb">
                  <div className="img" style={{ backgroundImage: `url(${p.thumb})` }} />
                </td>
                <td><div className="ix-name">{p.name}<em>→</em></div></td>
                <td className="ix-sector">{p.sectorName}</td>
                <td className="ix-loc">{p.location.split(",")[0]}</td>
                <td className="ix-scope">{p.scope}</td>
                <td className="ix-year">{p.year}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

// ─── Sectors — DRAMATIC asymmetric layout ──────────────────
function SectorsBlock() {
  const sectors = window.HORTON.sectors;
  // recent project name per sector (verified, from data)
  const sectorMeta = {
    "workplace": { recent: "Land Sterling HQ", img: "media/project-land-sterling-1.webp", cls: "sector-tile-big" },
    "food-beverage": { recent: "Kurdos", img: "media/project-kurdos-016.webp", cls: "sector-tile-med" },
    "healthcare": { recent: "Jamjoom Pharma", img: "media/project-jamjoom-pharma-01.webp", cls: "sector-tile-med" },
    "retail": { recent: "The Giving Movement", img: "media/project-giving-movement-1.webp", cls: "sector-tile-med" },
    "education": { recent: "Middlesex University", img: "media/project-middlesex-uni-011.webp", cls: "sector-tile-med" },
    "sports-entertainment": { recent: "—", img: "media/project-allsopp-allsopp.webp", cls: "sector-tile-med" }
  };

  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: "3rem", gap: "2rem", flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: "1.25rem" }}>
              <span className="sector-dot" style={{ marginRight: "0.6rem" }}></span>
              Six sectors · 04
            </div>
            <h2 className="h-1">
              Where the work <em style={{ fontStyle: "italic" }}>lives.</em>
            </h2>
          </div>
          <a href="#/projects" className="btn-arrow">All sectors <ArrowRight /></a>
        </div>

        <div className="sector-strip">
          {sectors.map((s, i) => {
            const m = sectorMeta[s.id];
            return (
              <a key={s.id} className="sector-tile" href={`#/projects?sector=${s.id}`}>
                <img src={m.img} alt={s.name} loading="lazy" />
                <div className="sector-num">{(i + 1).toString().padStart(2, "0")}</div>
                <div className="sector-reveal">
                  <div className="sector-name">{s.name.split(" ")[0]} {s.name.split(" ").slice(1).length > 0 && <em>{s.name.split(" ").slice(1).join(" ")}</em>}</div>
                  <div className="sector-count">{s.count} projects</div>
                  <div className="sector-recent">
                    <span style={{ opacity: 0.55 }}>↳ Most recent</span>
                    <span>{m.recent}</span>
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── Leadership block ────────────────────────────────────
function LeadershipBlock() {
  const leaders = [
    { name: "Abdelbasset", lastName: "Betraoui", role: "Chief Executive Officer", bio: "Twelve years of commercial real-estate and construction across the UK and UAE. Architect of Horton's transformation from a small maintenance and fit-out firm into a turnkey D&B contractor.", initials: "AB" },
    { name: "Abdelmouamine", lastName: "Bougandoura", role: "Managing Director", bio: "Architect; thirteen-plus years in the region. Has overseen more than two hundred design-and-build projects on the books.", initials: "AB" },
    { name: "Neelanchana", lastName: "Kumar", role: "Director of Design", bio: "Completed and handed over more than three hundred and fifty projects across the GCC in fifteen years. Leads the in-house design studio and client engagement.", initials: "NK" }
  ];
  return (
    <section className="leadership" style={{ background: "var(--mist)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: "4rem", alignItems: "end" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: "1.25rem" }}>
              <span className="sector-dot" style={{ marginRight: "0.6rem" }}></span>
              Leadership · 05
            </div>
            <h2 className="h-1">
              Three principals.<br /><em style={{ fontStyle: "italic" }}>One studio.</em>
            </h2>
          </div>
          <p className="body-lg" style={{ maxWidth: "52ch", color: "var(--graphite)" }}>
            The practice is led by three people who sit on the floor with the team —
            not a holding company. Every major brief is reviewed by at least one of them
            before mobilisation.
          </p>
        </div>
        <div className="leadership-grid">
          {leaders.map(l => (
            <div className="leader" key={l.lastName}>
              <div className="portrait">
                <div className="placeholder">
                  Portrait<br />
                  <span style={{ display: "block", marginTop: "0.4rem", opacity: 0.7 }}>{l.initials} · Pending</span>
                </div>
              </div>
              <div>
                <div className="l-meta">Principal · {l.lastName}</div>
                <div className="l-name" style={{ marginTop: "0.5rem" }}>{l.name} <em>{l.lastName}</em></div>
                <div className="l-role">{l.role}</div>
                <div className="l-bio">{l.bio}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Awards — enhanced ──────────────────────────────────
function AwardsBlock() {
  const awards = window.HORTON.awards;
  return (
    <section className="awards-block">
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "2rem", flexWrap: "wrap", gap: "1rem" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: "1rem" }}>
              <span className="sector-dot" style={{ marginRight: "0.6rem" }}></span>
              Recognition · 07 · Attributed
            </div>
            <h2 className="h-1">
              Awarded in <em style={{ fontStyle: "italic" }}>2023.</em>
            </h2>
          </div>
          <div className="body-sm" style={{ opacity: 0.7, maxWidth: "30ch", textAlign: "right" }}>
            No star ratings or aggregate testimonials — every award attributed to issuer and year.
          </div>
        </div>
        <div className="awards-grid">
          {awards.map(a => (
            <div className="a-cell" key={a.name}>
              <div className="a-year">{a.year}</div>
              <div className="a-issuer">{a.issuer}</div>
              <div className="a-name">{a.name}</div>
            </div>
          ))}
        </div>

        <div className="awards-feature">
          <div className="a-badge">
            <img src="media/award-cid-fitout-powerlist.webp" alt="Design Middle East Fit-Out Powerlist badge" />
          </div>
          <div className="a-feature-text">
            <div className="a-meta">Featured award · 2023</div>
            <h4>Design Middle East — Fit-Out Powerlist</h4>
            <p>
              Recognised in Design Middle East's regional powerlist for in-house
              design-and-build delivery — sitting alongside the GCC's most established
              fit-out contractors. Award badge use pending issuer clearance.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Magazine feature spread (the flagship project) ─────────
function MagazineFeature() {
  const p = window.HORTON.projects.find(x => x.slug === "land-sterling-hq");
  const navTo = () => window.location.hash = `#/projects/${p.slug}`;
  return (
    <section className="wrap" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="mag-feature" onClick={navTo} style={{ cursor: "pointer" }}>
        <div className="mag-img">
          <img src={p.gallery[1]} alt={p.name} loading="lazy" />
          <div className="mag-img-meta">Land Sterling HQ · Plate 02 / 04</div>
        </div>
        <div className="mag-text">
          <div className="mag-eyebrow">
            <span className="num">FEATURE</span>
            <span>Workplace · Sheikh Zayed Road</span>
          </div>
          <h3 className="mag-title">
            A new headquarters<br /><em>for the city's quietest</em><br />real-estate advisory.
          </h3>
          <p className="mag-blurb">
            Land Sterling came to us after fifteen years operating from three separate
            addresses. The new tenancy on Sheikh Zayed Road let them consolidate — without
            reducing the firm to one open-plan room.
          </p>
          <blockquote className="mag-pull">
            "The fabrication workshop in Al Quoz is the differentiator. Four weeks saved."
          </blockquote>
          <div className="mag-meta">
            <span className="k">Sector</span><span className="v">Workplace</span>
            <span className="k">Scope</span><span className="v">Fit-out · 1,450 sqm</span>
            <span className="k">Programme</span><span className="v">16 weeks · 2024</span>
            <span className="k">In-house</span><span className="v">8 / 8 disciplines</span>
          </div>
          <a href={`#/projects/${p.slug}`} className="btn-arrow" style={{ alignSelf: "flex-start" }}>
            Read the case study <ArrowRight />
          </a>
        </div>
      </div>
    </section>
  );
}

// ─── Materials library ─────────────────────────────────────
function MaterialsLibrary() {
  const materials = [
    { name: "Travertine", src: "Bagni di Tivoli · IT", c: "linear-gradient(135deg, #E8DBC4 0%, #C9B89A 60%, #B89F7D 100%)" },
    { name: "White Oak", src: "Quartersawn · EU", c: "linear-gradient(155deg, #D8B891 0%, #BC9A6E 70%, #A18054 100%)" },
    { name: "Brushed Bronze", src: "ASM · UAE", c: "linear-gradient(140deg, #B59770 0%, #8E6F45 50%, #6B5430 100%)" },
    { name: "Black Marquina", src: "Macael · ES", c: "linear-gradient(125deg, #2C2A2A 0%, #1A1818 50%, #050505 100%)" },
    { name: "Wool Felt", src: "Camira · UK", c: "linear-gradient(135deg, #8A8C90 0%, #6B6E74 60%, #525458 100%)" },
    { name: "Sandblasted Limestone", src: "Al Quoz · UAE", c: "linear-gradient(145deg, #E2DCCF 0%, #C6BEAE 60%, #A89F8C 100%)" },
    { name: "Smoked Glass", src: "Saint-Gobain · DE", c: "linear-gradient(135deg, #3F4148 0%, #2A2C32 50%, #181A1F 100%)" },
    { name: "Burnt Larch", src: "Shou Sugi Ban", c: "linear-gradient(150deg, #3A2A1F 0%, #221610 50%, #0F0A07 100%)" },
    { name: "Polished Concrete", src: "In-situ", c: "linear-gradient(140deg, #AFAEAA 0%, #8E8E8A 60%, #6F6F6B 100%)" },
    { name: "Cocoa Suede", src: "Liscio · IT", c: "linear-gradient(135deg, #7C5A45 0%, #5C402E 50%, #3E2A1D 100%)" },
    { name: "Pale Saffron", src: "Custom dyed wool", c: "linear-gradient(140deg, #D9B26F 0%, #B98A45 60%, #946A2A 100%)" },
    { name: "Brass, satin", src: "Drawn rod · IT", c: "linear-gradient(135deg, #D9BD7E 0%, #B69846 50%, #856A22 100%)" }
  ];
  return (
    <section className="materials">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: "4rem", alignItems: "end", marginBottom: "1rem" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: "1.25rem" }}>
              <span className="sector-dot" style={{ marginRight: "0.6rem" }}></span>
              Materials · 03
            </div>
            <h2 className="h-1">
              The studio<br /><em style={{ fontStyle: "italic" }}>specifies real things.</em>
            </h2>
          </div>
          <p className="body-lg" style={{ maxWidth: "52ch", color: "var(--graphite)" }}>
            A running selection from the material wall — what we're specifying this
            quarter. Stone, timber, metal, textile, glass. Sourced through our Al Quoz
            procurement team; samples available on request.
          </p>
        </div>
        <div className="material-grid">
          {materials.map(m => (
            <div className="material" key={m.name}>
              <div className="swatch" style={{ background: m.c }}></div>
              <div className="name">{m.name}</div>
              <div className="src">{m.src}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: "3rem", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "1rem" }}>
          <div className="body-sm" style={{ maxWidth: "60ch" }}>
            Samples are physical. Visit the Sheikh Zayed Road studio to see the full library.
          </div>
          <a href="#/contact" className="btn-arrow">Book a material visit <ArrowRight /></a>
        </div>
      </div>
    </section>
  );
}

// ─── Process strip with TIMELINE bar ────────────────────────
function ProcessStrip() {
  const [active, setActive] = useState(0);
  const steps = [
    { n: "01", t: "Discovery & Brief", d: "Stakeholder interviews, workflow mapping, measured site survey.", meta: "Weeks 1–2", start: 0, end: 2 },
    { n: "02", t: "Concept + Schematic", d: "Spatial concept, mood, materials. MEP routed alongside design — not after.", meta: "Weeks 3–5", start: 2, end: 5 },
    { n: "03", t: "Detailed Design + BIM", d: "Federated model, joinery shop drawings, FF&E specification, locked cost plan.", meta: "Weeks 5–8", start: 5, end: 8 },
    { n: "04", t: "Approvals", d: "Trakhees, Dubai Municipality, Civil Defence — submitted in parallel with mobilisation.", meta: "Weeks 6–10", start: 6, end: 10 },
    { n: "05", t: "Build & Joinery", d: "Site team directed by Horton supervisors. Joinery fabricated at Al Quoz workshop.", meta: "Weeks 8–16", start: 8, end: 16 },
    { n: "06", t: "Snag & Handover", d: "Snag list closed within ten working days. Move-in supported.", meta: "Week 16", start: 15, end: 16 }
  ];
  const total = 16;

  return (
    <section className="process">
      <div className="wrap">
        <div className="process-timeline">
          <div className="scale">
            {Array.from({ length: 16 }, (_, i) => <span key={i}>{`W${i + 1}`}</span>)}
          </div>
          <div className="bar">
            {steps.map((s, i) => (
              <div
                key={s.n}
                className={`seg ${i === active ? "active" : ""}`}
                style={{
                  left: `${(s.start / total) * 100}%`,
                  width: `${((s.end - s.start) / total) * 100}%`,
                  background: i === active ? "var(--accent)" : (i < active ? "color-mix(in oklch, var(--paper) 18%, transparent)" : "transparent")
                }}
              >
                <span className="label">{s.t}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="process-grid" style={{ marginTop: "3rem" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: "1.25rem", color: "color-mix(in oklch, white 65%, transparent)" }}>
              <span className="sector-dot" style={{ marginRight: "0.6rem" }}></span>
              Process · 06
            </div>
            <h2 className="h-1" style={{ color: "var(--paper)" }}>
              A sixteen-week<br /><em style={{ fontStyle: "italic", color: "var(--accent)" }}>typical programme.</em>
            </h2>
            <p className="body-lg" style={{ marginTop: "1.5rem", maxWidth: "44ch", color: "color-mix(in oklch, white 80%, transparent)" }}>
              The numbers move with the brief. What doesn't move is the
              cadence — design, MEP, approvals and build sequenced so each
              feeds the next without idle weeks between.
            </p>
            <div style={{ marginTop: "2rem", paddingTop: "2rem", borderTop: "1px solid color-mix(in oklch, white 12%, transparent)" }}>
              <div className="mono" style={{ color: "color-mix(in oklch, white 55%, transparent)", marginBottom: "0.6rem" }}>Active step</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: "2rem", color: "var(--accent)", letterSpacing: "-0.014em" }}>
                {steps[active].t}
              </div>
              <div style={{ fontFamily: "var(--mono)", fontSize: "0.7rem", letterSpacing: "0.16em", color: "color-mix(in oklch, white 55%, transparent)", marginTop: "0.4rem" }}>
                {steps[active].meta}
              </div>
            </div>
          </div>
          <div className="process-steps">
            {steps.map((s, i) => (
              <div
                key={s.n}
                className={`process-step ${i === active ? "active" : ""}`}
                onMouseEnter={() => setActive(i)}
              >
                <div className="n">{s.n}</div>
                <div className="t">{s.t}</div>
                <div className="meta">{s.meta}</div>
                <div className="d">{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CTA band ──────────────────────────────────────────────
function CTABand() {
  return (
    <section className="cta-band dark">
      <div className="wrap">
        <div className="cta-row">
          <div>
            <div className="eyebrow" style={{ color: "color-mix(in oklch, white 60%, transparent)", marginBottom: "1.25rem" }}>
              Let's talk about your project
            </div>
            <h2 className="h-display" style={{ color: "var(--paper)", fontSize: "clamp(2.2rem, 4.8vw, 4.4rem)" }}>
              Sheikh Zayed Road,<br /><em style={{ color: "var(--accent)" }}>open Monday.</em>
            </h2>
            <p className="body-lg" style={{ marginTop: "1.5rem", color: "color-mix(in oklch, white 75%, transparent)", maxWidth: "52ch" }}>
              Bring the brief, the floorplan, or just the room itself — we'll
              quote, schedule and deliver. Most consultations open the same week.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
            <a href="#/contact" className="btn btn-primary" style={{ background: "var(--paper)", color: "var(--ink)", justifyContent: "space-between" }}>
              Start a project <ArrowRight />
            </a>
            <a href="https://wa.me/971557960547" target="_blank" rel="noopener noreferrer" className="btn btn-ghost" style={{ color: "var(--paper)", borderColor: "color-mix(in oklch, white 35%, transparent)", justifyContent: "space-between" }}>
              WhatsApp · 055 796 0547
            </a>
            <a href="tel:+97143881163" className="btn btn-ghost" style={{ color: "var(--paper)", borderColor: "color-mix(in oklch, white 35%, transparent)", justifyContent: "space-between" }}>
              Call · +971 4 388 1163
            </a>
            <div className="body-sm" style={{ marginTop: "0.5rem", color: "color-mix(in oklch, white 55%, transparent)", fontSize: "0.825rem" }}>
              Mon–Fri 08:00–17:00 GST · info@hortoninteriors.com
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Home({ heroLight }) {
  return (
    <main className="page-fade">
      <EditorialTopBar />
      <HomeHero heroLight={heroLight} />
      <Manifesto />
      <NumbersBand />
      <CapabilityBlock />
      <MagazineFeature />
      <FeaturedProjects />
      <MaterialsLibrary />
      <SectorsBlock />
      <LeadershipBlock />
      <ProcessStrip />
      <AwardsBlock />
      <CTABand />
    </main>
  );
}

window.Home = Home;
window.CTABand = CTABand;
window.EditorialTopBar = EditorialTopBar;