// Generic commercial-project detail page
// Sections: hero · thesis · unit-mix · masterplan · location · anchors · close

const { useState: useCDState } = React;

// Tiny SVG floor-plate diagram
const CDPlateSchematic = ({ idx }) => {
  const sets = [
    // Linear strip
    [[6,40,88,20],[6,30,18,10],[76,30,18,10],[6,60,18,10],[76,60,18,10]],
    // Mall plate with atrium
    [[6,6,88,88]], // outer + atrium drawn separately
    // L-shape
    [[6,6,40,88],[6,6,88,30]],
    // Open court
    [[6,6,88,88]],
  ];
  const variant = idx % 4;
  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.18)" strokeDasharray="2 3"/>
      {sets[variant].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"/>
      ))}
      {variant === 1 && (
        <rect x="36" y="36" width="28" height="28" fill="none" stroke="rgba(229,212,171,0.5)" strokeWidth="0.5" strokeDasharray="1.5 1.5"/>
      )}
      {variant === 3 && (
        <>
          <rect x="34" y="34" width="32" height="32" fill="none" stroke="rgba(229,212,171,0.45)" strokeDasharray="1.5 1.5"/>
          <text x="50" y="52" fill="rgba(229,212,171,0.4)" fontSize="5" textAnchor="middle">COURT</text>
        </>
      )}
      <line x1="50" y1="2" x2="50" y2="98" stroke="rgba(250,248,244,0.05)"/>
    </svg>
  );
};

// Hero
const CDHero = ({ data, setPage }) => (
  <section className="pt-32 pb-10">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <button
        onClick={() => setPage('commercial')}
        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}/> Commercial 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 flex-wrap gap-2 mb-6">
                {data.tags.map((t) => (
                  <span key={t} className="text-[10px] uppercase tracking-[0.22em] px-2.5 py-1 rounded-full border border-accent/40 text-accent bg-accent/5">
                    {t}
                  </span>
                ))}
              </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} street view`} className={`img-hero-${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>
);

// Thesis / story
const CDThesis = ({ 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.thesis.eyebrow}</Eyebrow>
          <h2 className="font-display text-[22px] sm:text-[36px] lg:text-[56px] leading-[1.02] tracking-tightest mt-5">
            {data.thesis.title.a}<br/><span className="italic text-accent-soft">{data.thesis.title.b}</span>
          </h2>
        </div>
        <div className="lg:col-span-7 reveal">
          <p className="text-bone-50/70 text-[17px] leading-[1.7]">{data.thesis.body[0]}</p>
          {data.thesis.body[1] && <p className="mt-5 text-bone-50/55 text-[15px] leading-[1.7]">{data.thesis.body[1]}</p>}
          {data.thesis.body[2] && <p className="mt-4 text-bone-50/50 text-[14px] leading-[1.7]">{data.thesis.body[2]}</p>}
        </div>
      </div>

      {/* KPIs row */}
      <div className="mt-14 grid grid-cols-2 lg:grid-cols-4 gap-4 reveal">
        {data.kpis.map((k) => (
          <div key={k.k} className="rounded-2xl border border-bone-50/10 bg-ink-900/40 p-6">
            <div className="font-display text-[40px] leading-none text-accent-soft">{k.v}</div>
            <div className="mt-3 text-[11px] uppercase tracking-[0.22em] text-bone-50/45">{k.k}</div>
            {k.d && <p className="mt-2 text-[13px] text-bone-50/60 leading-relaxed">{k.d}</p>}
          </div>
        ))}
      </div>
    </div>
  </section>
);

// Floor plans — tab switcher with real images
const CDUnits = ({ data }) => {
  const [active, setActive] = useCDState(data.units[0].id);
  const u = data.units.find(x => x.id === active);
  const idx = data.units.findIndex(x => x.id === active);

  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.unitsKicker} title={<>{data.unitsTitle.a},<br/><span className="italic text-accent-soft">{data.unitsTitle.b}</span></>}/>
          <div className="flex flex-wrap gap-2">
            {data.units.map((p) => (
              <button
                key={p.id}
                onClick={() => setActive(p.id)}
                data-track={`${data.id}-unit-${p.id}`}
                className={`px-4 py-2 rounded-full text-[12px] tracking-wide border transition ${active === p.id ? 'border-accent text-accent bg-accent/10' : 'border-bone-50/15 text-bone-50/60 hover:text-bone-50 hover:border-bone-50/30'}`}
              >{p.label}</button>
            ))}
          </div>
        </div>

        <div className="reveal">
          <div className="rounded-3xl overflow-hidden" style={{ aspectRatio: '16/9' }}>
            {u.image
              ? <img src={u.image} alt={u.label + ' floor plan'} className={`img-floor-${data.id}-${u.id} w-full h-full object-contain p-6`}/>
              : <div className="glass-light w-full h-full p-6 grain"><CDPlateSchematic idx={idx}/></div>
            }
          </div>
        </div>
      </div>
    </section>
  );
};

