import React from "react";
import { motion } from "framer-motion";
import { Scissors, Shirt, Ruler, Star, Phone, MapPin, Clock, CheckCircle } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function WebsiteTukangBaju() {
  const services = [
    { icon: Shirt, title: "Jahit Baju Custom", text: "Kemeja, dress, seragam, kebaya, dan pakaian sesuai ukuran badan." },
    { icon: Ruler, title: "Permak & Alterasi", text: "Mengecilkan, memendekkan, memperbaiki resleting, dan menyesuaikan ukuran." },
    { icon: Scissors, title: "Desain & Pola", text: "Bantu membuat pola dan desain pakaian agar hasil lebih rapi dan nyaman." },
  ];

  const prices = [
    ["Permak celana", "Mulai Rp25.000"],
    ["Permak baju", "Mulai Rp30.000"],
    ["Jahit kemeja", "Mulai Rp150.000"],
    ["Jahit dress/kebaya", "Mulai Rp250.000"],
  ];

  return (
    <main className="min-h-screen bg-stone-50 text-stone-900">
      <section className="relative overflow-hidden bg-gradient-to-br from-amber-100 via-stone-50 to-white">
        <div className="mx-auto grid max-w-7xl items-center gap-10 px-6 py-16 md:grid-cols-2 md:py-24">
          <motion.div initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
            <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-medium shadow-sm">
              <Scissors className="h-4 w-4" /> Jahitan rapi, ukuran pas
            </div>
            <h1 className="text-4xl font-bold tracking-tight md:text-6xl">
              Tukang Baju Profesional untuk Gaya yang Pas di Badan
            </h1>
            <p className="mt-5 max-w-xl text-lg leading-8 text-stone-700">
              Melayani jahit baju custom, permak pakaian, seragam, kebaya, dan alterasi dengan hasil rapi, nyaman, dan tepat waktu.
            </p>
            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              <Button className="rounded-2xl px-6 py-6 text-base shadow-md">
                <Phone className="mr-2 h-5 w-5" /> Pesan via WhatsApp
              </Button>
              <Button variant="outline" className="rounded-2xl px-6 py-6 text-base">
                Lihat Layanan
              </Button>
            </div>
          </motion.div>

          <motion.div initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.7 }} className="relative">
            <div className="rounded-[2rem] bg-white p-4 shadow-2xl">
              <div className="flex aspect-[4/5] items-center justify-center rounded-[1.5rem] bg-gradient-to-br from-stone-200 to-amber-100">
                <div className="text-center">
                  <Scissors className="mx-auto h-20 w-20 text-stone-700" />
                  <p className="mt-4 text-xl font-semibold">Studio Jahit Anda</p>
                  <p className="text-stone-600">Custom • Permak • Seragam</p>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-16">
        <div className="text-center">
          <h2 className="text-3xl font-bold md:text-4xl">Layanan Kami</h2>
          <p className="mt-3 text-stone-600">Solusi lengkap untuk kebutuhan pakaian harian hingga acara spesial.</p>
        </div>
        <div className="mt-10 grid gap-6 md:grid-cols-3">
          {services.map((item) => (
            <Card key={item.title} className="rounded-3xl border-0 shadow-md">
              <CardContent className="p-7">
                <item.icon className="h-10 w-10 text-amber-700" />
                <h3 className="mt-5 text-xl font-semibold">{item.title}</h3>
                <p className="mt-3 leading-7 text-stone-600">{item.text}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      <section className="bg-white py-16">
        <div className="mx-auto grid max-w-7xl gap-10 px-6 md:grid-cols-2">
          <div>
            <h2 className="text-3xl font-bold md:text-4xl">Kenapa Pilih Kami?</h2>
            <div className="mt-8 space-y-5">
              {["Ukuran dibuat sesuai bentuk badan", "Pengerjaan rapi dan detail", "Konsultasi model sebelum jahit", "Bisa untuk satuan atau pesanan banyak"].map((text) => (
                <div key={text} className="flex items-center gap-3">
                  <CheckCircle className="h-6 w-6 text-amber-700" />
                  <span className="text-stone-700">{text}</span>
                </div>
              ))}
            </div>
          </div>
          <Card className="rounded-3xl border-0 bg-stone-50 shadow-md">
            <CardContent className="p-7">
              <h3 className="text-2xl font-semibold">Daftar Harga</h3>
              <div className="mt-6 divide-y divide-stone-200">
                {prices.map(([name, price]) => (
                  <div key={name} className="flex justify-between py-4">
                    <span>{name}</span>
                    <strong>{price}</strong>
                  </div>
                ))}
              </div>
              <p className="mt-4 text-sm text-stone-500">Harga dapat berubah sesuai bahan, model, dan tingkat kesulitan.</p>
            </CardContent>
          </Card>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-16">
        <h2 className="text-center text-3xl font-bold md:text-4xl">Hasil Jahitan</h2>
        <div className="mt-10 grid gap-5 md:grid-cols-4">
          {["Kemeja Custom", "Dress Acara", "Seragam Kerja", "Permak Rapi"].map((title) => (
            <div key={title} className="flex aspect-square items-center justify-center rounded-3xl bg-gradient-to-br from-amber-100 to-stone-200 p-5 text-center font-semibold shadow-sm">
              {title}
            </div>
          ))}
        </div>
      </section>

      <section className="bg-stone-900 py-16 text-white">
        <div className="mx-auto max-w-4xl px-6 text-center">
          <div className="flex justify-center gap-1 text-amber-300">
            {[1, 2, 3, 4, 5].map((i) => <Star key={i} className="h-6 w-6 fill-current" />)}
          </div>
          <p className="mt-6 text-xl leading-9">
            “Jahitannya rapi, ukurannya pas, dan selesai sesuai janji. Sangat recommended!”
          </p>
          <p className="mt-4 text-stone-300">— Pelanggan</p>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-16">
        <div className="grid gap-6 md:grid-cols-3">
          <Card className="rounded-3xl border-0 shadow-md"><CardContent className="flex gap-4 p-6"><MapPin className="h-6 w-6 text-amber-700" /><div><h3 className="font-semibold">Alamat</h3><p className="text-stone-600">Jl. Contoh No. 123</p></div></CardContent></Card>
          <Card className="rounded-3xl border-0 shadow-md"><CardContent className="flex gap-4 p-6"><Clock className="h-6 w-6 text-amber-700" /><div><h3 className="font-semibold">Jam Buka</h3><p className="text-stone-600">Senin–Sabtu, 08.00–18.00</p></div></CardContent></Card>
          <Card className="rounded-3xl border-0 shadow-md"><CardContent className="flex gap-4 p-6"><Phone className="h-6 w-6 text-amber-700" /><div><h3 className="font-semibold">Kontak</h3><p className="text-stone-600">0812-3456-7890</p></div></CardContent></Card>
        </div>
        <div className="mt-12 rounded-[2rem] bg-amber-100 p-8 text-center">
          <h2 className="text-3xl font-bold">Butuh jahit atau permak baju?</h2>
          <p className="mt-3 text-stone-700">Kirim foto model atau datang langsung untuk ukur badan.</p>
          <Button className="mt-6 rounded-2xl px-7 py-6 text-base">
            Hubungi Sekarang
          </Button>
        </div>
      </section>
    </main>
  );
}