// Property Detail page (cinematic PDP template) + Valuation flow

function PropertyDetail({ ref, setRoute, locale }) {
  const listing = window.LISTINGS.find(l => l.ref === ref) || window.LISTINGS[0];
  const t = window.STRINGS[locale];

  return (
    <div data-screen-label={"PD · " + listing.ref}>
      {/* HERO split */}
      <section className="pd-hero">
        <div className="pd-hero__media">
          <img src={listing.image} alt="" />
          <div className="pd-hero__sample">{t.samplePill} · {listing.ref}</div>
        </div>
        <div className="pd-hero__copy">
          <div>
            <div className="eyebrow on-dark">
              {listing.community} · {listing.status === "sale" ? "For sale" : "To rent"}
            </div>
            <h1 className="pd-hero__title" style={{marginTop:14}}>
              {listing.title}
            </h1>
            <p style={{marginTop:24, color:"rgba(244,240,231,0.7)", fontSize:16, lineHeight:1.6, maxWidth:480}}>
              A signature residence on the frond — orientated south for sunset across
              the water. Full beach frontage, private mooring optional. Architect: client-confirmed before publication.
            </p>
          </div>

          <div className="pd-specs">
            <div className="pd-spec">
              <div className="lbl">Bedrooms</div>
              <div className="val">{listing.beds}</div>
            </div>
            <div className="pd-spec">
              <div className="lbl">Bathrooms</div>
              <div className="val">{listing.baths}</div>
            </div>
            <div className="pd-spec">
              <div className="lbl">Built-up area</div>
              <div className="val">{listing.sizeSqft.toLocaleString()} <span style={{fontSize:14, color:"rgba(244,240,231,0.5)"}}>sqft</span></div>
            </div>
            <div className="pd-spec">
              <div className="lbl">Reference</div>
              <div className="val" style={{fontFamily:"var(--mono)", fontStyle:"normal", fontSize:18}}>{listing.ref}</div>
            </div>
          </div>

          <div>
            <div className="eyebrow on-dark" style={{marginBottom:6}}>Guide price</div>
            <div style={{fontFamily:"var(--serif)", fontStyle:"italic", fontWeight:300,
              fontSize:36, lineHeight:1, color:"var(--paper)"}}>
              {listing.price}
            </div>
            <div style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:"0.18em",
              textTransform:"uppercase", color:"rgba(244,240,231,0.45)", marginTop:8}}>
              Price held by vendor · share on request
            </div>
          </div>

          <div style={{display:"flex", gap:10, flexWrap:"wrap"}}>
            <button className="btn btn--primary" style={{background:"var(--paper)", color:"var(--accent-deep)"}}>
              {t.bookViewing} <span className="arrow">→</span>
            </button>
            <button className="btn btn--ghost-dark">{t.whatsapp}</button>
            <button className="btn btn--ghost-dark">{t.downloadBrochure}</button>
          </div>
        </div>
      </section>

      {/* Floating back */}
      <div style={{background:"var(--paper)", borderBottom:"1px solid var(--line)"}}>
        <div className="wrap" style={{padding:"16px 0", display:"flex",
          alignItems:"center", justifyContent:"space-between"}}>
          <button onClick={()=>setRoute({name:"area", slug:"palm-jumeirah"})}
            style={{background:"none", border:"none", cursor:"pointer",
              fontFamily:"var(--mono)", fontSize:11, letterSpacing:"0.16em",
              textTransform:"uppercase", color:"var(--muted)"}}>
            ← All Palm Jumeirah listings
          </button>
          <div style={{display:"flex", gap:24, fontFamily:"var(--mono)", fontSize:10,
            letterSpacing:"0.18em", textTransform:"uppercase", color:"var(--muted)"}}>
            <span>Gallery</span><span>Floor plans</span><span>Location</span>
            <span>Documents</span><span>Agent</span>
          </div>
        </div>
      </div>

      {/* Gallery */}
      <section className="wrap pd-gallery">
        <div><img src="media/area-palm-jumeirah.webp" alt=""/></div>
        <div><img src="media/brand-carousel-12.webp" alt=""/></div>
        <div><img src="media/brand-carousel-02.webp" alt=""/></div>
        <div><img src="media/brand-carousel-19.webp" alt=""/></div>
        <div><img src="media/area-business-bay.webp" alt=""/></div>
      </section>

      {/* About + agent */}
      <section className="editorial wrap" style={{paddingTop:0}}>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:96, alignItems:"start"}}>
          <div>
            <div className="section-head__num">About the residence</div>
            <h2 className="display" style={{fontSize:"clamp(36px, 4vw, 56px)", marginTop:14}}>
              Built for the way the<br/>island wakes up.
            </h2>
            <div style={{marginTop:32, display:"flex", flexDirection:"column", gap:24}}>
              <p className="body-lg" style={{color:"var(--muted)"}}>
                Full villa specification withheld until vendor approval — typical
                features for this frond include private beach access, infinity pool,
                staff quarters, dedicated cinema and a six-vehicle garage.
              </p>
              <ul style={{listStyle:"none", padding:0, margin:0, display:"grid",
                gridTemplateColumns:"1fr 1fr", gap:"16px 32px"}}>
                {[
                  "Private beach frontage",
                  "Infinity pool",
                  "Smart-home (KNX)",
                  "Staff quarters",
                  "Cinema room",
                  "6-car garage",
                  "Vaulted majlis",
                  "Lift to all floors",
                ].map((f, i)=>(
                  <li key={i} style={{display:"flex", gap:10, alignItems:"center",
                    fontSize:14, color:"var(--text)"}}>
                    <span className="dot" style={{background:"var(--accent)"}}></span>
                    {f}
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <div>
            <div className="section-head__num">Your contact</div>
            <h3 className="display" style={{fontSize:40, marginTop:14}}>
              Speak to Eleanor.
            </h3>
            <div className="pd-agent">
              <div className="pd-agent__avatar">
                <img src={listing.agent && listing.agent.name === "Eleanor Walsh"
                  ? "media/leadership-james-perry.webp"
                  : "media/leadership-luke-remington.webp"} alt=""/>
              </div>
              <div>
                <div style={{fontFamily:"var(--serif)", fontStyle:"italic", fontSize:22}}>
                  {listing.agent.name}
                </div>
                <div className="eyebrow" style={{marginTop:6}}>
                  Senior Sales · Palm · {listing.agent.brn}
                </div>
              </div>
              <button className="btn btn--primary">Call now</button>
            </div>

            <div style={{marginTop:32, padding:28, background:"var(--bone)", border:"1px solid var(--line)"}}>
              <div className="eyebrow" style={{marginBottom:14}}>Book a viewing</div>
              <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:14}}>
                <input type="text" placeholder="Name" style={{background:"transparent",
                  border:"none", borderBottom:"1px solid var(--line)", padding:"10px 0",
                  fontSize:14, fontFamily:"var(--sans)", color:"var(--text)", outline:"none"}}/>
                <input type="tel" placeholder="Mobile" style={{background:"transparent",
                  border:"none", borderBottom:"1px solid var(--line)", padding:"10px 0",
                  fontSize:14, fontFamily:"var(--sans)", color:"var(--text)", outline:"none"}}/>
                <input type="email" placeholder="Email" style={{gridColumn:"span 2",
                  background:"transparent", border:"none",
                  borderBottom:"1px solid var(--line)", padding:"10px 0", fontSize:14,
                  fontFamily:"var(--sans)", color:"var(--text)", outline:"none"}}/>
                <input type="text" placeholder="Preferred date / time" style={{gridColumn:"span 2",
                  background:"transparent", border:"none",
                  borderBottom:"1px solid var(--line)", padding:"10px 0", fontSize:14,
                  fontFamily:"var(--sans)", color:"var(--text)", outline:"none"}}/>
                <button className="btn btn--primary" style={{gridColumn:"span 2", justifyContent:"center", marginTop:8}}>
                  Request viewing
                </button>
              </div>
              <div style={{fontFamily:"var(--mono)", fontSize:9, letterSpacing:"0.18em",
                textTransform:"uppercase", color:"var(--muted)", marginTop:14}}>
                Routes to {listing.agent.name} · CRM-tracked
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function ValuationFlow({ setRoute, locale }) {
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState({
    purpose: "sell", type: "Apartment", beds: "2", community: "", size: "", name: "", phone: "", email: "",
  });

  const update = (k, v) => setData(d => ({...d, [k]: v}));

  return (
    <div data-screen-label="Valuation">
      <section className="val-hero">
        <div className="wrap val-hero__inner">
          <div>
            <div className="eyebrow" style={{marginBottom:18}}>Free · No obligation · 24h response</div>
            <h1 className="val-hero__title">
              What's your<br/>
              <em style={{color:"var(--accent)", fontStyle:"italic"}}>Dubai home</em><br/>
              worth, honestly?
            </h1>
            <p className="body-lg" style={{marginTop:32, color:"var(--muted)", maxWidth:480}}>
              Three quick questions. A real consultant — RERA-registered, sold
              within the same community last week — gets back to you with a
              realistic range. <strong style={{color:"var(--text)"}}>We never display computed figures.</strong> No bots, no guesswork.
            </p>
            <div style={{marginTop:40, display:"flex", gap:48, paddingTop:24,
              borderTop:"1px solid var(--line)"}}>
              {[
                ["24h", "Response time"],
                ["£0", "Cost / obligation"],
                ["100+", "Communities covered"],
              ].map(([n,l],i)=>(
                <div key={i}>
                  <div style={{fontFamily:"var(--serif)", fontStyle:"italic",
                    fontWeight:300, fontSize:40, lineHeight:1, letterSpacing:"-0.02em"}}>{n}</div>
                  <div className="eyebrow" style={{marginTop:8}}>{l}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="val-form">
            <div className="val-form__step">
              <span className={"dot-step" + (step>=1?" active":"")}></span>
              <span>Step {step} of 3</span>
              <span style={{marginLeft:"auto", color:"var(--muted)"}}>
                {step === 1 ? "Property" : step === 2 ? "Specifics" : "You"}
              </span>
            </div>

            {step === 1 && (
              <>
                <div className="val-form__field">
                  <label>I'd like to…</label>
                  <div className="val-form__pills">
                    {[
                      ["sell","Sell"],
                      ["lease","Lease out"],
                      ["curious","Just curious"],
                    ].map(([v,l])=>(
                      <button key={v} type="button"
                        className={"val-form__pill" + (data.purpose===v?" is-active":"")}
                        onClick={()=>update("purpose", v)}>{l}</button>
                    ))}
                  </div>
                </div>
                <div className="val-form__field">
                  <label>Property type</label>
                  <div className="val-form__pills">
                    {["Apartment","Villa","Townhouse","Penthouse","Commercial"].map(v=>(
                      <button key={v} type="button"
                        className={"val-form__pill" + (data.type===v?" is-active":"")}
                        onClick={()=>update("type", v)}>{v}</button>
                    ))}
                  </div>
                </div>
                <div style={{display:"flex", justifyContent:"flex-end", marginTop:24}}>
                  <button className="btn btn--primary" onClick={()=>setStep(2)}>
                    Continue <span className="arrow">→</span>
                  </button>
                </div>
              </>
            )}

            {step === 2 && (
              <>
                <div className="val-form__field">
                  <label>Community / tower</label>
                  <input type="text" placeholder="e.g. Frond M, Burj Vista, Marina Gate"
                    value={data.community} onChange={e=>update("community", e.target.value)} />
                </div>
                <div className="val-form__field">
                  <label>Bedrooms</label>
                  <div className="val-form__pills">
                    {["Studio","1","2","3","4","5+"].map(v=>(
                      <button key={v} type="button"
                        className={"val-form__pill" + (data.beds===v?" is-active":"")}
                        onClick={()=>update("beds", v)}>{v}</button>
                    ))}
                  </div>
                </div>
                <div className="val-form__field">
                  <label>Approx size (sqft)</label>
                  <input type="text" placeholder="e.g. 1,650"
                    value={data.size} onChange={e=>update("size", e.target.value)} />
                </div>
                <div style={{display:"flex", justifyContent:"space-between", marginTop:24}}>
                  <button className="btn btn--ghost" onClick={()=>setStep(1)}>← Back</button>
                  <button className="btn btn--primary" onClick={()=>setStep(3)}>
                    Continue <span className="arrow">→</span>
                  </button>
                </div>
              </>
            )}

            {step === 3 && (
              <>
                <div className="val-form__field">
                  <label>Your name</label>
                  <input type="text" required value={data.name} onChange={e=>update("name", e.target.value)} />
                </div>
                <div className="val-form__field">
                  <label>Mobile</label>
                  <input type="tel" required placeholder="+971…" value={data.phone} onChange={e=>update("phone", e.target.value)} />
                </div>
                <div className="val-form__field">
                  <label>Email</label>
                  <input type="email" required value={data.email} onChange={e=>update("email", e.target.value)} />
                </div>
                <div style={{display:"flex", justifyContent:"space-between", marginTop:24}}>
                  <button className="btn btn--ghost" onClick={()=>setStep(2)}>← Back</button>
                  <button className="btn btn--primary" onClick={()=>setStep(4)}>
                    Request my valuation <span className="arrow">→</span>
                  </button>
                </div>
                <div style={{fontFamily:"var(--mono)", fontSize:9.5, letterSpacing:"0.18em",
                  textTransform:"uppercase", color:"var(--muted)", marginTop:18, lineHeight:1.6}}>
                  Lead routes to the brokerage CRM · GDPR-compliant ·<br/>
                  Honeypot + reCAPTCHA on production
                </div>
              </>
            )}

            {step === 4 && (
              <div style={{textAlign:"center", padding:"32px 0"}}>
                <div style={{fontFamily:"var(--serif)", fontStyle:"italic",
                  fontSize:48, lineHeight:1, marginBottom:18}}>Thank you, {data.name || "—"}.</div>
                <p className="body-lg" style={{color:"var(--muted)", margin:"0 auto", maxWidth:380}}>
                  A senior consultant will come back to you within 24 hours with
                  a realistic range for your {data.beds}-bed {data.type.toLowerCase()} in {data.community || "your community"}.
                </p>
                <div style={{marginTop:32, display:"flex", gap:10, justifyContent:"center"}}>
                  <button className="btn btn--whatsapp">WhatsApp our team now</button>
                  <button className="btn btn--ghost" onClick={()=>setRoute({name:"area", slug:"palm-jumeirah"})}>
                    Back to listings
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PropertyDetail, ValuationFlow });