import React, { useMemo, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Warehouse,
  Car,
  Snowflake,
  Shield,
  Clock,
  DoorOpen,
  Tag,
  MapPin,
  Phone,
  DollarSign,
  Star,
  ChevronRight,
} from "lucide-react";

// shadcn/ui
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

// ---------- Mock Data ----------
const UNITS = [
  {
    id: "u1",
    size: "5' x 5'",
    sqft: 25,
    type: ["Interior"],
    climate: true,
    driveUp: false,
    door: "Roll-up",
    onlinePrice: 39,
    inStorePrice: 49,
    promo: "1st Month $1",
    available: true,
    parking: false,
  },
  {
    id: "u2",
    size: "5' x 10'",
    sqft: 50,
    type: ["Interior"],
    climate: true,
    driveUp: false,
    door: "Roll-up",
    onlinePrice: 59,
    inStorePrice: 72,
    promo: "50% Off 2 Months",
    available: true,
    parking: false,
  },
  {
    id: "u3",
    size: "10' x 10'",
    sqft: 100,
    type: ["Drive-up"],
    climate: false,
    driveUp: true,
    door: "Roll-up",
    onlinePrice: 99,
    inStorePrice: 119,
    promo: "Web Special",
    available: false,
    parking: false,
  },
  {
    id: "u4",
    size: "10' x 15'",
    sqft: 150,
    type: ["Drive-up"],
    climate: false,
    driveUp: true,
    door: "Roll-up",
    onlinePrice: 129,
    inStorePrice: 149,
    promo: "Free Lock",
    available: true,
    parking: false,
  },
  {
    id: "u5",
    size: "10' x 20'",
    sqft: 200,
    type: ["Interior"],
    climate: true,
    driveUp: false,
    door: "Roll-up",
    onlinePrice: 169,
    inStorePrice: 189,
    promo: "1st Month $1",
    available: true,
    parking: false,
  },
  {
    id: "p1",
    size: "10' x 20'",
    sqft: 200,
    type: ["Vehicle", "Uncovered"],
    climate: false,
    driveUp: true,
    door: "None",
    onlinePrice: 50,
    inStorePrice: 63,
    promo: "Online Only",
    available: true,
    parking: true,
  },
  {
    id: "p2",
    size: "12' x 35'",
    sqft: 420,
    type: ["RV", "Covered"],
    climate: false,
    driveUp: true,
    door: "None",
    onlinePrice: 129,
    inStorePrice: 149,
    promo: "Limited Spots",
    available: false,
    parking: true,
  },
];

const SIZES = ["All sizes", "5' x 5'", "5' x 10'", "10' x 10'", "10' x 15'", "10' x 20'", "12' x 35'"];

const formatUSD = (n) => `$${n.toLocaleString(undefined, { maximumFractionDigits: 0 })}`;

