src/pages/Home.jsx

import React, { useMemo } from 'react';
import Hero from '../components/Hero.jsx';
import Reveal from '../components/Reveal.jsx';
import ServicesGrid from '../components/ServicesGrid.jsx';
import StatsCounter from '../components/StatsCounter.jsx';
import ProjectCard from '../components/ProjectCard.jsx';
import ImageFlex from '../components/ImageFlex.jsx';
import { Link } from 'react-router-dom';
import { ALL_PROJECTS } from './Projects.jsx';

/**
 * Algorithm to select featured projects:
 * 1. Prioritize ongoing projects, if they don't fill all slots, add recently completed projects
 * 2. If ongoing projects exceed slots, prioritize by project size (sq.ft.)
 * 3. Exclude Construction section projects
 * 4. Return exactly the requested count
 */
function getFeaturedProjects(count = 3) {
  // Filter out Construction section projects
  const eligible = ALL_PROJECTS.filter((p) => p.section?.toLowerCase() !== 'construction');

  // Separate Ongoing and Completed projects
  const ongoing = eligible.filter((p) => p.status === 'Ongoing');
  const completed = eligible.filter((p) => p.status === 'Completed');

  // Helper to extract numeric value from projectSize (e.g., "50,000 sq.ft." -> 50000)
  const getSizeValue = (projectSize) => {
    if (!projectSize) return 0;
    const match = projectSize.toString().replace(/,/g, '').match(/(\d+)/);
    return match ? parseInt(match[1], 10) : 0;
  };

  // Sort Ongoing by project size (biggest first)
  const sortedOngoing = [...ongoing].sort((a, b) => {
    const sizeA = getSizeValue(a.projectSize);
    const sizeB = getSizeValue(b.projectSize);
    return sizeB - sizeA; // Descending order
  });

  // Sort Completed by completion date (most recent first)
  const sortedCompleted = [...completed].sort((a, b) => {
    const dateA = a.completionDate ? parseInt(a.completionDate, 10) : 0;
    const dateB = b.completionDate ? parseInt(b.completionDate, 10) : 0;
    return dateB - dateA; // Descending order (most recent first)
  });

  // Select featured projects
  const featured = [];
  
  // First, add ongoing projects (up to count)
  featured.push(...sortedOngoing.slice(0, count));
  
  // If we need more, add recently completed projects
  if (featured.length < count) {
    const remaining = count - featured.length;
    featured.push(...sortedCompleted.slice(0, remaining));
  }

  return featured.slice(0, count);
}

