"use client";

import React, { useState, useEffect } from "react";
import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";

const ROTATOR_SLIDES = [
  "Enjoy your Neighbourhood Living.",
  "Just a Click – For all your needs.",
  "Convenient & safe shopping locally."
];

const OFFERINGS = [
  {
    title: "Elegant Living",
    tag: "Join the #1 Neighbourhood App",
    descr: "Enjoy the comfort of elegant living. Nearle is India's first hyper-local managed platform bringing all amenities and requirements directly to your fingertips.",
    icon: "local_florist",
    color: "from-purple-500/10 to-indigo-500/10 text-primary border-purple-100",
    image: "/nearle people.png",
    isWide: false
  },
  {
    title: "Awareness at a Touch",
    tag: "Hot Deals",
    descr: "Pick hot deals within your neighbourhood. Stay updated on localized sales, discounts, and flash promotions happening today.",
    icon: "local_activity",
    color: "from-amber-500/10 to-orange-500/10 text-amber-700 border-amber-100",
    image: "/images/app-mockup.png",
    isWide: false
  },
  {
    title: "Best of Both Worlds",
    tag: "Convenience & Speed",
    descr: "Enjoy the ease of the World Wide Web, fulfilled entirely by trusted local businesses. Avoid traffic lights, parking hassles, and pollution.",
    icon: "travel_explore",
    color: "from-green-500/10 to-emerald-500/10 text-secondary border-green-100",
    image: "/images/slider-courier-mask.png",
    isWide: false
  },
  {
    title: "Lifestyle Shopping",
    tag: "Exclusive Privileges",
    descr: "Enjoy safe, convenient shopping with custom pricing, resident promotions, and bulk order discounts negotiated for your community.",
    icon: "shopping_bag",
    color: "from-rose-500/10 to-pink-500/10 text-rose-700 border-rose-100",
    image: "/images/cat-pet-essentials.png",
    isWide: false
  },
  {
    title: "Just a Click away",
    tag: "Instant Delivery",
    descr: "Order everything you need in your neighborhood with a single tap. A fast, organized last-mile delivery network ensures prompt fulfillment.",
    icon: "touch_app",
    color: "from-sky-500/10 to-blue-500/10 text-sky-700 border-sky-100",
    image: "/about.png",
    isWide: true
  },
  {
    title: "Amazingly Fresh",
    tag: "Daily Essentials",
    descr: "Get your fresh fruits, farm-fresh vegetables, dairy, and grocery items delivered instantly from verified local green grocers.",
    icon: "eco",
    color: "from-emerald-500/10 to-teal-500/10 text-emerald-700 border-emerald-100",
    image: "/images/cat-daily-essentials.png",
    isWide: false
  },
  {
    title: "Restaurants & Takeaways",
    tag: "Hot Food Nearby",
    descr: "Choose from the best local restaurants and neighborhood eateries close to your home. Hot food delivered with relevance and speed.",
    icon: "restaurant",
    color: "from-orange-500/10 to-red-500/10 text-orange-700 border-orange-100",
    image: "/images/cat-hot-food.png",
    isWide: false
  },
  {
    title: "Never Before Experience",
    tag: "Custom Services",
    descr: "Access custom-tailored local neighborhood services designed to integrate convenience directly into residential society living.",
    icon: "stars",
    color: "from-violet-500/10 to-purple-500/10 text-violet-700 border-violet-100",
    image: "/images/cat-health-wellness.png",
    isWide: false
  },
  {
    title: "Home Services @ Ease",
    tag: "Unified Local Partner",
    descr: "Book certified local service providers at your convenience. From handymen to laundry, pet care to pharmacy delivery, all in one place.",
    icon: "construction",
    color: "from-cyan-500/10 to-blue-500/10 text-cyan-700 border-cyan-100",
    image: "/images/cat-home-services.png",
    isWide: false
  }
];

const STATS = [
  { count: "100+", label: "Verified Restaurants", icon: "restaurant" },
  { count: "100+", label: "Green Grocers", icon: "local_mall" },
  { count: "100+", label: "Home Etailers", icon: "shopping_cart" },
  { count: "100+", label: "Service Providers", icon: "handyman" }
];