export default function StorageMockup() {
  const [activeTab, setActiveTab] = useState("units");
  const [size, setSize] = useState("All sizes");
  const [climateOnly, setClimateOnly] = useState(false);
  const [driveUpOnly, setDriveUpOnly] = useState(false);
  const [availableOnly, setAvailableOnly] = useState(true);
  const [sort, setSort] = useState("price-asc");
  const [zip, setZip] = useState("");

  const filtered = useMemo(() => {
    let list = UNITS.filter((u) => (activeTab === "parking" ? u.parking : !u.parking));
    if (size !== "All sizes") list = list.filter((u) => u.size === size);
    if (climateOnly) list = list.filter((u) => u.climate);
    if (driveUpOnly) list = list.filter((u) => u.driveUp);
    if (availableOnly) list = list.filter((u) => u.available);

    list = [...list].sort((a, b) => {
      if (sort === "price-asc") return a.onlinePrice - b.onlinePrice;
      if (sort === "price-desc") return b.onlinePrice - a.onlinePrice;
      return a.sqft - b.sqft;
    });
    return list;
  }, [activeTab, size, climateOnly, driveUpOnly, availableOnly, sort]);

  return (
    <div className="min-h-screen bg-gradient-to-b from-white to-slate-50 text-slate-900">
      <TopBar />
      <Header zip={zip} setZip={setZip} />

      {/* Specials Banner */}
      <div className="mx-auto max-w-6xl px-4">
        <Card className="mb-6 rounded-2xl border-0 bg-amber-50 shadow-sm">
          <CardContent className="flex flex-wrap items-center justify-between gap-4 p-4">
            <div className="flex items-center gap-2">
              <Tag className="h-5 w-5" />
              <p className="text-sm font-medium">Online Specials: $1 First Month · 50% Off 2 Months · Free Lock</p>
            </div>
            <Button className="rounded-xl">Claim Offer</Button>
          </CardContent>
        </Card>
      </div>

      {/* Filters + Listings */}
      <main className="mx-auto max-w-6xl px-4 pb-24">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="mb-4 grid w-full grid-cols-2 rounded-2xl">
            <TabsTrigger value="units" className="rounded-xl">Storage Units</TabsTrigger>
            <TabsTrigger value="parking" className="rounded-xl">Vehicle Parking</TabsTrigger>
          </TabsList>
          <FilterBar
            size={size}
            setSize={setSize}
            climateOnly={climateOnly}
            setClimateOnly={setClimateOnly}
            driveUpOnly={driveUpOnly}
            setDriveUpOnly={setDriveUpOnly}
            availableOnly={availableOnly}
            setAvailableOnly={setAvailableOnly}
            sort={sort}
            setSort={setSort}
          />

          <TabsContent value="units" className="mt-6">
            <UnitGrid items={filtered} />
          </TabsContent>
          <TabsContent value="parking" className="mt-6">
            <UnitGrid items={filtered} />
          </TabsContent>
        </Tabs>

        <SizeGuide />
        <Features />
        <LocationHours />
        <Testimonials />
        <FAQ />
      </main>

      <Footer />
      <FloatingCTA />
    </div>
  );
}

// ---------- Top Bar / Header ----------
function TopBar() {
  return (
    <div className="w-full border-b bg-white/70 backdrop-blur supports-[backdrop-filter]:bg-white/70">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
        <div className="flex items-center gap-2">
          <Warehouse className="h-6 w-6" />
          <span className="font-semibold">Cardinal Storage</span>
        </div>
        <nav className="hidden items-center gap-6 md:flex">
          <a href="#units" className="text-sm text-slate-600 hover:text-slate-900">Units</a>
          <a href="#size" className="text-sm text-slate-600 hover:text-slate-900">Size Guide</a>
          <a href="#features" className="text-sm text-slate-600 hover:text-slate-900">Features</a>
          <a href="#location" className="text-sm text-slate-600 hover:text-slate-900">Location</a>
          <a href="#faq" className="text-sm text-slate-600 hover:text-slate-900">FAQ</a>
        </nav>
        <a href="tel:+18006888057" className="flex items-center gap-2 text-sm font-medium">
          <Phone className="h-4 w-4" /> (800) 688-8057
        </a>
      </div>
    </div>
  );
}

function Header({ zip, setZip }: { zip: string; setZip: (v: string) => void }) {
  return (
    <header className="relative isolate overflow-hidden border-b bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-sky-50 via-white to-white">
      <div className="mx-auto grid max-w-6xl grid-cols-1 items-center gap-10 px-4 py-14 md:grid-cols-2">
        <div>
          <motion.h1
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="mb-4 text-4xl font-extrabold tracking-tight md:text-5xl"
          >
            Clean, Secure Self Storage
          </motion.h1>
          <p className="mb-6 max-w-prose text-slate-600">
            Month-to-month rentals, online specials, and friendly on-site staff. Climate controlled and drive-up units available.
          </p>
          <div className="flex w-full flex-col gap-3 sm:flex-row">
            <div className="flex items-center gap-2 rounded-2xl border bg-white p-2 pr-3 shadow-sm">
              <Input
                placeholder="Enter ZIP to check nearby prices"
                value={zip}
                onChange={(e) => setZip(e.target.value)}
                className="border-0 focus-visible:ring-0"
              />
              <Button className="rounded-xl">View Prices</Button>
            </div>
            <Button variant="secondary" className="rounded-xl">Reserve Online</Button>
          </div>
          <div className="mt-4 flex flex-wrap items-center gap-3 text-sm text-slate-600">
            <div className="flex items-center gap-2"><Shield className="h-4 w-4" /> 24/7 Cameras</div>
            <div className="flex items-center gap-2"><Clock className="h-4 w-4" /> Extended Access</div>
            <div className="flex items-center gap-2"><Snowflake className="h-4 w-4" /> Climate Control</div>
          </div>
        </div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="relative"
        >
          <HeroMock />
        </motion.div>
      </div>
    </header>
  );
}

