// News & Updates — AMG Group

// ── To add a new article: copy one object in ARTICLES, fill in your content,
//    and set a new unique id. Latest articles go at the top of the array.

const ARTICLES = [
  {
    id: 'palm-marina-update-2026',
    category: 'Construction Update',
    date: 'May 2026',
    title: 'Palm Marina: Structural Work Reaches Ground Floor',
    excerpt: 'Construction on Palm Marina — AMG\'s landmark mixed-use destination on Sidhwan Canal Road — has reached the ground floor slab. The 4-lakh sq.ft. project remains on schedule for delivery.',
    body: [
      'We are pleased to share that structural work on Palm Marina has progressed to the ground floor level. The lower ground slab has been completed and all major column grids are in place. Our construction partner has mobilised additional resources to maintain the project timeline.',
      'Palm Marina will house 200+ shops, an F&B pavilion, a premium cinema, and a 6-floor office tower when completed. The project is positioned to become the definitive commercial destination of Ludhiana — drawing visitors from across the city and beyond.',
      'Site visits are available by appointment. Contact our team to schedule a walkthrough or to receive the latest construction progress report.',
    ],
    image: '/images/marina-hero.jpg',
  },
  {
    id: 'amg-40-years',
    category: 'Group News',
    date: 'April 2026',
    title: 'AMG Marks 40 Years of Building Ludhiana',
    excerpt: 'In 1985, Ashok Malhotra started with a conviction: build for permanence. Four decades later, over 10,000 families call an AMG address home. We reflect on the journey.',
    body: [
      'Forty years ago, Ashok Malhotra Group was established in Ludhiana with a single operating principle — design for the long view. Where others built for the sales cycle, AMG built for the next generation of residents.',
      'Today, across 7 active developments spanning residential townships, mega commercial destinations, and neighbourhood hubs, AMG has delivered over 2.4 million square feet of real estate. Over 10,000 investor families have trusted the group across these four decades.',
      'As we enter our fifth decade, the group\'s commercial thesis is evolving under the leadership of Karan Malhotra — with Palm Marina representing the most ambitious project in AMG\'s history. We remain committed to the same principle that started it all: build something that lasts.',
    ],
    image: '/images/ashok-malhotra.jpg',
  },
  {
    id: 'one-amg-milestone',
    category: 'Project News',
    date: 'March 2026',
    title: 'One AMG, Dugri Achieves Near-Full Occupancy',
    excerpt: 'One AMG at Dugri, Ludhiana has welcomed its 120th brand partner — marking near-complete occupancy across all four retail levels. The neighbourhood hub is now a fully operational daily destination.',
    body: [
      'One AMG at Dugri has reached a significant milestone: near-full occupancy across its 1.4 lakh sq.ft. GLA. The project — designed as a curated neighbourhood hub rather than a conventional mall — has succeeded in attracting a mix of national chains, regional boutiques, wellness studios, and F&B operators.',
      'Footfall data from the past six months confirms that One AMG is performing above projections, with a strong repeat-visit rate driven by the F&B terrace and co-working floor.',
      'Investment opportunities for a small number of remaining commercial units are still available. Interested investors may contact the AMG sales team for details on current pricing, rental yields, and available floor plates.',
    ],
    image: '/images/one-amg.jpg',
  },
  {
    id: 'palm-garden-possession',
    category: 'Residential',
    date: 'February 2026',
    title: 'Palm Garden: Bank Financing Now Available from 3 Lenders',
    excerpt: 'AMG has formalised tie-ups with three leading banks for home loan financing at Palm Garden, Sahnewal. Buyers can now access competitive rates for plots, villas, and group housing units.',
    body: [
      'We are pleased to announce that AMG has finalised financing partnerships with three leading banks for Palm Garden, Sahnewal. Buyers looking to invest in our 110-acre mega township can now access pre-approved home loans at competitive interest rates with streamlined processing.',
      'Palm Garden currently offers over 1,000 residential plots (200–1,000 sq.yd.), independent villas, and two group housing complexes — all with immediate possession. D-Mart is operational within the township, and the community is home to over 500 families.',
      'To schedule a site visit or inquire about financing options, please contact our Ludhiana office at +91 70872-15304.',
    ],
    image: '/images/palm-garden-hero.jpg',
  },
];

// ── Article detail modal ──────────────────────────────────────────────────────
const ArticleModal = ({ article, onClose }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [onClose]);

  return (
    <div
      className="fixed inset-0 z-50 overflow-y-auto"
      style={{ background: 'rgba(10,10,11,0.75)', backdropFilter: 'blur(8px)' }}
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div className="flex min-h-full items-center justify-center p-4 sm:p-8" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div
        className="relative w-full max-w-2xl force-dark-palette rounded-3xl overflow-hidden"
        style={{ background: '#141416', border: '1px solid rgba(250,248,244,0.10)' }}
      >
        {article.image && (
          <div className="aspect-[16/7] relative overflow-hidden">
            <img src={article.image} alt={article.title} className="absolute inset-0 w-full h-full object-cover"/>
            <div className="absolute inset-0" style={{ background: 'linear-gradient(to bottom, rgba(10,10,11,0.1), rgba(20,20,22,1))' }}/>
          </div>
        )}
        <div className="p-8 sm:p-10">
          <div className="flex items-center gap-3 mb-5">
            <span className="text-[10px] uppercase tracking-[0.22em] text-accent">{article.category}</span>
            <span className="h-1 w-1 rounded-full bg-bone-50/20"/>
            <span className="text-[10px] uppercase tracking-[0.22em] text-bone-50/40">{article.date}</span>
          </div>
          <h2 className="font-display text-[30px] sm:text-[38px] leading-[1.05] tracking-tightest text-bone-50 mb-6">
            {article.title}
          </h2>
          <div className="space-y-4">
            {article.body.map((para, i) => (
              <p key={i} className={`leading-relaxed ${i === 0 ? 'text-bone-50/75 text-[15px]' : 'text-bone-50/60 text-[14px]'}`}>
                {para}
              </p>
            ))}
          </div>
          <div className="mt-10 pt-8 border-t border-bone-50/10 flex items-center justify-between">
            <span className="text-[12px] text-bone-50/35 uppercase tracking-[0.18em]">Ashok Malhotra Group</span>
            <button
              onClick={onClose}
              className="text-[12px] uppercase tracking-[0.18em] text-bone-50/50 hover:text-bone-50 transition flex items-center gap-2"
            >
              <Icon.X size={14}/> Close
            </button>
          </div>
        </div>
      </div>
      </div>
    </div>
  );
};

