/* ── PropertyDetail Component ────────────────────────────── */
const { useState: usePDState } = React;

/* ─ Property Data ────────────────────────────────────────── */
const PROPS = {
  'property-1': {
    name:    'Modern Glass Villa',
    loc:     'Berlin, Germany',
    price:   '€2,450,000',
    beds:    '5', baths: '4', area: '420 m²',
    heroImg: 'assets/p1/p1-1.png',
    images: [
      'assets/p1/p1-1.png',
      'assets/p1/p1-2.png',
      'assets/p1/p1-3.png',
      'assets/p1/p1-4.png',
      'assets/p1/p1-5.png',
      'assets/p1/p1-6.png',
      'assets/p1/p1-7.png',
    ],
    desc: 'An architectural masterpiece in the heart of Berlin, this contemporary glass villa seamlessly integrates natural limestone, black steel framing, and floor-to-ceiling glazing to create a residence of extraordinary presence. Designed for those who demand the finest, every surface reflects a commitment to craft and detail. The open-plan interior unfolds across 420 square metres, culminating in a double-height living space with a dramatic stone fireplace and uninterrupted garden views. The principal suite occupies the entire upper level, offering a private terrace and spa bathroom. Landscaped gardens, an infinity pool, and triple garage complete this singular property.',
    features: [
      'Double-height living room',
      'Architectural stone fireplace',
      "Chef's kitchen with island",
      'Master suite with private terrace',
      'Home cinema room',
      'Wine cellar',
      'Infinity swimming pool',
      'Landscaped garden (1,800 m²)',
      'Triple garage',
      'Smart home automation',
      'Underfloor heating throughout',
      'Private gated entrance',
    ],
  },
  'property-2': {
    name:    'Mediterranean Estate',
    loc:     'Potsdam, Germany',
    price:   '€3,200,000',
    beds:    '6', baths: '5', area: '560 m²',
    heroImg: 'assets/p2/p2-1.png',
    images: [
      'assets/p2/p2-1.png',
      'assets/p2/p2-2.png',
      'assets/p2/p2-3.png',
      'assets/p2/p2-4.png',
      'assets/p2/p2-5.png',
      'assets/p2/p2-6.png',
    ],
    desc: 'Set within the serene landscape of Potsdam, this magnificent Mediterranean estate evokes the warmth and grandeur of southern Europe while offering every modern refinement. Six generously proportioned suites, sun-drenched terraces, a heated pool, and sprawling grounds create an unparalleled private retreat. Accessed via a gated private drive, the estate is surrounded by mature woodland and fragrant gardens. Extraordinary in scale and rare in quality — a true sanctuary just minutes from central Berlin, offered to the market for the first time.',
    features: [
      'Six en-suite bedrooms',
      'Heated swimming pool & sun terrace',
      'Formal dining salon',
      'Professional chef\u2019s kitchen',
      'Study / home office',
      'Guest cottage (2 bedrooms)',
      'Landscaped grounds (3,200 m²)',
      'Outdoor entertaining pavilion',
      'Double garage',
      'Radiant floor heating',
      'Full security system',
      'Wine cellar & tasting room',
    ],
  },
};

