// Ashok Malhotra — Founder & Chairman profile

const ASHOK_TIMELINE = [
  { year: '1984', title: 'The Foundation', body: 'Established Ashok Malhotra Group in Ludhiana with a single conviction — that good real estate outlasts every market cycle.' },
  { year: '1992', title: 'Palm City — Phase I', body: 'Delivered Ludhiana\'s first planned residential township. Thousands of families chose Palm City as their permanent address, validating the long-view approach.' },
  { year: '2004', title: 'Palm Heights', body: 'Entered the commercial segment with Palm Heights — a factory outlet and retail promenade on Sidhwan Canal Road that defined Ludhiana\'s retail geography.' },
  { year: '2010', title: 'Palm Garden', body: 'Launched Palm Garden on GT Road, Sahnewal — a mega township anchored by everyday convenience and surrounded by mature greens, now home to 500+ families.' },
  { year: '2015', title: 'Maurya Greens', body: 'Conceived Maurya Greens, a plotted luxury township on 32 acres with 52% open space — a deliberate step toward lower density and higher liveability.' },
  { year: '2020', title: 'Palm City Ph II', body: 'Extended the Palm City address with a second phase — 45 acres, PUDA & RERA approved, delivering the same community DNA for a new generation of buyers.' },
];

const ASHOK_PROJECTS = [
  { name: 'Palm City', tag: 'Residential Township' },
  { name: 'Palm City Ph II', tag: 'Residential Township' },
  { name: 'Palm Garden', tag: 'Mega Township' },
  { name: 'Maurya Greens', tag: 'Luxury Township' },
  { name: 'Palm Heights', tag: 'Commercial' },
];

function AshokMalhotraPage({ 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">Founder &amp; Chairman · AMG</div>
            <h1 className="font-display text-[48px] sm:text-[80px] lg:text-[110px] leading-[0.92] tracking-tightest">
              Ashok <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/ashok-malhotra.jpg" alt="Ashok Malhotra" className="img-portrait-ashok-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">Founder · Chairman</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 Journey</div>
            <p className="text-bone-50/75 text-[16px] leading-relaxed">
              Four decades ago, Ashok Malhotra started with a plot of land in Ludhiana and a conviction that most developers lack — the willingness to wait. To hold land until the right brief arrived. To build a road before the first brick of the project. To plant trees before the first family moved in.
            </p>
            <p className="text-bone-50/65 text-[15px] leading-relaxed">
              That patience compounded. Palm City became one of Ludhiana's most cherished addresses — not because of its brochure, but because the streets were wide enough for children to cycle on, the greens were real, and the neighbours were chosen carefully. A thousand families built their lives there.
            </p>
            <p className="text-bone-50/65 text-[15px] leading-relaxed">
              Over the following decades, Mr. Malhotra extended that same philosophy to commercial real estate. Palm Heights proved that Ludhiana's shoppers deserved a destination worth driving to — not just a strip of shops. Palm Garden brought the township model to a new arterial. And through it all, the operating principle never changed: design for permanence, not the next quarter's sales cycle.
            </p>
            <p className="text-bone-50/65 text-[15px] leading-relaxed">
              Today, as the group enters its fifth decade, he continues to serve as Chairman, guiding strategy and setting the tone of every new project — particularly as AMG moves into experiential commercial formats under the next generation of leadership.
            </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="Four Decades" title={<>A timeline of{' '}<span className="italic text-accent-soft">conviction.</span></>}/>
          <div className="mt-14 space-y-0">
            {ASHOK_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 championed ── */}
      <section className="py-20">
        <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
          <SectionTitle kicker="Legacy Portfolio" title={<>Projects shaped by{' '}<span className="italic text-accent-soft">his hand.</span></>}/>
          <div className="mt-10 flex flex-wrap gap-3 reveal">
            {ASHOK_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">
            The conviction that started in 1984{' '}
            <span className="italic text-accent-soft">still runs the group today.</span>
          </div>
          <div className="mt-8 flex items-center justify-center gap-4 flex-wrap">
            <button
              onClick={() => { setPage('karan-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 Karan Malhotra
            </button>
          </div>
        </div>
      </section>

    </main>
  );
}

window.AshokMalhotraPage = AshokMalhotraPage;