/* global React, ReactDOM */
const { useState, useEffect, useMemo, useRef } = React;
const D = window.ALGEDRA_DATA;

/* ─────────────────────────────────────────────────────────────────────────────
   Small primitives
   ───────────────────────────────────────────────────────────────────────── */

const Eyebrow = ({ children, mono = false }) => (
  <div className={"eyebrow " + (mono ? "eyebrow--mono" : "")}>{children}</div>
);

const Rule = ({ inset = 0 }) => (
  <div className="rule" style={{ marginInline: inset ? `${inset}px` : undefined }} />
);

const SectionLabel = ({ index, label }) => (
  <div className="section-label">
    <span className="section-label__num">{index}</span>
    <span className="section-label__line" aria-hidden />
    <span className="section-label__txt">{label}</span>
  </div>
);

const ArrowLink = ({ children, onClick, dir = "→" }) => (
  <button className="arrow-link" onClick={onClick}>
    <span>{children}</span>
    <span className="arrow-link__arrow">{dir}</span>
  </button>
);

const Btn = ({ children, onClick, kind = "primary", as = "button", href }) => {
  const cls = `btn btn--${kind}`;
  if (as === "a") return <a className={cls} href={href}>{children}</a>;
  return <button className={cls} onClick={onClick}>{children}</button>;
};

