"use client";

import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";

const STRATEGY_CARDS = [
  {
    title: "Our Mission",
    descr: "To make mediocre, or average stores, perform as well as the great ones. By going beyond selling a product, to establish a solid brand identity and build a relationship with their customers using Nearle.",
    icon: "target",
    color: "bg-primary/5 text-primary border-primary/10"
  },
  {
    title: "Our Vision",
    descr: "Our vision is to achieve Global Digital Transformation services leadership in providing value-added high quality solution to our customers.",
    icon: "visibility",
    color: "bg-secondary/5 text-secondary border-secondary/10"
  },
  {
    title: "Why Nearle",
    descr: "Nearly is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for Consumers to take advantage from its Neighbourhoods.",
    icon: "help_outline",
    color: "bg-brand-accent/10 text-brand-accent border-brand-accent/20"
  }
];

const COUNTERS = [
  { count: "100+", label: "Customers Served", icon: "people" },
  { count: "100+", label: "Active Businesses", icon: "store" },
  { count: "100+", label: "Active Neighborhoods", icon: "location_city" }
];

const TEAM = [
  {
    name: "Nellian Solliappan",
    role: "Co-Founder & CEO",
    initials: "NS",
    color: "bg-primary text-white"
  },
  {
    name: "Fazul Ilahi",
    role: "Founder & CTO",
    initials: "FI",
    color: "bg-secondary text-white"
  },
  {
    name: "Sagar",
    role: "Co-Founder & COO",
    initials: "S",
    color: "bg-brand-accent text-brand-dark"
  },
  {
    name: "Prithvi",
    role: "Investor",
    initials: "P",
    color: "bg-surface-container text-on-surface"
  },
  {
    name: "Sriram Sundararajan",
    role: "Investor",
    initials: "SS",
    color: "bg-surface-container-highest text-brand-dark"
  }
];

