/* Alpago — page screens */

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS, useMemo: useMemoS } = React;

// ---- Home ----
function HomeScreen({ lang, setRoute, onCta, openProject }) {
  const t = useT(lang);
  const [heroIdx, setHeroIdx] = useStateS(0);
  const heroes = [
    { img: "media/asset-29.webp", project: "Palm Flower" },
    { img: "media/asset-10.webp", project: "Casa Del Sole" },
    { img: "media/asset-06.webp", project: "Kural Vista" }
  ];
  useEffectS(() => {
    const id = setInterval(() => setHeroIdx(i => (i + 1) % heroes.length), 7000);
    return () => clearInterval(id);
  }, []);
  const current = heroes[heroIdx];
  const ticker = t.hero.ticker;

  return (
    <div>
      {/* HERO */}
      <section className="hero" data-screen-label="01 Home — Hero">
        <div className="hero-media">
          {heroes.map((h, i) => (
            <img
              key={h.img}
              src={h.img}
              alt=""
              style={{
                position: "absolute", inset: 0, opacity: i === heroIdx ? 1 : 0,
                transition: "opacity 1.6s cubic-bezier(.2,.7,.2,1)"
              }}
            />
          ))}
        </div>
        <div className="hero-scrim" />
        <div className="container hero-content">
          <div className="hero-eyebrow eyebrow on-dark fade-in">
            <span className="dot" />{t.hero.eyebrow}
          </div>
          <h1 className="fade-in delay-1">
            {t.hero.title_a}<br />
            <em>{t.hero.title_b}</em><br />
            {t.hero.title_c}
          </h1>
          <div className="hero-meta fade-in delay-2">
            {t.hero.meta.map(([k, v]) => (
              <div className="col" key={k}>
                <div className="label">{k}</div>
                <div className="value">{v}</div>
              </div>
            ))}
            <div className="col" style={{ minWidth: 200 }}>
              <div className="label">{lang === "ar" ? "العرض الحالي" : "Now showing"}</div>
              <div className="value">{current.project}</div>
            </div>
          </div>
          <div className="hero-ctas fade-in delay-3">
            <button className="btn" onClick={onCta}>{t.hero.cta_a} <span className="arrow">→</span></button>
            <button className="btn ghost-light" onClick={() => setRoute({ name: "project", slug: "palm-flower" })}>{t.hero.cta_b}</button>
          </div>
        </div>
        <div className="scroll-cue">
          {lang === "ar" ? "اسحب" : "Scroll"}
          <span className="line" />
        </div>
        <div className="hero-ticker">
          <div className="hero-ticker-inner">
            {[...ticker, ...ticker].map((t, i) => (
              <span key={i}>{t}<span className="sep">&nbsp;&nbsp;◆&nbsp;&nbsp;</span></span>
            ))}
          </div>
        </div>
      </section>

      {/* PROPOSITION */}
      <section className="prop section" data-screen-label="01 Home — Proposition">
        <div className="container">
          <div className="prop-grid">
            <div>
              <div className="eyebrow"><span className="dot" />{t.prop.eyebrow}</div>
              <h2>{t.prop.title_a} <em>{t.prop.title_em}</em>{t.prop.title_b}</h2>
            </div>
            <div className="prop-body">
              <p>{t.prop.body_p1}</p>
              <p>{t.prop.body_p2}</p>
              <button className="btn-link" onClick={() => setRoute({ name: "about" })}>
                {lang === "ar" ? "تعرّف على مجموعة ألباغو" : "Meet the Alpago Group"} <span>→</span>
              </button>
            </div>
          </div>
          <div className="pillars">
            {t.pillars.map(([n, h, p]) => (
              <div className="pillar" key={n}>
                <div className="num">{n}</div>
                <h3>{h}</h3>
                <p>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PROJECTS */}
      <section className="proj-section section" data-screen-label="01 Home — Projects">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="dot" />{t.projects.eyebrow}</div>
              <h2>{t.projects.title}</h2>
            </div>
            <p className="lead">{t.projects.lead}</p>
          </div>

          <div className="proj-grid">
            {/* Palm Flower — wide */}
            <ProjectCardHero p={PROJECTS[0]} wide onOpen={openProject} num="01" />
            <ProjectCardHero p={PROJECTS[1]} tall onOpen={openProject} num="02" />
            <ProjectCardHero p={PROJECTS[2]} onOpen={openProject} num="03" />
            <ProjectCardHero p={PROJECTS[3]} onOpen={openProject} num="04" />
          </div>

          <div style={{ display: "flex", justifyContent: "center", marginTop: 60 }}>
            <button className="btn ghost" onClick={() => setRoute({ name: "projects" })}>
              {lang === "ar" ? "كل المحفظة" : "View full portfolio"} <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </section>

      {/* PEDIGREE */}
      <section className="ped" data-screen-label="01 Home — Pedigree">
        <div className="container">
          <div className="ped-grid">
            <div>
              <div className="eyebrow on-dark"><span className="dot" />{lang === "ar" ? "شركاء التصميم" : "Design partners"}</div>
              <h2>{lang === "ar" ? "نختار شركاء لكل عنوان." : "We choose partners one address at a time."}</h2>
              <p style={{ color: "rgba(255,255,255,.65)", marginTop: 16, maxWidth: "36ch", fontSize: 14 }}>
                {lang === "ar"
                  ? "العمارة والداخلية لكل مشروع، صُنعت مع شركات لا تكرر نفسها. حقوق الشعارات مؤكدة لكل مشروع قبل النشر."
                  : "Per-project architecture and interior with houses that do not repeat themselves. Logo rights cleared per development before publishing."}
              </p>
            </div>
            <div className="partners">
              {PARTNERS.map(p => (
                <div className="partner" key={p.name}>
                  <div className="role">{p.role.split("—")[0].trim()}</div>
                  <div className="name">{p.name}</div>
                  <div className="role" style={{ opacity: .55 }}>{p.role.includes("—") ? p.role.split("—")[1].trim() : ""}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* RECORD BLOCK */}
      <section className="record" data-screen-label="01 Home — Record">
        <div className="container">
          <div className="record-grid">
            <div>
              <div className="eyebrow"><span className="dot" />{lang === "ar" ? "رقم قياسي" : "On record"}</div>
              <h2 className="big">AED <em>302.5M</em></h2>
              <p className="ctx">
                <strong>{lang === "ar" ? "كاسا ديل سولي، 2022." : "Casa Del Sole, 2022."}</strong>{" "}
                {lang === "ar"
                  ? "حصة فاخرة مزدوجة في سعفة G — مدرجة كأعلى صفقة سكنية في دبي وقت بيعها."
                  : "A double signature villa on Frond G — attributed at the time of sale as the highest residential transaction recorded in Dubai."}
                <br /><span className="attrib" style={{ marginTop: 16 }}>Attributed press record · 2022 · not a current price</span>
              </p>
              <div style={{ marginTop: 32 }}>
                <button className="btn-link" onClick={() => openProject("casa-del-sole")}>
                  {lang === "ar" ? "كاسا ديل سولي" : "Open Casa Del Sole"} <span>→</span>
                </button>
              </div>
            </div>
            <div className="img-frame">
              <img src="media/asset-10.webp" alt="Casa Del Sole — attributed render" />
            </div>
          </div>

          <div className="awards" style={{ marginTop: 100 }}>
            <div className="label">{lang === "ar" ? "اعتراف" : "Recognition"}</div>
            <div className="items">
              <div className="item">Luxury Lifestyle Awards <small>{lang === "ar" ? "2024 · موثقة" : "2024 · attributed"}</small></div>
              <div className="item">Dubai Residential Record <small>{lang === "ar" ? "2022" : "2022 — AED 302.5M"}</small></div>
              <div className="item">WiredScore — Palm Flower <small>{lang === "ar" ? "موثقة" : "Smart-home certification"}</small></div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section className="cta-band" data-screen-label="01 Home — CTA">
        <div className="bg"><img src="media/asset-30.webp" alt="" /></div>
        <div className="scrim" />
        <div className="container content">
          <div className="eyebrow on-dark" style={{ marginBottom: 0 }}><span className="dot" />{t.cta.eyebrow}</div>
          <h2>{t.cta.title}</h2>
          <div className="ctas">
            <button className="btn" onClick={onCta}>{t.cta.a} <span className="arrow">→</span></button>
            <button className="btn ghost-light" onClick={onCta}>{t.cta.b}</button>
            <button className="btn ghost-light" onClick={() => window.open("https://wa.me/97142630022", "_blank")}>{t.cta.c}</button>
          </div>
        </div>
      </section>
    </div>
  );
}

function ProjectCardHero({ p, wide, tall, onOpen, num }) {
  return (
    <div className={`proj-card ${wide ? "wide" : ""} ${tall ? "tall" : ""}`} onClick={() => onOpen(p.slug)}>
      <img src={p.cover} alt={p.name} loading="lazy" />
      <span className={`status ${p.statusKey === "legend" ? "flag" : ""}`}>{p.status}</span>
      <span className="num">{num}</span>
      <div className="proj-card-inner">
        <h3>{p.name}</h3>
        <div className="meta">
          <span>{p.location}</span>
          <span style={{ opacity: .5 }}>·</span>
          <span>{p.typology}</span>
        </div>
        <span className="arrow">→</span>
      </div>
    </div>
  );
}

// ---- Projects index ----
function ProjectsScreen({ lang, openProject }) {
  const t = useT(lang);
  return (
    <div>
      <section className="proj-index-hero" data-screen-label="02 Projects — Index">
        <div className="container">
          <div className="eyebrow"><span className="dot" />{t.projects.eyebrow}</div>
          <h1 className="display" style={{ fontSize: "clamp(48px,7vw,96px)", marginTop: 20, maxWidth: "16ch", lineHeight: 1 }}>{t.projects.title}</h1>
          <p style={{ marginTop: 24, color: "var(--muted)", maxWidth: "60ch", fontSize: 17, lineHeight: 1.65 }}>{t.projects.lead}</p>
        </div>
      </section>
      <section className="proj-list" data-screen-label="02 Projects — List">
        <div className="container">
          {PROJECTS.map((p, i) => (
            <div className="proj-list-row" key={p.slug} onClick={() => openProject(p.slug)}>
              <div className="idx">{String(i + 1).padStart(2, "0")}</div>
              <div className="img"><img src={p.cover} alt={p.name} loading="lazy" /></div>
              <div className="info">
                <h3>{p.name}</h3>
                <div className="meta">
                  <span>{p.location}</span>
                  <span style={{ opacity: .5 }}>·</span>
                  <span>{p.typology}</span>
                  {p.partners.length > 0 && (<><span style={{ opacity: .5 }}>·</span><span>{p.partners.slice(0, 2).join(" + ")}</span></>)}
                </div>
                <p style={{ marginTop: 12, color: "var(--muted)", maxWidth: "60ch", fontSize: 14 }}>{p.tagline}</p>
              </div>
              <div className="status-col">
                <span className={`badge ${p.statusKey === "legend" ? "legend" : "live"}`}>{p.status}</span>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

// ---- Project detail ----
function ProjectDetail({ slug, lang, openProject, onCta, setRoute }) {
  const p = PROJECTS.find(x => x.slug === slug) || PROJECTS[0];
  const t = useT(lang);
  const [section, setSection] = useStateS("overview");
  const [lbOpen, setLbOpen] = useStateS(false);
  const [lbIdx, setLbIdx] = useStateS(0);

  const sections = [
    { id: "overview", label: lang === "ar" ? "نظرة عامة" : "Overview" },
    { id: "location", label: lang === "ar" ? "الموقع" : "Location" },
    { id: "partners", label: lang === "ar" ? "شركاء التصميم" : "Design & partners" },
    { id: "residences", label: lang === "ar" ? "الإقامات" : "Residences" },
    { id: "amenities", label: lang === "ar" ? "وسائل الراحة" : "Amenities" },
    { id: "gallery", label: lang === "ar" ? "المعرض" : "Gallery" }
  ];

  useEffectS(() => {
    const onScroll = () => {
      let best = "overview";
      for (const s of sections) {
        const el = document.getElementById("sec-" + s.id);
        if (el && el.getBoundingClientRect().top < 220) best = s.id;
      }
      setSection(best);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [slug]);

  useEffectS(() => {
    window.scrollTo({ top: 0 });
  }, [slug]);

  const scrollTo = (id) => {
    const el = document.getElementById("sec-" + id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 130;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };

  // Sibling projects
  const idx = PROJECTS.findIndex(x => x.slug === p.slug);
  const next = PROJECTS[(idx + 1) % PROJECTS.length];

  return (
    <div data-screen-label={`03 Project — ${p.name}`}>
      <section className="pd-hero">
        <img src={p.hero} alt={p.name} />
        <div className="scrim" />
        <div className="container content">
          <div className="top">
            <button className="back" onClick={() => setRoute({ name: "projects" })}>
              <span>←</span> {lang === "ar" ? "كل المشاريع" : "All projects"}
            </button>
            <span style={{ opacity: .4 }}>/</span>
            <span>{p.status}</span>
            <span style={{ opacity: .4 }}>/</span>
            <span>{p.location}</span>
          </div>
          <div className="bottom">
            <div>
              <div className="eyebrow on-dark" style={{ marginBottom: 24 }}><span className="dot" />{p.typology}</div>
              <h1>{p.name.split(" ").map((w, i, arr) => i === arr.length - 1 ? <em key={i}>{w}</em> : <span key={i}>{w} </span>)}</h1>
              <p style={{ maxWidth: "48ch", marginTop: 28, color: "rgba(255,255,255,.78)", fontSize: 17, lineHeight: 1.55 }}>{p.tagline}</p>
            </div>
            <div className="specs">
              {p.specs.map(([k, v]) => (
                <div key={k}>
                  <div className="label">{k}</div>
                  <div className="value">{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Anchor nav */}
      <div className="pd-anchor-nav">
        <div className="anchors">
          {sections.map(s => (
            <button key={s.id} className={section === s.id ? "active" : ""} onClick={() => scrollTo(s.id)}>{s.label}</button>
          ))}
        </div>
        <button className="btn" style={{ padding: "10px 18px" }} onClick={onCta}>{t.nav.cta} <span className="arrow">→</span></button>
      </div>

      {/* Overview */}
      <section id="sec-overview" className="pd-section">
        <div className="container">
          <div className="pd-two">
            <div>
              <div className="eyebrow"><span className="dot" />{lang === "ar" ? "نظرة عامة" : "Overview"}</div>
              <h2>{lang === "ar" ? "الفكرة" : "The proposition"}</h2>
            </div>
            <div>
              <p>{p.summary}</p>
              {p.attribution && (<p style={{ marginTop: 24 }}><span className="attrib">{p.attribution}</span></p>)}
            </div>
          </div>
        </div>
      </section>

      {/* Location */}
      <section id="sec-location" className="pd-section" style={{ background: "var(--surface)" }}>
        <div className="container">
          <div className="pd-two">
            <div>
              <div className="eyebrow"><span className="dot" />{lang === "ar" ? "الموقع" : "Location"}</div>
              <h2>{p.location}.</h2>
            </div>
            <div>
              <p>
                {lang === "ar"
                  ? "نخلة جميرا، الجزيرة الاصطناعية الرمز في دبي. "
                  : "Palm Jumeirah — Dubai's iconic man-made island. "}
                {p.location.includes("Frond G")
                  ? (lang === "ar"
                    ? "سعفة G هي ما يُعرف بـ«شارع المليارديرات» — أكثر فروع النخلة هدوءاً وعزلة، مع واجهات مائية خاصة."
                    : "Frond G is known as Billionaires' Row — the most quietly guarded address on the Palm, with private beach frontage and the deepest plots.")
                  : (lang === "ar"
                    ? "نخلة ويست بيتش، الواجهة البحرية المتقدمة على النخلة، حيث المطاعم والمنتجعات والحياة المدنية."
                    : "Palm West Beach — the Palm's mature waterfront promenade, lined with restaurants, resorts and a dense, walkable civic edge.")}
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 32 }}>
                <div className="map-frame" style={{ aspectRatio: "4/3" }}>
                  <img src="media/asset-15.webp" alt="Palm Jumeirah location" />
                  <div className="pin" />
                  <div className="caption">{p.location}</div>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 18, justifyContent: "center" }}>
                  <DistanceRow label="DXB Airport" v="20 min" />
                  <DistanceRow label="Downtown Dubai" v="25 min" />
                  <DistanceRow label="Marina" v="10 min" />
                  <DistanceRow label="Atlantis The Royal" v="8 min" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Partners */}
      <section id="sec-partners" className="pd-section">
        <div className="container">
          <div className="pd-two" style={{ marginBottom: 48 }}>
            <div>
              <div className="eyebrow"><span className="dot" />{lang === "ar" ? "التصميم" : "Design & partners"}</div>
              <h2>{lang === "ar" ? "شركاء بحسب العنوان." : "Partners chosen one address at a time."}</h2>
            </div>
            <div>
              <p>
                {lang === "ar"
                  ? "نختار شركاء التصميم لكل عنوان على حدة، لا كقالب يتكرر. حقوق الشعارات الواردة هنا تخضع للتأكيد قبل أي نشر."
                  : "For each address, we appoint architecture and interior partners one project at a time — not a recurring stable. Logo rights for the names below are cleared per development before any public use."}
              </p>
            </div>
          </div>
          {p.partners.length > 0 ? (
            <div className="partners-mono">
              {p.partners.map((name, i) => (
                <div className="p" key={name}>
                  <div className="label">{["Architecture", "Interior", "Certification"][i] || "Partner"}</div>
                  <div className="name">{name}</div>
                  <div className="role">{lang === "ar" ? "متعاقَد عليه لهذا المشروع" : "Engaged for this development"}</div>
                </div>
              ))}
            </div>
          ) : (
            <div className="partners-mono">
              <div className="p"><div className="label">{lang === "ar" ? "خاص" : "Private"}</div><div className="name">By appointment</div><div className="role">{lang === "ar" ? "تُكشف الفرق عند الحجز" : "Design team disclosed at reservation"}</div></div>
            </div>
          )}
        </div>
      </section>

      {/* Residences */}
      <section id="sec-residences" className="pd-section" style={{ background: "var(--surface)" }}>
        <div className="container">
          <div className="pd-two" style={{ marginBottom: 48 }}>
            <div>
              <div className="eyebrow"><span className="dot" />{lang === "ar" ? "الإقامات" : "Residences"}</div>
              <h2>{lang === "ar" ? "تشكيلة من المفاهيم." : "A small set of concepts."}</h2>
            </div>
            <div>
              <p>
                {lang === "ar"
                  ? "تتراوح المساحات حسب الطابق والمفهوم. الأرقام النهائية موثقة لدى ريرا ودائرة الأراضي. المخططات تُتاح عند الطلب الموثق."
                  : "Floor areas vary by level and concept. Final figures are RERA / DLD-verified. Floor plans are released to qualified enquiries under request."}
              </p>
            </div>
          </div>
          {p.concepts.length > 0 ? (
            <div className="res-stack">
              {p.concepts.map(([n, name, desc]) => (
                <div className="res-row" key={n}>
                  <div className="idx">{n}</div>
                  <div className="name">{name}</div>
                  <div className="desc">{desc}</div>
                  <div className="status">{lang === "ar" ? "بالاستفسار" : "By enquiry"}</div>
                </div>
              ))}
            </div>
          ) : (
            <div className="res-stack">
              <div className="res-row">
                <div className="idx">—</div>
                <div className="name">{lang === "ar" ? "تفاصيل خاصة" : "Private specifications"}</div>
                <div className="desc">{lang === "ar" ? "تُكشف تفاصيل هذه الإقامة للمستفسرين المؤهلين." : "Specifications for this address are released to qualified enquiries only."}</div>
                <div className="status">{lang === "ar" ? "بالاستفسار" : "By enquiry"}</div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Amenities */}
      {p.amenities.length > 0 && (
        <section id="sec-amenities" className="pd-section">
          <div className="container">
            <div className="pd-two" style={{ marginBottom: 48 }}>
              <div>
                <div className="eyebrow"><span className="dot" />{lang === "ar" ? "وسائل الراحة" : "Amenities"}</div>
                <h2>{lang === "ar" ? "حياة يومية، مرتفعة بهدوء." : "A daily life, quietly elevated."}</h2>
              </div>
              <div><p>{lang === "ar" ? "وسائل خاصة وبيوفيلية، مرتبطة بمساحات داخل وخارج." : "Private and biophilic — wellness, mobility and hospitality woven through the residence."}</p></div>
            </div>
            <div className="amen-grid">
              {p.amenities.map(a => (
                <div className="amen-card" key={a.title}>
                  <div className="img"><img src={a.img} alt={a.title} loading="lazy" /></div>
                  <div className="body">
                    <div className="label">{a.label}</div>
                    <h3>{a.title}</h3>
                    <p>{a.note}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Gallery */}
      <section id="sec-gallery" className="gallery">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow on-dark"><span className="dot" />{lang === "ar" ? "المعرض" : "Gallery"}</div>
              <h2>{p.name}.</h2>
            </div>
            <p className="lead">{lang === "ar" ? "صور ومخططات موثقة. للمزيد، الكتيب الكامل بالطلب الموثق." : "Selected renders and photography. The full brochure is released on qualified request."}</p>
          </div>
          <div className="gallery-grid">
            {p.gallery.map((src, i) => (
              <div
                key={src + i}
                className={`cell ${i === 0 ? "span-2 span-2-row" : i === 3 ? "span-2" : ""}`}
                onClick={() => { setLbIdx(i); setLbOpen(true); }}
              >
                <img src={src} alt={`${p.name} gallery ${i + 1}`} loading="lazy" />
              </div>
            ))}
          </div>
        </div>
      </section>

      <Lightbox images={p.gallery} open={lbOpen} index={lbIdx} setIndex={setLbIdx} onClose={() => setLbOpen(false)} />

      {/* Next project */}
      <section style={{ background: "var(--bg)", padding: "60px 0 120px" }}>
        <div className="container">
          <div className="hairline" style={{ marginBottom: 48 }} />
          <div className="section-head" style={{ marginBottom: 32 }}>
            <div>
              <div className="eyebrow"><span className="dot" />{lang === "ar" ? "التالي" : "Next"}</div>
              <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(32px,4vw,52px)", marginTop: 12 }}>{next.name}</h2>
            </div>
            <button className="btn ghost" onClick={() => openProject(next.slug)}>{lang === "ar" ? "افتح المشروع" : "Open project"} <span className="arrow">→</span></button>
          </div>
          <div className="proj-card wide" onClick={() => openProject(next.slug)}>
            <img src={next.cover} alt={next.name} />
            <span className="status">{next.status}</span>
            <div className="proj-card-inner">
              <h3>{next.name}</h3>
              <div className="meta"><span>{next.location}</span><span style={{ opacity: .5 }}>·</span><span>{next.typology}</span></div>
              <span className="arrow">→</span>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function DistanceRow({ label, v }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr auto", borderBottom: "1px solid var(--border)", padding: "14px 0", alignItems: "baseline" }}>
      <span style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--muted)" }}>{label}</span>
      <span style={{ fontFamily: "var(--font-display)", fontSize: 20 }}>{v}</span>
    </div>
  );
}

// ---- About ----
function AboutScreen({ lang, setRoute, onCta }) {
  const t = useT(lang);
  return (
    <div>
      <section className="about-hero" data-screen-label="04 About — Hero">
        <div className="container">
          <div className="eyebrow"><span className="dot" />{lang === "ar" ? "عن الشركة" : "The practice"}</div>
          <h1>{lang === "ar" ? <>السعي وراء <em>الكمال</em>.</> : <>Pursuit of <em>perfection</em>.</>}</h1>
          <p className="lead">
            {lang === "ar"
              ? "ألباغو بروبرتيز هي ذراع مجموعة ألباغو في دبي — جذورها بين إسطنبول ولندن، تأسست في دبي في عام 2019 (تأكيد). تعمل من مكتب 2603 في بوليفارد بلازا برج 1 وسط مدينة دبي."
              : "Alpago Properties is the Dubai practice of the Alpago Group — Istanbul and London roots, Dubai-founded 2019 (confirm). The private office is at Office 2603, Boulevard Plaza Tower 1, Downtown Dubai."}
          </p>
        </div>
      </section>

      <section style={{ background: "var(--surface)", padding: "20px 0 60px" }}>
        <div className="container">
          <div className="values">
            {VALUES_DATA.map(([n, name, desc]) => (
              <div className="value" key={n}>
                <div className="num">{n}</div>
                <h3>{name}</h3>
                <p>{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="dot" />{lang === "ar" ? "القيادة" : "Leadership"}</div>
              <h2>{lang === "ar" ? "ثلاثة على رأس ألباغو." : "Three at the head of Alpago."}</h2>
            </div>
            <p className="lead">{lang === "ar" ? "أسماء ومناصب فقط — السير الذاتية تُتاح عند الاستفسار." : "Names and titles only. Full bios available on request."}</p>
          </div>
          <div className="leaders">
            {LEADERS.map(l => (
              <div className="leader" key={l.name}>
                <div className="img"><img src={l.img} alt={l.name} loading="lazy" /></div>
                <div className="body">
                  <div className="label">{l.label}</div>
                  <h3>{l.name}</h3>
                  <div className="title">{l.title}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 32 }}><span className="attrib">Portrait subjects unverified — confirm before publishing.</span></div>
        </div>
      </section>

      <section className="ped">
        <div className="container">
          <div className="ped-grid">
            <div>
              <div className="eyebrow on-dark"><span className="dot" />{lang === "ar" ? "الشركاء" : "Partners"}</div>
              <h2>{lang === "ar" ? "بيوت تصميم نختارها لكل عنوان." : "Design houses we appoint, one address at a time."}</h2>
            </div>
            <div className="partners">
              {PARTNERS.map(p => (
                <div className="partner" key={p.name}>
                  <div className="role">{p.role.split("—")[0].trim()}</div>
                  <div className="name">{p.name}</div>
                  <div className="role" style={{ opacity: .55 }}>{p.role.includes("—") ? p.role.split("—")[1].trim() : ""}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="cta-band" style={{ padding: "100px 0" }}>
        <div className="bg"><img src="media/asset-04.webp" alt="" /></div>
        <div className="scrim" />
        <div className="container content">
          <h2>{lang === "ar" ? "لنبدأ حواراً." : "Begin a conversation."}</h2>
          <div className="ctas">
            <button className="btn" onClick={onCta}>{t.nav.cta} <span className="arrow">→</span></button>
            <button className="btn ghost-light" onClick={() => setRoute({ name: "contact" })}>{t.nav.contact}</button>
          </div>
        </div>
      </section>
    </div>
  );
}

// ---- Contact ----
function ContactScreen({ lang, onCta }) {
  const t = useT(lang);
  return (
    <div>
      <section className="contact-hero" data-screen-label="05 Contact — Hero">
        <div className="container">
          <div className="eyebrow"><span className="dot" />{lang === "ar" ? "تواصل" : "Contact"}</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(48px,7vw,96px)", marginTop: 20, maxWidth: "16ch", lineHeight: 1, letterSpacing: "-.01em" }}>
            {lang === "ar" ? <>المكتب <em style={{ color: "var(--accent)", fontStyle: "italic" }}>الخاص</em>.</> : <>The <em style={{ color: "var(--accent)", fontStyle: "italic" }}>private</em> office.</>}
          </h1>
          <p style={{ marginTop: 24, color: "var(--muted)", fontSize: 17, maxWidth: "56ch", lineHeight: 1.65 }}>
            {lang === "ar"
              ? "نرد على الاستفسارات خلال يوم عمل واحد. للنقاشات الموثقة، يفضّل الكتيب الخاص بالموعد، أو الواتساب للتواصل السريع."
              : "We respond to enquiries within one business day. For confidential conversations, we recommend a private viewing by appointment — or WhatsApp for fast contact."}
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 120 }}>
        <div className="container">
          <div className="contact-grid">
            <div className="contact-info">
              <div className="row"><div className="k">{lang === "ar" ? "الهاتف" : "Phone"}</div><div className="v"><a href="tel:+97142630022">+971 4 263 0022</a><small>{lang === "ar" ? "9 صباحاً – 6 مساءً، الإثنين–الجمعة (تأكيد)" : "9am – 6pm, Mon–Fri (confirm hours)"}</small></div></div>
              <div className="row"><div className="k">{lang === "ar" ? "البريد" : "Email"}</div><div className="v"><a href="mailto:info@alpagoproperties.com">info@alpagoproperties.com</a></div></div>
              <div className="row"><div className="k">{lang === "ar" ? "واتساب" : "WhatsApp"}</div><div className="v"><a href="https://wa.me/97142630022" target="_blank">+971 4 263 0022</a><small>{lang === "ar" ? "للتواصل السريع. الرقم نفسه (تأكيد)." : "Same number — confirm dedicated WhatsApp line before publishing."}</small></div></div>
              <div className="row"><div className="k">{lang === "ar" ? "العنوان" : "Office"}</div><div className="v">Office 2603, Level 26<small>Boulevard Plaza Tower 1, Downtown Dubai, U.A.E.</small></div></div>
              <div className="row"><div className="k">{lang === "ar" ? "التواصل" : "Social"}</div><div className="v" style={{ fontSize: 15, fontFamily: "var(--font-body)" }}>Instagram · LinkedIn · Facebook<small>{lang === "ar" ? "حسابات موثقة فقط. لا أرقام متابعين قبل التأكيد." : "Confirmed-owned only. No follower counts shown pre-verification."}</small></div></div>
              <div style={{ marginTop: 28 }}>
                <button className="btn" onClick={onCta}>{lang === "ar" ? "افتح نموذج الاستفسار" : "Open the enquiry form"} <span className="arrow">→</span></button>
              </div>
            </div>
            <div className="map-frame">
              <img src="media/asset-09.webp" alt="Boulevard Plaza Tower 1 vicinity — placeholder" />
              <div className="pin" />
              <div className="caption">Boulevard Plaza Tower 1, Downtown Dubai · <span style={{ opacity: .65 }}>{lang === "ar" ? "خريطة تفاعلية مع الإحداثيات المؤكدة" : "Lazy-loaded interactive map (Google embed) with confirmed coords"}</span></div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeScreen, ProjectsScreen, ProjectDetail, AboutScreen, ContactScreen });