// Karan Malhotra — Managing Director profile

const KARAN_TIMELINE = [
  { year: '2010', title: 'Entry into AMG', body: 'Joined the family business with a focus on commercial strategy, bringing a new perspective on how Tier-2 cities consume retail and entertainment.' },
  { year: '2015', title: 'Director — Commercial', body: 'Took over commercial portfolio oversight. Began research into why Ludhiana\'s shoppers drove to Chandigarh for experience — and how to change that.' },
  { year: '2018', title: 'The Experience Thesis', body: 'Formulated AMG\'s commercial philosophy: design for dwell time, not just footfall. Retailers don\'t sign leases for buildings — they sign for crowds that stay.' },
  { year: '2020', title: 'Palm Marina — Conceived', body: 'Initiated the Palm Marina project on Canal Road — 400,000 sq.ft. of mixed-use retail, dining, cinema and gaming. The largest commercial destination AMG has undertaken.' },
  { year: '2022', title: 'One AMG — Launched', body: 'Launched One AMG at Dugri — a neighbourhood hub proving that convenience and curation aren\'t opposites. 120+ brands, 180 m frontage, woven into daily life.' },
  { year: '2024', title: 'Managing Director', body: 'Appointed Managing Director of Ashok Malhotra Group. Now leading the group\'s full commercial and strategic agenda as Palm Marina moves toward completion.' },
];

const KARAN_PROJECTS = [
  { name: 'Palm Marina', tag: 'Mixed-Use Destination' },
  { name: 'One AMG', tag: 'Neighbourhood Hub' },
];

function KaranMalhotraPage({ setPage }) {
  useReveal();
  return (
    <main className="page-enter">

      {/* ── Hero ── */}
      <section className="pt-32 pb-12">
        <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
          <button
            onClick={() => { setPage('leadership'); window.scrollTo(0,0); }}
            className="mb-14 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}/> Leadership
          </button>

          <div className="reveal">
            <div className="text-[11px] uppercase tracking-[0.22em] text-accent mb-5">Managing Director · AMG</div>
            <h1 className="font-display text-[48px] sm:text-[80px] lg:text-[110px] leading-[0.92] tracking-tightest">
              Karan <span className="italic text-accent-soft">Malhotra.</span>
            </h1>
          </div>
        </div>
      </section>

      {/* ── Portrait + Bio ── */}
      <section className="py-16">
        <div className="mx-auto max-w-[1320px] px-5 sm:px-8 grid lg:grid-cols-12 gap-10 items-start">
          <div className="lg:col-span-4 reveal">
            <div className="relative rounded-3xl overflow-hidden border border-bone-50/10 aspect-[3/4]">
              <img src="/images/karan-malhotra.jpg" alt="Karan Malhotra" className="img-portrait-karan-malhotra absolute inset-0 w-full h-full object-cover object-top"/>
              <div className="absolute inset-x-0 bottom-0 h-24" style={{ background: 'linear-gradient(to top, rgba(10,10,11,0.8), transparent)' }}/>
              <div className="absolute left-5 bottom-5 text-[10px] uppercase tracking-[0.22em] text-bone-50/70">Managing Director</div>
            </div>

          </div>

          <div className="lg:col-span-8 space-y-6 reveal">
            <div className="text-[11px] uppercase tracking-[0.22em] text-accent mb-2">The Next Chapter</div>
            <p className="text-bone-50/75 text-[16px] leading-relaxed">
              Karan Malhotra grew up watching Ludhiana outgrow its infrastructure — a city of enormous appetite waiting for destinations worthy of it. When he joined the family business in 2010, he carried a single question: why do Ludhiana's most discerning families drive three hours to Chandigarh for an evening out?
            </p>
            <p className="text-bone-50/65 text-[15px] leading-relaxed">
              The answer, he concluded, was not purchasing power. It was product. Ludhiana had shops. It needed destinations. That insight shaped everything that followed — a pivot toward experience-first commercial formats that design for the second hour, not just the first visit.
            </p>
            <p className="text-bone-50/65 text-[15px] leading-relaxed">
              Palm Marina is that thesis at scale. Positioned on Sidhwan Canal Road, it combines 400,000 sq.ft. of retail, fine dining, al-fresco terraces, craft brewing, gaming and a premium cinema under one address. It is designed not to serve a catchment, but to become one — a destination that pulls from across the city and beyond.
            </p>
            <p className="text-bone-50/65 text-[15px] leading-relaxed">
              As Managing Director, Karan oversees AMG's full commercial portfolio and strategic direction — bringing his father's patience for quality together with a sharper, data-led read on how modern retail evolves. Two generations, one operating philosophy.
            </p>
          </div>
        </div>
      </section>

      {/* ── Timeline ── */}
      <section className="py-20 border-y border-bone-50/10 bg-ink-900/30">
        <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
          <SectionTitle kicker="Career Arc" title={<>From insight{' '}<span className="italic text-accent-soft">to destination.</span></>}/>
          <div className="mt-14 space-y-0">
            {KARAN_TIMELINE.map((m, i) => (
              <div key={i} className="grid lg:grid-cols-12 gap-6 border-t border-bone-50/10 py-8 reveal group">
                <div className="lg:col-span-2">
                  <div className="font-display text-[42px] leading-none text-accent-soft">{m.year}</div>
                </div>
                <div className="lg:col-span-10">
                  <div className="font-display text-[22px] mb-3 text-bone-50">{m.title}</div>
                  <p className="text-bone-50/60 text-[15px] leading-relaxed max-w-2xl">{m.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Projects led ── */}
      <section className="py-20">
        <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
          <SectionTitle kicker="Commercial Portfolio" title={<>Projects he{' '}<span className="italic text-accent-soft">conceived.</span></>}/>
          <div className="mt-10 flex flex-wrap gap-3 reveal">
            {KARAN_PROJECTS.map((p) => (
              <div key={p.name} className="rounded-2xl border border-bone-50/10 px-6 py-4 hover:border-accent/40 transition">
                <div className="font-display text-[18px]">{p.name}</div>
                <div className="text-[10px] uppercase tracking-[0.22em] text-accent mt-1">{p.tag}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Close ── */}
      <section className="py-20 border-t border-bone-50/10 bg-ink-900/30">
        <div className="mx-auto max-w-[1320px] px-5 sm:px-8 text-center reveal">
          <div className="font-display text-[40px] sm:text-[60px] leading-[1.05] max-w-2xl mx-auto">
            Tier-2 cities don't need to wait.{' '}
            <span className="italic text-accent-soft">They never did.</span>
          </div>
          <div className="mt-8 flex items-center justify-center gap-4 flex-wrap">
            <button
              onClick={() => { setPage('ashok-malhotra'); window.scrollTo(0,0); }}
              className="btn rounded-full border border-bone-50/20 text-bone-50 px-6 py-3.5 text-[13px] font-medium hover:border-bone-50/40 inline-flex items-center gap-2"
            >
              <Icon.Users size={14}/> Meet Ashok Malhotra
            </button>
          </div>
        </div>
      </section>

    </main>
  );
}

window.KaranMalhotraPage = KaranMalhotraPage;