/* global React, Reveal, PhiMark, ArchPattern */

// =======================================================================
//  DUBAI LOCATION PAGE
// =======================================================================

function LocationPage({ locale, onBook }) {
  const ar = locale === 'ar';

  return (
    <main>
      {/* Hero — Opus exterior */}
      <section style={{ position: 'relative', height: '76vh', minHeight: 560, overflow: 'hidden' }}>
        <img src="media/dubai-clinic-01.webp" alt="The Opus by Omniyat" style={{ width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', inset: 0 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(20,19,15,0.45) 0%, rgba(20,19,15,0.2) 50%, rgba(20,19,15,0.7) 100%)' }} />
        <div className="container" style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', paddingTop: 180, paddingBottom: 60 }}>
          <div>
            <div className="eyebrow" style={{ color: 'rgba(242,237,227,0.85)', marginBottom: 18 }}>
              φ &nbsp; {ar ? 'الموقع' : 'The Location'}
            </div>
            <h1 className="serif" style={{
              fontSize: 'clamp(3.5rem, 6.5vw, 6rem)', lineHeight: 0.95, color: 'var(--bone)',
              fontWeight: 300, letterSpacing: '-0.01em',
            }}>
              {ar ? <>برج أوبس<br/><em className="ital" style={{ color: '#E8D6A8' }}>الخلیج التجاري</em></> : <>The Opus,<br/><em className="ital" style={{ color: '#E8D6A8' }}>Business Bay</em></>}
            </h1>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, color: 'rgba(242,237,227,0.85)', paddingTop: 32, borderTop: '1px solid rgba(242,237,227,0.2)' }}>
            {[
              ['Architect', 'Zaha Hadid'],
              ['Developer', 'Omniyat'],
              ['Unit', 'C201'],
              ['Opened', '2022'],
            ].map(([k, v]) => (
              <div key={k}>
                <div className="mono" style={{ color: 'rgba(242,237,227,0.5)', marginBottom: 6 }}>{k}</div>
                <div style={{ fontSize: '1.05rem' }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Architectural intro */}
      <section style={{ background: 'var(--bone)', padding: '120px 0' }}>
        <div className="container">
          <Reveal>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
              <div>
                <PhiMark size={56} />
                <h2 className="serif" style={{ fontSize: '2.6rem', marginTop: 32, lineHeight: 1.05 }}>
                  {ar ? <>هندسة <em className="ital">للهدوء</em>.</> : <>An architecture for <em className="ital">stillness</em>.</>}
                </h2>
              </div>
              <p style={{ color: 'var(--ink-soft)', fontSize: '1.05rem', lineHeight: 1.75 }}>
                {ar
                  ? 'تشغل العیادة الوحدة C201 من أوبس، أحد آخر مشاریع الراحلة زها حدید في دبي. اخترنا هذا المبنى لأن منحنیاته توفر الهدوء قبل أي إجراء — ضوء ناعم، ممرات منحنیة، أسطح حجریة دافئة، ومدخل خاص یحفظ الخصوصیة منذ الوصول.'
                  : 'Ouronyx Dubai occupies Unit C201 inside The Opus — one of the late Zaha Hadid’s last completed projects in the city. The building was chosen for the same reason a treatment plan is: its curves create stillness before anything else begins. Soft daylight, curved corridors, warm stone surfaces, and a private guest exit that protects discretion from the moment of arrival.'}
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Interior gallery — editorial 3-col */}
      <section style={{ background: 'var(--bone)', paddingBottom: 120 }}>
        <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 20 }}>
          {[
            { src: 'media/interior-sofa-01.webp', col: 'span 7', aspect: '4 / 3', label: 'The lounge · olive velvet' },
            { src: 'media/interior-or-brand-01.webp', col: 'span 5', aspect: '4 / 3', label: 'Brand mark in stone' },
            { src: 'media/interior-chair-01.webp', col: 'span 4', aspect: '3 / 4', label: 'Consultation chair' },
            { src: 'media/about-dubai-01.webp', col: 'span 8', aspect: '3 / 4', label: 'Atrium' },
          ].map((g, i) => (
            <Reveal key={i} delay={i * 80} className="" style={{ gridColumn: g.col }}>
              <figure style={{ margin: 0 }}>
                <div style={{ aspectRatio: g.aspect, overflow: 'hidden' }}>
                  <img src={g.src} alt={g.label} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <figcaption className="mono" style={{ marginTop: 12, color: 'var(--muted)', fontSize: '0.65rem' }}>
                  {String(i + 1).padStart(2, '0')} · {g.label}
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </section>

      {/* Contact + map block */}
      <section style={{ background: 'var(--ink)', color: 'var(--bone)', position: 'relative', overflow: 'hidden' }}>
        <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 0 }}>
          {/* Details */}
          <div style={{ padding: '100px 60px', position: 'relative' }}>
            <ArchPattern color="rgba(242,237,227,0.15)" opacity={1} />
            <div style={{ position: 'relative' }}>
              <div className="eyebrow" style={{ color: 'rgba(242,237,227,0.6)', marginBottom: 18 }}>{ar ? 'التفاصيل' : 'Practical detail'}</div>
              <h2 className="serif" style={{ fontSize: '3rem', marginBottom: 40, fontWeight: 300, lineHeight: 1.02 }}>
                {ar ? <>زیارتك إلى <em className="ital">أوبس</em>.</> : <>Visiting <em className="ital">The Opus</em>.</>}
              </h2>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
                {[
                  ['Address', <>The Opus by Omniyat<br/>Unit C201, Al A’amal Street<br/>Business Bay, Dubai, UAE</>],
                  ['Telephone', <a href="tel:+97144562024" style={{ color: 'inherit', textDecoration: 'none' }}>+971 4 456 2024</a>],
                  ['WhatsApp', <a href="https://wa.me/971586858562" style={{ color: 'inherit', textDecoration: 'none' }}>+971 58 685 8562</a>],
                  ['Email', <a href="mailto:dubai@ouronyx.com" style={{ color: 'inherit', textDecoration: 'none' }}>dubai@ouronyx.com</a>],
                  ['Hours', <span style={{ color: 'rgba(242,237,227,0.55)', fontStyle: 'italic' }}>By appointment · confirm with the clinic</span>],
                  ['Metro', <span style={{ color: 'rgba(242,237,227,0.7)' }}>Business Bay Station · Red Line</span>],
                  ['Parking', <span style={{ color: 'rgba(242,237,227,0.7)' }}>Valet at The Opus · to confirm</span>],
                ].map(([k, v]) => (
                  <div key={k} style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 24, paddingBottom: 18, borderBottom: '1px solid rgba(242,237,227,0.12)' }}>
                    <div className="mono" style={{ color: 'rgba(242,237,227,0.5)' }}>{k}</div>
                    <div style={{ fontSize: '0.95rem', lineHeight: 1.5 }}>{v}</div>
                  </div>
                ))}
              </div>

              <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
                <button className="btn" onClick={onBook} style={{ background: 'var(--bone)', color: 'var(--ink)', borderColor: 'var(--bone)' }}>
                  {ar ? 'احجز استشارة' : 'Book a consultation'}
                </button>
              </div>
            </div>
          </div>

          {/* Map placeholder — embedded later with verified coords */}
          <div style={{ position: 'relative', minHeight: 700, overflow: 'hidden' }}>
            <MapPlaceholder />
          </div>
        </div>
      </section>
    </main>
  );
}

