/* Showroom page */

function ShowroomPage({ navigate, onQuote }) {
  const { CONTACT, MEDIA } = window.MOBICO_DATA;
  const d3 = CONTACT.d3;

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="04 / SHOWROOM"
        title="Dubai Design <em>District.</em>"
        intro="The MOBICA showroom at d3 — Building 7, A103. By appointment, Monday to Friday."
        breadcrumb="MOBICO · Showroom"
      />

      <section style={{padding:"56px 0"}}>
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32}}>
            <div style={{gridColumn:"span 7"}}>
              <div style={{position:"relative", overflow:"hidden", aspectRatio:"4/3", background:"var(--paper-2)"}}>
                <img src={MEDIA + "mobico-32-showroom-exterior.webp"} alt="Showroom exterior at d3"
                     style={{width:"100%", height:"100%", objectFit:"cover"}} />
                <div style={{
                  position:"absolute", left:24, bottom:24,
                  background:"#fff", padding:"14px 16px",
                  fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.06em",
                }}>
                  <span style={{color:"var(--mobico)"}}>●</span> SHOWROOM EXTERIOR
                </div>
              </div>
              <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:12, marginTop:12}}>
                <Photo src={MEDIA + "mobico-28-lobby-lounge.webp"} alt="Lobby lounge" ratio="4/3" />
                <Photo src={MEDIA + "mobico-33-glass-facade.webp"} alt="Glass facade" ratio="4/3" />
              </div>
            </div>

            <div style={{gridColumn:"span 5"}}>
              <div className="mono" style={{color:"var(--mobico)", marginBottom:12}}>VISIT</div>
              <h2 style={{fontSize:36, fontWeight:600, letterSpacing:"-0.02em", margin:"0 0 28px"}}>
                Plan your visit.
              </h2>

              <div style={{display:"grid", gap:24, padding:"24px 0", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)"}}>
                <KV label="ADDRESS" value={d3.addr} />
                <KV label="PHONE"   value={d3.phone} />
                <KV label="FAX"     value={d3.fax} />
                <KV label="HOURS"   value="Monday – Friday · 09:00 – 18:00" sub="Saturday &amp; Sunday closed · by appointment" />
                <KV label="ACCESS"  value="d3 visitor parking · 5 min from Sheikh Zayed Road" />
              </div>

              <div style={{marginTop:32, padding:"22px 24px", background:"var(--ink)", color:"#fff"}}>
                <div className="mono" style={{color:"#9b97ff", marginBottom:6}}>BOOK A VISIT</div>
                <div style={{fontSize:20, fontWeight:600, letterSpacing:"-0.01em", marginBottom:16}}>
                  We'll have the right samples ready.
                </div>
                <button onClick={onQuote} className="btn" style={{background:"#fff", color:"var(--ink)", borderColor:"#fff", width:"100%", justifyContent:"center"}}>
                  Request a showroom visit <span className="arrow">→</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Map */}
      <section style={{padding:"32px 0 96px"}}>
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32, alignItems:"flex-start"}}>
            <div style={{gridColumn:"span 5"}}>
              <div className="mono" style={{color:"var(--mobico)"}}>LOCATION</div>
              <h3 style={{fontSize:32, fontWeight:600, letterSpacing:"-0.02em", margin:"12px 0 16px"}}>
                Building 7, Office A103
              </h3>
              <p style={{color:"var(--ink-2)", fontSize:16, lineHeight:1.55, maxWidth:420}}>
                Dubai Design District is the city's creative cluster — architects, fit-out firms and design studios are minutes away. Easy access from Sheikh Zayed Road and Dubai International.
              </p>
              <ul style={{listStyle:"none", padding:0, margin:"24px 0 0", display:"grid", gap:10, fontSize:14}}>
                <li><span className="mono" style={{color:"var(--muted)", marginRight:12}}>10 MIN</span> Downtown Dubai</li>
                <li><span className="mono" style={{color:"var(--muted)", marginRight:12}}>15 MIN</span> DIFC</li>
                <li><span className="mono" style={{color:"var(--muted)", marginRight:12}}>20 MIN</span> Dubai International (DXB)</li>
              </ul>
            </div>

            <div style={{gridColumn:"span 7"}}>
              <MapPlaceholder />
            </div>
          </div>
        </div>
      </section>

      <CTABand onQuote={onQuote} onShowroom={onQuote} />
    </div>
  );
}

