"use client";

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

const ROTATOR_WORDS = [
  "Stand above your competitors!",
  // "Reach the right people, near you.",
  "Get noticed in your locality!"
];

const PROCESS_STEPS = [
  {
    step: "01",
    title: "Get Online",
    descr: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
    icon: "storefront",
    color: "bg-primary/5 text-primary border-primary/10"
  },
  {
    step: "02",
    title: "Get Noticed",
    descr: "Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.",
    icon: "campaign",
    color: "bg-secondary/5 text-secondary border-secondary/10"
  },
  {
    step: "03",
    title: "Get Simplified",
    descr: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.",
    icon: "auto_awesome",
    color: "bg-brand-accent/10 text-brand-accent border-brand-accent/20"
  }
];

const FEATURES = [
  {
    title: "Direct Customer Access",
    descr: "Build direct relationships and trust with residents in your immediate vicinity."
  },
  {
    title: "Become a Partner",
    descr: "Be part of a strong community of like-minded people. A unified partner for neighborhood needs."
  },
  {
    title: "Build Your Brand",
    descr: "Brand your business on Nearle and reach out to your community with ease."
  },
  {
    title: "Huge Opportunity",
    descr: "Unlock revenue opportunities and marketing strategies that will take your business further."
  },
  {
    title: "Delight Your Customers",
    descr: "Delight customers in the neighborhood with a personalized online shopping experience."
  },
  {
    title: "Unique Model",
    descr: "Hyperlocal commerce is an effective, sustainable model to meet today's consumer needs."
  },
  {
    title: "Reach Right Audience",
    descr: "We target your ideal customers — people in your neighborhood search for what you offer."
  },
  {
    title: "Increase Your Customers",
    descr: "Increase walk-in and online customers by targeting local demand."
  }
];

const STATS = [
  { value: "40%+", label: "Avg Revenue Increase", icon: "trending_up", bg: "bg-surface-container" },
  { value: "12k+", label: "Daily Orders Handled", icon: "groups", bg: "bg-primary text-white" },
  { value: "5k+", label: "Active Partners", icon: "storefront", bg: "bg-white border border-outline-variant/15" },
  { value: "24/7", label: "Merchant Support", icon: "support_agent", bg: "bg-surface-container" }
];