// === Architectural map placeholder ===
function MapPlaceholder() {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: 'linear-gradient(135deg, #1F1E1A 0%, #2A2926 100%)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      overflow: 'hidden',
    }}>
      {/* Stylised street grid */}
      <svg viewBox="0 0 600 700" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <pattern id="streets" x="0" y="0" width="80" height="80" patternUnits="userSpaceOnUse">
            <path d="M 80 0 L 0 0 0 80" fill="none" stroke="rgba(242,237,227,0.06)" strokeWidth="1"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#streets)"/>

        {/* The Opus footprint sketch */}
        <g transform="translate(300, 350)">
          <circle cx="0" cy="0" r="200" fill="none" stroke="rgba(184,153,104,0.18)" strokeDasharray="2 4" />
          <circle cx="0" cy="0" r="140" fill="none" stroke="rgba(184,153,104,0.28)" strokeDasharray="2 4" />
          <circle cx="0" cy="0" r="80" fill="none" stroke="rgba(184,153,104,0.42)" />

          {/* Opus iconic curved-twin-tower mark */}
          <path d="M -30 -40 Q 0 -25 30 -40 L 30 40 Q 0 25 -30 40 Z" fill="rgba(232,214,168,0.85)" />
          <circle cx="0" cy="0" r="5" fill="var(--ink)" />
        </g>

        {/* Cross-roads label */}
        <text x="300" y="585" textAnchor="middle" fill="rgba(242,237,227,0.55)" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="3">AL A’AMAL STREET</text>
        <text x="300" y="125" textAnchor="middle" fill="rgba(242,237,227,0.35)" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="2">BUSINESS BAY · DOWNTOWN ADJ.</text>
      </svg>

      <div style={{ position: 'absolute', bottom: 32, left: 32, right: 32, background: 'rgba(20,19,15,0.85)', padding: '20px 24px', backdropFilter: 'blur(8px)' }}>
        <div className="mono" style={{ fontSize: '0.62rem', color: 'rgba(184,153,104,0.7)', letterSpacing: '0.22em', marginBottom: 6 }}>
          φ OURONYX DUBAI
        </div>
        <div style={{ color: 'var(--bone)', fontFamily: 'var(--serif)', fontSize: '1.1rem', fontStyle: 'italic' }}>
          25.18° N · 55.27° E (approximate)
        </div>
        <div className="mono" style={{ marginTop: 8, color: 'rgba(242,237,227,0.45)', fontSize: '0.62rem' }}>
          STYLISED MAP · EXACT COORDINATES TO VERIFY
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LocationPage });