export default function PeoplePage() {
  const [slideIndex, setSlideIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSlideIndex((prev) => (prev + 1) % ROTATOR_SLIDES.length);
    }, 3000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="relative min-h-screen bg-background">
      
      {/* ─── Hero Section ─── */}
      <section className="hero-section relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-56 pb-72 text-center">
        {/* Background Image with Overlay */}
        <div className="hero-background select-none pointer-events-none">
          <Image
            src="/nearle people.png"
            alt="Nearle People Background"
            fill
            sizes="100vw"
            className="object-cover object-right"
            priority
          />
        </div>

        <div className="hero-content relative z-10 mx-auto max-w-container-max">
          <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
            Nearle for People
          </p>

          <h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
            <span>Redefining Local Living.</span>
            <br />
            <span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
              {ROTATOR_SLIDES[slideIndex]}
            </span>
          </h1>
        </div>
      </section>

      {/* ─── 9 Core Offerings Bento Grid ─── */}
      <section className="experience-section mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
        <div className="text-center mb-16">
          <span className="text-label-sm font-black text-primary uppercase tracking-widest">
            What we offer
          </span>
          <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
            Everything You Need, Just a Click Away
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
            Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
          </p>
        </div>

        <div className="experience-grid">
          {OFFERINGS.map((offering) => (
            <article
              key={offering.title}
              className="experience-card"
            >
              <Image
                src={offering.image}
                alt={offering.title}
                fill
                sizes="(max-width: 1023px) 100vw, 33vw"
                className="experience-card__image"
              />
              <div className="experience-card__overlay" />
              <div className="experience-card__content">
                <div className="experience-card__icon">
                  <MaterialIcon icon={offering.icon} size={22} className="text-white" />
                </div>
                <h3>{offering.title}</h3>
                <p>{offering.descr}</p>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* ─── Localized Stats Block ─── */}
      <section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
        <div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
          <div className="text-center mb-12">
            <span className="text-label-sm font-black text-primary uppercase tracking-widest">
              Nearle Network
            </span>
            <h2 className="font-display text-2xl font-black text-brand-dark mt-1">
              Join the #1 Neighbourhood App
            </h2>
            <p className="text-body-sm text-on-surface-variant mt-2">
              Bringing local stores to your doorstep instantly.
            </p>
          </div>

          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            {STATS.map((s) => (
              <div
                key={s.label}
                className="bg-white rounded-2xl p-6 border border-outline-variant/10 shadow-sm flex flex-col items-center text-center"
              >
                <div className="w-10 h-10 rounded-full bg-primary/5 text-primary flex items-center justify-center mb-4">
                  <MaterialIcon icon={s.icon} size={20} />
                </div>
                <h4 className="text-3xl font-display font-black text-brand-dark">{s.count}</h4>
                <p className="text-[11px] font-bold text-on-surface-variant/80 mt-1 uppercase tracking-wider">
                  {s.label}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── Ready to Download Section ─── */}
      <section id="download-section" className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
        <div className="bg-primary rounded-[2.5rem] p-10 md:p-16 relative overflow-hidden shadow-2xl">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(123,248,161,0.12),transparent_40%)]" />
          
          <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12">
            <div className="max-w-xl text-on-primary text-center lg:text-left">
              <span className="text-label-sm font-black text-brand-accent uppercase tracking-[0.2em]">
                GET READY NOW
              </span>
              <h2 className="font-display text-3xl md:text-5xl font-black mt-2 mb-4 tracking-tight">
                Download Nearle
              </h2>
              <p className="text-body-lg text-white/80 font-bold mb-2">
                Enjoy the benefits of Neighbourhood Living.
              </p>
              <p className="text-body-md text-white/60 mb-8">
                Proudly support your neighbourhood businesses and get everything delivered in minutes.
              </p>

              {/* App badges */}
              <div className="flex flex-wrap gap-4 justify-center lg:justify-start">
                <a
                  href="https://apps.apple.com/us/app/nearle/id1596895375"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
                >
                  <div className="flex items-center gap-3 text-white text-left">
                    <MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent" />
                    <div>
                      <div className="text-[10px] uppercase font-bold text-white/60">Download on the</div>
                      <div className="text-sm font-black">App Store</div>
                    </div>
                  </div>
                </a>
                <a
                  href="https://play.google.com/store/apps/details?id=com.nearle.gear"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
                >
                  <div className="flex items-center gap-3 text-white text-left">
                    <MaterialIcon icon="play_arrow" size={24} className="text-brand-accent" />
                    <div>
                      <div className="text-[10px] uppercase font-bold text-white/60">Get it on</div>
                      <div className="text-sm font-black">Google Play</div>
                    </div>
                  </div>
                </a>
              </div>
            </div>

            {/* Visual element representing App */}
            <div className="relative shrink-0 w-full max-w-[280px]">
              <div className="bg-brand-dark-surface w-full aspect-[9/19] rounded-[2.5rem] border-[6px] border-white/10 shadow-2xl relative overflow-hidden flex flex-col justify-between p-6">
                <div className="flex items-center justify-between text-white/40">
                  <MaterialIcon icon="signal_cellular_alt" size={16} />
                  <MaterialIcon icon="battery_full" size={16} />
                </div>
                
                {/* Mock UI */}
                <div className="my-auto text-center text-white space-y-4">
                  <div className="w-14 h-14 bg-brand-accent text-brand-dark rounded-2xl flex items-center justify-center mx-auto shadow-lg animate-pulse-subtle">
                    <MaterialIcon icon="local_shipping" size={32} />
                  </div>
                  <h4 className="font-display font-black text-lg text-brand-accent">Nearle App</h4>
                  <p className="text-[11px] text-white/70">Coimbatore neighborhood orders delivered in 15 mins.</p>
                </div>

                <div className="h-1.5 w-1/3 bg-white/20 rounded-full mx-auto" />
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}