import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CheckCircle, Wrench, ShieldCheck, Clock, Phone, Mail, MapPin, Car, Hammer } from "lucide-react";

// Capital Motor Corporation Web Page (English)
// With company logo, updated contact info, and insurer details.

const NavLink = ({ href, children }: { href: string; children: React.ReactNode }) => (
  <a href={href} className="text-sm font-medium text-gray-700 hover:text-gray-900">
    {children}
  </a>
);

const SectionTitle = ({ kicker, title, subtitle }: { kicker?: string; title: string; subtitle?: string }) => (
  <div className="max-w-3xl mx-auto text-center">
    {kicker && <p className="uppercase tracking-widest text-xs text-gray-500 mb-2">{kicker}</p>}
    <h2 className="text-3xl md:text-4xl font-bold tracking-tight">{title}</h2>
    {subtitle && <p className="mt-3 text-gray-600">{subtitle}</p>}
  </div>
);

const Stat = ({ value, label }: { value: string; label: string }) => (
  <div className="text-center p-4">
    <div className="text-3xl font-bold">{value}</div>
    <div className="text-sm text-gray-500">{label}</div>
  </div>
);

export default function CMCWebsite() {
  const whatsapp = "https://wa.me/26878020128";
  const phone = "(+268) 2422 1247/8";
  const email = "info@cmc.co.sz";
  const address = "Mbabane, Eswatini";

  return (
    <div className="min-h-screen bg-white text-gray-900">
      {/* Header */}
      <header className="sticky top-0 z-50 backdrop-blur bg-white/80 border-b">
        <div className="max-w-7xl mx-auto px-4 md:px-6">
          <div className="h-16 flex items-center justify-between">
            <a href="#home" className="flex items-center gap-3">
              <img src="/mnt/data/cmc_logo.png" alt="CMC Logo" className="h-12 w-auto" />
              <span className="font-semibold tracking-tight text-lg">Capital Motor Corporation</span>
            </a>
            <nav className="hidden md:flex items-center gap-6">
              <NavLink href="#services">Services</NavLink>
              <NavLink href="#about">About</NavLink>
              <NavLink href="#claims">Insurance</NavLink>
              <NavLink href="#gallery">Workshop</NavLink>
              <NavLink href="#contact">Contact</NavLink>
            </nav>
            <div className="flex items-center gap-2">
              <a href={whatsapp} target="_blank" rel="noreferrer">
                <Button className="rounded-2xl">WhatsApp</Button>
              </a>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section id="home" className="relative">
        <div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-gray-100 via-white to-white" />
        <div className="max-w-7xl mx-auto px-4 md:px-6 py-20 md:py-28 grid md:grid-cols-2 gap-10 items-center">
          <div>
            <h1 className="text-4xl md:text-6xl font-bold leading-tight">
              Vehicle Repairs, <span className="text-gray-500">all makes</span>
            </h1>
            <p className="mt-5 text-lg text-gray-600 max-w-xl">
              Leading auto body and mechanical repair shop in Mbabane. We work with insurers, paint & panel, diagnostics, and complete claims management.
            </p>
            <div className="mt-6 flex flex-wrap gap-3">
              <a href="#contact"><Button className="rounded-2xl">Request a Quote</Button></a>
              <a href="tel:+26824221247" className="inline-flex items-center gap-2 rounded-2xl border px-4 py-2">
                <Phone className="w-4 h-4" /> {phone}
              </a>
            </div>
            <div className="mt-8 grid grid-cols-3 gap-4">
              <Stat value="35+" label="Years of Experience" />
              <Stat value="24h" label="Claims Support" />
              <Stat value="1000+" label="Vehicles Repaired per Year" />
            </div>
          </div>
          <div>
            <div className="relative aspect-[4/3] rounded-3xl overflow-hidden shadow-xl">
              <img
                src="https://images.unsplash.com/photo-1616843413788-6895f9b00f25?q=80&w=1600&auto=format&fit=crop"
                alt="Workshop"
                className="w-full h-full object-cover"
              />
              <div className="absolute bottom-4 left-4 bg-white/90 backdrop-blur px-4 py-2 rounded-xl text-sm flex items-center gap-2 shadow">
                <ShieldCheck className="w-4 h-4" /> Insurer‑approved workmanship
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* About */}
      <section id="about" className="py-16 md:py-24 border-t">
        <div className="max-w-7xl mx-auto px-4 md:px-6">
          <SectionTitle
            kicker="About"
            title="Local and Proudly Based in Mbabane"
            subtitle="Capital Motor Corporation is an independent workshop serving Eswatini with international standards."
          />

          <div className="mt-10 grid md:grid-cols-2 gap-8 items-center">
            <div className="text-gray-700 leading-7">
              <p>
                We service most vehicle brands; however, we do <strong>not repair most imported (grey‑import) vehicles</strong>. Our workshop is fully equipped for structural repairs, refinishing, and diagnostics.
              </p>
              <p className="mt-4">
                We work closely with major insurance companies in Eswatini:
              </p>
              <ul className="mt-4 space-y-2 text-sm list-disc list-inside">
                <li>Eswatini Royal Insurance Corporation (ERIC)</li>
                <li>Lidwala Insurance</li>
                <li>Oracle Insure</li>
                <li>Phoenix of Swaziland Assurance Company Limited</li>
              </ul>
            </div>
            <div className="rounded-3xl overflow-hidden shadow-xl">
              <img
                src="https://images.unsplash.com/photo-1581089781785-603411fa81e5?q=80&w=1600&auto=format&fit=crop"
                alt="Team at Work"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Contact */}
      <section id="contact" className="py-16 md:py-24 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 md:px-6">
          <SectionTitle kicker="Contact" title="Get in Touch" subtitle="Reach out for estimates or insurance assistance." />

          <div className="mt-10 grid md:grid-cols-2 gap-8">
            <Card className="rounded-3xl">
              <CardHeader>
                <CardTitle className="flex items-center gap-2"><Hammer className="w-5 h-5"/>Request a Quote</CardTitle>
              </CardHeader>
              <CardContent>
                <form className="space-y-3 text-sm">
                  <input className="w-full rounded-xl border px-3 py-2" placeholder="Full Name" />
                  <input className="w-full rounded-xl border px-3 py-2" placeholder="Phone / WhatsApp" />
                  <input className="w-full rounded-xl border px-3 py-2" placeholder="Email" />
                  <textarea className="w-full rounded-xl border px-3 py-2 min-h-[120px]" placeholder="Describe the vehicle and damage" />
                  <Button type="button" className="rounded-2xl w-full">Send Request</Button>
                </form>
              </CardContent>
            </Card>

            <div className="space-y-4 text-sm">
              <div className="flex items-start gap-3">
                <Phone className="w-4 h-4 mt-0.5"/>
                <div>
                  <p className="font-semibold">Phone (Landline)</p>
                  <p className="text-gray-600">(+268) 2422 1247/8</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <Phone className="w-4 h-4 mt-0.5"/>
                <div>
                  <p className="font-semibold">Cellphones</p>
                  <p className="text-gray-600">Daniel: (+268) 7802 0128</p>
                  <p className="text-gray-600">Jose M. Fernandes: (+268) 7602 0126</p>
                  <p className="text-gray-600">Ashley: (+268) 7612 0032</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <Mail className="w-4 h-4 mt-0.5"/>
                <div>
                  <p className="font-semibold">Email</p>
                  <a href={`mailto:${email}`} className="text-gray-600">{email}</a>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <MapPin className="w-4 h-4 mt-0.5"/>
                <div>
                  <p className="font-semibold">Location</p>
                  <p className="text-gray-600">{address}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-10 border-t bg-white">
        <div className="max-w-7xl mx-auto px-4 md:px-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-sm text-gray-500">© {new Date().getFullYear()} Capital Motor Corporation. All rights reserved.</p>
          <div className="flex items-center gap-4 text-sm">
            <a href="#services" className="hover:underline">Services</a>
            <a href="#about" className="hover:underline">About</a>
            <a href="#contact" className="hover:underline">Contact</a>
          </div>
        </div>
      </footer>
    </div>
  );
}