// ── Article card ──────────────────────────────────────────────────────────────
const ArticleCard = ({ article, onClick }) => (
  <article
    className="glass-light rounded-3xl overflow-hidden cursor-pointer hover:bg-bone-50/[0.05] transition group"
    onClick={onClick}
  >
    {article.image && (
      <div className="aspect-[16/9] overflow-hidden">
        <img src={article.image} alt={article.title} className="w-full h-full object-cover group-hover:scale-[1.02] transition duration-700"/>
      </div>
    )}
    <div className="p-6 sm:p-8">
      <div className="flex items-center gap-3 mb-4">
        <span className="text-[10px] uppercase tracking-[0.22em] px-2.5 py-1 rounded-full border border-accent/30 text-accent bg-accent/5">
          {article.category}
        </span>
        <span className="text-[10px] uppercase tracking-[0.18em] text-bone-50/35">{article.date}</span>
      </div>
      <h3 className="font-display text-[22px] sm:text-[26px] leading-[1.1] tracking-tightest text-bone-50 mb-3">
        {article.title}
      </h3>
      <p className="text-bone-50/55 text-[13.5px] leading-relaxed line-clamp-3">{article.excerpt}</p>
      <div className="mt-5 flex items-center gap-2 text-accent text-[12px] uppercase tracking-[0.18em] group-hover:gap-3 transition-all">
        Read article <Icon.ArrowRight size={13}/>
      </div>
    </div>
  </article>
);

// ── Page ──────────────────────────────────────────────────────────────────────
function NewsPage({ setPage }) {
  const [active, setActive] = React.useState(null);
  useReveal();

  return (
    <main className="page-enter">

      {/* Hero */}
      <section className="pt-28 sm:pt-40 pb-20">
        <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
          <div className="reveal">
            <Eyebrow>AMG · News &amp; Updates</Eyebrow>
          </div>
          <h1 className="font-display text-[28px] sm:text-[64px] lg:text-[130px] leading-[0.94] tracking-tightest mt-6 reveal">
            What's happening<br/><span className="italic text-accent-soft">at AMG.</span>
          </h1>
          <p className="mt-6 text-bone-50/60 text-[16px] leading-relaxed max-w-xl reveal">
            Construction updates, project milestones, investment news, and group announcements — all in one place.
          </p>
        </div>
      </section>

      {/* Articles grid */}
      <section className="pb-32">
        <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
          <div className="grid md:grid-cols-2 gap-6 reveal">
            {ARTICLES.map((a) => (
              <ArticleCard key={a.id} article={a} onClick={() => setActive(a)}/>
            ))}
          </div>

          {ARTICLES.length === 0 && (
            <div className="text-center py-32 text-bone-50/40 text-[15px]">
              No articles yet — check back soon.
            </div>
          )}
        </div>
      </section>

      {/* Newsletter signup strip */}
      <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">
          <div className="grid lg:grid-cols-12 gap-8 items-center reveal">
            <div className="lg:col-span-6">
              <Eyebrow>Stay Informed</Eyebrow>
              <h2 className="font-display text-[22px] sm:text-[36px] lg:text-[48px] leading-[1.02] tracking-tightest mt-4">
                Get updates<br/><span className="italic text-accent-soft">before the public.</span>
              </h2>
            </div>
            <div className="lg:col-span-5 lg:col-start-8 flex flex-col sm:flex-row gap-3">
              <button
                onClick={() => setPage('contact')}
                className="btn flex-1 rounded-full bg-bone-50 text-ink-950 px-6 py-4 text-[13px] font-medium tracking-wide hover:bg-accent-soft inline-flex items-center justify-center gap-2"
              >
                Join Our Mailing List <Icon.ArrowUpRight size={14}/>
              </button>
              <a
                href="https://wa.me/918968566656?text=Hi%2C%20please%20add%20me%20to%20AMG%20updates."
                target="_blank"
                rel="noopener noreferrer"
                className="btn rounded-full border border-bone-50/30 text-bone-50 px-6 py-4 text-[13px] font-medium tracking-wide hover:bg-bone-50/10 inline-flex items-center justify-center gap-2"
              >
                <Icon.WhatsApp size={14}/> WhatsApp Updates
              </a>
            </div>
          </div>
        </div>
      </section>

      {active && <ArticleModal article={active} onClose={() => setActive(null)}/>}
    </main>
  );
}

window.NewsPage = NewsPage;
