/* PrimaDelta — public site pages. Exports to window. */
const { Logo, Btn, Status, Badge, Field, Input, Textarea, Select, Ph, Ic } = window;

/* ============================================================
   PUBLIC NAV + FOOTER
   ============================================================ */
function PubNav({ dark }) {
  const { nav, route } = window.useStore();
  const items = [["home", "Home"], ["services", "Services"], ["portfolio", "Portfolio"], ["contact", "Contact"]];
  return (
    <header className={"pubnav" + (dark ? " dark" : "")}>
      <div className="wrap pubnav-inner">
        <Logo light={dark} onClick={() => nav("home")} />
        <nav className="navlinks">
          {items.map(([v, l]) => (
            <a key={v} className={"navlink" + (route.view === v ? " active" : "")} onClick={() => nav(v)}>{l}</a>
          ))}
        </nav>
      </div>
    </header>
  );
}

function PubFooter() {
  const { nav } = window.useStore();
  return (
    <footer className="dark-sec" style={{ paddingTop: 64, paddingBottom: 40 }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 32, paddingBottom: 44 }}>
          <div>
            <Logo light />
            <p className="muted" style={{ marginTop: 16, maxWidth: 280, fontSize: 14.5, lineHeight: 1.6 }}>
              Developing and managing buildings of lasting value — from waterfront masterplans to stabilised income assets.
            </p>
          </div>
          <FootCol title="Company" links={[["Services", () => nav("services")], ["Portfolio", () => nav("portfolio")], ["Contact", () => nav("contact")]]} />
          <div>
            <div className="eyebrow muted" style={{ marginBottom: 14 }}>Get in touch</div>
            <p style={{ fontSize: 14.5, color: "rgba(255,255,255,.8)", lineHeight: 1.7 }}>
              1 Harbour Plaza, Lisbon Bay<br />hello@primadelta.com<br />+351 21 000 0000
            </p>
          </div>
        </div>
        <div style={{ borderTop: "1px solid rgba(255,255,255,.1)", paddingTop: 22, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <span className="muted" style={{ fontSize: 13 }}>© 2026 PrimaDelta Holdings. Prototype — sample data only.</span>
          <span className="muted" style={{ fontSize: 13 }}>Privacy · Terms · Cookies</span>
        </div>
      </div>
    </footer>
  );
}
function FootCol({ title, links }) {
  return (
    <div>
      <div className="eyebrow muted" style={{ marginBottom: 14 }}>{title}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
        {links.map(([l, fn]) => (
          <a key={l} onClick={fn} style={{ fontSize: 14.5, color: "rgba(255,255,255,.78)", cursor: "pointer" }}>{l}</a>
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   HOME
   ============================================================ */
function Home() {
  const { nav, estates } = window.useStore();
  const featured = estates.slice(0, 3);
  return (
    <div>
      {/* hero */}
      <section className="dark-sec" style={{ position: "relative", overflow: "hidden", paddingTop: 96, paddingBottom: 0 }}>
        <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
          <div style={{ maxWidth: 760 }}>
            <div className="eyebrow muted fade-in">Development · Asset Management · Operations</div>
            <h1 className="serif fade-in" style={{ fontSize: "clamp(42px, 6vw, 76px)", fontWeight: 500, lineHeight: 1.02, marginTop: 18, letterSpacing: "-0.02em" }}>
              Buildings of<br />lasting value.
            </h1>
            <p className="muted fade-in" style={{ fontSize: "clamp(17px,2vw,20px)", lineHeight: 1.55, marginTop: 24, maxWidth: 560 }}>
              PrimaDelta develops, owns and manages real estate across its full life — from masterplan and construction to long-term stewardship of income-producing assets.
            </p>
            <div className="flex gap-12 fade-in" style={{ marginTop: 34, flexWrap: "wrap" }}>
              <Btn variant="clay" size="lg" iconRight={<Ic.arrow s={17} />} onClick={() => nav("portfolio")}>Explore the portfolio</Btn>
              <Btn variant="light" size="lg" onClick={() => nav("services")}>Our services</Btn>
            </div>
          </div>
        </div>
        {/* hero image band */}
        <div className="wrap" style={{ marginTop: 64 }}>
          <Ph src={window.PDImages.hero} label="hero" dark style={{ height: 440, borderRadius: "18px 18px 0 0" }} />
        </div>
      </section>

      {/* stats band */}
      <section className="section tight" style={{ borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 28 }}>
            {[["15+ yrs", "Development & management"], ["50 assets", "Across the live portfolio"], ["250+ homes", "Residences delivered"], ["88%", "Average occupancy"]].map(([n, l]) => (
              <div key={l}>
                <div className="stat-num">{n}</div>
                <div className="muted" style={{ marginTop: 8, fontSize: 14.5 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* services preview */}
      <section className="section">
        <div className="wrap">
          <div className="between flex" style={{ alignItems: "flex-end", marginBottom: 40, flexWrap: "wrap", gap: 16 }}>
            <div>
              <div className="eyebrow">What we do</div>
              <h2 className="serif" style={{ fontSize: "clamp(30px,4vw,44px)", fontWeight: 500, marginTop: 12, maxWidth: 540 }}>
                One team across the building life cycle
              </h2>
            </div>
            <a className="link" onClick={() => nav("services")}>All services <Ic.arrow s={16} /></a>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
            {SERVICES.slice(0, 3).map((s) => (
              <div key={s.title} className="card" style={{ padding: 28 }}>
                <div style={{ width: 46, height: 46, borderRadius: 12, background: "var(--clay-tint)", color: "var(--clay)", display: "flex", alignItems: "center", justifyContent: "center" }}>{s.icon}</div>
                <h3 className="serif" style={{ fontSize: 22, fontWeight: 500, marginTop: 20 }}>{s.title}</h3>
                <p className="muted" style={{ marginTop: 10, fontSize: 14.5, lineHeight: 1.6 }}>{s.blurb}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* featured portfolio */}
      <section className="section tight" style={{ background: "var(--paper-2)" }}>
        <div className="wrap">
          <div className="between flex" style={{ alignItems: "flex-end", marginBottom: 36, flexWrap: "wrap", gap: 16 }}>
            <div>
              <div className="eyebrow">Selected work</div>
              <h2 className="serif" style={{ fontSize: "clamp(30px,4vw,44px)", fontWeight: 500, marginTop: 12 }}>Developments & managed assets</h2>
            </div>
            <a className="link" onClick={() => nav("portfolio")}>View full portfolio <Ic.arrow s={16} /></a>
          </div>
          <div className="estate-grid">
            {featured.map((e) => <EstateCard key={e.id} e={e} />)}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section">
        <div className="wrap">
          <div className="dark-sec" style={{ borderRadius: 22, padding: "56px 56px", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
            <div style={{ maxWidth: 540 }}>
              <h2 className="serif" style={{ fontSize: "clamp(28px,3.5vw,40px)", fontWeight: 500, color: "#fff" }}>Have a site, an asset, or a mandate?</h2>
              <p className="muted" style={{ marginTop: 14, fontSize: 16.5 }}>We partner with landowners, investors and occupiers across development and management. Let's talk.</p>
            </div>
            <Btn variant="clay" size="lg" iconRight={<Ic.arrow s={17} />} onClick={() => nav("contact")}>Start a conversation</Btn>
          </div>
        </div>
      </section>
    </div>
  );
}

const SERVICES = [
  { title: "Development", icon: <Ic.building s={24} />, blurb: "From land assembly and design through delivery — masterplanning, residential, commercial and mixed-use schemes built to endure." },
  { title: "Asset Management", icon: <Ic.trend s={24} />, blurb: "Active stewardship of income-producing assets: leasing, business planning, ESG, and value-add programmes that protect and grow returns." },
  { title: "Facility Operations", icon: <Ic.wrench s={24} />, blurb: "Planned and reactive maintenance, vendor management and compliance — keeping buildings safe, efficient and tenant-ready." },
  { title: "Investment & Advisory", icon: <Ic.coins s={24} />, blurb: "Co-investment, joint ventures and advisory mandates underwritten by hands-on operational insight." },
  { title: "Sustainability", icon: <Ic.leaf s={24} />, blurb: "Carbon-reduction retrofits, certification, and reporting embedded across the portfolio rather than bolted on." },
  { title: "Tenant Experience", icon: <Ic.handshake s={24} />, blurb: "Placemaking, events and responsive service that turn occupiers into long-term residents and partners." }
];

/* ============================================================
   SERVICES PAGE
   ============================================================ */
function Services() {
  const { nav } = window.useStore();
  return (
    <div>
      <section className="dark-sec section tight">
        <div className="wrap" style={{ maxWidth: 760 }}>
          <div className="eyebrow muted">Services</div>
          <h1 className="serif" style={{ fontSize: "clamp(36px,5vw,60px)", fontWeight: 500, marginTop: 16, lineHeight: 1.04 }}>
            A single team, end to end
          </h1>
          <p className="muted" style={{ fontSize: 18, marginTop: 20, lineHeight: 1.6 }}>
            Most owners hand a building between a developer, a manager and an operator. We hold all three — so intent survives from the first sketch to the thousandth maintenance ticket.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
            {SERVICES.map((s) => (
              <div key={s.title} className="card" style={{ padding: 30 }}>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: "var(--clay-tint)", color: "var(--clay)", display: "flex", alignItems: "center", justifyContent: "center" }}>{s.icon}</div>
                <h3 className="serif" style={{ fontSize: 23, fontWeight: 500, marginTop: 20 }}>{s.title}</h3>
                <p className="muted" style={{ marginTop: 10, fontSize: 14.5, lineHeight: 1.6 }}>{s.blurb}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* process */}
      <section className="section tight" style={{ background: "var(--paper-2)" }}>
        <div className="wrap">
          <div className="eyebrow">How we work</div>
          <h2 className="serif" style={{ fontSize: "clamp(28px,3.5vw,40px)", fontWeight: 500, marginTop: 12, marginBottom: 40 }}>From mandate to managed asset</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 24 }}>
            {[["01", "Originate", "Source sites, assets and mandates; underwrite with operational realism."],
              ["02", "Develop", "Design and deliver — or reposition — to a clear thesis and quality bar."],
              ["03", "Operate", "Stand up facility operations, vendor frameworks and compliance from day one."],
              ["04", "Steward", "Report, optimise and reinvest across the hold to protect long-term value."]].map(([n, t, d]) => (
              <div key={n}>
                <div className="serif" style={{ fontSize: 40, color: "var(--clay)", fontWeight: 500 }}>{n}</div>
                <h4 style={{ fontSize: 18, fontWeight: 600, marginTop: 10 }}>{t}</h4>
                <p className="muted" style={{ marginTop: 8, fontSize: 14.5, lineHeight: 1.6 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap center" style={{ maxWidth: 640, margin: "0 auto" }}>
          <h2 className="serif" style={{ fontSize: "clamp(28px,3.5vw,40px)", fontWeight: 500 }}>See it in the portfolio</h2>
          <p className="muted" style={{ marginTop: 14, fontSize: 16.5 }}>Five projects and managed assets that show the model in practice.</p>
          <div style={{ marginTop: 26 }}><Btn variant="clay" size="lg" iconRight={<Ic.arrow s={17} />} onClick={() => nav("portfolio")}>View portfolio</Btn></div>
        </div>
      </section>
    </div>
  );
}

/* ============================================================
   PORTFOLIO LISTING
   ============================================================ */
function EstateCard({ e }) {
  const { nav } = window.useStore();
  const img = window.PDImages.forEstate(e);
  return (
    <div className="estate" onClick={() => nav("estate", { id: e.id })}>
      <div className="estate-img">
        <Ph src={img.card} alt={e.name} style={{ position: "absolute", inset: 0 }} />
        <div className="estate-badge"><Badge tone={e.kind === "project" ? "outline" : "neutral"}>{e.kind === "project" ? "Development" : "Managed Asset"}</Badge></div>
      </div>
      <div className="estate-body">
        <div className="estate-loc"><Ic.pin s={13} style={{ display: "inline", verticalAlign: -2, marginRight: 4 }} />{e.loc}</div>
        <div className="estate-name">{e.name}</div>
        <div style={{ marginTop: 10 }}><Status label={e.status} /></div>
        <div className="estate-meta" style={{ marginTop: "auto" }}>
          <div className="m"><div className="k">{e.valueLabel}</div><div className="v">£{e.value}K</div></div>
          <div className="m"><div className="k">Area</div><div className="v">{e.area} sf</div></div>
          <div className="m"><div className="k">{e.units ? "Units" : "Completion"}</div><div className="v">{e.units || e.year}</div></div>
        </div>
      </div>
    </div>
  );
}

const PER_PAGE = 10;

function Pagination({ page, pages, onChange }) {
  if (pages <= 1) return null;
  // build a compact range with ellipses
  const items = [];
  const push = (p) => items.push(p);
  push(1);
  const lo = Math.max(2, page - 1);
  const hi = Math.min(pages - 1, page + 1);
  if (lo > 2) push("…");
  for (let p = lo; p <= hi; p++) push(p);
  if (hi < pages - 1) push("…");
  if (pages > 1) push(pages);
  return (
    <nav className="pager" aria-label="Portfolio pages">
      <button className="pager-arrow" disabled={page === 1} onClick={() => onChange(page - 1)} aria-label="Previous page">
        <Ic.arrowL s={16} /> Prev
      </button>
      <div className="pager-nums">
        {items.map((it, i) =>
          it === "…" ? (
            <span key={"e" + i} className="pager-gap">…</span>
          ) : (
            <button key={it} className={"pager-num" + (it === page ? " active" : "")} onClick={() => onChange(it)}>
              {String(it).padStart(2, "0")}
            </button>
          )
        )}
      </div>
      <button className="pager-arrow" disabled={page === pages} onClick={() => onChange(page + 1)} aria-label="Next page">
        Next <Ic.arrow s={16} />
      </button>
    </nav>
  );
}

function Portfolio() {
  const { estates } = window.useStore();
  const [filter, setFilter] = React.useState("all");
  const [page, setPage] = React.useState(1);

  const shown = estates.filter((e) => filter === "all" || e.kind === filter);
  const pages = Math.max(1, Math.ceil(shown.length / PER_PAGE));
  const current = Math.min(page, pages);
  const start = (current - 1) * PER_PAGE;
  const slice = shown.slice(start, start + PER_PAGE);

  const setFilterReset = (k) => { setFilter(k); setPage(1); };
  const goTo = (p) => {
    setPage(p);
    const grid = document.getElementById("portfolio-grid");
    if (grid) window.scrollTo({ top: grid.getBoundingClientRect().top + window.scrollY - 140, behavior: "smooth" });
  };

  const rangeFrom = shown.length === 0 ? 0 : start + 1;
  const rangeTo = Math.min(start + PER_PAGE, shown.length);

  return (
    <div>
      <section className="dark-sec section tight" style={{ paddingBottom: 48 }}>
        <div className="wrap">
          <div className="eyebrow muted">Portfolio</div>
          <h1 className="serif" style={{ fontSize: "clamp(36px,5vw,56px)", fontWeight: 500, marginTop: 14 }}>Developments & managed assets</h1>
          <p className="muted" style={{ fontSize: 17.5, marginTop: 16, maxWidth: 560 }}>A live cross-section of what we build and what we manage. Select any asset for full detail.</p>
        </div>
      </section>
      <section className="section tight">
        <div className="wrap">
          <div className="flex between" style={{ alignItems: "flex-end", marginBottom: 28, flexWrap: "wrap", gap: 16 }}>
            <div className="tabs">
              {[["all", "All"], ["project", "Developments"], ["property", "Managed Assets"]].map(([k, l]) => (
                <button key={k} className={"tab" + (filter === k ? " active" : "")} onClick={() => setFilterReset(k)}>{l}</button>
              ))}
            </div>
            <div className="muted" style={{ fontSize: 14 }}>
              Showing {rangeFrom}–{rangeTo} of {shown.length}
            </div>
          </div>
          <div id="portfolio-grid" className="estate-grid">
            {slice.map((e) => <EstateCard key={e.id} e={e} />)}
          </div>
          <Pagination page={current} pages={pages} onChange={goTo} />
        </div>
      </section>
    </div>
  );
}

/* ============================================================
   ESTATE DETAIL
   ============================================================ */
function EstateDetail() {
  const { route, nav, estates } = window.useStore();
  const e = estates.find((x) => x.id === route.params.id) || estates[0];
  const img = window.PDImages.forEstate(e);
  return (
    <div>
      <section style={{ paddingTop: 28 }}>
        <div className="wrap">
          <a className="link" style={{ color: "var(--muted)" }} onClick={() => nav("portfolio")}><Ic.arrowL s={16} /> Back to portfolio</a>
        </div>
      </section>
      <section style={{ paddingTop: 22 }}>
        <div className="wrap">
          <div className="flex gap-12" style={{ flexWrap: "wrap", alignItems: "center" }}>
            <Badge tone={e.kind === "project" ? "outline" : "neutral"}>{e.kind === "project" ? "Development" : "Managed Asset"}</Badge>
            <Status label={e.status} />
          </div>
          <h1 className="serif" style={{ fontSize: "clamp(38px,5vw,60px)", fontWeight: 500, marginTop: 16, letterSpacing: "-0.02em" }}>{e.name}</h1>
          <div className="muted" style={{ fontSize: 16.5, marginTop: 10 }}><Ic.pin s={16} style={{ display: "inline", verticalAlign: -3, marginRight: 6 }} />{e.loc} · {e.type}</div>
          <Ph src={img.wide} alt={e.name} style={{ height: 520, borderRadius: 18, marginTop: 28 }} />
        </div>
      </section>

      <section className="section tight">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 48, alignItems: "start" }}>
          <div>
            <div className="eyebrow">Overview</div>
            <p className="serif" style={{ fontSize: 24, lineHeight: 1.45, marginTop: 16, fontWeight: 400, color: "var(--ink-2)" }}>{e.blurb}</p>
            <p style={{ fontSize: 16, lineHeight: 1.7, marginTop: 20, color: "var(--ink-soft)" }}>{e.detail}</p>

            <h3 className="serif" style={{ fontSize: 24, fontWeight: 500, marginTop: 40, marginBottom: 16 }}>Highlights</h3>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              {e.highlights.map((h) => (
                <div key={h} className="flex gap-12" style={{ alignItems: "flex-start", padding: "12px 0" }}>
                  <span style={{ color: "var(--clay)", marginTop: 1 }}><Ic.checkC s={20} /></span>
                  <span style={{ fontSize: 15, lineHeight: 1.45 }}>{h}</span>
                </div>
              ))}
            </div>

            {e.kind === "project" && (
              <div style={{ marginTop: 40 }}>
                <div className="flex between" style={{ marginBottom: 10 }}>
                  <h3 className="serif" style={{ fontSize: 22, fontWeight: 500 }}>Construction progress</h3>
                  <span style={{ fontWeight: 600, color: "var(--clay)" }}>{e.progress}%</span>
                </div>
                <div className="bar"><span style={{ width: e.progress + "%" }}></span></div>
                <p className="muted" style={{ fontSize: 14, marginTop: 10 }}>Targeting completion in {e.year}.</p>
              </div>
            )}
            {e.kind === "property" && (
              <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <div className="panel">
                  <div className="muted" style={{ fontSize: 13, fontWeight: 600 }}>Occupancy</div>
                  <div className="serif" style={{ fontSize: 38, fontWeight: 500, marginTop: 6 }}>{e.occupancy}%</div>
                  <div className="bar" style={{ marginTop: 12 }}><span style={{ width: e.occupancy + "%" }}></span></div>
                </div>
                <div className="panel">
                  <div className="muted" style={{ fontSize: 13, fontWeight: 600 }}>Net Operating Income</div>
                  <div className="serif" style={{ fontSize: 38, fontWeight: 500, marginTop: 6 }}>£{e.noi}M</div>
                  <div className="muted" style={{ fontSize: 13, marginTop: 12 }}>Trailing twelve months</div>
                </div>
              </div>
            )}
          </div>

          <aside style={{ position: "sticky", top: 92 }}>
            <div className="spec">
              {e.facts.map(([k, v]) => (
                <div className="cell" key={k}><div className="k">{k}</div><div className="v">{v}</div></div>
              ))}
            </div>
            <div className="card" style={{ padding: 22, marginTop: 16 }}>
              <h4 style={{ fontSize: 16, fontWeight: 600 }}>Enquire about {e.name}</h4>
              <p className="muted" style={{ fontSize: 14, marginTop: 6, lineHeight: 1.5 }}>Investment, leasing or media — our team will respond within one business day.</p>
              <Btn variant="clay" block style={{ marginTop: 16 }} iconRight={<Ic.arrow s={16} />} onClick={() => nav("contact", { topic: e.name })}>Contact the team</Btn>
            </div>
          </aside>
        </div>
      </section>

      {/* gallery */}
      <section className="section tight" style={{ background: "var(--paper-2)" }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 18 }}>Gallery</div>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16 }}>
            <Ph src={img.gallery[0]} alt="Primary view" style={{ height: 340, borderRadius: 14 }} />
            <div style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: 16 }}>
              <Ph src={img.gallery[1]} alt="Detail" style={{ borderRadius: 14, minHeight: 162 }} />
              <Ph src={img.gallery[2]} alt="Context" style={{ borderRadius: 14, minHeight: 162 }} />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============================================================
   CONTACT
   ============================================================ */
function Contact() {
  const { addInbox, toast, route, nav } = window.useStore();
  const [form, setForm] = React.useState({ name: "", email: "", org: "", topic: route.params.topic ? "Asset enquiry" : "General enquiry", message: route.params.topic ? `I'd like to enquire about ${route.params.topic}.` : "" });
  const [sent, setSent] = React.useState(false);
  const set = (k) => (ev) => setForm((f) => ({ ...f, [k]: ev.target.value }));
  const valid = form.name && /\S+@\S+\.\S+/.test(form.email) && form.message.length > 4;

  const submit = (ev) => {
    ev.preventDefault();
    if (!valid) return;
    addInbox(form);
    toast("Message sent", "An email alert has been dispatched to the admin team.", <Ic.mail s={18} />);
    setSent(true);
  };

  return (
    <div>
      <section className="section" style={{ paddingBottom: 40 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "start" }}>
          <div>
            <div className="eyebrow">Contact</div>
            <h1 className="serif" style={{ fontSize: "clamp(38px,5vw,58px)", fontWeight: 500, marginTop: 14, lineHeight: 1.03 }}>Start a<br />conversation</h1>
            <p className="muted" style={{ fontSize: 17.5, marginTop: 20, lineHeight: 1.6, maxWidth: 420 }}>
              Investment, leasing, partnerships or press. Send a note and the right person will reply within one business day.
            </p>
            <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 20 }}>
              {[[<Ic.pin s={18} />, "Head office", "1 Harbour Plaza, Lisbon Bay"],
                [<Ic.mail s={18} />, "Email", "hello@primadelta.com"],
                [<Ic.clock s={18} />, "Hours", "Mon–Fri · 09:00–18:00 WET"]].map(([ic, k, v], i) => (
                <div key={i} className="flex gap-16" style={{ alignItems: "center" }}>
                  <div style={{ width: 42, height: 42, borderRadius: 11, background: "var(--clay-tint)", color: "var(--clay)", display: "flex", alignItems: "center", justifyContent: "center" }}>{ic}</div>
                  <div><div style={{ fontWeight: 600, fontSize: 15 }}>{k}</div><div className="muted" style={{ fontSize: 14.5 }}>{v}</div></div>
                </div>
              ))}
            </div>
          </div>

          <div className="card" style={{ padding: 32 }}>
            {sent ? (
              <div className="center" style={{ padding: "30px 10px" }}>
                <div style={{ width: 60, height: 60, borderRadius: 16, background: "var(--st-done-bg)", color: "var(--st-done)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 18px" }}><Ic.check s={30} /></div>
                <h3 className="serif" style={{ fontSize: 26, fontWeight: 500 }}>Message received</h3>
                <p className="muted" style={{ marginTop: 10, fontSize: 15.5, maxWidth: 360, margin: "10px auto 0", lineHeight: 1.6 }}>
                  Thank you, {form.name.split(" ")[0]}. An <strong style={{ color: "var(--ink)" }}>email alert has been sent to the admin team</strong> and your enquiry now appears in their inbox.
                </p>
                <div className="flex gap-12" style={{ justifyContent: "center", marginTop: 24 }}>
                  <Btn variant="ghost" onClick={() => { setSent(false); setForm({ name: "", email: "", org: "", topic: "General enquiry", message: "" }); }}>Send another</Btn>
                  <Btn variant="primary" onClick={() => nav("home")}>Back to home</Btn>
                </div>
              </div>
            ) : (
              <form onSubmit={submit}>
                <h3 className="serif" style={{ fontSize: 24, fontWeight: 500, marginBottom: 20 }}>Send us a message</h3>
                <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                  <div className="field-row">
                    <Field label="Full name" req><Input value={form.name} onChange={set("name")} placeholder="Jane Doe" /></Field>
                    <Field label="Email" req><Input type="email" value={form.email} onChange={set("email")} placeholder="jane@company.com" /></Field>
                  </div>
                  <div className="field-row">
                    <Field label="Organisation"><Input value={form.org} onChange={set("org")} placeholder="Company / fund" /></Field>
                    <Field label="Topic">
                      <Select value={form.topic} onChange={set("topic")}>
                        <option>General enquiry</option><option>Investment / JV enquiry</option>
                        <option>Leasing enquiry</option><option>Asset enquiry</option><option>Press / media</option>
                      </Select>
                    </Field>
                  </div>
                  <Field label="Message" req><Textarea value={form.message} onChange={set("message")} placeholder="How can we help?" style={{ minHeight: 120 }} /></Field>
                  <Btn variant="clay" size="lg" block type="submit" disabled={!valid} iconRight={<Ic.arrow s={17} />}>Send message</Btn>
                  <p className="muted center" style={{ fontSize: 12.5 }}>Submitting notifies the admin team by email and logs your enquiry to the platform inbox.</p>
                </div>
              </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PubNav, PubFooter, Home, Services, Portfolio, EstateDetail, Contact, EstateCard });