// Our Story — About page

const AboutHero = () => (
  <section className="relative min-h-[60vh] pt-28 sm:pt-40 pb-16 sm:pb-28 overflow-hidden flex items-center force-dark-palette">
    <div className="absolute inset-0 -z-10">
      <img src="/images/marina-hero.jpg" alt="AMG real estate landmark development in Ludhiana — Ashok Malhotra Group, founded 1985" className="absolute inset-0 w-full h-full object-cover" />
      <div className="absolute inset-0 bg-black/65" />
      <div className="absolute inset-0 grain" />
    </div>
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8 relative">
      <div className="reveal">
        <Eyebrow>The Group · Since 1985</Eyebrow>
      </div>
      <h1 className="text-[38px] sm:text-[64px] lg:text-[130px] leading-[0.94] tracking-tightest text-bone-50 mt-6 reveal" style={{fontFamily:'var(--font-hero)'}}>
        Four decades of<br/>
        <span className="italic text-accent-soft">building Ludhiana.</span>
      </h1>
      <p className="mt-8 text-bone-50/65 text-[16px] leading-relaxed max-w-xl reveal">
        From a single practice in 1985 to one of Ludhiana's most considered portfolios — every development composed for the long view.
      </p>
    </div>
  </section>
);

const ValuesBlock = () => (
  <section className="py-16 sm:py-28">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="grid lg:grid-cols-12 gap-10 items-start">
        <div className="lg:col-span-5 reveal">
          <SectionTitle
            kicker="Our Values"
            title={<>A premier group,<br/>built on <span className="italic text-accent-soft">trust.</span></>}
          />
        </div>
        <div className="lg:col-span-6 lg:col-start-7 reveal">
          <p className="text-bone-50/60 text-[15px] leading-relaxed">
            Ashok Malhotra Group (AMG) is a premier real estate development company dedicated to creating world-class commercial and residential properties. With a deep understanding of market trends and customer needs, AMG designs and delivers high-quality, sustainable, and innovative real estate solutions.
          </p>
          <div className="mt-10 grid grid-cols-2 gap-6">
            <div className="border-l border-bone-50/15 pl-5">
              <div className="font-display text-[40px] leading-none">40<span className="text-accent-soft">+</span></div>
              <div className="mt-2 text-[11px] uppercase tracking-[0.22em] text-bone-50/45">Years of practice</div>
            </div>
            <div className="border-l border-bone-50/15 pl-5">
              <div className="font-display text-[40px] leading-none">2.4M</div>
              <div className="mt-2 text-[11px] uppercase tracking-[0.22em] text-bone-50/45">Sq. ft. delivered</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const LegacyBlock = () => (
  <section className="py-20 border-t border-bone-50/10">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="grid lg:grid-cols-12 gap-10 items-center">
        <div className="lg:col-span-5 reveal">
          <Eyebrow>Legacy</Eyebrow>
          <h3 className="font-display text-[24px] sm:text-[36px] lg:text-[52px] leading-[1.02] tracking-tightest mt-5">
            Transforming the real estate <span className="italic text-accent-soft">landscape.</span>
          </h3>
          <p className="mt-6 text-bone-50/60 text-[15px] leading-relaxed">
            From upscale residential communities to dynamic commercial spaces, AMG has transformed the real estate industry with high-quality, future-ready developments. Our commitment to reliability and customer satisfaction has made us a trusted name in the market.
          </p>
        </div>
        <div className="lg:col-span-6 lg:col-start-7 reveal">
          <img
            src="/images/one-amg.jpg"
            className="rounded-3xl border border-bone-50/10 w-full object-cover aspect-[4/3]"
            alt="One AMG"
          />
        </div>
      </div>
    </div>
  </section>
);

const TrustBlock = () => (
  <section className="py-20 border-t border-bone-50/10">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="grid lg:grid-cols-12 gap-10 items-center">
        <div className="lg:col-span-6 reveal">
          <img
            src="/images/marina-hero.jpg"
            className="rounded-3xl border border-bone-50/10 w-full object-cover aspect-[4/3]"
            alt="Palm Marina"
          />
        </div>
        <div className="lg:col-span-5 lg:col-start-8 reveal">
          <Eyebrow>Trust</Eyebrow>
          <h3 className="font-display text-[24px] sm:text-[36px] lg:text-[52px] leading-[1.02] tracking-tightest mt-5">
            Pillars of <span className="italic text-accent-soft">integrity.</span>
          </h3>
          <p className="mt-6 text-bone-50/60 text-[15px] leading-relaxed">
            Integrity, innovation, sustainability, and customer focus are the pillars of AMG. We are dedicated to delivering premium real estate solutions that offer long-term value while shaping the future of urban living and business infrastructure.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const COMPANIES = [
  'Amgeco Infrastructure Pvt. Ltd.',
  'Malhotra Land Developers and Colonizers Pvt. Ltd.',
  'Punnu Land Developers Pvt. Ltd.',
  'AKM Developers Pvt. Ltd.',
  'Rasoi Developers Pvt. Ltd.',
  'Malhotra Brothers',
  'EK Developers Pvt. Ltd.',
  'New Vision Land Developers LLP',
  'Karan Malhotra Realty LLP',
];

const GroupCompanies = () => (
  <section className="py-16 sm:py-28 border-t border-bone-50/10 bg-ink-900/30">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="reveal">
        <SectionTitle
          kicker="Group of Companies"
          title={<>Ashok Malhotra<br/>Group of Companies</>}
        />
      </div>
      <p className="mt-6 text-bone-50/60 text-[15px] leading-relaxed max-w-2xl reveal">
        Ashok Malhotra Group of Companies is engaged in the development of Real Estate and comprises the following companies:
      </p>
      <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-3 reveal">
        {COMPANIES.map((c, i) => (
          <div key={c} className="glass-light rounded-2xl px-5 py-4 flex items-center gap-4">
            <div className="shrink-0 text-[10px] tracking-[0.22em] text-accent/70 font-mono">0{i + 1}</div>
            <div className="text-bone-50/80 text-[13.5px] leading-snug">{c}</div>
          </div>
        ))}
      </div>
      <p className="mt-10 text-bone-50/55 text-[14px] leading-relaxed max-w-3xl reveal">
        Ashok Malhotra Group is a chain of well planned, self-sufficient, high-quality townships in Ludhiana. Those townships have been planned on 10 acres to 200 acres of land. The Group has fully developed infrastructure with easy access to all amenities — providing leisure and happiness, amusement and pleasure, a boost of energy, and peace of mind to the residents of their colonies.
      </p>
    </div>
  </section>
);

const WHO_WE_ARE = [
  { name: 'Ashok Malhotra', role: 'Chairman & Managing Director', tag: 'CMD', variant: 1, meta: 'Founder · 40+ years', image: '/images/ashok-malhotra.jpg', page: 'ashok-malhotra', imgPos: 'center 20%' },
  { name: 'Karan Malhotra', role: 'Managing Director', tag: 'MD', variant: 3, meta: 'MD · AMG', image: '/images/karan-malhotra.jpg', page: 'karan-malhotra', imgPos: 'center 10%' },
];

const WhoWeAre = ({ setPage }) => (
  <section className="py-16 sm:py-28 border-t border-bone-50/10">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="reveal mb-14">
        <SectionTitle
          kicker="Who We Are"
          title={<>Guided by visionary<br/><span className="italic text-accent-soft">leadership.</span></>}
        />
      </div>
      <div className="grid md:grid-cols-2 gap-6 reveal">
        {WHO_WE_ARE.map((l) => (
          <div key={l.name} className="glass-light rounded-3xl overflow-hidden cursor-pointer group" onClick={() => setPage(l.page)}>
            <div className="relative aspect-[4/3] overflow-hidden">
              <img src={l.image} alt={l.name} className={`img-about-${l.name.toLowerCase().replace(/\s+/g,'-')} absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105`} style={{objectPosition: l.imgPos}}/>
              <div className="absolute inset-x-0 bottom-0 h-20" 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">{l.meta}</div>
            </div>
            <div className="p-8 flex items-end justify-between">
              <div>
                <div className="text-[11px] uppercase tracking-[0.22em] font-medium" style={{color:'var(--accent)'}}>{l.tag} · {l.role}</div>
                <div className="font-display text-[36px] leading-[1.02] mt-3">{l.name}</div>
              </div>
              <div className="h-9 w-9 rounded-full border border-bone-50/15 grid place-items-center text-bone-50/55 group-hover:text-bone-50 group-hover:border-bone-50/40 transition flex-shrink-0">
                <Icon.ArrowUpRight size={14}/>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

function AboutPage({ setPage }) {
  useReveal();
  return (
    <main className="page-enter">
      <AboutHero />
      <ValuesBlock />
      <LegacyBlock />
      <TrustBlock />
      <GroupCompanies />
      <WhoWeAre setPage={setPage}/>
    </main>
  );
}

window.AboutPage = AboutPage;