"use client";

import Link from "next/link";
import Image from "next/image";
import { motion } from "framer-motion";
import { MapPin, Phone, Clock, ArrowRight, Shield, Truck, BadgePercent, Users } from "lucide-react";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import { company } from "@/data/company";

const values = [
  {
    icon: Shield,
    title: "Trusted Quality",
    description: "We stock genuine products from leading brands with official warranty support.",
  },
  {
    icon: BadgePercent,
    title: "Honest Pricing",
    description: "Competitive rates and transparent deals — no hidden charges at checkout.",
  },
  {
    icon: Truck,
    title: "Reliable Service",
    description: "Delivery and installation support so your appliances work from day one.",
  },
  {
    icon: Users,
    title: "Customer First",
    description: "Friendly guidance in-store and online to help you choose the right product.",
  },
];

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-background">
      <Navbar />

      <section className="border-b border-border bg-secondary/40">
        <div className="container mx-auto px-4 py-16 lg:px-8 lg:py-20">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="max-w-3xl"
          >
            <p className="text-xs font-bold uppercase tracking-[0.2em] text-primary">About Us</p>
            <h1 className="mt-4 text-4xl font-bold tracking-tight lg:text-5xl">
              {company.name}
            </h1>
            <p className="mt-2 text-lg font-medium text-foreground/70">{company.tagline}</p>
            <p className="mt-6 text-base leading-relaxed text-muted-foreground lg:text-lg">
              Your trusted destination for premium home appliances in Rawalpindi and Islamabad.
              From refrigerators and ACs to washing machines and kitchen essentials — we bring
              quality products, honest prices, and dependable service under one roof.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Link
                href="/products"
                className="inline-flex items-center gap-2 rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground transition-all hover:opacity-90"
              >
                Shop Products <ArrowRight className="h-4 w-4" />
              </Link>
              <a
                href={company.phoneHref}
                className="inline-flex items-center gap-2 rounded-xl border border-border bg-card px-6 py-3 text-sm font-semibold transition-all hover:border-primary/40"
              >
                <Phone className="h-4 w-4 text-primary" />
                {company.phone}
              </a>
            </div>
          </motion.div>
        </div>
      </section>

      <section className="container mx-auto px-4 py-16 lg:px-8">
        <div className="grid items-center gap-12 lg:grid-cols-2">
          <motion.div
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="relative overflow-hidden rounded-3xl border border-border bg-card p-10 shadow-card"
          >
            <Image
              src={company.logo}
              alt={company.name}
              width={220}
              height={64}
              className="h-14 w-auto object-contain"
            />
            <h2 className="mt-8 text-2xl font-bold lg:text-3xl">Our Story</h2>
            <p className="mt-4 text-sm leading-relaxed text-muted-foreground lg:text-base">
              {company.name} has built its reputation by helping families and businesses find
              reliable home appliances they can trust. With branches in Rawalpindi and Islamabad,
              we combine showroom experience with a modern online store so you can browse, compare,
              and order with confidence.
            </p>
            <p className="mt-4 text-sm leading-relaxed text-muted-foreground lg:text-base">
              Whether you need cooling, laundry, or kitchen solutions, our team is ready to guide
              you to the right fit for your home and budget.
            </p>
          </motion.div>

          <div className="grid gap-4 sm:grid-cols-2">
            {values.map(({ icon: Icon, title, description }, i) => (
              <motion.div
                key={title}
                initial={{ opacity: 0, y: 16 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.05 }}
                className="rounded-2xl border border-border bg-card p-5 shadow-card"
              >
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
                  <Icon className="h-5 w-5 text-primary" />
                </div>
                <h3 className="mt-4 text-sm font-bold">{title}</h3>
                <p className="mt-2 text-xs leading-relaxed text-muted-foreground">{description}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      <section className="border-y border-border bg-secondary/30">
        <div className="container mx-auto px-4 py-16 lg:px-8">
          <div className="mb-10">
            <p className="text-xs font-bold uppercase tracking-[0.2em] text-primary">Visit Us</p>
            <h2 className="mt-2 text-3xl font-bold">Our Branches</h2>
            <p className="mt-3 text-muted-foreground">Come see our products in person or call us anytime.</p>
          </div>

          <div className="grid gap-5 md:grid-cols-2">
            {company.branches.map((branch) => (
              <div
                key={branch.label}
                className="rounded-2xl border border-border bg-card p-6 shadow-card"
              >
                <div className="flex items-start gap-3">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10">
                    <MapPin className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-bold">{branch.label}</h3>
                    <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{branch.address}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-6 grid gap-5 sm:grid-cols-2">
            <div className="flex items-center gap-3 rounded-2xl border border-border bg-card p-5 shadow-card">
              <Phone className="h-5 w-5 text-primary" />
              <div>
                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Phone</p>
                <a href={company.phoneHref} className="text-sm font-bold hover:text-primary">
                  {company.phone}
                </a>
              </div>
            </div>
            <div className="flex items-center gap-3 rounded-2xl border border-border bg-card p-5 shadow-card">
              <Clock className="h-5 w-5 text-primary" />
              <div>
                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Hours</p>
                <p className="text-sm font-bold">
                  {company.hours.days} · {company.hours.time}
                </p>
                <p className="text-xs text-muted-foreground">{company.hours.note}</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="container mx-auto px-4 py-16 lg:px-8">
        <div className="rounded-3xl border border-border bg-foreground px-8 py-14 text-center text-primary-foreground lg:px-16">
          <h2 className="text-2xl font-bold lg:text-3xl">Ready to upgrade your home?</h2>
          <p className="mx-auto mt-3 max-w-lg text-sm text-primary-foreground/60">
            Browse our full catalog of home appliances and order online, or message us on WhatsApp for quick help.
          </p>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
            <Link
              href="/products"
              className="inline-flex items-center gap-2 rounded-xl bg-primary px-7 py-3.5 text-sm font-bold text-primary-foreground transition-all hover:opacity-90"
            >
              Browse Products <ArrowRight className="h-4 w-4" />
            </Link>
            <a
              href={`https://wa.me/923310444708?text=${encodeURIComponent(`Hi, I'd like to know more about ${company.name} products.`)}`}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 rounded-xl bg-[#25D366] px-7 py-3.5 text-sm font-bold text-white transition-all hover:brightness-110"
            >
              Chat on WhatsApp
            </a>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}