export default function AboutPage() {
  return (
    <div className="relative min-h-screen bg-background">
      
      {/* ─── Hero Section ─── */}
      <section className="relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-44 pb-48 text-center">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(108,14,128,0.25),transparent_40%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_70%,rgba(0,109,55,0.15),transparent_40%)]" />

        <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">
            We are Nearle
          </p>
          <h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight">
            We build Neighbourhoods.
          </h1>
          <p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
            Nearle is India&apos;s first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips.
          </p>
        </div>
      </section>

      {/* ─── Intro Description Block ─── */}
      <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 text-center">
          <span className="text-label-sm font-black text-primary uppercase tracking-widest">
            Our Platform
          </span>
          <h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-6">
            Nearle Neighbourhood Commerce
          </h2>
          <p className="mx-auto max-w-3xl text-body-md text-on-surface-variant leading-relaxed">
            We are redefining modern urban living by providing never before convenience. By linking local physical stores to an integrated digital framework, Nearle boosts merchant sales and delivers products instantly, fostering closer, cleaner, and faster local economies.
          </p>
        </div>
      </section>

      {/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {STRATEGY_CARDS.map((card) => (
            <div
              key={card.title}
              className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col"
            >
              <div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 ${card.color}`}>
                <MaterialIcon icon={card.icon} size={24} />
              </div>
              <h3 className="font-display text-xl font-black text-brand-dark mb-3">
                {card.title}
              </h3>
              <p className="text-body-sm text-on-surface-variant leading-relaxed">
                {card.descr}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* ─── Global Stats counters ─── */}
      <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 grid-cols-1 md:grid-cols-3 gap-8">
            {COUNTERS.map((c) => (
              <div key={c.label} className="flex flex-col items-center text-center">
                <div className="w-12 h-12 rounded-full bg-primary/5 text-primary flex items-center justify-center mb-4">
                  <MaterialIcon icon={c.icon} size={24} />
                </div>
                <h4 className="text-4xl font-display font-black text-brand-dark">{c.count}</h4>
                <p className="text-label-sm font-black text-on-surface-variant/80 mt-1 uppercase tracking-wider">
                  {c.label}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── Team Section ─── */}
      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
        <div className="grid lg:grid-cols-12 gap-16 items-center">
          
          {/* Left: About team content */}
          <div className="lg:col-span-5">
            <span className="text-label-sm font-black text-primary uppercase tracking-widest">
              Who we are
            </span>
            <h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-6">
              Team Nearle
            </h2>
            <p className="text-body-md text-on-surface-variant mb-6 leading-relaxed">
              Nearle is built on the core concept of <strong>&ldquo;Boost business by trust&rdquo;</strong>. We assist local offline stores in successfully spreading their brand message to the neighborhood to open new revenue streams.
            </p>
            <p className="text-body-sm text-on-surface-variant/80 mb-8 leading-relaxed">
              Our team combines technology skills, domain expertise, and operational focus to ensure the highest quality solution for our customers.
            </p>
            <Link
              href="/contact"
              className="bg-primary hover:bg-primary-container text-on-primary font-black px-8 py-4 rounded-xl text-label-md hover:shadow-lg active:scale-95 transition-all inline-flex items-center gap-2"
            >
              <MaterialIcon icon="mail" size={18} />
              <span>Contact Team</span>
            </Link>
          </div>

          {/* Right: Team Grid cards */}
          <div className="lg:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-6">
            {TEAM.map((t) => (
              <div
                key={t.name}
                className="premium-card bg-white p-6 rounded-3xl border border-outline-variant/15 shadow-sm flex flex-col items-center text-center"
              >
                <div className={`w-16 h-16 rounded-full flex items-center justify-center font-display text-xl font-black mb-4 ${t.color}`}>
                  {t.initials}
                </div>
                <h4 className="font-display text-sm font-black text-brand-dark mb-1">
                  {t.name}
                </h4>
                <p className="text-[11px] font-bold text-on-surface-variant/65">
                  {t.role}
                </p>
              </div>
            ))}
          </div>

        </div>
      </section>

      {/* ─── Client Testimonial & Quote ─── */}
      <section className="bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 py-28 text-center text-white">
        <div className="mx-auto max-w-4xl relative">
          <span className="absolute -top-12 left-1/2 -translate-x-1/2 text-8xl font-black text-brand-accent/10 font-display">
            &ldquo;
          </span>
          <div className="relative z-10">
            <h3 className="font-display text-xl md:text-2xl font-black text-brand-accent mb-6">
              Partner Feedback
            </h3>
            <blockquote className="text-lg md:text-xl font-light italic leading-relaxed text-white/90 max-w-2xl mx-auto mb-8">
              &ldquo;Nearle has opened up immense opportunities for us to survive the competition, sustain in business, and gain our customers back.&rdquo;
            </blockquote>
            <div className="flex flex-col items-center gap-2">
              <div className="w-10 h-10 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center font-display font-black text-xs">
                DK
              </div>
              <div>
                <p className="text-label-md font-black">Darshan K</p>
                <p className="text-body-sm text-white/50">Erranderz Partner</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ─── Brand Building Banner ─── */}
      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28 text-center">
        <div className="bg-white rounded-[2.5rem] p-12 md:p-16 border border-outline-variant/15 shadow-xl max-w-4xl mx-auto">
          <span className="text-label-sm font-black text-secondary uppercase tracking-widest">
            Don&apos;t miss the opportunity
          </span>
          <h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-4">
            Build Your Brand with Nearle
          </h2>
          <p className="text-body-md text-on-surface-variant max-w-2xl mx-auto mb-10 leading-relaxed">
            Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Link
              href="/businesses"
              className="bg-primary hover:bg-primary-container text-on-primary font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 active:scale-95 flex items-center gap-2"
            >
              <MaterialIcon icon="bolt" size={18} />
              <span>Register Merchant</span>
            </Link>
            <Link
              href="/people"
              className="bg-surface-container hover:bg-surface-container-high text-brand-dark 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="download" size={18} />
              <span>Download App</span>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}