/* Algedra rosette mark — abstracted from the logo, NOT a copy. */
const Rosette = ({ size = 36, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" aria-hidden>
    <circle cx="32" cy="32" r="30.5" stroke={color} strokeWidth="0.7" />
    <circle cx="32" cy="32" r="22.5" stroke={color} strokeWidth="0.7" />
    {Array.from({ length: 16 }).map((_, i) => {
      const a = (i * Math.PI * 2) / 16;
      const x1 = 32 + Math.cos(a) * 22.5, y1 = 32 + Math.sin(a) * 22.5;
      const x2 = 32 + Math.cos(a) * 30.5, y2 = 32 + Math.sin(a) * 30.5;
      return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={color} strokeWidth="0.7" />;
    })}
    {Array.from({ length: 4 }).map((_, i) => {
      const a = (i * Math.PI) / 2;
      const cx = 32 + Math.cos(a) * 10, cy = 32 + Math.sin(a) * 10;
      return <ellipse key={i} cx={cx} cy={cy} rx="5" ry="3" transform={`rotate(${(i*90)+45} ${cx} ${cy})`} stroke={color} strokeWidth="0.7" />;
    })}
    <circle cx="32" cy="32" r="2.2" fill={color} />
  </svg>
);

/* ─────────────────────────────────────────────────────────────────────────────
   Top navigation
   ───────────────────────────────────────────────────────────────────────── */

const NAV_ITEMS = [
  { id: "projects",  label: "Projects" },
  { id: "sectors",   label: "Sectors"  },
  { id: "services",  label: "Services" },
  { id: "fit-out",   label: "Fit-Out"  },
  { id: "about",     label: "About"    },
  { id: "awards",    label: "Awards"   },
  { id: "contact",   label: "Contact"  },
];

function Nav({ route, go, lang, setLang, openEnquiry }) {
  return (
    <header className="nav">
      <div className="nav__inner">
        <button className="nav__brand" onClick={() => go({ name: "home" })} aria-label="ALGEDRA — home">
          <Rosette size={32} />
          <span className="nav__wordmark">
            <span className="nav__word">ALGEDRA</span>
            <span className="nav__sub">Decor Makers · since 2013</span>
          </span>
        </button>
        <nav className="nav__menu" aria-label="Primary">
          {NAV_ITEMS.map((it) => (
            <button
              key={it.id}
              className={"nav__item " + (route.name === it.id ? "is-active" : "")}
              onClick={() => go({ name: it.id })}
            >
              {it.label}
            </button>
          ))}
        </nav>
        <div className="nav__right">
          <div className="nav__lang" role="group" aria-label="Language">
            {["EN", "AR", "RU", "ZH"].map((l) => (
              <button
                key={l}
                className={"nav__lang-item " + (lang === l ? "is-on" : "")}
                onClick={() => setLang(l)}
              >{l}</button>
            ))}
          </div>
          <button className="nav__myalg" onClick={() => alert("MY ALGEDRA client portal (myalgedra.com) — link out.")}>
            MY ALGEDRA
          </button>
          <button className="nav__cta" onClick={openEnquiry}>
            Start a project <span aria-hidden>→</span>
          </button>
        </div>
      </div>
    </header>
  );
}

/* ─────────────────────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────────────────── */

function Footer({ go, openEnquiry }) {
  return (
    <footer className="footer">
      <div className="footer__band">
        <div className="footer__band-l">
          <Eyebrow mono>Start a project</Eyebrow>
          <h2 className="display display--mid" style={{ marginTop: 14 }}>
            From the first sketch <em>to the last screw.</em>
          </h2>
        </div>
        <div className="footer__band-r">
          <p className="body-lg" style={{ maxWidth: 480 }}>
            Tell us about a residence, a restaurant, a corporate floor, or a turnkey villa across any of the seven emirates.
            We respond within one working day.
          </p>
          <div className="footer__band-cta">
            <Btn onClick={openEnquiry}>Start a project</Btn>
            <Btn kind="ghost" onClick={() => go({ name: "contact" })}>Visit the studio</Btn>
          </div>
        </div>
      </div>

      <Rule />

      <div className="footer__cols">
        <div className="footer__col footer__col--brand">
          <div className="footer__brand">
            <Rosette size={42} />
            <div className="footer__word">ALGEDRA<small>Decor Makers</small></div>
          </div>
          <p className="footer__about">
            Full-service luxury interior design, architecture and turnkey fit-out, headquartered in Jumeirah Lake Towers, Dubai.
            Founded 2013. Part of ALGEDRA Group.
          </p>
        </div>

        <div className="footer__col">
          <div className="footer__h">Studio</div>
          {NAV_ITEMS.map(n => (
            <button key={n.id} className="footer__link" onClick={() => go({ name: n.id })}>{n.label}</button>
          ))}
        </div>

        <div className="footer__col">
          <div className="footer__h">Offices</div>
          {D.offices.map(o => (
            <div key={o.city} className="footer__office">
              <div className={"footer__city " + (o.primary ? "is-primary" : "")}>
                {o.city}{o.primary && <span className="footer__hq">HQ</span>}
              </div>
              <div className="footer__addr">{o.address}</div>
            </div>
          ))}
        </div>

        <div className="footer__col">
          <div className="footer__h">Direct</div>
          <a className="footer__link" href={"tel:" + D.contact.landline.replace(/\s/g, "")}>{D.contact.landline}</a>
          <a className="footer__link" href={"tel:" + D.contact.mobile.replace(/\s/g, "")}>{D.contact.mobile}</a>
          <a className="footer__link" href={"mailto:" + D.contact.email}>{D.contact.email}</a>
          <div className="footer__hours">{D.contact.hours}</div>
          <div className="footer__h" style={{ marginTop: 20 }}>Follow</div>
          <div className="footer__social">
            <a className="footer__link">Instagram · @algedradesign</a>
            <a className="footer__link">LinkedIn · /algedra</a>
            <a className="footer__link">YouTube · AlgedraAedubai</a>
          </div>
        </div>
      </div>

      <div className="footer__base">
        <span>© ALGEDRA Interior Design · Part of ALGEDRA Group</span>
        <span className="footer__credit">Imagery on this page is third-party photography or 3D rendering — credits to be confirmed per asset before publication.</span>
      </div>
    </footer>
  );
}

/* ─────────────────────────────────────────────────────────────────────────────
   Home
   ───────────────────────────────────────────────────────────────────────── */

function Home({ go, openEnquiry }) {
  const featured = useMemo(() => [
    D.projects.find(p => p.id === "emirates-hills-villa"),
    D.projects.find(p => p.id === "fitout-china-avenue"),
    D.projects.find(p => p.id === "signature-neutral-townhouse"),
    D.projects.find(p => p.id === "abu-dhabi-hospital"),
    D.projects.find(p => p.id === "fitout-hills-signature-villa"),
    D.projects.find(p => p.id === "luxury-beauty-salon"),
  ], []);

  return (
    <main className="page page--home">
      {/* HERO */}
      <section className="hero">
        <div className="hero__bg">
          <img src="assets/home-hero-01.webp" alt="" />
          <div className="hero__veil" aria-hidden />
        </div>
        <div className="hero__inner">
          <div className="hero__top">
            <Eyebrow mono>Dubai · since 2013 · all seven emirates</Eyebrow>
          </div>
          <h1 className="display display--xl hero__h1">
            Luxury interior design,<br/>
            architecture <em>&amp;</em> turnkey<br/>
            fit-out, from Dubai.
          </h1>
          <div className="hero__bot">
            <p className="hero__sub">
              A full-service studio that authors a project <em>and</em> hands you the keys —
              residential, hospitality, commercial, retail and healthcare across the GCC, MENA and beyond.
            </p>
            <div className="hero__cta">
              <Btn kind="primary-light" onClick={openEnquiry}>Start a project</Btn>
              <ArrowLink onClick={() => go({ name: "projects" })}>See selected work</ArrowLink>
            </div>
          </div>
        </div>
        <div className="hero__meta">
          <div><span className="muted">Award</span>DIAFA 2022 · Best Interior Designer</div>
          <div><span className="muted">Award</span>Luxury Lifestyle Awards 2022</div>
          <div><span className="muted">Award</span>Arabian Award 2024</div>
          <div><span className="muted">Studio</span>JLT, Dubai · Istanbul · London · New York</div>
        </div>
      </section>

      {/* SELECTED WORK */}
      <section className="section">
        <div className="section__head">
          <SectionLabel index="01" label="Selected work" />
          <h2 className="display display--mid">
            Six projects, six rooms, <em>one studio.</em>
          </h2>
          <div className="section__head-r">
            <ArrowLink onClick={() => go({ name: "projects" })}>View all projects</ArrowLink>
          </div>
        </div>

        <div className="grid grid--work">
          {featured.map((p, i) => (
            <article
              key={p.id}
              className={"work " + (i === 0 ? "work--wide" : i === 3 ? "work--tall" : "")}
              onClick={() => go({ name: "project", id: p.id })}
            >
              <div className="work__img">
                <img src={p.cover} alt={p.title} loading="lazy" />
              </div>
              <div className="work__cap">
                <div className="work__num">No. {String(i + 1).padStart(2, "0")}</div>
                <h3 className="work__title">{p.title}</h3>
                <div className="work__meta">
                  <span>{p.sector}</span>
                  <span className="dot">·</span>
                  <span>{p.location}</span>
                  <span className="dot">·</span>
                  <span>{p.type}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* SECTORS STRIP */}
      <section className="section section--sand">
        <div className="section__head">
          <SectionLabel index="02" label="By sector" />
          <h2 className="display display--mid">
            A studio that works across <em>every kind of room.</em>
          </h2>
        </div>
        <div className="sectors-strip">
          {D.sectors.map((s, i) => (
            <button key={s.id} className="sector-row" onClick={() => go({ name: "sector", id: s.id })}>
              <div className="sector-row__num">0{i + 1}</div>
              <div className="sector-row__label">{s.label}</div>
              <div className="sector-row__blurb">{s.blurb}</div>
              <div className="sector-row__arrow">→</div>
            </button>
          ))}
        </div>
      </section>

      {/* SERVICES */}
      <section className="section">
        <div className="section__head">
          <SectionLabel index="03" label="Services" />
          <h2 className="display display--mid">
            From concept <em>to the last screw.</em>
          </h2>
          <div className="section__head-r section__sub">
            <p>
              ALGEDRA authors and delivers. Every line below is sold as standalone,
              or as part of an end-to-end turnkey programme — the way most of our residential clients prefer it.
            </p>
          </div>
        </div>
        <div className="services">
          {D.services.map((s, i) => (
            <article key={s.id} className={"service " + (s.featured ? "service--star" : "")}>
              <div className="service__num">{String(i + 1).padStart(2, "0")}</div>
              <h3 className="service__title">{s.title}{s.featured && <span className="service__tag">Turnkey</span>}</h3>
              <p className="service__body">{s.body}</p>
            </article>
          ))}
        </div>
      </section>

      {/* APPROACH */}
      <section className="section section--ink">
        <div className="approach">
          <div className="approach__l">
            <Eyebrow mono className="eyebrow--light">04 — Our approach</Eyebrow>
            <h2 className="display display--mid display--light">
              We are <em>not</em> a thumbnail grid.<br/>
              We are a <em>case study</em>.
            </h2>
          </div>
          <div className="approach__r">
            <ol className="approach__steps">
              <li><span>i</span><div><h4>Brief</h4><p>Two studio visits, a written brief, a single point of contact.</p></div></li>
              <li><span>ii</span><div><h4>Concept</h4><p>Mood, plan, palette and a built 3D walkthrough.</p></div></li>
              <li><span>iii</span><div><h4>Materials &amp; light</h4><p>Specified to a level a contractor can build without a phone call.</p></div></li>
              <li><span>iv</span><div><h4>Fit-out</h4><p>Our own build team — joinery atelier, MEP coordination, finishing.</p></div></li>
              <li><span>v</span><div><h4>Handover</h4><p>Styled, art-placed, snagged, photographed.</p></div></li>
            </ol>
          </div>
        </div>
      </section>

      {/* AWARDS STRIP */}
      <section className="section">
        <SectionLabel index="05" label="Recognition" />
        <div className="awards-strip">
          {D.awards.map((a, i) => (
            <div key={i} className="awards-strip__item">
              <div className="awards-strip__year">{a.year}</div>
              <div className="awards-strip__title">{a.title}</div>
              <div className="awards-strip__issuer">{a.issuer}</div>
              <div className="awards-strip__rec">{a.recipient}</div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

/* ─────────────────────────────────────────────────────────────────────────────
   Projects (filterable)
   ───────────────────────────────────────────────────────────────────────── */

function Projects({ go, initialFilter = "All" }) {
  const [filter, setFilter] = useState(initialFilter);
  const [typeFilter, setTypeFilter] = useState("All");
  const [view, setView] = useState("grid"); // grid | index

  const filters = ["All", ...D.sectors.map(s => s.id)];
  const types = ["All", "Interior Design", "Fit-Out"];

  const visible = D.projects.filter(p =>
    (filter === "All" || p.sector === filter) &&
    (typeFilter === "All" || p.type === typeFilter)
  );

  return (
    <main className="page page--projects">
      <div className="page__head">
        <Eyebrow mono>Projects · {visible.length} of {D.projects.length}</Eyebrow>
        <h1 className="display display--lg">
          The portfolio.<br/>
          <em>Filterable</em> by what you came for.
        </h1>
        <p className="page__head-sub">
          Every project below is a working case study — brief, concept, materials, process and outcome.
          Per-project metadata is shown where the client has confirmed publication.
        </p>
      </div>

      <div className="filters">
        <div className="filters__row">
          <div className="filters__lab">Sector</div>
          <div className="filters__chips">
            {filters.map(f => (
              <button key={f} className={"chip " + (filter === f ? "is-on" : "")} onClick={() => setFilter(f)}>{f}</button>
            ))}
          </div>
        </div>
        <div className="filters__row">
          <div className="filters__lab">Discipline</div>
          <div className="filters__chips">
            {types.map(t => (
              <button key={t} className={"chip " + (typeFilter === t ? "is-on" : "")} onClick={() => setTypeFilter(t)}>{t}</button>
            ))}
          </div>
        </div>
        <div className="filters__row">
          <div className="filters__lab">View</div>
          <div className="filters__chips">
            <button className={"chip " + (view === "grid" ? "is-on" : "")} onClick={() => setView("grid")}>Editorial grid</button>
            <button className={"chip " + (view === "index" ? "is-on" : "")} onClick={() => setView("index")}>Index list</button>
          </div>
        </div>
      </div>

      {view === "grid" ? (
        <div className="grid grid--projects">
          {visible.map((p, i) => (
            <article key={p.id} className="proj" onClick={() => go({ name: "project", id: p.id })}>
              <div className="proj__img"><img src={p.cover} alt={p.title} loading="lazy" /></div>
              <div className="proj__cap">
                <div className="proj__no">{String(i + 1).padStart(2, "0")} / {String(visible.length).padStart(2, "0")}</div>
                <h3 className="proj__title">{p.title}</h3>
                <div className="proj__meta">
                  <span>{p.sector}</span><span className="dot">·</span>
                  <span>{p.type}</span><span className="dot">·</span>
                  <span>{p.location}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      ) : (
        <table className="index-table">
          <thead>
            <tr>
              <th>No.</th><th>Project</th><th>Sector</th><th>Discipline</th><th>Location</th><th></th>
            </tr>
          </thead>
          <tbody>
            {visible.map((p, i) => (
              <tr key={p.id} onClick={() => go({ name: "project", id: p.id })}>
                <td className="muted">{String(i + 1).padStart(2, "0")}</td>
                <td className="index-table__title">{p.title}</td>
                <td>{p.sector}</td>
                <td>{p.type}</td>
                <td>{p.location}</td>
                <td className="index-table__go">View case study →</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </main>
  );
}

/* ─────────────────────────────────────────────────────────────────────────────
   Case study
   ───────────────────────────────────────────────────────────────────────── */

function CaseStudy({ id, go, openEnquiry }) {
  const p = D.projects.find(pr => pr.id === id) || D.projects[0];
  const idx = D.projects.indexOf(p);
  const prev = D.projects[(idx - 1 + D.projects.length) % D.projects.length];
  const next = D.projects[(idx + 1) % D.projects.length];
  const [lightbox, setLightbox] = useState(null);

  return (
    <main className="page page--case">
      <div className="case__crumb">
        <button onClick={() => go({ name: "projects" })}>← All projects</button>
        <span className="muted">·</span>
        <span>{p.sector}</span>
        <span className="muted">·</span>
        <span>{p.type}</span>
      </div>

      <header className="case__head">
        <Eyebrow mono>Case study · No. {String(idx + 1).padStart(2, "0")}</Eyebrow>
        <h1 className="display display--xl case__title">{p.title}</h1>
      </header>

      <div className="case__hero">
        <img src={p.cover} alt={p.title} />
        <button className="case__zoom" onClick={() => setLightbox(p.cover)}>↗ View full image</button>
      </div>

      <div className="case__meta">
        {[
          ["Sector", p.sector],
          ["Discipline", p.type],
          ["Location", p.location],
          ["Year", p.year],
          ["Floor area", p.area],
          ["Scope", "Concept → fit-out"],
        ].map(([k, v]) => (
          <div key={k} className="case__meta-cell">
            <div className="case__meta-k">{k}</div>
            <div className="case__meta-v">{v || "—"}</div>
          </div>
        ))}
      </div>

      <div className="case__body">
        <div className="case__col case__col--narr">
          <section className="case__section">
            <h2 className="case__h">Brief</h2>
            <p>{p.brief}</p>
          </section>
          <section className="case__section">
            <h2 className="case__h">Concept</h2>
            <p>{p.concept}</p>
          </section>
          <section className="case__section">
            <h2 className="case__h">Materials &amp; light</h2>
            <p>{p.materials}</p>
          </section>
          <section className="case__section">
            <h2 className="case__h">Process</h2>
            <p>{p.process}</p>
          </section>
          {p.outcome && p.outcome !== "—" && (
            <section className="case__section">
              <h2 className="case__h">Outcome</h2>
              <p>{p.outcome}</p>
            </section>
          )}
        </div>
        <aside className="case__col case__col--side">
          <div className="case__side-block">
            <div className="case__side-h">Credit</div>
            <p className="case__side-body">{p.credit}</p>
            <div className="case__side-note">
              All photography &amp; 3D renders are third-party. Republication rights confirmed per asset before publication.
            </div>
          </div>
          <div className="case__side-block">
            <div className="case__side-h">Start a project like this</div>
            <p className="case__side-body">Brief our team and we’ll respond with a scoped concept proposal within one working day.</p>
            <Btn onClick={openEnquiry}>Start a project</Btn>
          </div>
        </aside>
      </div>

      {p.gallery && p.gallery.length > 1 && (
        <section className="case__gallery">
          <SectionLabel index="•" label="Gallery" />
          <div className="case__gallery-grid">
            {p.gallery.map((g, i) => (
              <button key={i} className="case__gallery-img" onClick={() => setLightbox(g)}>
                <img src={g} alt="" loading="lazy" />
              </button>
            ))}
          </div>
        </section>
      )}

      <nav className="case__nextprev">
        <button onClick={() => go({ name: "project", id: prev.id })}>
          <div className="muted">← Previous</div>
          <div className="case__np-title">{prev.title}</div>
        </button>
        <button onClick={() => go({ name: "project", id: next.id })}>
          <div className="muted" style={{ textAlign: "right" }}>Next →</div>
          <div className="case__np-title" style={{ textAlign: "right" }}>{next.title}</div>
        </button>
      </nav>

      {lightbox && (
        <div className="lightbox" onClick={() => setLightbox(null)}>
          <button className="lightbox__close" onClick={() => setLightbox(null)}>Close ✕</button>
          <img src={lightbox} alt="" />
        </div>
      )}
    </main>
  );
}

/* ─────────────────────────────────────────────────────────────────────────────
   Sectors & per-sector
   ───────────────────────────────────────────────────────────────────────── */

function Sectors({ go }) {
  return (
    <main className="page">
      <div className="page__head">
        <Eyebrow mono>Sectors</Eyebrow>
        <h1 className="display display--lg">
          One studio.<br/><em>Five</em> kinds of room.
        </h1>
        <p className="page__head-sub">
          Residential is our heartland; we deliver hospitality, commercial, retail and healthcare with the same level of authorship and the same in-house fit-out team.
        </p>
      </div>

      <div className="sector-cards">
        {D.sectors.map((s, i) => {
          const examples = D.projects.filter(p => p.sector === s.id).slice(0, 3);
          return (
            <article key={s.id} className="sector-card" onClick={() => go({ name: "sector", id: s.id })}>
              <div className="sector-card__l">
                <div className="sector-card__num">0{i + 1}</div>
                <h2 className="display display--mid">{s.label}</h2>
                <p className="sector-card__blurb">{s.blurb}</p>
                <div className="sector-card__count">{D.projects.filter(p => p.sector === s.id).length} projects →</div>
              </div>
              <div className="sector-card__r">
                {examples.map(p => (
                  <div key={p.id} className="sector-card__thumb">
                    <img src={p.cover} alt={p.title} loading="lazy" />
                    <div className="sector-card__cap">{p.title}</div>
                  </div>
                ))}
              </div>
            </article>
          );
        })}
      </div>
    </main>
  );
}

function SectorPage({ id, go }) {
  const sec = D.sectors.find(s => s.id === id);
  if (!sec) return <Sectors go={go} />;
  return (
    <main className="page">
      <div className="page__head">
        <button className="case__crumb" onClick={() => go({ name: "sectors" })}>← All sectors</button>
        <Eyebrow mono>Sector · {sec.label}</Eyebrow>
        <h1 className="display display--lg">{sec.label}<em>.</em></h1>
        <p className="page__head-sub">{sec.blurb}</p>
      </div>
      <Projects go={go} initialFilter={id} />
    </main>
  );
}

/* ─────────────────────────────────────────────────────────────────────────────
   Fit-Out
   ───────────────────────────────────────────────────────────────────────── */

function FitOut({ go, openEnquiry }) {
  const fits = D.projects.filter(p => p.type === "Fit-Out");
  return (
    <main className="page">
      <div className="page__head">
        <Eyebrow mono>Turnkey · all seven emirates</Eyebrow>
        <h1 className="display display--lg">
          Most studios design. <br/>
          <em>We design and</em> build.
        </h1>
        <p className="page__head-sub">
          Our in-house atelier, joinery, MEP coordination and finishing team mean we hand back a styled and snagged
          residence, restaurant or commercial floor — not a drawing set.
        </p>
      </div>

      <div className="fitout-strip">
        {["Dubai", "Abu Dhabi", "Sharjah", "Ajman", "Al Ain", "Fujairah", "Ras Al Khaimah"].map(em => (
          <div key={em} className="fitout-strip__pin">
            <span className="fitout-strip__dot" /> {em}
          </div>
        ))}
      </div>

      <section className="section">
        <SectionLabel index="01" label="Selected fit-out" />
        <div className="grid grid--projects">
          {fits.map((p, i) => (
            <article key={p.id} className="proj" onClick={() => go({ name: "project", id: p.id })}>
              <div className="proj__img"><img src={p.cover} alt={p.title} loading="lazy" /></div>
              <div className="proj__cap">
                <div className="proj__no">{String(i + 1).padStart(2, "0")}</div>
                <h3 className="proj__title">{p.title}</h3>
                <div className="proj__meta"><span>{p.sector}</span><span className="dot">·</span><span>{p.location}</span></div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="section section--sand">
        <SectionLabel index="02" label="How it runs" />
        <div className="fitout-process">
          {[
            ["01", "Design lock", "Drawings, FF&E and spec frozen at the end of design — no scope creep in build."],
            ["02", "Procurement", "Joinery to our atelier; long-lead imports placed against a costed schedule."],
            ["03", "Site",        "Single foreperson, daily report, weekly client walkthrough."],
            ["04", "Finishing",   "Our own painter and stone team — never a sub-of-a-sub."],
            ["05", "Handover",    "Styled, art-placed, photographed; one defects window then sign-off."]
          ].map(([n, t, b]) => (
            <div key={n} className="fitout-process__step">
              <div className="fitout-process__num">{n}</div>
              <h4>{t}</h4>
              <p>{b}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="section">
        <div className="cta-band">
          <h2 className="display display--mid">Have a turnkey brief?</h2>
          <Btn onClick={openEnquiry}>Start a project</Btn>
        </div>
      </section>
    </main>
  );
}

/* ─────────────────────────────────────────────────────────────────────────────
   About / Awards / Contact
   ───────────────────────────────────────────────────────────────────────── */

function About({ go }) {
  return (
    <main className="page">
      <div className="page__head">
        <Eyebrow mono>About · since 2013</Eyebrow>
        <h1 className="display display--lg">
          A studio that <em>authors</em> a project<br/>and hands you the keys.
        </h1>
      </div>

      <section className="about-grid">
        <div className="about-grid__copy">
          <p className="body-lg">
            ALGEDRA was founded in Dubai in 2013 by Mohab Ayoub with a focus on high-end residential interiors.
            Twelve years on, the studio has grown into a full-service practice — interior design, architecture,
            exterior, landscape and turnkey fit-out — operating from Jumeirah Lake Towers in Dubai, with offices
            in Istanbul, London and New York.
          </p>
          <p className="body-lg">
            We work across residential (our heartland — villas, palaces, penthouses, apartments and majlis),
            hospitality, commercial, retail and healthcare. Our clients are mostly private — families, founders,
            investors — across the GCC, MENA, Türkiye, Russia and Europe.
          </p>
          <p className="body-lg">
            We share a single point of view: <em>luxury, exquisite, stunning, elegant, brilliant.</em>
            We let the work speak.
          </p>
        </div>
        <div className="about-grid__media">
          <img src="assets/home-feature-02.webp" alt="" />
          <div className="about-grid__cap">A reception interior, residential — ALGEDRA visualisation studio.</div>
        </div>
      </section>

      <section className="section">
        <SectionLabel index="•" label="Leadership &amp; team" />
        <div className="team-grid">
          {D.team.map((t) => (
            <div key={t.name} className="team-card">
              <div className="team-card__portrait">
                <div className="team-card__placeholder">PORTRAIT<br/>TO BE SUPPLIED</div>
              </div>
              <div className="team-card__name">{t.name}</div>
              <div className="team-card__role">{t.role}</div>
              {t.note && <div className="team-card__note">{t.note}</div>}
            </div>
          ))}
        </div>
      </section>

      <section className="section section--ink">
        <div className="stats">
          {[
            ["2013", "founded, in Dubai"],
            ["4", "international offices"],
            ["7/7", "UAE emirates served, turnkey"],
            ["100+", "completed projects (figure to be confirmed by client)"]
          ].map(([n, l]) => (
            <div key={n} className="stat">
              <div className="stat__num">{n}</div>
              <div className="stat__lab">{l}</div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

function Awards() {
  return (
    <main className="page">
      <div className="page__head">
        <Eyebrow mono>Recognition</Eyebrow>
        <h1 className="display display--lg">
          Awards <em>&amp;</em> recognition.
        </h1>
        <p className="page__head-sub">
          Attributed by issuer, year and recipient. We do not publish star ratings or aggregated review scores —
          the firm has no publicly verified star rating, and we won’t invent one.
        </p>
      </div>

      <div className="awards-table">
        {D.awards.map((a, i) => (
          <div key={i} className="awards-row">
            <div className="awards-row__year">{a.year}</div>
            <div className="awards-row__title">{a.title}</div>
            <div className="awards-row__issuer">{a.issuer}</div>
            <div className="awards-row__rec">{a.recipient}</div>
            <div className="awards-row__cert">Certificate to be supplied</div>
          </div>
        ))}
      </div>

      <div className="awards-foot">
        Press &amp; jury enquiries — <a href="mailto:hello@algedra.ae">hello@algedra.ae</a>
      </div>
    </main>
  );
}

function Contact({ openEnquiry }) {
  return (
    <main className="page">
      <div className="page__head">
        <Eyebrow mono>Contact</Eyebrow>
        <h1 className="display display--lg">
          Talk to the studio.
        </h1>
      </div>

      <div className="contact-grid">
        <div className="contact-grid__l">
          {D.offices.map(o => (
            <div key={o.city} className={"office " + (o.primary ? "office--hq" : "")}>
              <div className="office__row">
                <div className="office__city">{o.city}{o.primary && <span className="office__hq-tag">HQ</span>}</div>
                <div className="office__country">{o.country}</div>
              </div>
              <div className="office__addr">{o.address}</div>
              {o.primary && (
                <div className="office__lines">
                  <a href={"tel:" + D.contact.landline.replace(/\s/g, "")}>{D.contact.landline}</a>
                  <a href={"tel:" + D.contact.mobile.replace(/\s/g, "")}>{D.contact.mobile} <span className="muted">mob</span></a>
                  <span>{D.contact.toll}</span>
                  <a href={"mailto:" + D.contact.email}>{D.contact.email}</a>
                  <div className="muted">{D.contact.hours}</div>
                </div>
              )}
            </div>
          ))}
        </div>
        <div className="contact-grid__r">
          <div className="map">
            <div className="map__overlay">
              <div className="map__pin"><Rosette size={28} /></div>
              <div className="map__title">JBC 3 · Cluster Y · JLT</div>
              <div className="map__sub">Office 1501 · 15th floor</div>
              <div className="map__note">Map coordinates to be confirmed with client before embed.</div>
            </div>
          </div>
          <div className="contact-cta">
            <h3 className="display display--mid">A brief is the shortest path.</h3>
            <p>Tell us about the project — sector, location, scope, deadline.<br/>We respond within one working day.</p>
            <Btn onClick={openEnquiry}>Start a project</Btn>
          </div>
        </div>
      </div>
    </main>
  );
}

/* ─────────────────────────────────────────────────────────────────────────────
   Services page
   ───────────────────────────────────────────────────────────────────────── */

function ServicesPage({ openEnquiry }) {
  return (
    <main className="page">
      <div className="page__head">
        <Eyebrow mono>Services</Eyebrow>
        <h1 className="display display--lg">Six lines.<br/><em>One studio.</em></h1>
        <p className="page__head-sub">
          Each line is sold as standalone, or — most often — as part of an end-to-end turnkey programme.
        </p>
      </div>
      <div className="services-page">
        {D.services.map((s, i) => (
          <div key={s.id} className={"svc-row " + (s.featured ? "svc-row--star" : "")}>
            <div className="svc-row__num">{String(i + 1).padStart(2, "0")}</div>
            <div className="svc-row__title">
              {s.title}
              {s.featured && <span className="service__tag">Turnkey · the differentiator</span>}
            </div>
            <div className="svc-row__body">{s.body}</div>
            <button className="svc-row__cta" onClick={openEnquiry}>Brief us →</button>
          </div>
        ))}
      </div>
    </main>
  );
}

/* ─────────────────────────────────────────────────────────────────────────────
   Enquiry drawer
   ───────────────────────────────────────────────────────────────────────── */

function EnquiryDrawer({ open, close }) {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({
    name: "", email: "", phone: "",
    type: "Residential", scope: "Interior design + fit-out",
    location: "Dubai", budget: "—", timeline: "Within 6 months",
    message: ""
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const [sent, setSent] = useState(false);

  useEffect(() => {
    if (!open) { setStep(1); setSent(false); }
  }, [open]);

  return (
    <>
      <div className={"drawer-scrim " + (open ? "is-open" : "")} onClick={close} />
      <aside className={"drawer " + (open ? "is-open" : "")} aria-hidden={!open}>
        <div className="drawer__top">
          <div>
            <Eyebrow mono>Start a project</Eyebrow>
            <h2 className="display display--mid">Tell us about the brief.</h2>
          </div>
          <button className="drawer__close" onClick={close}>Close ✕</button>
        </div>

        {sent ? (
          <div className="drawer__sent">
            <Rosette size={56} color="var(--gold)" />
            <h3 className="display display--mid">Thank you, {form.name || "client"}.</h3>
            <p>We’ve received your brief. A studio lead will reply to <strong>{form.email || "your address"}</strong> within one working day, GST.</p>
            <p className="muted">Reference: ALG-{Date.now().toString().slice(-6)}</p>
            <Btn onClick={close}>Close</Btn>
          </div>
        ) : (
          <>
            <div className="drawer__steps">
              {[1, 2, 3].map(s => (
                <div key={s} className={"drawer__step " + (s === step ? "is-on" : "") + (s < step ? " is-done" : "")}>
                  <span>{s}</span>
                  {s === 1 ? "The project" : s === 2 ? "The brief" : "You"}
                </div>
              ))}
            </div>

            {step === 1 && (
              <div className="drawer__body">
                <Field label="Project type">
                  <Pills value={form.type} onChange={v => set("type", v)} options={["Residential", "Hospitality", "Commercial", "Retail", "Healthcare", "Other"]} />
                </Field>
                <Field label="Scope">
                  <Pills value={form.scope} onChange={v => set("scope", v)} options={["Interior design", "Architecture", "Fit-out only", "Interior design + fit-out", "Landscape", "Advisory"]} />
                </Field>
                <Field label="Location">
                  <Pills value={form.location} onChange={v => set("location", v)} options={["Dubai", "Abu Dhabi", "Other UAE", "GCC", "MENA", "International"]} />
                </Field>
                <Field label="Timeline">
                  <Pills value={form.timeline} onChange={v => set("timeline", v)} options={["ASAP", "Within 3 months", "Within 6 months", "Within 12 months", "Exploring"]} />
                </Field>
              </div>
            )}

            {step === 2 && (
              <div className="drawer__body">
                <Field label="Tell us about the property &amp; brief">
                  <textarea
                    rows={8}
                    placeholder="e.g. New 7-bed villa in Emirates Hills, plot handed over shell &amp; core, looking for full interior design + turnkey fit-out, ready for Eid 2026..."
                    value={form.message}
                    onChange={e => set("message", e.target.value)}
                  />
                </Field>
                <Field label="Indicative budget (optional)">
                  <Pills value={form.budget} onChange={v => set("budget", v)} options={["—", "Under AED 500k", "AED 500k – 2m", "AED 2m – 5m", "AED 5m+"]} />
                </Field>
                <Field label="References, drawings or images (optional)">
                  <div className="drawer__upload">Drag files here or <span>browse</span></div>
                </Field>
              </div>
            )}

            {step === 3 && (
              <div className="drawer__body">
                <Field label="Your name">
                  <input type="text" value={form.name} onChange={e => set("name", e.target.value)} placeholder="Full name" />
                </Field>
                <Field label="Email">
                  <input type="email" value={form.email} onChange={e => set("email", e.target.value)} placeholder="you@example.com" />
                </Field>
                <Field label="Phone (optional)">
                  <input type="tel" value={form.phone} onChange={e => set("phone", e.target.value)} placeholder="+971 ..." />
                </Field>
                <div className="drawer__summary">
                  <Eyebrow mono>Brief summary</Eyebrow>
                  <dl>
                    <div><dt>Project</dt><dd>{form.type} · {form.scope}</dd></div>
                    <div><dt>Location</dt><dd>{form.location}</dd></div>
                    <div><dt>Timeline</dt><dd>{form.timeline}</dd></div>
                    <div><dt>Budget</dt><dd>{form.budget}</dd></div>
                  </dl>
                </div>
              </div>
            )}

            <div className="drawer__foot">
              <button className="btn btn--ghost" onClick={() => step > 1 ? setStep(step - 1) : close()}>
                {step > 1 ? "← Back" : "Cancel"}
              </button>
              {step < 3 ? (
                <button className="btn btn--primary" onClick={() => setStep(step + 1)}>Continue →</button>
              ) : (
                <button className="btn btn--primary" onClick={() => setSent(true)} disabled={!form.name || !form.email}>
                  Send brief →
                </button>
              )}
            </div>

            <div className="drawer__alt">
              Or reach the studio directly: <a href={"tel:" + D.contact.landline.replace(/\s/g, "")}>{D.contact.landline}</a> · <a href={"mailto:" + D.contact.email}>{D.contact.email}</a>
            </div>
          </>
        )}
      </aside>
    </>
  );
}

function Field({ label, children }) {
  return (
    <label className="field">
      <div className="field__lab">{label}</div>
      {children}
    </label>
  );
}

function Pills({ value, onChange, options }) {
  return (
    <div className="pills">
      {options.map(o => (
        <button key={o} type="button" className={"pill " + (value === o ? "is-on" : "")} onClick={() => onChange(o)}>{o}</button>
      ))}
    </div>
  );
}

/* ─────────────────────────────────────────────────────────────────────────────
   App shell + router
   ───────────────────────────────────────────────────────────────────────── */

function App() {
  const [route, setRoute] = useState({ name: "home" });
  const [lang, setLang] = useState("EN");
  const [enquiryOpen, setEnquiryOpen] = useState(false);
  const tweaks = useTweaks(TWEAK_DEFAULTS);
  const scrollerRef = useRef(null);

  // Apply tweaks → root CSS vars
  useEffect(() => {
    const r = document.documentElement;
    const accents = {
      "Brand gold":    { gold: "#B68A4E", goldDeep: "#8C6938" },
      "Antique brass": { gold: "#9E7A3C", goldDeep: "#6E5326" },
      "Bronze":        { gold: "#8A5A36", goldDeep: "#5E3D24" },
      "Greige (no metal)": { gold: "#5B524A", goldDeep: "#3E3833" }
    }[tweaks.accent] || { gold: "#B68A4E", goldDeep: "#8C6938" };
    r.style.setProperty("--gold", accents.gold);
    r.style.setProperty("--gold-deep", accents.goldDeep);

    const fonts = {
      "Cormorant + Inter": { display: "'Cormorant Garamond', 'EB Garamond', serif", body: "'Inter', system-ui, sans-serif" },
      "Italiana + Inter":  { display: "'Italiana', serif", body: "'Inter', system-ui, sans-serif" },
      "Söhne-style grotesk": { display: "'Söhne', 'Inter', system-ui, sans-serif", body: "'Inter', system-ui, sans-serif" }
    }[tweaks.typePair] || { display: "'Cormorant Garamond', serif", body: "'Inter', sans-serif" };
    r.style.setProperty("--font-display", fonts.display);
    r.style.setProperty("--font-body", fonts.body);
    r.style.setProperty("--display-italic-style", tweaks.typePair === "Söhne-style grotesk" ? "italic" : "italic");

    r.style.setProperty("--rhythm", tweaks.density === "Compact" ? "0.78" : tweaks.density === "Spacious" ? "1.12" : "1");
    r.style.setProperty("--bg", tweaks.paper === "Cool paper" ? "#F8F8F6" : tweaks.paper === "Cream" ? "#F6EFE2" : "#FAF8F4");

    document.documentElement.dir = (lang === "AR") ? "rtl" : "ltr";
    document.documentElement.lang = lang.toLowerCase();
  }, [tweaks.accent, tweaks.typePair, tweaks.density, tweaks.paper, lang]);

  // Scroll to top on route change
  useEffect(() => {
    if (scrollerRef.current) scrollerRef.current.scrollTo(0, 0);
    window.scrollTo(0, 0);
  }, [route]);

  const go = (r) => setRoute(r);
  const openEnquiry = () => setEnquiryOpen(true);

  let page;
  const N = route.name;
  if (N === "home")     page = <Home go={go} openEnquiry={openEnquiry} />;
  else if (N === "projects") page = <Projects go={go} />;
  else if (N === "project")  page = <CaseStudy id={route.id} go={go} openEnquiry={openEnquiry} />;
  else if (N === "sectors")  page = <Sectors go={go} />;
  else if (N === "sector")   page = <SectorPage id={route.id} go={go} />;
  else if (N === "services") page = <ServicesPage openEnquiry={openEnquiry} />;
  else if (N === "fit-out")  page = <FitOut go={go} openEnquiry={openEnquiry} />;
  else if (N === "about")    page = <About go={go} />;
  else if (N === "awards")   page = <Awards />;
  else if (N === "contact")  page = <Contact openEnquiry={openEnquiry} />;
  else page = <Home go={go} openEnquiry={openEnquiry} />;

  return (
    <div className="app" data-screen-label={"ALGEDRA / " + N} ref={scrollerRef}>
      <Nav route={route} go={go} lang={lang} setLang={setLang} openEnquiry={openEnquiry} />
      <div key={N + (route.id || "")} className="page-anim">
        {page}
      </div>
      <Footer go={go} openEnquiry={openEnquiry} />
      <EnquiryDrawer open={enquiryOpen} close={() => setEnquiryOpen(false)} />

      <TweaksPanel>
        <TweakSection label="Visual system" />
        <TweakRadio label="Accent"        value={tweaks.accent}   onChange={v => tweaks.setTweak("accent", v)}   options={["Brand gold", "Antique brass", "Bronze", "Greige"]} />
        <TweakRadio label="Type pairing"  value={tweaks.typePair} onChange={v => tweaks.setTweak("typePair", v)} options={["Cormorant + Inter", "Italiana + Inter", "Söhne-style grotesk"]} />
        <TweakRadio label="Paper tone"    value={tweaks.paper}    onChange={v => tweaks.setTweak("paper", v)}    options={["Warm paper", "Cool paper", "Cream"]} />
        <TweakRadio label="Density"       value={tweaks.density}  onChange={v => tweaks.setTweak("density", v)}  options={["Compact", "Editorial", "Spacious"]} />
        <TweakSection label="Demo shortcuts" />
        <TweakButton label="Open Enquiry drawer" onClick={openEnquiry} />
        <TweakButton label="Open a case study" onClick={() => go({ name: "project", id: "emirates-hills-villa" })} />
        <TweakButton label="Open Projects" onClick={() => go({ name: "projects" })} />
        <TweakButton label="Open Fit-Out" onClick={() => go({ name: "fit-out" })} />
      </TweaksPanel>
    </div>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Brand gold",
  "typePair": "Cormorant + Inter",
  "paper": "Warm paper",
  "density": "Editorial"
}/*EDITMODE-END*/;

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);