// Masterplan / floor stack — columned visual
const CDMasterplan = ({ 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="Masterplan · Levels" title={<>{data.masterplanTitle.a},<br/><span className="italic text-accent-soft">{data.masterplanTitle.b}</span></>}/>
      </div>
      <div className="grid lg:grid-cols-12 gap-6">
        {/* Stack diagram */}
        <div className="lg:col-span-5 reveal">
          <div className="rounded-3xl border border-bone-50/10 overflow-hidden">
            {data.levels.map((lv, i) => (
              <div key={i} className="grid grid-cols-[80px_1fr_auto] items-center gap-4 px-5 py-4 border-b border-bone-50/8 last:border-b-0 hover:bg-bone-50/5 transition">
                <div className="text-[10px] uppercase tracking-[0.22em] text-accent">{lv.level}</div>
                <div className="text-[14px] text-bone-50/85">{lv.name}</div>
                <div className="font-display text-[15px] text-bone-50/55">{lv.size}</div>
              </div>
            ))}
          </div>
        </div>
        {/* Programme description */}
        <div className="lg:col-span-7 reveal">
          <div className="grid sm:grid-cols-2 gap-4">
            {data.programme.map((p, i) => {
              const Ic = Icon[p.i] || Icon.Sparkles;
              return (
                <div key={i} className="rounded-2xl border border-bone-50/10 p-6 hover:border-accent/40 transition">
                  <div className="text-accent"><Ic size={18}/></div>
                  <div className="font-display text-[22px] mt-5">{p.k}</div>
                  <p className="text-bone-50/55 text-[13px] mt-2 leading-relaxed">{p.d}</p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// Location & connectivity
const CDLocation = ({ 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="Location · Catchment" 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">
        <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}-cgrid`} 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}-cgrid)`}/>
                <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="120" fill="rgba(200,168,107,0.04)" stroke="rgba(200,168,107,0.25)" strokeDasharray="4 3"/>
                <circle cx="400" cy="280" r="80"  fill="rgba(200,168,107,0.07)" stroke="rgba(200,168,107,0.4)"  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 — adds depth over the map */}
          <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 button */}
          <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>

        <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>
);

// Anchors / brand mix
const CDAnchors = ({ 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.anchorsKicker} title={<>{data.anchorsTitle.a}<br/><span className="italic text-accent-soft">{data.anchorsTitle.b}</span></>}/>
      </div>

      {/* Anchor logos / brand placeholders */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-px bg-bone-50/10 rounded-3xl overflow-hidden reveal">
        {data.anchors.map((a) => (
          <div key={a} className="bg-ink-900/60 aspect-[5/3] grid place-items-center px-4 hover:bg-ink-900/30 transition">
            <span className="font-display text-[18px] text-bone-50/75 text-center leading-tight">{a}</span>
          </div>
        ))}
      </div>

      {/* Mix categories */}
      <div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {data.categories.map((c, i) => {
          const Ic = Icon[c.i] || Icon.Sparkles;
          return (
            <div key={c.k} className="rounded-3xl border border-bone-50/10 p-6 hover:border-accent/40 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">{c.k}</div>
              <p className="text-bone-50/55 text-[13px] mt-2 leading-relaxed">{c.d}</p>
              {c.share && (
                <div className="mt-4">
                  <div className="h-1 rounded-full bg-bone-50/10 overflow-hidden">
                    <div className="h-full bg-accent" style={{ width: `${c.share}%` }}/>
                  </div>
                  <div className="mt-2 text-[11px] tracking-[0.22em] uppercase text-bone-50/45">{c.share}% mix</div>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

// Closing CTA
const CDClose = ({ data, setPage }) => (
  <section className="py-20 sm:py-32 border-t border-bone-50/10 bg-ink-900/30">
    <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 / Lease</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>
);

function CommercialDetail({ data, setPage }) {
  useReveal();
  return (
    <main className="page-enter">
      <CDHero data={data} setPage={setPage}/>
      <CDThesis data={data}/>
      <CDUnits data={data}/>
      <CDMasterplan data={data}/>
      <CDLocation data={data}/>
      <CDAnchors data={data}/>
      <CDClose data={data} setPage={setPage}/>
    </main>
  );
}

window.CommercialDetail = CommercialDetail;