// Leadership page

function LeadershipHero() {
  return (
    <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>Our Leaders</Eyebrow>
        </div>
        <h1 className="font-display text-[36px] sm:text-[56px] lg:text-[110px] leading-[0.96] tracking-tightest reveal">
          Two generations. <span className="italic text-accent-soft">One Goal.</span>
        </h1>
      </div>
    </section>
  );
}


function LeaderCard({ side, id, name, role, quote, body, image, meta, setPage }) {
  const imgRight = side === 'right';
  return (
    <article className="grid lg:grid-cols-12 gap-8 items-stretch reveal">
      <div className={`lg:col-span-5 ${imgRight ? 'lg:order-2' : ''}`}>
        <div className="relative rounded-3xl overflow-hidden border border-bone-50/10 aspect-[4/5]">
          <img src={image} alt={meta} className="absolute inset-0 w-full h-full object-cover object-top" />
          <div className="absolute inset-x-0 bottom-0 h-32" style={{ background: 'linear-gradient(to top, rgba(10,10,11,0.85), transparent)' }} />
          <div className="absolute left-5 bottom-5 text-[10px] uppercase tracking-[0.22em] text-bone-50/70">{meta}</div>
        </div>
      </div>
      <div className={`lg:col-span-7 glass-light rounded-3xl p-8 sm:p-10 flex flex-col justify-between ${imgRight ? 'lg:order-1' : ''}`}>
        <div>
          <div className="text-[11px] uppercase tracking-[0.22em] text-accent">{role}</div>
          <h2 className="font-display text-[26px] sm:text-[44px] lg:text-[64px] leading-[0.98] mt-4">{name}</h2>
          <div className="mt-8 relative">
            <Icon.Quote size={28} className="text-accent/70 mb-3" />
            <blockquote className="font-display text-[18px] sm:text-[24px] lg:text-[32px] leading-[1.18] text-bone-50/95 max-w-2xl">
              {quote}
            </blockquote>
          </div>
          <p className="mt-8 text-bone-50/60 text-[15px] leading-relaxed max-w-2xl">{body}</p>
        </div>
        <div className="mt-8 pt-6 border-t border-bone-50/10">
          <button
            onClick={() => { if (setPage) { setPage(id); window.scrollTo(0, 0); } }}
            className="btn inline-flex items-center gap-2 text-[12px] tracking-wide text-accent hover:text-accent-soft transition"
          >
            View full story <Icon.ArrowRight size={14} />
          </button>
        </div>
      </div>
    </article>
  );
}


function Leaders({ setPage }) {
  const ashokName = <span>Ashok Malhotra <span className="italic text-accent-soft"></span></span>;
  const ashokQuote = <span>Build for the family that will live in the building <span className="italic text-accent-soft"></span>forty years from now.</span>;
  const karanQuote = <span>Tier-2 cities are not <span className="italic text-accent-soft"></span>waiting for experiential retail. They are ready for the version we haven't yet imagined.</span>;
  return (
    <section className="pb-24 space-y-16">
      <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
        <LeaderCard
          side="left"
          id="ashok-malhotra"
          name={ashokName}
          role="Founder & Chairman"
          meta="Founder · Chairman"
          image="/images/ashok-malhotra.jpg"
          setPage={setPage}
          quote={ashokQuote}
          body="With over 40 years of industry experience, Mr. Malhotra has shaped a practice rooted in patience, craft, and a long view of the city. Every AMG township was designed to outlast trends and serve its community for generations."
        />
      </div>
      <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
        <LeaderCard
          side="right"
          id="karan-malhotra"
          name="Karan Malhotra"
          role="Managing Director"
          meta="MD · AMG"
          image="/images/karan-malhotra.jpg"
          setPage={setPage}
          quote={karanQuote}
          body="Karan leads AMG's shift toward experience-first commercial formats destinations engineered for dwell time, repeat visits, and brand co-creation. His conviction: Ludhiana doesn't need to settle for less."
        />
      </div>
    </section>
  );
}



function LeadershipPage({ setPage }) {
  useReveal();
  return (
    <main className="page-enter">
      <LeadershipHero />
      <Leaders setPage={setPage} />
    </main>
  );
}

window.LeadershipPage = LeadershipPage;