function HeroMock() {
  return (
    <Card className="rounded-3xl border-0 shadow-xl">
      <CardHeader className="pb-2">
        <CardTitle className="text-xl">Quick Quote</CardTitle>
        <CardDescription>Pick a size and see current web rates.</CardDescription>
      </CardHeader>
      <CardContent className="grid grid-cols-1 gap-3 sm:grid-cols-3">
        <div className="sm:col-span-2">
          <Label className="text-xs">Size</Label>
          <Select defaultValue="10x10">
            <SelectTrigger className="rounded-xl"><SelectValue placeholder="Select size" /></SelectTrigger>
            <SelectContent>
              <SelectItem value="5x5">5' x 5'</SelectItem>
              <SelectItem value="5x10">5' x 10'</SelectItem>
              <SelectItem value="10x10">10' x 10'</SelectItem>
              <SelectItem value="10x15">10' x 15'</SelectItem>
              <SelectItem value="10x20">10' x 20'</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label className="text-xs">Climate</Label>
          <div className="flex h-10 items-center justify-between rounded-xl border px-3">
            <span className="text-sm">Required</span>
            <Switch defaultChecked />
          </div>
        </div>
        <div className="sm:col-span-3">
          <Button className="w-full rounded-xl">Check Availability</Button>
        </div>
      </CardContent>
    </Card>
  );
}

// ---------- Filters ----------
function FilterBar({
  size,
  setSize,
  climateOnly,
  setClimateOnly,
  driveUpOnly,
  setDriveUpOnly,
  availableOnly,
  setAvailableOnly,
  sort,
  setSort,
}: any) {
  return (
    <section id="units" className="sticky top-0 z-10 -mx-4 mb-4 border-y bg-white/80 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-white/60">
      <div className="mx-auto grid max-w-6xl grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
        <div className="lg:col-span-2">
          <Label className="text-xs">Size</Label>
          <Select value={size} onValueChange={setSize}>
            <SelectTrigger className="rounded-xl"><SelectValue placeholder="All sizes" /></SelectTrigger>
            <SelectContent>
              {SIZES.map((s) => (
                <SelectItem key={s} value={s}>{s}</SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label className="text-xs">Climate Only</Label>
          <div className="flex h-10 items-center justify-between rounded-xl border px-3">
            <span className="text-sm">Climate</span>
            <Switch checked={climateOnly} onCheckedChange={setClimateOnly} />
          </div>
        </div>
        <div>
          <Label className="text-xs">Drive-Up Only</Label>
          <div className="flex h-10 items-center justify-between rounded-xl border px-3">
            <span className="text-sm">Drive-Up</span>
            <Switch checked={driveUpOnly} onCheckedChange={setDriveUpOnly} />
          </div>
        </div>
        <div>
          <Label className="text-xs">Show</Label>
          <div className="flex h-10 items-center justify-between rounded-xl border px-3">
            <span className="text-sm">Available</span>
            <Switch checked={availableOnly} onCheckedChange={setAvailableOnly} />
          </div>
        </div>
        <div>
          <Label className="text-xs">Sort</Label>
          <Select value={sort} onValueChange={setSort}>
            <SelectTrigger className="rounded-xl"><SelectValue placeholder="Price" /></SelectTrigger>
            <SelectContent>
              <SelectItem value="price-asc">Price: Low → High</SelectItem>
              <SelectItem value="price-desc">Price: High → Low</SelectItem>
              <SelectItem value="size">Size: Small → Large</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
    </section>
  );
}

// ---------- Unit Grid ----------
function UnitGrid({ items }: { items: any[] }) {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      <AnimatePresence>
        {items.map((u) => (
          <motion.div
            key={u.id}
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -12 }}
            transition={{ duration: 0.2 }}
          >
            <UnitCard unit={u} />
          </motion.div>
        ))}
      </AnimatePresence>
      {items.length === 0 && (
        <Card className="col-span-full rounded-2xl border-dashed"><CardContent className="p-8 text-center text-slate-500">No units match your filters.</CardContent></Card>
      )}
    </div>
  );
}

