"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 (
    <main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
      <div className="page-frame">
        {/* ─── Hero Section with Animated Rotator ─── */}
        <section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 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="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
                {ROTATOR_WORDS[wordIndex]}
              </span>
            </h1>
          </div>
        </section>

        {/* ─── Intro Highlight Banner ─── */}
        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-8 md:p-12 flex flex-col lg:flex-row justify-between items-center gap-8">
          <div className="max-w-2xl text-left">
            <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>
        </section>

        {/* ─── Timeline / Core Process Steps ─── */}
        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
          <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 text-left">
                  {ps.title}
                </h3>
                <p className="text-body-sm text-on-surface-variant leading-relaxed text-left">
                  {ps.descr}
                </p>
              </div>
            ))}
          </div>
        </section>

        {/* ─── Grid Stats & Value Prop ─── */}
        <section className="bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
          <div className="grid lg:grid-cols-12 gap-16 items-center">
            {/* Left side: features block (7 cols) */}
            <div className="lg:col-span-7 text-left">
              <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 text-left">
              {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>
        </section>

        {/* ─── Join/Download Call to Action ─── */}
        <section className="bg-primary rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden p-12 md:p-20 relative text-center">
          <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>
        </section>
      </div>
    </main>
  );
}
