// Commercial page
const { motion: motionC } = Motion;
const EASE_C = [0.22, 1, 0.36, 1];

const COMMERCIAL = [
  {
    id: 'palm-marina',
    name: 'Palm Marina',
    tag: 'Mixed-Use Destination',
    one: 'A waterside commercial crown calibrated for footfall and prestige.',
    blurb: '400,000 sq.ft. of retail, dining, gaming and cinema on Canal Road, South City, Ludhiana.',
    variant: 1,
    metric: { v: '12.4 L', l: 'Projected annual footfall' },
    img: '/images/palm-marina-2.jpg',
  },
  {
    id: 'one-amg',
    name: 'One AMG',
    tag: 'Neighborhood Hub',
    one: 'A gentle commercial address woven into the daily life of a neighborhood.',
    blurb: 'Curated brand mix of fashion, food and daily-needs anchored in Dugri, Ludhiana.',
    variant: 3,
    metric: { v: '120+', l: 'Curated brand mix' },
    img: '/images/one-amg.jpg',
  },
];

const CommercialHero = ({ 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 · Commercial</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">
          Commerce as<br/><span className="italic text-accent-soft">civic theatre.</span>
        </h1>
        <div className="lg:col-start-9 lg:col-span-4 flex flex-wrap gap-3 justify-start lg:justify-end lg:pb-2">
          <PrimaryButton data-track="commercial-cta-investor-deck" onClick={() => { if (setPage) { setPage('contact'); window.scrollTo(0,0); } }}>Request Investor Deck</PrimaryButton>
        </div>
      </div>
    </div>
  </section>
);

const CommercialList = ({ setPage }) => (
  <section className="pb-24">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8 space-y-8">
      {COMMERCIAL.map((p, i) => {
        const open = () => { if (setPage) { setPage(p.id); window.scrollTo(0,0); } };
        const fromX = i % 2 === 0 ? -44 : 44;
        return (
          <motionC.article
            key={p.id}
            onClick={open}
            data-track={`commercial-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.1, ease: EASE_C }}
          >
            <motionC.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.1, ease: EASE_C }}
            >
              <motionC.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_C }}
              />
            </motionC.div>
            <motionC.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.1 + 0.1, ease: EASE_C }}
            >
              <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.TrendingUp size={13}/> {p.metric.v}
                  </span>
                  <span className="text-bone-50/40">{p.metric.l}</span>
                </div>
                <button onClick={(e)=>{e.stopPropagation();open();}} data-track={`commercial-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>
            </motionC.div>
          </motionC.article>
        );
      })}
    </div>
  </section>
);

function CommercialPage({ setPage }) {
  useReveal();
  return (
    <main className="page-enter">
      <CommercialHero setPage={setPage}/>
      <CommercialList setPage={setPage}/>
    </main>
  );
}

window.CommercialPage = CommercialPage;