// Generic project detail page — driven by a data object.
// Used by Maurya Greens, Palm Garden, Palm City 2.

const { useState: usePDState, useEffect: useSliderEffect } = React;

// ── Image Slider — used on all project detail pages when data.slides is provided
const ImageSlider = ({ slides, alt, className, imgClassName }) => {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const n = slides.length;
  const prev = () => setIdx(i => (i - 1 + n) % n);
  const next = () => setIdx(i => (i + 1) % n);

  useSliderEffect(() => {
    if (paused || n <= 1) return;
    const t = setInterval(() => setIdx(i => (i + 1) % n), 4500);
    return () => clearInterval(t);
  }, [paused, n]);

  return (
    <div
      className={`relative overflow-hidden rounded-3xl border border-bone-50/10 ${className || ''}`}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      {slides.map((src, i) => (
        <img
          key={src}
          src={src}
          alt={`${alt} — view ${i + 1}`}
          className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-700 ${i === idx ? 'opacity-100' : 'opacity-0'} ${imgClassName ? `${imgClassName}-${i + 1}` : ''}`}
        />
      ))}
      {n > 1 && (
        <>
          <button onClick={prev} aria-label="Previous image" className="absolute left-4 top-1/2 -translate-y-1/2 z-10 h-10 w-10 rounded-full bg-ink-950/60 border border-bone-50/10 grid place-items-center text-bone-50/80 hover:text-bone-50 hover:bg-ink-950/80 transition">
            <Icon.ArrowLeft size={16}/>
          </button>
          <button onClick={next} aria-label="Next image" className="absolute right-4 top-1/2 -translate-y-1/2 z-10 h-10 w-10 rounded-full bg-ink-950/60 border border-bone-50/10 grid place-items-center text-bone-50/80 hover:text-bone-50 hover:bg-ink-950/80 transition">
            <Icon.ArrowRight size={16}/>
          </button>
          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-2">
            {slides.map((_, i) => (
              <button key={i} onClick={() => setIdx(i)} aria-label={`Image ${i + 1}`}
                className={`h-1.5 rounded-full transition-all duration-300 ${i === idx ? 'w-6 bg-bone-50' : 'w-1.5 bg-bone-50/40 hover:bg-bone-50/70'}`}
              />
            ))}
          </div>
          <div className="absolute top-4 right-4 z-10 bg-ink-950/60 rounded-full px-3 py-1 border border-bone-50/10 text-[11px] text-bone-50/55 pointer-events-none select-none">
            {idx + 1} / {n}
          </div>
        </>
      )}
    </div>
  );
};
window.ImageSlider = ImageSlider;

// ── Tiny SVG schematic plan (decorative, varies by index)
const PDPlanSchematic = ({ idx }) => {
  const blocks = [
    [[10,10,30,40],[42,10,48,30],[10,52,30,38],[42,42,48,48]],
    [[10,10,42,32],[54,10,36,32],[10,44,30,46],[42,44,48,46]],
    [[10,10,38,28],[50,10,40,40],[10,40,38,50],[50,52,40,38]],
    [[8,8,40,40],[52,8,40,40],[8,52,40,40],[52,52,40,40]],
  ];
  const set = blocks[idx % blocks.length];
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full">
      <rect x="2" y="2" width="96" height="96" fill="none" stroke="rgba(250,248,244,0.20)" strokeDasharray="2 3"/>
      {set.map((b, i) => (
        <rect key={i} x={b[0]} y={b[1]} width={b[2]} height={b[3]}
              fill="none" stroke="rgba(200,168,107,0.85)" strokeWidth="0.6"/>
      ))}
      <line x1="50" y1="2" x2="50" y2="98" stroke="rgba(250,248,244,0.07)"/>
    </svg>
  );
};

// ── Elevation glyphs
const PDElevationGlyph = ({ kind }) => {
  const variants = {
    contemporary: (
      <g stroke="rgba(229,212,171,0.85)" strokeWidth="0.8" fill="none">
        <rect x="10" y="40" width="80" height="50"/>
        <rect x="20" y="50" width="20" height="14"/>
        <rect x="60" y="50" width="20" height="14"/>
        <rect x="35" y="72" width="30" height="18"/>
        <line x1="10" y1="32" x2="90" y2="32"/>
      </g>
    ),
    classical: (
      <g stroke="rgba(229,212,171,0.85)" strokeWidth="0.8" fill="none">
        <polygon points="10,42 50,18 90,42"/>
        <rect x="14" y="42" width="72" height="48"/>
        <rect x="46" y="62" width="8" height="28"/>
        <rect x="22" y="50" width="14" height="14"/>
        <rect x="64" y="50" width="14" height="14"/>
      </g>
    ),
    courtyard: (
      <g stroke="rgba(229,212,171,0.85)" strokeWidth="0.8" fill="none">
        <rect x="8" y="30" width="84" height="60"/>
        <rect x="38" y="48" width="24" height="42" stroke="rgba(229,212,171,0.45)" strokeDasharray="1.6 1.6"/>
        <line x1="8" y1="48" x2="92" y2="48" strokeWidth="0.4"/>
        <rect x="18" y="56" width="14" height="20"/>
        <rect x="68" y="56" width="14" height="20"/>
      </g>
    ),
    tower: (
      <g stroke="rgba(229,212,171,0.85)" strokeWidth="0.8" fill="none">
        <rect x="36" y="10" width="28" height="80"/>
        <line x1="36" y1="22" x2="64" y2="22"/>
        <line x1="36" y1="34" x2="64" y2="34"/>
        <line x1="36" y1="46" x2="64" y2="46"/>
        <line x1="36" y1="58" x2="64" y2="58"/>
        <line x1="36" y1="70" x2="64" y2="70"/>
        <line x1="36" y1="82" x2="64" y2="82"/>
        <rect x="14" y="60" width="18" height="30"/>
        <rect x="68" y="60" width="18" height="30"/>
      </g>
    ),
    villa: (
      <g stroke="rgba(229,212,171,0.85)" strokeWidth="0.8" fill="none">
        <polygon points="10,46 50,28 90,46"/>
        <rect x="14" y="46" width="72" height="44"/>
        <rect x="22" y="58" width="14" height="20"/>
        <rect x="42" y="58" width="16" height="32"/>
        <rect x="64" y="58" width="14" height="20"/>
      </g>
    ),
    lowrise: (
      <g stroke="rgba(229,212,171,0.85)" strokeWidth="0.8" fill="none">
        <rect x="6" y="50" width="38" height="40"/>
        <rect x="50" y="36" width="44" height="54"/>
        <line x1="6" y1="62" x2="44" y2="62"/>
        <line x1="50" y1="50" x2="94" y2="50"/>
        <line x1="50" y1="64" x2="94" y2="64"/>
        <line x1="50" y1="78" x2="94" y2="78"/>
      </g>
    ),
  };
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full">
      {variants[kind] || variants.contemporary}
    </svg>
  );
};

// ── Hero
const PDHero = ({ data, setPage }) => (
  <section className="pt-32 pb-10">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <button
        onClick={() => setPage('residential')}
        data-track={`${data.id}-back`}
        className="mb-12 reveal flex items-center gap-2 text-[12px] tracking-[0.18em] uppercase text-bone-50/55 hover:text-bone-50 transition"
      >
        <Icon.ArrowLeft size={14}/> Residential portfolio
      </button>

      <div className="grid lg:grid-cols-12 gap-10 items-end">
        <div className="lg:col-span-7 reveal">
          <div className="flex items-end justify-between gap-4 lg:block">
            <div>
              <div className="flex items-center gap-2 text-[10px] uppercase tracking-[0.28em] text-accent mb-6">
                <Icon.Tag size={12}/> {data.tag}
              </div>
              <h1 className="font-display text-[44px] sm:text-[56px] lg:text-[100px] leading-[0.92] tracking-tightest">
                {data.title.line1}<br/><span className="italic text-accent-soft">{data.title.line2}</span>
              </h1>
            </div>
            {data.logo && (
              <img src={data.logo} alt={`${data.name} logo`} className="logo-adaptive h-14 w-auto max-w-[120px] object-contain flex-shrink-0 lg:hidden"/>
            )}
          </div>
        </div>
        <div className="lg:col-span-5 reveal text-right">
          {data.logo && (
            <img src={data.logo} alt={`${data.name} logo`} className="logo-adaptive h-12 w-auto object-contain mb-6 ml-auto hidden lg:block"/>
          )}
          <p className="text-bone-50/70 text-[16px] leading-relaxed">{data.oneLiner}</p>
          <div className="mt-8 flex flex-wrap gap-3 justify-end">
            <button
              onClick={() => { setPage('contact'); window.scrollTo(0,0); }}
              data-track={`${data.id}-cta-enquire`}
              className="btn rounded-full bg-bone-50 text-ink-950 px-5 py-3 text-[12px] font-medium tracking-wide hover:bg-accent-soft inline-flex items-center gap-2"
            >
              Enquire now <Icon.ArrowUpRight size={14}/>
            </button>
          </div>
          <div className="mt-5 flex gap-2 justify-end">
            <a href={data.social?.instagram || 'https://www.instagram.com/amgrealty.in'} target="_blank" rel="noopener noreferrer" data-track={`${data.id}-social-instagram`} className="h-9 w-9 rounded-full border border-bone-50/15 grid place-items-center text-bone-50/55 hover:text-bone-50 hover:border-bone-50/40 transition"><Icon.Instagram size={14}/></a>
            {data.social?.facebook && <a href={data.social.facebook} target="_blank" rel="noopener noreferrer" data-track={`${data.id}-social-facebook`} className="h-9 w-9 rounded-full border border-bone-50/15 grid place-items-center text-bone-50/55 hover:text-bone-50 hover:border-bone-50/40 transition"><Icon.Facebook size={14}/></a>}
            <a href="https://wa.me/918968566656" target="_blank" rel="noopener noreferrer" data-track={`${data.id}-social-whatsapp`} className="h-9 w-9 rounded-full border border-bone-50/15 grid place-items-center text-bone-50/55 hover:text-bone-50 hover:border-bone-50/40 transition"><Icon.WhatsApp size={14}/></a>
            {data.location?.mapsLink && <a href={data.location.mapsLink} target="_blank" rel="noopener noreferrer" data-track={`${data.id}-social-location`} className="h-9 w-9 rounded-full border border-bone-50/15 grid place-items-center text-bone-50/55 hover:text-bone-50 hover:border-bone-50/40 transition"><Icon.MapPin size={14}/></a>}
          </div>
        </div>
      </div>

      <div className="mt-12 reveal">
        {data.slides && data.slides.length > 0
          ? <ImageSlider slides={data.slides} alt={data.name} className="aspect-[4/3] sm:aspect-[16/9] lg:aspect-[21/9] w-full" imgClassName={`img-slide-${data.id}`}/>
          : <img src="/images/sample.jpg" alt={`${data.name} masterplan`} className={`img-masterplan-${data.id} aspect-[4/3] sm:aspect-[16/9] lg:aspect-[21/9] rounded-3xl border border-bone-50/10 w-full object-cover`}/>
        }
      </div>

      <div className="mt-4 overflow-x-auto reveal">
        <div className="grid gap-px rounded-3xl overflow-hidden" style={{background:'var(--ink-faint)', gridTemplateColumns:`repeat(${data.facts.length}, minmax(0,1fr))`, minWidth:`${data.facts.length * 120}px`}}>
          {data.facts.map((f) => (
            <div key={f.k} className="px-5 py-5" style={{background:'var(--bg-elev)'}}>
              <div className="text-[10px] uppercase tracking-[0.22em]" style={{color:'var(--ink-fg)', opacity:0.5}}>{f.k}</div>
              <div className="font-display text-[20px] leading-tight mt-2" style={{color:'var(--ink-fg)'}}>{f.v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ── Story
const PDStory = ({ data }) => (
  <section className="py-24">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="grid lg:grid-cols-12 gap-10">
        <div className="lg:col-span-5 reveal">
          <Eyebrow>{data.story.eyebrow}</Eyebrow>
          <h2 className="font-display text-[22px] sm:text-[36px] lg:text-[56px] leading-[1.02] tracking-tightest mt-5">
            {data.story.title.a}<br/><span className="italic text-accent-soft">{data.story.title.b}</span>
          </h2>
        </div>
        <div className="lg:col-span-7 reveal">
          <p className="text-bone-50/70 text-[17px] leading-[1.7]">{data.story.body[0]}</p>
          {data.story.body[1] && <p className="mt-5 text-bone-50/55 text-[15px] leading-[1.7]">{data.story.body[1]}</p>}
        </div>
      </div>
    </div>
  </section>
);


// ── Floor plans
const PDFloorPlans = ({ data }) => {
  const images = data.planImages || (data.planImage ? [data.planImage] : []);
  const [activeIdx, setActiveIdx] = usePDState(0);

  return (
    <section className="py-24 border-t border-bone-50/10 bg-ink-900/30">
      <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
        <div className="flex items-end justify-between flex-wrap gap-6 mb-12 reveal">
          <SectionTitle kicker={data.plansKicker} title={<>{data.plansTitle.a},<br/><span className="italic text-accent-soft">{data.plansTitle.b}</span></>}/>
          {images.length > 1 && (
            <div className="flex flex-wrap gap-2">
              {images.map((_, i) => (
                <button
                  key={i}
                  onClick={() => setActiveIdx(i)}
                  className={`px-4 py-2 rounded-full text-[12px] tracking-wide border transition ${activeIdx === i ? 'border-accent text-accent bg-accent/10' : 'border-bone-50/15 text-bone-50/60 hover:text-bone-50 hover:border-bone-50/30'}`}
                >{String(i + 1).padStart(2, '0')}</button>
              ))}
            </div>
          )}
        </div>

        <div className="reveal">
          <div className="rounded-3xl overflow-hidden" style={{ aspectRatio: '16/9' }}>
            {images[activeIdx]
              ? <img src={images[activeIdx]} alt={`${data.name} floor plan`} className="w-full h-full object-contain p-6"/>
              : <div className="w-full h-full grain p-6 sm:p-10"><PDPlanSchematic idx={0}/></div>
            }
          </div>
        </div>
      </div>
    </section>
  );
};

// ── Elevations
const PDElevations = ({ data }) => (
  <section className="py-24 border-t border-bone-50/10">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="reveal mb-12">
        <SectionTitle kicker={data.elevationsKicker} title={<>{data.elevationsTitle.a},<br/><span className="italic text-accent-soft">{data.elevationsTitle.b}</span></>}/>
      </div>
      <div className="grid md:grid-cols-3 gap-4">
        {data.elevations.map((e, i) => (
          <div key={e.k} className="rounded-3xl border border-bone-50/10 p-6 hover:border-accent/40 transition reveal">
            <div className="text-[10px] uppercase tracking-[0.22em] text-bone-50/40">0{i+1} / 0{data.elevations.length}</div>
            <div className="aspect-[4/3] mt-4 rounded-2xl bg-ink-900/50 border border-bone-50/10 grain p-5">
              <PDElevationGlyph kind={e.k}/>
            </div>
            <div className="font-display text-[26px] mt-5">{e.t}</div>
            <p className="text-bone-50/55 text-[13.5px] mt-2 leading-relaxed">{e.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ── Location & Connectivity
const PDLocation = ({ data }) => (
  <section className="py-24 border-t border-bone-50/10">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="reveal mb-12">
        <SectionTitle kicker="Location · Connectivity" title={<>{data.location.title.a},<br/><span className="italic text-accent-soft">{data.location.title.b}</span></>}/>
      </div>

      <div className="grid lg:grid-cols-12 gap-6">
        {/* Map */}
        <div className="lg:col-span-7 relative rounded-3xl overflow-hidden border border-bone-50/10 reveal" style={{ aspectRatio: '16/11' }}>

          {data.location.mapEmbed ? (
            /* ── Real Google Maps iframe (dark-filtered to match theme) ── */
            <iframe
              src={data.location.mapEmbed}
              title={`${data.name} location map`}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              className="absolute inset-0 w-full h-full"
              style={{ border: 'none', filter: 'invert(90%) hue-rotate(180deg) saturate(0.55) brightness(0.82)' }}
            />
          ) : (
            /* ── SVG diagram fallback ── */
            <>
              <div className="absolute inset-0 ph-3"/>
              <svg viewBox="0 0 800 550" className="absolute inset-0 w-full h-full opacity-95">
                <defs>
                  <pattern id={`${data.id}-grid`} width="40" height="40" patternUnits="userSpaceOnUse">
                    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(250,248,244,0.05)" strokeWidth="0.5"/>
                  </pattern>
                </defs>
                <rect width="800" height="550" fill={`url(#${data.id}-grid)`}/>
                <path d="M 0 290 Q 200 270 400 300 T 800 320" fill="none" stroke="rgba(250,248,244,0.22)" strokeWidth="2.5"/>
                <path d="M 380 0 Q 410 200 420 320 T 460 550" fill="none" stroke="rgba(250,248,244,0.18)" strokeWidth="2"/>
                <path d="M 0 120 Q 250 130 500 110 T 800 140" fill="none" stroke="rgba(250,248,244,0.10)" strokeWidth="1.5"/>
                <path d="M 0 430 Q 300 440 600 425 T 800 440" fill="none" stroke="rgba(250,248,244,0.10)" strokeWidth="1.5"/>
                <circle cx="400" cy="280" r="60" fill="rgba(200,168,107,0.10)" stroke="rgba(200,168,107,0.6)" strokeDasharray="4 3"/>
                <circle cx="400" cy="280" r="9" fill="#C8A86B"/>
                <circle cx="400" cy="280" r="20" fill="none" stroke="#C8A86B" opacity="0.4">
                  <animate attributeName="r" from="9" to="40" dur="2s" repeatCount="indefinite"/>
                  <animate attributeName="opacity" from="0.55" to="0" dur="2s" repeatCount="indefinite"/>
                </circle>
                {data.location.pois.map((p, i) => (
                  <g key={i}>
                    <circle cx={p.x} cy={p.y} r="4" fill="#FAF8F4" opacity="0.7"/>
                    <text x={p.x + 8} y={p.y + 4} fill="rgba(250,248,244,0.55)" fontSize="11" fontFamily="ui-sans-serif">{p.label}</text>
                  </g>
                ))}
                <text x="412" y="276" fill="#0A0A0B" fontSize="10" fontWeight="700" fontFamily="ui-sans-serif">{data.location.pin}</text>
              </svg>
            </>
          )}

          {/* Top fade */}
          <div className="absolute inset-x-0 top-0 h-14 pointer-events-none z-10"
               style={{ background: 'linear-gradient(to bottom, rgba(10,10,11,0.5), transparent)' }}/>

          {/* Address chip */}
          <div className="absolute top-4 left-4 z-20 inline-flex items-center gap-2 rounded-full bg-ink-950/80 backdrop-blur-md px-3 py-1.5 border border-bone-50/10">
            <Icon.MapPin size={12} className="text-accent"/>
            <span className="text-[11px] tracking-wide text-bone-50/85">{data.location.address}</span>
          </div>

          {/* Open in Maps */}
          <a
            href={data.location.mapsLink || '#'}
            target={data.location.mapsLink ? '_blank' : undefined}
            rel="noopener noreferrer"
            data-track={`${data.id}-open-maps`}
            className="absolute bottom-4 right-4 z-20 inline-flex items-center gap-2 rounded-full bg-bone-50 text-ink-950 px-3 py-1.5 text-[11px] font-medium hover:bg-accent-soft transition"
          >
            Open in Maps <Icon.ArrowUpRight size={12}/>
          </a>
        </div>

        {/* Distance list */}
        <div className="lg:col-span-5 reveal">
          <div className="rounded-3xl border border-bone-50/10 overflow-hidden">
            {data.location.distances.map((d, i) => (
              <div key={d.k} className={`flex items-center justify-between px-5 py-4 ${i !== data.location.distances.length-1 ? 'border-b border-bone-50/8' : ''} hover:bg-bone-50/5 transition`}>
                <div className="flex items-center gap-3">
                  <span className="h-1.5 w-1.5 rounded-full bg-accent"/>
                  <span className="text-[13.5px] text-bone-50/80">{d.k}</span>
                </div>
                <span className="font-display text-[16px] text-accent-soft">{d.v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ── Amenities
const PDAmenities = ({ data }) => (
  <section className="py-24 border-t border-bone-50/10 bg-ink-900/30">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="reveal mb-12">
        <SectionTitle kicker="Amenities · The Daily Life" title={<>{data.amenitiesTitle.a}<br/><span className="italic text-accent-soft">{data.amenitiesTitle.b}</span></>}/>
      </div>
      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {data.amenities.map((a, i) => {
          const Ic = Icon[a.i] || Icon.Sparkles;
          return (
            <div key={a.k} className="rounded-3xl border border-bone-50/10 p-6 hover:border-accent/40 hover:bg-bone-50/[0.03] transition reveal">
              <div className="flex items-center justify-between">
                <div className="text-accent"><Ic size={18}/></div>
                <div className="text-[10px] uppercase tracking-[0.22em] text-bone-50/35">0{i+1}</div>
              </div>
              <div className="font-display text-[24px] mt-6 leading-tight">{a.k}</div>
              <p className="text-bone-50/55 text-[13px] mt-2 leading-relaxed">{a.d}</p>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

// ── Closing CTA
const PDClose = ({ data, setPage }) => (
  <section className="py-20 sm:py-32 border-t border-bone-50/10">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="grid lg:grid-cols-12 gap-10 items-end reveal">
        <div className="lg:col-span-8">
          <Eyebrow>Begin · A Conversation</Eyebrow>
          <h2 className="font-display text-[30px] sm:text-[80px] leading-[0.98] tracking-tightest mt-6">
            {data.close.title.a}<br/><span className="italic text-accent-soft">{data.close.title.b}</span>
          </h2>
          <p className="mt-6 text-bone-50/60 text-[15px] leading-relaxed max-w-md">{data.close.body}</p>
        </div>
        <div className="lg:col-span-4 flex flex-col gap-3">
          <button
            onClick={() => { setPage('contact'); window.scrollTo(0,0); }}
            data-track={`${data.id}-close-enquire`}
            className="btn rounded-full bg-bone-50 text-ink-950 px-5 py-4 text-[13px] font-medium tracking-wide hover:bg-accent-soft inline-flex items-center justify-between"
          >
            <span>Enquire now</span> <Icon.ArrowUpRight size={16}/>
          </button>
          <a
            href={`https://wa.me/918968566656?text=Hi%20AMG%2C%20I%27m%20interested%20in%20${encodeURIComponent(data.name)}.`}
            target="_blank"
            rel="noopener noreferrer"
            data-track={`${data.id}-close-whatsapp`}
            className="btn rounded-full border border-bone-50/30 text-bone-50 px-5 py-4 text-[13px] font-medium tracking-wide hover:bg-bone-50/10 inline-flex items-center justify-between"
          >
            <span className="inline-flex items-center gap-2"><Icon.WhatsApp size={14}/> Chat on WhatsApp</span>
            <Icon.ArrowRight size={16}/>
          </a>
        </div>
      </div>
    </div>
  </section>
);

// ── Top-level wrapper
function ProjectDetail({ data, setPage }) {
  useReveal();
  return (
    <main className="page-enter">
      <PDHero data={data} setPage={setPage}/>
      <PDStory data={data}/>
      <PDFloorPlans data={data}/>
      <PDLocation data={data}/>
      <PDAmenities data={data}/>
      <PDClose data={data} setPage={setPage}/>
    </main>
  );
}

window.ProjectDetail = ProjectDetail;