// Residential page
const { motion: motionR } = Motion;
const EASE_R = [0.22, 1, 0.36, 1];

const RESIDENTIAL = [
  {
    id: 'maurya-greens',
    name: 'Maurya Greens',
    tag: 'Luxury Township',
    one: 'A measured luxury — courtyards, light, and low horizons.',
    blurb: 'Gated luxury township on Pakhowal Road, Ludhiana. 32 acres, 200–500 sq.yd. plots, 52% open space, PUDA/GLADA approved.',
    variant: 2,
    img: '/images/maurya-greens.jpg',
  },
  {
    id: 'palm-garden',
    name: 'Palm Garden',
    tag: 'Mega Township',
    one: 'A self-contained township shaped around shaded walks and quiet greens.',
    blurb: '110-acre mega township on GT Road, Sahnewal — home to 500+ families. 1,000+ residential plots, villas, D-Mart, and immediate possession.',
    variant: 4,
    img: '/images/palm-garden-03.jpg',
  },
  {
    id: 'palm-city-2',
    name: 'Palm City',
    tag: 'Township',
    one: 'A PUDA-approved township where community and convenience meet on Chandigarh Road.',
    blurb: '46.09 acres in Village Kohara, Chandigarh Road, Ludhiana. Affordable plots, ample greens, essential amenities — bank loans available.',
    variant: 1,
    img: '/images/palm-city-1.jpg',
  },
  {
    id: 'palm-enclave',
    name: 'Palm Enclave',
    tag: 'Residential Colony',
    one: 'A Punjab Government-approved colony — quiet streets, green belts, secure living.',
    blurb: '9.98-acre colony on Sidhwan Canal Road, Sangowal. Well-planned plots with lush green belts and a guarded, serene environment.',
    variant: 2,
    img: '/images/palm-enclave-1.jpg',
  },
  {
    id: 'palm-city-ph-ii',
    name: 'Palm City Ph II',
    tag: 'Residential Township',
    one: 'A 45-acre gated residential township — plots, villas, and community living.',
    blurb: 'PUDA & RERA approved. 150–400 sq.yd. plots, independent villas, and group housing on Sidhwan Canal Road.',
    variant: 3,
    img: '/images/palm-city-ph-ii.jpg',
  },
];

const ResidentialHero = ({ setPage }) => (
  <section className="pt-28 sm:pt-40 pb-16">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="flex items-center justify-between flex-wrap gap-6 mb-10 reveal">
        <Eyebrow>Portfolio · Residential</Eyebrow>
      </div>
      <div className="grid lg:grid-cols-12 gap-6 items-end reveal">
        <h1 className="lg:col-span-7 font-display text-[38px] sm:text-[56px] lg:text-[90px] leading-[0.96] tracking-tightest">
          A <span className="italic text-accent-soft">slower</span><br/>kind of skyline.
        </h1>
        <div className="lg:col-start-9 lg:col-span-4 flex flex-wrap gap-3 justify-start lg:justify-end lg:pb-2">
          <button
            onClick={() => { if (setPage) { setPage('contact'); window.scrollTo(0,0); } }}
            data-track="residential-cta-inquiry"
            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"
          >
            Residential Enquiry <Icon.ArrowUpRight size={14}/>
          </button>
        </div>
      </div>
    </div>
  </section>
);

const ResidentialList = ({ setPage }) => (
  <section className="pb-24">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8 space-y-8">
      {RESIDENTIAL.map((p, i) => {
        const open = () => { if (setPage) { setPage(p.id); window.scrollTo(0,0); } };
        const fromX = i % 2 === 0 ? -44 : 44;
        return (
          <motionR.article
            key={p.id}
            onClick={open}
            data-track={`residential-card-${p.id}`}
            className={`grid lg:grid-cols-12 gap-6 items-stretch cursor-pointer ${i % 2 ? 'lg:[&>*:first-child]:order-2' : ''}`}
            initial={{ opacity: 0, y: 50 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.12 }}
            transition={{ duration: 0.72, delay: i * 0.08, ease: EASE_R }}
          >
            <motionR.div
              className="lg:col-span-7 relative overflow-hidden rounded-3xl"
              initial={{ opacity: 0, x: fromX }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true, amount: 0.12 }}
              transition={{ duration: 0.72, delay: i * 0.08, ease: EASE_R }}
            >
              <motionR.img src={p.img} alt={p.name}
                className={`img-card-${p.id} aspect-[16/10] w-full object-cover border border-bone-50/10`}
                whileHover={{ scale: 1.05 }}
                transition={{ duration: 0.5, ease: EASE_R }}
              />
            </motionR.div>
            <motionR.div
              className="lg:col-span-5 flex flex-col justify-between glass-light rounded-3xl p-8"
              initial={{ opacity: 0, x: -fromX }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true, amount: 0.12 }}
              transition={{ duration: 0.72, delay: i * 0.08 + 0.1, ease: EASE_R }}
            >
              <div>
                <div className="flex items-center gap-2 text-[10px] uppercase tracking-[0.22em] text-accent">
                  <Icon.Tag size={12}/> {p.tag}
                </div>
                <h3 className="font-display text-[22px] sm:text-[32px] lg:text-[44px] leading-[0.98] mt-5">{p.name}</h3>
                <p className="mt-5 text-bone-50/70 text-[15px] leading-relaxed">{p.one}</p>
                <p className="mt-4 text-bone-50/50 text-[14px] leading-relaxed">{p.blurb}</p>
              </div>
              <div className="mt-8 flex items-center justify-between pt-6 border-t border-bone-50/10">
                <div className="flex items-center gap-4 text-[12px] text-bone-50/55">
                  <span className="flex items-center gap-1.5"><Icon.Trees size={13}/> Walkable greens</span>
                  <span className="flex items-center gap-1.5"><Icon.Home size={13}/> Multi-typology</span>
                </div>
                <button onClick={(e)=>{e.stopPropagation();open();}} data-track={`residential-card-cta-${p.id}`} className="h-11 w-11 rounded-full grid place-items-center bg-bone-50 text-ink-950 hover:bg-accent-soft transition">
                  <Icon.ArrowUpRight size={15}/>
                </button>
              </div>
            </motionR.div>
          </motionR.article>
        );
      })}
    </div>
  </section>
);

function ResidentialPage({ setPage }) {
  useReveal();
  return (
    <main className="page-enter">
      <ResidentialHero setPage={setPage}/>
      <ResidentialList setPage={setPage}/>
    </main>
  );
}

window.ResidentialPage = ResidentialPage;