/* ─ Detail Page ──────────────────────────────────────────── */
const PropertyDetail = ({ propertyId, onBack, onLightboxOpen }) => {
  const prop = PROPS[propertyId];
  const [activeIdx, setActiveIdx] = usePDState(0);

  if (!prop) return null;

  const handleThumb = (i) => setActiveIdx(i);
  const handleMainClick = () => onLightboxOpen(prop.images, activeIdx);

  return (
    <div className="detail-wrap">

      {/* ── Hero ──────────────────────────────────────────── */}
      <div className="det-hero-sec">
        <img src={prop.heroImg} alt={prop.name} />
        <div className="det-hero-grad"></div>
        <button className="back-btn" onClick={onBack}>
          ← Back to Properties
        </button>
        <div className="det-hero-cap">
          <div className="container">
            <div className="det-hero-loc">{prop.loc}</div>
            <div className="det-hero-name">{prop.name}</div>
          </div>
        </div>
      </div>

      {/* ── Main Info ─────────────────────────────────────── */}
      <div className="det-main">
        <div className="container">
          <div className="det-grid">

            {/* Left Column */}
            <div>
              <div className="det-price">{prop.price}</div>
              <h1 className="det-title">{prop.name}</h1>
              <div className="det-loc">
                <svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 0C2.74 0 0.5 2.24 0.5 5c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 6.5A1.5 1.5 0 115.5 3.5a1.5 1.5 0 010 3z" fill="currentColor"/>
                </svg>
                {prop.loc}
              </div>

              <div className="det-specs">
                <div className="det-spec">
                  <div className="det-spec-v">{prop.beds}</div>
                  <div className="det-spec-l">Bedrooms</div>
                </div>
                <div className="det-spec">
                  <div className="det-spec-v">{prop.baths}</div>
                  <div className="det-spec-l">Bathrooms</div>
                </div>
                <div className="det-spec">
                  <div className="det-spec-v">{prop.area}</div>
                  <div className="det-spec-l">Floor Area</div>
                </div>
              </div>

              <p className="det-desc">{prop.desc}</p>

              <h3 className="det-feat-h">Features &amp; Amenities</h3>
              <div className="det-feats">
                {prop.features.map((f, i) => (
                  <div key={i} className="det-feat">
                    <div className="feat-dot"></div>
                    {f}
                  </div>
                ))}
              </div>

              <div className="det-acts">
                <button className="btn btn-dark">Schedule Viewing</button>
                <button className="btn btn-ghost-dark">Request Details</button>
              </div>
            </div>

            {/* Right Column — Agent Card */}
            <div>
              <div className="agent-card">
                <div className="agent-av">AV</div>
                <div className="agent-name">Alexandra Voss</div>
                <div className="agent-role">Senior Property Advisor</div>
                <div className="agent-cis">
                  <div className="agent-ci">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M13 10.5c0 .28-.06.55-.19.8a2.3 2.3 0 01-.5.71c-.3.3-.63.44-1 .46-.26.01-.54-.03-.83-.14A9.9 9.9 0 018.9 11a16.5 16.5 0 01-2.17-2.5 16.3 16.3 0 01-1.45-2.5c-.19-.44-.27-.85-.27-1.25 0-.38.12-.75.37-1.08.24-.33.56-.5.9-.5.13 0 .26.03.37.08.13.06.24.15.33.28l1.07 1.5c.09.12.15.23.2.34.04.1.07.2.07.28 0 .1-.03.21-.08.31-.05.1-.13.2-.22.3l-.3.3a.22.22 0 00-.07.16c0 .03.01.06.02.09.04.08.12.2.24.36.13.16.26.32.41.47.15.16.31.31.47.44.15.13.27.2.35.24.03.01.06.02.09.02a.23.23 0 00.17-.08l.3-.3c.1-.1.2-.18.3-.22.1-.05.2-.07.31-.07.09 0 .17.02.28.06.11.04.22.1.34.19l1.52 1.08c.13.09.22.2.28.33.05.13.08.27.08.41z" fill="rgba(255,255,255,.55)"/></svg>
                    +49 30 123 456 78
                  </div>
                  <div className="agent-ci">
                    <svg width="14" height="11" viewBox="0 0 14 11" fill="none"><path d="M12.6 0H1.4C.63 0 0 .63 0 1.4v8.2C0 10.37.63 11 1.4 11h11.2c.77 0 1.4-.63 1.4-1.4V1.4C14 .63 13.37 0 12.6 0zm0 2.8L7 6.3 1.4 2.8V1.4L7 4.9l5.6-3.5v1.4z" fill="rgba(255,255,255,.55)"/></svg>
                    a.voss@luxeestates.de
                  </div>
                  <div className="agent-ci">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="6.5" stroke="rgba(255,255,255,.55)"/><circle cx="7" cy="7" r="2" fill="rgba(255,255,255,.55)"/></svg>
                    Available for private viewings
                  </div>
                </div>
                <button className="agent-cta">Schedule Viewing</button>
                <button className="agent-cta-g">Request Details</button>
              </div>
            </div>

          </div>
        </div>
      </div>

      {/* ── Gallery ───────────────────────────────────────── */}
      <div className="gallery-sec">
        <div className="container">
          <h2 className="gallery-h">Property Gallery</h2>

          {/* Main image */}
          <div className="gal-main" onClick={handleMainClick}>
            <img src={prop.images[activeIdx]} alt="Main view" />
            <div className="gal-main-overlay">
              <div className="gal-expand">⊕</div>
            </div>
          </div>

          {/* Thumbnails */}
          <div className="gal-thumbs">
            {prop.images.map((img, i) => (
              <div
                key={i}
                className={`gal-thumb${i === activeIdx ? ' active' : ''}`}
                onClick={() => handleThumb(i)}
              >
                <img src={img} alt={`View ${i + 1}`} />
              </div>
            ))}
          </div>
        </div>
      </div>

    </div>
  );
};

Object.assign(window, { PropertyDetail });