function UnitCard({ unit }: { unit: any }) {
  const [open, setOpen] = useState(false);
  return (
    <Card className="h-full rounded-2xl border-0 shadow-md">
      <CardHeader className="pb-2">
        <div className="flex items-start justify-between">
          <div>
            <CardTitle className="text-xl">{unit.size}</CardTitle>
            <CardDescription>{unit.parking ? "Vehicle / Parking" : unit.driveUp ? "Drive-up" : "Interior"} · {unit.door}</CardDescription>
          </div>
          <div className="text-right">
            <div className="text-xs text-slate-500">Web Rate</div>
            <div className="text-2xl font-bold">{formatUSD(unit.onlinePrice)}<span className="text-base font-normal text-slate-500">/mo</span></div>
            <div className="text-xs text-slate-500 line-through">In-Store {formatUSD(unit.inStorePrice)}</div>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="flex flex-wrap gap-2">
          {unit.climate && <Badge className="rounded-full" variant="secondary"><Snowflake className="mr-1 h-3 w-3" /> Climate</Badge>}
          {unit.driveUp && <Badge className="rounded-full" variant="secondary"><DoorOpen className="mr-1 h-3 w-3" /> Drive-up</Badge>}
          {unit.type.map((t: string) => (
            <Badge key={t} className="rounded-full" variant="outline">{t}</Badge>
          ))}
          {unit.promo && <Badge className="rounded-full bg-amber-100 text-amber-900 hover:bg-amber-100"><Tag className="mr-1 h-3 w-3" /> {unit.promo}</Badge>}
        </div>
        <div className="flex items-center justify-between text-sm">
          <div className="flex items-center gap-2 text-slate-600">
            <Shield className="h-4 w-4" />
            <span>Camera monitored</span>
          </div>
          <div className="flex items-center gap-2 text-slate-600">
            <Clock className="h-4 w-4" />
            <span>6am–10pm access</span>
          </div>
        </div>
      </CardContent>
      <CardFooter className="flex items-center justify-between">
        <Badge variant={unit.available ? "default" : "destructive"} className="rounded-full px-3 py-1 text-xs">
          {unit.available ? "Available" : "Waitlist"}
        </Badge>
        <div className="flex items-center gap-2">
          <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
              <Button className="rounded-xl">Reserve</Button>
            </DialogTrigger>
            <DialogContent className="rounded-2xl">
              <DialogHeader>
                <DialogTitle>Reserve {unit.size}</DialogTitle>
                <DialogDescription>Lock in the web rate today. No credit card required.</DialogDescription>
              </DialogHeader>
              <ReserveForm unit={unit} onComplete={() => setOpen(false)} />
            </DialogContent>
          </Dialog>
          <Button variant="secondary" className="rounded-xl" disabled={!unit.available}>Hold for 7 Days</Button>
        </div>
      </CardFooter>
    </Card>
  );
}

function ReserveForm({ unit, onComplete }: { unit: any; onComplete: () => void }) {
  const [submitting, setSubmitting] = useState(false);
  const [done, setDone] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setDone(true);
      setTimeout(onComplete, 1000);
    }, 800);
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-3">
      <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
        <div>
          <Label>Name</Label>
          <Input required placeholder="Jane Doe" className="rounded-xl" />
        </div>
        <div>
          <Label>Phone</Label>
          <Input required placeholder="(555) 123-4567" className="rounded-xl" />
        </div>
        <div className="md:col-span-2">
          <Label>Email</Label>
          <Input type="email" required placeholder="you@example.com" className="rounded-xl" />
        </div>
        <div>
          <Label>Move-in Date</Label>
          <Input type="date" className="rounded-xl" />
        </div>
        <div>
          <Label>Selected Unit</Label>
          <Input value={`${unit.size} · ${unit.parking ? "Parking" : unit.driveUp ? "Drive-up" : "Interior"}`} readOnly className="rounded-xl" />
        </div>
      </div>
      <Button type="submit" className="w-full rounded-xl" disabled={submitting || done}>
        {done ? "Reserved!" : submitting ? "Submitting…" : "Complete Reservation"}
      </Button>
      <p className="text-center text-xs text-slate-500">No obligation. Pay when you move in.</p>
    </form>
  );
}