export default function Home() {
  // Get featured projects using the algorithm
  const featuredProjects = useMemo(() => getFeaturedProjects(3), []);

  return (
    <>
      <Hero />

      {/* Featured Projects - overlapping hero banner */}
      <section className="section relative -mt-10 md:-mt-14 lg:-mt-16 z-20" aria-labelledby="featured-heading">
        <div className="container">
          <header className="mb-10 text-center">
            <h2 id="featured-heading" className="h2">Featured Projects</h2>
            <p className="lead mt-3">
              A snapshot of our recent residential and commercial work.
            </p>
          </header>
          <ul className="grid grid-cols-1 gap-6 md:grid-cols-3">
            {featuredProjects.map((p, i) => (
              <li key={p.slug}>
                <Reveal delay={i * 80}>
                  <ProjectCard project={p} />
                </Reveal>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <section className="section" aria-labelledby="stats-heading">
        <div className="container">
          <Reveal>
            <header className="mb-10 text-center">
              <h2 id="stats-heading" className="h2">Our Track Record</h2>
              <p className="lead mt-3">Numbers that reflect our commitment and scale.</p>
            </header>
          </Reveal>
          <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
            <Reveal delay={0}>
              <StatsCounter value={75} label="Projects Delivered" suffix="+" accent />
            </Reveal>
            <Reveal delay={100}>
              <StatsCounter value={6} label="Ongoing Projects" accent />
            </Reveal>
            <Reveal delay={200}>
              <StatsCounter value={38} label="Years of Experience" suffix="+" accent />
            </Reveal>
            <Reveal delay={300}>
              <StatsCounter value={3.8} label="sq.ft. delivered" suffix="+ Million" accent decimals={1} />
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section relative z-10 bg-gradient-to-b from-white to-slate-50" aria-labelledby="about-home-heading" style={{ marginTop: 0 }}>
        <div className="container">
          <Reveal>
            <div className="mb-4 inline-block rounded-full bg-brand-100 px-4 py-1.5 text-sm font-semibold text-brand-700">
              Building Trust Since 1987
            </div>
            <h2 id="about-home-heading" className="h2 mb-6">About Jade Infra</h2>
          </Reveal>
          <div className="grid items-center gap-10 md:grid-cols-2">
            <Reveal>
              <p className="text-lg leading-relaxed text-slate-700">
                For over three decades, Jade Infra has been a cornerstone of the infrastructure and real estate landscape. 
                Founded on principles of integrity and engineering excellence, we have grown from a specialized construction 
                contractor to a holistic developer, manager, and redeveloper of commercial and residential assets.
              </p>
              <p className="mt-4 text-lg leading-relaxed text-slate-700">
                With over <strong className="text-brand-700">75 successful projects</strong> (25+ developed, 70+ contracted) to our name, 
                we pride ourselves on a proven track record of delivering quality, guaranteeing value, and fostering long-term 
                trust with every stakeholder.
              </p>
              <div className="mt-6">
                <Link to="/about" className="btn btn-primary">Learn more</Link>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <div className="card overflow-hidden shadow-lg">
                <div className="relative w-full bg-white/80">
                  <div className="aspect-[4/3] md:aspect-[3/2]">
                    <ImageFlex
                      base="/assets/rbtojade"
                      alt="Jade Infra - Building Trust Since 1987"
                      className="h-full w-full object-contain"
                    />
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section bg-slate-50" aria-labelledby="bvv-heading">
        <div className="container">
          <header className="mb-12 text-center">
            <h2 id="bvv-heading" className="h2">Vision, Mission & Values</h2>
            <p className="lead mt-3">The principles that guide everything we do</p>
          </header>
          <div className="grid gap-8 md:grid-cols-3">
            <Reveal>
              <section className="card p-8 bg-white hover:shadow-lg transition-shadow" aria-labelledby="vision-title">
                <div className="mb-4 flex items-center gap-3">
                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-100">
                    <svg className="h-6 w-6 text-brand-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                  </div>
                  <h3 id="vision-title" className="h3">Vision</h3>
                </div>
                <p className="mt-4 leading-relaxed text-slate-700">
                  To be the leading and most trusted integrated real estate and infrastructure group, known for transforming 
                  urban landscapes and consistently setting the benchmark for quality, sustainability, and value creation 
                  in every project we undertake.
                </p>
              </section>
            </Reveal>
            <Reveal delay={80}>
              <section className="card p-8 bg-white hover:shadow-lg transition-shadow" aria-labelledby="mission-title">
                <div className="mb-4 flex items-center gap-3">
                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-slate-900">
                    <svg className="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                  </div>
                  <h3 id="mission-title" className="h3">Mission</h3>
                </div>
                <p className="mt-4 leading-relaxed text-slate-700">
                  To deliver superior value across all our services, from strategic Land Development and large-scale 
                  Construction Management to community-focused Redevelopment. We achieve this by committing to engineering 
                  precision, financial transparency, and timely delivery, ensuring the security and satisfaction of our 
                  clients and partners.
                </p>
              </section>
            </Reveal>
            <Reveal delay={160}>
              <section className="card p-8 bg-white hover:shadow-lg transition-shadow" aria-labelledby="values-title">
                <div className="mb-4 flex items-center gap-3">
                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-accent/10">
                    <svg className="h-6 w-6 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                  </div>
                  <h3 id="values-title" className="h3">Values</h3>
                </div>
                <div className="mt-4 space-y-3">
                  <div className="flex items-start gap-2">
                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-600"></span>
                    <p className="text-sm leading-relaxed text-slate-700">
                      <strong className="text-slate-900">Integrity:</strong> Operating with complete honesty and transparency to build mutual trust.
                    </p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-600"></span>
                    <p className="text-sm leading-relaxed text-slate-700">
                      <strong className="text-slate-900">Engineering Excellence:</strong> Committing to the highest standards of quality and safety in every structure.
                    </p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-600"></span>
                    <p className="text-sm leading-relaxed text-slate-700">
                      <strong className="text-slate-900">Value Creation:</strong> Maximizing return on investment for all stakeholders.
                    </p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-600"></span>
                    <p className="text-sm leading-relaxed text-slate-700">
                      <strong className="text-slate-900">Accountability:</strong> Delivering reliably on deadlines and budgets with unwavering ownership.
                    </p>
                  </div>
                </div>
              </section>
            </Reveal>
          </div>
        </div>
      </section>

      <ServicesGrid />

      <section className="section" aria-labelledby="cta-heading">
        <div className="container grid items-center gap-8 rounded-2xl bg-brand-700 px-8 py-12 text-white md:grid-cols-2">
          <Reveal>
            <div>
              <h2 id="cta-heading" className="h2 text-white">Collaborate with us</h2>
              <p className="mt-2 text-white/90">
                Tell us about your project and we'll get back within 7 business days.
              </p>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <div className="text-right">
              <Link to="/contact" className="btn btn-ghost border border-white/30">
                Contact Us
              </Link>
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
}