function KV({ label, value, sub }) {
  return (
    <div>
      <div className="mono" style={{color:"var(--muted)", marginBottom:6}}>{label}</div>
      <div style={{fontSize:17, color:"var(--ink)", letterSpacing:"-0.005em"}}>{value}</div>
      {sub && <div style={{fontSize:13, color:"var(--muted)", marginTop:4}} dangerouslySetInnerHTML={{__html: sub}} />}
    </div>
  );
}

function MapPlaceholder() {
  // Schematic map of d3 — geometric, no satellite tiles (coords unverified).
  return (
    <div style={{
      position:"relative", aspectRatio:"4/3", background:"#0f1115",
      overflow:"hidden", border:"1px solid var(--line)",
    }}>
      {/* Grid */}
      <svg viewBox="0 0 600 450" width="100%" height="100%" style={{display:"block"}}>
        <defs>
          <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1c2024" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="600" height="450" fill="url(#grid)" />
        {/* Roads */}
        <path d="M 0 280 Q 200 220 600 260" stroke="#2a2d35" strokeWidth="36" fill="none" />
        <path d="M 0 280 Q 200 220 600 260" stroke="#3b4150" strokeWidth="2" fill="none" />
        <path d="M 280 0 L 320 450" stroke="#2a2d35" strokeWidth="28" fill="none" />
        <path d="M 280 0 L 320 450" stroke="#3b4150" strokeWidth="2" fill="none" />
        {/* Blocks */}
        <g fill="#1a1d24" stroke="#2a2d35">
          <rect x="60"  y="70"  width="180" height="120" />
          <rect x="350" y="80"  width="200" height="110" />
          <rect x="60"  y="320" width="200" height="100" />
          <rect x="380" y="310" width="160" height="120" />
        </g>
        {/* Building 7 */}
        <rect x="350" y="80"  width="200" height="110" fill="#05029b" opacity="0.18" />
        <rect x="350" y="80"  width="200" height="110" fill="none" stroke="#05029b" strokeWidth="2" />
        {/* Pin */}
        <circle cx="450" cy="135" r="32" fill="none" stroke="#05029b" strokeOpacity="0.35" strokeWidth="2"/>
        <circle cx="450" cy="135" r="14" fill="none" stroke="#05029b" strokeOpacity="0.6" strokeWidth="2"/>
        <circle cx="450" cy="135" r="6"  fill="#05029b" />
        {/* Labels */}
        <text x="450" y="220" fontFamily="JetBrains Mono" fontSize="11" fill="#9b97ff" textAnchor="middle" letterSpacing="2">BUILDING 7 · A103</text>
        <text x="40"  y="430" fontFamily="JetBrains Mono" fontSize="11" fill="#5a6573" letterSpacing="2">DUBAI DESIGN DISTRICT</text>
        <text x="560" y="430" fontFamily="JetBrains Mono" fontSize="11" fill="#5a6573" letterSpacing="2" textAnchor="end">25.184°N 55.297°E ·  TBC</text>
      </svg>

      <div style={{
        position:"absolute", top:18, left:18,
        background:"rgba(255,255,255,0.95)", padding:"6px 10px",
        fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.08em",
        color:"var(--ink)",
      }}>
        SCHEMATIC · ACTUAL COORDS TO BE CONFIRMED
      </div>
    </div>
  );
}

window.ShowroomPage = ShowroomPage;