// ---------- Size Guide ----------
function SizeGuide() {
  const items = [
    { size: "5' x 5'", text: "Closet – Boxes, small items", icon: <BoxSVG /> },
    { size: "5' x 10'", text: "Walk-in closet – Studio apt.", icon: <BoxSVG /> },
    { size: "10' x 10'", text: "One-bedroom home", icon: <BoxSVG /> },
    { size: "10' x 15'", text: "Two-bedroom home", icon: <BoxSVG /> },
    { size: "10' x 20'", text: "Whole home / vehicle", icon: <BoxSVG /> },
  ];
  return (
    <section id="size" className="mt-16">
      <div className="mb-6 flex items-center justify-between">
        <h2 className="text-2xl font-bold">Size Guide</h2>
        <a href="#" className="text-sm text-sky-700 hover:underline">See all sizes</a>
      </div>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
        {items.map((it) => (
          <Card key={it.size} className="rounded-2xl border-0 shadow-sm">
            <CardContent className="flex h-36 flex-col items-center justify-center gap-2 p-4">
              <div className="h-16 w-24">{it.icon}</div>
              <div className="text-center">
                <div className="font-semibold">{it.size}</div>
                <div className="text-xs text-slate-600">{it.text}</div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  );
}

function BoxSVG() {
  return (
    <svg viewBox="0 0 160 100" xmlns="http://www.w3.org/2000/svg" className="h-full w-full">
      <rect x="10" y="30" width="140" height="60" rx="8" className="fill-slate-200" />
      <rect x="25" y="20" width="110" height="15" rx="4" className="fill-slate-300" />
      <rect x="25" y="50" width="110" height="10" className="fill-white/50" />
    </svg>
  );
}

// ---------- Features ----------
function Features() {
  const feats = [
    { icon: <Shield className="h-6 w-6" />, title: "24/7 Cameras", text: "Monitored facility with gated access." },
    { icon: <Clock className="h-6 w-6" />, title: "Extended Hours", text: "Access 6am–10pm every day." },
    { icon: <Snowflake className="h-6 w-6" />, title: "Climate Control", text: "Protects against heat & humidity." },
    { icon: <DoorOpen className="h-6 w-6" />, title: "Drive-Up", text: "Ground-floor convenience." },
    { icon: <Car className="h-6 w-6" />, title: "RV / Boat Parking", text: "Covered & uncovered options." },
    { icon: <DollarSign className="h-6 w-6" />, title: "Flexible Terms", text: "Month-to-month leases." },
  ];
  return (
    <section id="features" className="mt-16">
      <h2 className="mb-6 text-2xl font-bold">Why Store With Us</h2>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {feats.map((f) => (
          <Card key={f.title} className="rounded-2xl border-0 shadow-sm">
            <CardContent className="flex items-start gap-4 p-6">
              <div className="rounded-xl bg-slate-100 p-3">{f.icon}</div>
              <div>
                <div className="font-semibold">{f.title}</div>
                <div className="text-sm text-slate-600">{f.text}</div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  );
}

// ---------- Location & Hours ----------
function LocationHours() {
  return (
    <section id="location" className="mt-16">
      <div className="mb-6 flex items-center justify-between">
        <h2 className="text-2xl font-bold">Location & Hours</h2>
        <a href="#" className="text-sm text-sky-700 hover:underline">Get Directions</a>
      </div>
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <Card className="rounded-2xl border-0 shadow-sm">
          <CardContent className="p-6">
            <div className="mb-3 flex items-center gap-2 text-slate-700"><MapPin className="h-5 w-5" /> 4500 W Highway 40, Ocala, FL</div>
            <div className="grid grid-cols-2 gap-3 text-sm text-slate-600 md:grid-cols-3">
              <div>
                <div className="font-semibold text-slate-700">Office Hours</div>
                <div>Mon–Sat: 9am–6pm</div>
                <div>Sun: 9am–5pm</div>
              </div>
              <div>
                <div className="font-semibold text-slate-700">Access Hours</div>
                <div>Daily: 6am–10pm</div>
              </div>
              <div>
                <div className="font-semibold text-slate-700">Phone</div>
                <a href="tel:+18006888057" className="hover:underline">(800) 688-8057</a>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="overflow-hidden rounded-2xl border-0 shadow-sm">
          <iframe
            title="Map"
            className="h-[260px] w-full"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            src="https://maps.google.com/?q=Ocala,FL&output=embed"
          />
        </Card>
      </div>
    </section>
  );
}

// ---------- Testimonials ----------
function Testimonials() {
  const items = [
    { name: "Avery", text: "Super clean and easy online reservation. Staff was helpful on move-in day.", stars: 5 },
    { name: "Jordan", text: "Love the climate units. My furniture stayed in perfect shape.", stars: 5 },
    { name: "Taylor", text: "Great rates and the gated access feels safe.", stars: 4 },
  ];
  return (
    <section className="mt-16">
      <div className="mb-6 flex items-center justify-between">
        <h2 className="text-2xl font-bold">What Customers Say</h2>
        <a href="#" className="text-sm text-sky-700 hover:underline">Read more reviews</a>
      </div>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
        {items.map((r, i) => (
          <Card key={i} className="rounded-2xl border-0 shadow-sm">
            <CardContent className="p-6">
              <div className="mb-2 flex items-center gap-1">
                {Array.from({ length: r.stars }).map((_, i) => (
                  <Star key={i} className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                ))}
              </div>
              <p className="text-sm text-slate-700">“{r.text}”</p>
              <div className="mt-3 text-xs font-medium text-slate-600">— {r.name}</div>
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ() {
  return (
    <section id="faq" className="mt-16">
      <h2 className="mb-6 text-2xl font-bold">Frequently Asked Questions</h2>
      <Accordion type="single" collapsible className="w-full">
        <AccordionItem value="item-1">
          <AccordionTrigger>How does online reservation work?</AccordionTrigger>
          <AccordionContent>
            Pick a unit and reserve it with your name and contact info. We'll hold the rate and confirm details via phone or email. Pay when you move in.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Do I need climate control?</AccordionTrigger>
          <AccordionContent>
            For electronics, wood furniture, photos, and long-term storage in hot/humid climates, climate control is strongly recommended.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>What documents do I need?</AccordionTrigger>
          <AccordionContent>
            A government-issued ID and a valid phone number or email address. Vehicle storage requires registration and proof of insurance.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="mt-24 border-t bg-white">
      <div className="mx-auto max-w-6xl px-4 py-10">
        <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
          <div>
            <div className="mb-2 font-semibold">Cardinal Storage</div>
            <p className="text-sm text-slate-600">Clean, secure, and convenient storage with friendly service.</p>
          </div>
          <div>
            <div className="mb-2 font-semibold">Company</div>
            <ul className="space-y-1 text-sm text-slate-600">
              <li><a href="#" className="hover:underline">About</a></li>
              <li><a href="#" className="hover:underline">Careers</a></li>
              <li><a href="#" className="hover:underline">Contact</a></li>
            </ul>
          </div>
          <div>
            <div className="mb-2 font-semibold">Resources</div>
            <ul className="space-y-1 text-sm text-slate-600">
              <li><a href="#size" className="hover:underline">Size Guide</a></li>
              <li><a href="#faq" className="hover:underline">FAQ</a></li>
              <li><a href="#units" className="hover:underline">Find a Unit</a></li>
            </ul>
          </div>
          <div>
            <div className="mb-2 font-semibold">Legal</div>
            <ul className="space-y-1 text-sm text-slate-600">
              <li><a href="#" className="hover:underline">Terms</a></li>
              <li><a href="#" className="hover:underline">Privacy</a></li>
            </ul>
          </div>
        </div>
        <div className="mt-6 flex items-center justify-between border-t pt-4 text-xs text-slate-500">
          <span>© {new Date().getFullYear()} Cardinal Storage</span>
          <span>Made with ♥ for a demo</span>
        </div>
      </div>
    </footer>
  );
}

function FloatingCTA() {
  return (
    <a
      href="tel:+18006888057"
      className="fixed bottom-5 right-5 inline-flex items-center gap-2 rounded-full bg-sky-600 px-4 py-2 text-white shadow-lg transition hover:bg-sky-700"
    >
      <Phone className="h-4 w-4" /> Call Now
      <ChevronRight className="h-4 w-4" />
    </a>
  );
}