// Header / Nav
function Nav({ route, setRoute, locale, setLocale, openTweaks }) {
  const t = window.STRINGS[locale];
  return (
    <header className="nav">
      <div className="wrap nav__inner">
        <a href="#" onClick={(e)=>{e.preventDefault(); setRoute({name:"area", slug:"palm-jumeirah"});}}
           className="wordmark" aria-label="haus & haus home">
          haus<span className="amp">&</span>haus
        </a>
        <nav className="nav__links" aria-label="Primary">
          {t.nav.map((label, i) => (
            <a key={i} href="#" onClick={(e)=>e.preventDefault()}
               className={i === 3 ? "is-active" : ""}>{label}</a>
          ))}
        </nav>
        <div className="nav__cta">
          <button className="locale-pill" onClick={()=>setLocale(locale === "en" ? "ar" : "en")}>
            {locale === "en" ? "EN · العربية" : "AR · English"}
          </button>
          <button className="btn btn--ghost" onClick={()=>setRoute({name:"valuation"})}>
            {t.freeValuation}
          </button>
          <button className="btn btn--primary" onClick={()=>setRoute({name:"property", ref:"HH-21847"})}>
            {t.bookViewing} <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </header>
  );
}

// HERO (area microsite)
function AreaHero({ area, locale, setRoute }) {
  const t = window.STRINGS[locale];
  return (
    <section className="hero" data-screen-label="01 Area Hero">
      <div className="hero__media">
        <img src={area.img} alt="" />
      </div>
      <div className="wrap hero__inner">
        <div className="hero__topmeta fade-up">
          <div className="hero__crumbs">
            {t.palmCrumb.map((c, i) => (
              <React.Fragment key={i}>
                <span>{c}</span>
                {i < t.palmCrumb.length - 1 && <span className="sep">/</span>}
              </React.Fragment>
            ))}
          </div>
          <div className="eyebrow on-dark">{t.palmEyebrow}</div>
        </div>

        <div>
          <h1 className="hero__title fade-up delay-1">
            {locale === "en" ? (
              <>
                Palm
                <span className="roman">Jumeirah.</span>
              </>
            ) : (
              <>
                نخلة
                <span className="roman">جميرا.</span>
              </>
            )}
          </h1>
        </div>

        <div className="hero__sub fade-up delay-2">
          <p className="hero__lede">{t.heroLede}</p>
          <div className="hero__ctas">
            <button className="btn btn--primary" onClick={()=>setRoute({name:"valuation"})}>
              {t.freeValuation} <span className="arrow">→</span>
            </button>
            <button className="btn btn--ghost-dark" onClick={()=>setRoute({name:"property",ref:"HH-21847"})}>
              {t.bookViewing}
            </button>
          </div>
        </div>

        <div className="hero__stats fade-up delay-3">
          {[
            { num: "11 yrs", lbl: locale==="en" ? "On the Palm" : "في النخلة" },
            { num: "247", lbl: locale==="en" ? "Transactions · 2024" : "صفقة · 2024" },
            { num: "£780M", lbl: locale==="en" ? "Sold value · Palm" : "قيمة المبيعات · النخلة" },
            { num: "4.7★", lbl: locale==="en" ? "Reviews · verify before publish" : "تقييم · للتحقق" },
          ].map((s, i) => (
            <div key={i} className="hero__stat">
              <div className="num">{s.num}</div>
              <span className="lbl">{s.lbl}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Trust strip
function TrustStrip({ locale }) {
  const t = window.STRINGS[locale];
  return (
    <section className="trust" data-screen-label="02 Trust Strip">
      <div className="wrap trust__inner">
        <div className="trust__item"><span className="dot"></span> {t.since}</div>
        <div className="trust__item">{t.british}</div>
        <div className="trust__item">{t.communities}</div>
        <div className="trust__item">{t.awards}</div>
        <div className="trust__item">
          <span style={{color:"var(--muted)"}}>RERA ORN</span>
          <span className="accent">12357</span>
          <span style={{opacity:0.5, fontSize:9}}>(verify · DLD)</span>
        </div>
      </div>
    </section>
  );
}

// Editorial intro
function AreaIntro({ area, locale }) {
  return (
    <section className="editorial wrap" data-screen-label="03 Area Intro">
      <div className="section-head">
        <div className="section-head__num">01 / The community</div>
        <h2 className="section-head__title">{area.tagline}</h2>
      </div>
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:64}}>
        <div className="body-lg" style={{maxWidth:520}}>
          <p>The original — Dubai's emblem of seafront living. A self-contained island
          of villas on the fronds, signature towers on the trunk, and a beach club rhythm
          that runs from morning swims to long lunches at Nobu.</p>
          <p style={{marginTop:24, color:"var(--muted)"}}>
          Our Palm team handles roughly one in five resales on the island. Below is
          a current snapshot — pulled from a sample feed for this microsite; production
          ties to the brokerage CRM.</p>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:0, alignSelf:"start"}}>
          {[
            ["Residents", "≈ 10,000"],
            ["Beach", "11 km"],
            ["Schools", "4 · GEMS, Dubai College"],
            ["To DXB", "32 min"],
            ["To DWC", "45 min"],
            ["Median size", "1 – 6 bed"],
          ].map(([k,v],i)=>(
            <div key={i} style={{
              padding:"20px 24px",
              borderTop:"1px solid var(--line)",
              borderRight: i%2===0 ? "1px solid var(--line)" : "none",
              borderBottom: i>=4 ? "1px solid var(--line)" : "none",
            }}>
              <div className="eyebrow" style={{marginBottom:6}}>{k}</div>
              <div style={{fontFamily:"var(--serif)", fontStyle:"italic", fontWeight:400,
                fontSize:24, lineHeight:1}}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Listings grid
function Listings({ locale, setRoute }) {
  const t = window.STRINGS[locale];
  const listings = window.LISTINGS;
  return (
    <section className="editorial wrap" data-screen-label="04 Listings"
             style={{paddingTop:0}}>
      <div className="section-head">
        <div>
          <div className="section-head__num">02 / Live listings</div>
          <div className="eyebrow" style={{marginTop:8, color:"var(--clay)"}}>
            ⚠ {t.livePeak}
          </div>
        </div>
        <h2 className="section-head__title">
          What's on the Palm <em style={{fontStyle:"normal", color:"var(--muted)"}}>today.</em>
        </h2>
      </div>

      <div style={{display:"flex", gap:24, marginBottom:48, alignItems:"center",
        borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)",
        padding: "16px 0"}}>
        {["For sale", "To rent", "Off-plan", "Commercial"].map((l, i) => (
          <button key={i} style={{
            background:"transparent", border:"none", cursor:"pointer",
            fontFamily:"var(--mono)", fontSize:11, letterSpacing:"0.16em",
            textTransform:"uppercase",
            color: i===0 ? "var(--text)" : "var(--muted)",
            borderBottom: i===0 ? "1px solid var(--accent)" : "none",
            padding:"8px 0",
          }}>{l}</button>
        ))}
        <div style={{marginLeft:"auto", fontFamily:"var(--mono)", fontSize:11,
          letterSpacing:"0.14em", textTransform:"uppercase", color:"var(--muted)"}}>
          {listings.length} results · sample feed
        </div>
      </div>

      <div className="listings">
        {listings.map((l, i) => (
          <article key={l.ref}
            className={"listing" + (l.feature ? " listing--feature" : "")}
            onClick={()=>setRoute({name:"property", ref:l.ref})}>
            <div className="listing__img">
              <img src={l.image} alt="" />
              <div className="listing__overlay">
                <span className="listing__sample">{t.samplePill}</span>
                <span className="listing__status">
                  {l.status === "sale" ? (locale==="en"?"For sale":"للبيع") : (locale==="en"?"To rent":"للإيجار")}
                </span>
              </div>
            </div>
            <div className="listing__meta">
              <span>{l.community}</span>
              <span>{l.ref}</span>
            </div>
            <h3 className="listing__title">{l.title}</h3>
            <div className="listing__specs">
              <span>{l.beds} bed</span>
              <span>·</span>
              <span>{l.baths} bath</span>
              <span>·</span>
              <span>{l.sizeSqft.toLocaleString()} sqft</span>
            </div>
            <div className="listing__price">{l.price}</div>
          </article>
        ))}
      </div>
    </section>
  );
}

// Spec slab — the cinematic editorial section
function CommunitySpec({ locale }) {
  const cells = [
    { num:"01", t:"Position", b:"The first of the three Palms — closest to the city and best-served by causeway, monorail and Sheikh Zayed Road in roughly 22 minutes." },
    { num:"02", t:"Architecture", b:"Frond villas (low-rise, beach-front) and trunk towers (high-rise, marina-front). No two fronds are the same — F & G are the most established." },
    { num:"03", t:"Lifestyle", b:"Nakheel Mall, The Pointe, Atlantis, FIVE, Anantara, W. Beach clubs (Drift, WHITE Beach, Cove) define the social rhythm here." },
    { num:"04", t:"Yield", b:"Trunk apartments: 4.8 – 6.4% net (sample feed). Frond villas: 3.1 – 4.2%. Verified figures provided by haus & haus Investment desk." },
  ];
  return (
    <section className="spec-slab" data-screen-label="05 Community Spec">
      <div className="wrap">
        <div className="section-head">
          <div className="section-head__num">03 / The shape of the island</div>
          <h2 className="section-head__title">
            <em style={{color:"rgba(244,240,231,0.5)", fontStyle:"normal"}}>Four reasons</em><br/>
            it still moves first.
          </h2>
        </div>
        <div className="spec-grid">
          {cells.map((c, i) => (
            <div key={i} className="spec-cell">
              <div className="spec-cell__num">{c.num}</div>
              <h3 className="spec-cell__title">{c.t}</h3>
              <p className="spec-cell__body">{c.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Stylised SVG "map" — not a real map, an architectural diagram of the Palm
function PalmMap() {
  return (
    <svg className="map-svg" viewBox="0 0 600 600" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="seaGrad" cx="50%" cy="50%" r="70%">
          <stop offset="0%" stopColor="#1B3A4D" stopOpacity="0.4"/>
          <stop offset="100%" stopColor="#0E1318" stopOpacity="1"/>
        </radialGradient>
      </defs>
      <rect width="600" height="600" fill="url(#seaGrad)" />
      {/* grid */}
      {Array.from({length:12}).map((_,i)=>(
        <line key={"v"+i} x1={i*50} y1="0" x2={i*50} y2="600"
              stroke="rgba(244,240,231,0.04)" strokeWidth="1"/>
      ))}
      {Array.from({length:12}).map((_,i)=>(
        <line key={"h"+i} x1="0" y1={i*50} x2="600" y2={i*50}
              stroke="rgba(244,240,231,0.04)" strokeWidth="1"/>
      ))}
      {/* trunk */}
      <rect x="280" y="80" width="40" height="280" fill="rgba(244,240,231,0.85)" opacity="0.9"/>
      {/* fronds — 16 fronds, 8 each side */}
      {Array.from({length:8}).map((_,i)=>{
        const y = 110 + i*32;
        return (
          <g key={"f"+i}>
            <path d={`M 280 ${y} q -60 -8 -130 0`} stroke="rgba(244,240,231,0.7)"
                  strokeWidth="6" fill="none" strokeLinecap="round"/>
            <path d={`M 320 ${y} q 60 -8 130 0`} stroke="rgba(244,240,231,0.7)"
                  strokeWidth="6" fill="none" strokeLinecap="round"/>
          </g>
        );
      })}
      {/* crescent */}
      <path d="M 60 240 Q 300 -120 540 240 Q 540 320 480 380 Q 300 60 120 380 Q 60 320 60 240 Z"
            fill="none" stroke="rgba(244,240,231,0.45)" strokeWidth="14" strokeLinecap="round" strokeLinejoin="round"/>
      {/* pins */}
      {[
        {x:200, y:170, label:"Frond F"},
        {x:400, y:200, label:"Frond M"},
        {x:300, y:90,  label:"Trunk"},
        {x:300, y:380, label:"Atlantis"},
      ].map((p,i)=>(
        <g key={i}>
          <circle cx={p.x} cy={p.y} r="6" fill="#B5694A"/>
          <circle cx={p.x} cy={p.y} r="14" fill="none" stroke="#B5694A" strokeOpacity="0.4"/>
          <text x={p.x+18} y={p.y+4} fill="rgba(244,240,231,0.7)"
                fontFamily="Geist Mono, monospace" fontSize="10"
                letterSpacing="1.5">{p.label.toUpperCase()}</text>
        </g>
      ))}
      <text x="40" y="560" fill="rgba(244,240,231,0.3)"
            fontFamily="Geist Mono, monospace" fontSize="9"
            letterSpacing="2">DIAGRAMMATIC · NOT TO SCALE</text>
    </svg>
  );
}

function MapBlock({ locale }) {
  return (
    <section className="map-block" data-screen-label="06 Map">
      <div className="map-block__map"><PalmMap/></div>
      <div className="map-block__copy">
        <div className="section-head__num">04 / Where on the Palm</div>
        <h2 className="display" style={{fontSize:"clamp(36px, 4.5vw, 56px)", marginTop:14}}>
          Every frond is a<br/>different conversation.
        </h2>
        <p className="body-lg" style={{marginTop:24, color:"var(--muted)", maxWidth:440}}>
          F &amp; G are the established benchmarks. K &amp; L for newer
          architecture. The trunk for views and lock-and-leave. Tell us
          how you live; we'll narrow it for you.
        </p>
        <div style={{marginTop:32, display:"flex", gap:10}}>
          <button className="btn btn--primary">Talk to the Palm team <span className="arrow">→</span></button>
          <button className="btn btn--ghost">Frond comparison</button>
        </div>
      </div>
    </section>
  );
}

// Agents
function AgentsRow({ locale }) {
  return (
    <section className="editorial wrap" data-screen-label="07 Agents">
      <div className="section-head">
        <div className="section-head__num">05 / Your team here</div>
        <h2 className="section-head__title">
          Four <em style={{color:"var(--muted)", fontStyle:"normal"}}>names</em><br/>
          who know the island.
        </h2>
      </div>
      <div className="agent-grid">
        {window.AGENTS.map((a, i) => (
          <div key={i} className="agent">
            <div className="agent__img"><img src={a.img} alt=""/></div>
            <div>
              <h3 className="agent__name">{a.name}</h3>
              <div className="agent__role">{a.role}</div>
              <div className="eyebrow" style={{marginTop:6, color:"var(--muted)", fontSize:10}}>
                {a.brn}
              </div>
            </div>
            <div className="agent__contact">
              <button>WhatsApp</button>
              <button>Call</button>
              <button>Email</button>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// Valuation CTA banner
function ValuationCTA({ locale, setRoute }) {
  const t = window.STRINGS[locale];
  return (
    <section className="cta-banner" data-screen-label="08 Valuation CTA">
      <div className="wrap cta-banner__inner">
        <div>
          <div className="eyebrow on-dark">Free, no-obligation · 24h response</div>
          <h2 className="cta-banner__title" style={{marginTop:14}}>
            Thinking of selling<br/>or letting your home<br/>
            <em style={{color:"rgba(244,240,231,0.55)", fontStyle:"italic"}}>on the Palm?</em>
          </h2>
          <p style={{marginTop:24, maxWidth:480, color:"rgba(244,240,231,0.78)",
            fontSize:16, lineHeight:1.6}}>
            Get a realistic range from a RERA-registered consultant who closed
            here last week. No bots. No guesswork. No hard sell.
          </p>
        </div>
        <form className="cta-banner__form" onSubmit={(e)=>{e.preventDefault(); setRoute({name:"valuation"});}}>
          <div className="eyebrow on-dark" style={{marginBottom:4}}>{t.freeValuation}</div>
          <div className="row">
            <input type="text" placeholder="Your name" required />
            <input type="tel" placeholder="Mobile (+971…)" required />
          </div>
          <input type="email" placeholder="Email" required />
          <select defaultValue="">
            <option value="" disabled>Property type</option>
            <option>Villa — Frond</option>
            <option>Apartment — Trunk</option>
            <option>Penthouse</option>
            <option>Townhouse</option>
          </select>
          <input type="text" placeholder="Community / tower (e.g. Frond M, Shoreline Apt 8)" />
          <button type="submit" className="btn btn--primary"
            style={{justifyContent:"center", padding:"16px 24px", background:"var(--paper)", color:"var(--accent-deep)"}}>
            Request my valuation <span className="arrow">→</span>
          </button>
          <div style={{fontFamily:"var(--mono)", fontSize:9.5, letterSpacing:"0.18em",
            textTransform:"uppercase", color:"rgba(244,240,231,0.45)", marginTop:4}}>
            Lead routes to CRM · GDPR-compliant · response within 24h
          </div>
        </form>
      </div>
    </section>
  );
}

// Footer
function Footer({ locale }) {
  return (
    <footer className="footer" data-screen-label="09 Footer">
      <div className="wrap">
        <div className="footer__top">
          <div className="footer__col">
            <div className="wordmark" style={{color:"var(--paper)", fontSize:32}}>
              haus<span className="amp" style={{color:"var(--accent)"}}>&</span>haus
            </div>
            <p style={{marginTop:16, fontSize:14, color:"rgba(244,240,231,0.6)",
              maxWidth:340, lineHeight:1.6}}>
              British-founded in 2013. Full-service brokerage across 100+ Dubai
              communities. Award-winning. Un-pushy.
            </p>
            <div style={{marginTop:24, display:"flex", flexDirection:"column", gap:6, fontSize:13}}>
              <span style={{color:"rgba(244,240,231,0.5)", fontFamily:"var(--mono)",
                fontSize:10, letterSpacing:"0.16em", textTransform:"uppercase"}}>Talk to us</span>
              <a href="tel:+97143025800">+971 4 302 5800</a>
              <a href="https://wa.me/97143025800">WhatsApp · same line</a>
              <span style={{fontSize:12, color:"rgba(244,240,231,0.45)", lineHeight:1.5, marginTop:8}}>
                Building 7, Emaar Gold &amp; Diamond Park,<br/>Sheikh Zayed Road, Dubai
              </span>
            </div>
          </div>

          {[
            { h:"Services", links:["Buy", "Sell", "Rent", "Off-plan", "Commercial", "Property management", "Mortgages", "Valuation"] },
            { h:"Areas", links:["Palm Jumeirah", "Downtown", "Business Bay", "Dubai Hills", "Emirates Hills", "DIFC", "JLT", "All communities"] },
            { h:"Company", links:["Our story", "Team", "Careers", "Awards", "Market reports", "News", "Behind the Bricks"] },
            { h:"Languages", links:["English", "العربية", "Русский", "中文"] },
          ].map((col, i) => (
            <div key={i} className="footer__col">
              <h4>{col.h}</h4>
              {col.links.map((l, j) => <a key={j} href="#">{l}</a>)}
            </div>
          ))}
        </div>
        <div className="footer__bottom">
          <span>© 2026 haus &amp; haus · RERA ORN 12357 (verify · DLD)</span>
          <span>BytesGlue · additive microsite demo · not the live brand site</span>
        </div>
      </div>
    </footer>
  );
}

// WhatsApp FAB
function WhatsAppFab({ locale }) {
  const t = window.STRINGS[locale];
  return (
    <a className="wa-fab" href="https://wa.me/97143025800" target="_blank" rel="noopener">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
        <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z"/>
      </svg>
      WhatsApp us
    </a>
  );
}

Object.assign(window, {
  Nav, AreaHero, TrustStrip, AreaIntro, Listings, CommunitySpec,
  PalmMap, MapBlock, AgentsRow, ValuationCTA, Footer, WhatsAppFab,
});