export default function BusinessesPage() {
  const [wordIndex, setWordIndex] = useState(0);

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

  return (
    <div className="relative min-h-screen bg-background">
      {/* ─── Hero Section with Animated Rotator ─── */}
      <section className="relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-44 pb-48 text-center">
        {/* Background Image with Overlay */}
        <div className="absolute inset-0 z-0 select-none pointer-events-none">
          <Image
            src="/Nearle Business.png"
            alt="Nearle Business Background"
            fill
            sizes="100vw"
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-[#120217]/50" />
        </div>

        <div className="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 Business
          </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>Power your business.</span>
            <br />
            <span className="relative inline-block text-brand-accent min-h-[1.2em] transition-all duration-500">
              {ROTATOR_WORDS[wordIndex]}
            </span>
          </h1>

        </div>
      </section>

      {/* ─── Intro Highlight Banner ─── */}
      <section className="relative z-20 -mt-20 mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
        <div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl flex flex-col lg:flex-row justify-between items-center gap-8">
          <div className="max-w-2xl">
            <span className="text-label-sm font-black text-secondary uppercase tracking-widest">
              Together, we grow
            </span>
            <h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-4 leading-tight">
              Get set in minutes and delight the Neighborhood
            </h2>
            <p className="text-body-md text-on-surface-variant leading-relaxed">
              Nearle is built to help businesses like <strong className="text-primary">Yours</strong> establish a local online presence and empower neighborhood customers to discover and interact with you directly.
            </p>
          </div>
          <div className="flex gap-4 shrink-0">
            <Link
              href="/contact"
              className="bg-primary hover:bg-primary-container text-on-primary font-black px-8 py-4 rounded-xl text-label-md shadow-lg active:scale-95 duration-200 transition-all flex items-center gap-2"
            >
              <MaterialIcon icon="chat" size={18} />
              <span>Talk to an Expert</span>
            </Link>
          </div>
        </div>
      </section>

      {/* ─── Timeline / Core Process Steps ─── */}
      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
        <div className="text-center mb-16">
          <span className="text-label-sm font-black text-primary uppercase tracking-widest">
            How it works
          </span>
          <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
            Build Your Neighborhood Brand
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
            Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {PROCESS_STEPS.map((ps) => (
            <div
              key={ps.step}
              className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col relative overflow-hidden"
            >
              <div className="absolute top-4 right-6 text-6xl font-black text-on-surface-variant/5">
                {ps.step}
              </div>
              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${ps.color}`}>
                <MaterialIcon icon={ps.icon} size={28} />
              </div>
              <h3 className="font-display text-xl font-black text-brand-dark mb-3">
                {ps.title}
              </h3>
              <p className="text-body-sm text-on-surface-variant leading-relaxed">
                {ps.descr}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* ─── Grid Stats & Value Prop ─── */}
      <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="grid lg:grid-cols-12 gap-16 items-center">
            
            {/* Left side: features block (7 cols) */}
            <div className="lg:col-span-7">
              <span className="text-label-sm font-black text-primary uppercase tracking-widest">
                Our features
              </span>
              <h2 className="font-display text-3xl md:text-4xl font-black text-brand-dark mt-2 mb-6">
                Move Your Business Forward
              </h2>
              <p className="text-body-md text-on-surface-variant mb-12 max-w-2xl">
                Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease.
              </p>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
                {FEATURES.map((feat) => (
                  <div key={feat.title} className="flex gap-4">
                    <div className="w-6 h-6 rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-1">
                      <MaterialIcon icon="check" size={16} className="font-black" />
                    </div>
                    <div>
                      <h4 className="font-display text-[15px] font-black text-brand-dark mb-1">
                        {feat.title}
                      </h4>
                      <p className="text-body-sm text-on-surface-variant leading-relaxed">
                        {feat.descr}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right side: stats quadrant (5 cols) */}
            <div className="lg:col-span-5 grid grid-cols-2 gap-6">
              {STATS.map((stat, i) => (
                <div
                  key={stat.label}
                  className={`p-6 rounded-3xl flex flex-col justify-between aspect-square shadow-sm ${stat.bg} ${
                    i % 2 === 1 ? "lg:mt-8" : ""
                  }`}
                >
                  <div className="flex items-center justify-between">
                    <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${
                      stat.bg.includes("primary") ? "bg-white/10 text-white" : "bg-primary/5 text-primary"
                    }`}>
                      <MaterialIcon icon={stat.icon} size={20} />
                    </div>
                  </div>
                  <div className="mt-8">
                    <p className="text-4xl font-display font-black tracking-tight">{stat.value}</p>
                    <p className={`text-[11px] font-bold mt-1 ${
                      stat.bg.includes("primary") ? "text-white/80" : "text-on-surface-variant/80"
                    }`}>
                      {stat.label}
                    </p>
                  </div>
                </div>
              ))}
            </div>

          </div>
        </div>
      </section>

      {/* ─── Join/Download Call to Action ─── */}
      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24 text-center">
        <div className="bg-primary rounded-[2.5rem] p-12 md:p-20 relative overflow-hidden shadow-2xl">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(203,157,248,0.18),transparent_50%)] animate-pulse-subtle" />
          <div className="relative z-10 max-w-2xl mx-auto text-on-primary">
            <h2 className="font-display text-3xl md:text-5xl font-black mb-6 tracking-tight">
              Nearle is Essential for Business Growth
            </h2>
            <p className="text-body-lg text-white/80 mb-10 leading-relaxed">
              Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today.
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <a
                href="https://play.google.com/store/apps/details?id=com.nearle.gear"
                target="_blank"
                rel="noopener noreferrer"
                className="bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-xl transition-all duration-300 active:scale-95 flex items-center gap-2"
              >
                <MaterialIcon icon="bolt" size={18} />
                <span>Register as Partner</span>
              </a>
              <Link
                href="/contact"
                className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-10 py-4.5 rounded-xl text-label-md transition-all duration-300 active:scale-95 flex items-center gap-2"
              >
                <MaterialIcon icon="phone" size={18} />
                <span>Contact Experts</span>
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}