import { ArrowRight, Baby, Calendar, Check, Clock, FileText, HeartPulse, MapPin, Phone, ShieldCheck, Star, Stethoscope, Truck, Users, Activity } from "lucide-react";
import { cn } from "@/lib/utils";

const services = [
  { icon: Stethoscope, title: "General consultation", body: "Fevers, infections, check-ups and the questions you have been putting off.", fee: "₹600" },
  { icon: Baby, title: "Children’s health", body: "Vaccinations, growth checks and a paediatrician who is good with nervous kids.", fee: "₹700" },
  { icon: Activity, title: "Diabetes and thyroid", body: "Regular reviews, diet plans and reports you can actually read.", fee: "₹800" },
  { icon: HeartPulse, title: "Women’s health", body: "Gynaecology, pregnancy care and PCOS clinics with women doctors.", fee: "₹800" },
  { icon: Users, title: "Physiotherapy", body: "Back, knee and post-surgery rehab in our own therapy room.", fee: "₹900" },
  { icon: Truck, title: "Lab tests at home", body: "Samples collected at home from 7 am, reports the same day.", fee: "₹399" },
];

const doctors = [
  { name: "Dr. Sneha Rao", role: "General physician", meta: "18 years · English, Hindi, Marathi", next: "Today, 4:30 pm" },
  { name: "Dr. Imran Shaikh", role: "Paediatrician", meta: "12 years · English, Hindi, Urdu", next: "Today, 6:00 pm" },
  { name: "Dr. Pallavi Kulkarni", role: "Gynaecologist", meta: "15 years · English, Marathi", next: "Tomorrow, 10:00 am" },
  { name: "Dr. Joseph Mathew", role: "Diabetologist", meta: "21 years · English, Malayalam", next: "Tomorrow, 11:30 am" },
];

const days = [{ d: "Mon", n: "19" }, { d: "Tue", n: "20" }, { d: "Wed", n: "21" }, { d: "Thu", n: "22" }, { d: "Fri", n: "23" }];
const slots = [
  { t: "9:00", free: true }, { t: "9:30", free: false }, { t: "10:00", free: true }, { t: "10:30", free: true },
  { t: "11:00", free: false }, { t: "11:30", free: true }, { t: "4:30", free: true }, { t: "5:00", free: true },
];

const steps = [
  { title: "Book a slot", body: "Online or by phone. You get a confirmation and a reminder two hours before." },
  { title: "See your doctor", body: "Check in, wait about ten minutes, and get a full fifteen with your doctor." },
  { title: "Follow up from home", body: "Prescriptions and reports land on your phone. Questions get a call back." },
];

const reviews = [
  { quote: "Dr. Imran sat on the floor to examine my son because he refused the bed.", name: "Farah K.", note: "Parent, Baner" },
  { quote: "I was seen at 10:32 for a 10:30 slot. My diabetes reports finally make sense.", name: "Suresh P.", note: "Patient since 2017" },
  { quote: "The home sample collection came at 7 sharp and the report was ready by lunch.", name: "Ananya D.", note: "Patient, Aundh" },
];

const hours = [
  { day: "Monday to Friday", time: "8:00 am – 9:00 pm" },
  { day: "Saturday", time: "8:00 am – 6:00 pm" },
  { day: "Sunday", time: "9:00 am – 1:00 pm" },
];

const faqs = [
  { q: "Do I need an appointment?", a: "Walk-ins are welcome, but booked patients are seen first." },
  { q: "Which insurers do you accept?", a: "We are cashless with 32 insurers. Bring your card and a photo ID." },
  { q: "Can I see the same doctor every time?", a: "Yes. Your doctor is saved on your file and their slots show first." },
  { q: "How do I get my reports?", a: "As a PDF on your phone and email, and in your patient file." },
];

function Container({ className, children }: { className?: string; children: React.ReactNode }) {
  return <div className={cn("mx-auto w-full max-w-6xl px-5 sm:px-8", className)}>{children}</div>;
}

function Heading({ eyebrow, title, body, center }: { eyebrow: string; title: string; body?: string; center?: boolean }) {
  return (
    <div className={cn("mb-10 grid max-w-2xl gap-3", center && "mx-auto text-center")}>
      <p className="text-sm font-medium text-primary">{eyebrow}</p>
      <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{title}</h2>
      {body && <p className="text-fg-muted">{body}</p>}
    </div>
  );
}

function Stars() {
  return <div className="flex gap-0.5 text-primary" aria-label="5 out of 5 stars">{[0, 1, 2, 3, 4].map((i) => <Star key={i} className="size-4 fill-current" />)}</div>;
}

function Header() {
  return (
    <header>
      <div className="bg-primary-soft text-sm text-primary-soft-fg">
        <Container className="flex flex-wrap justify-between gap-2 py-2">
          <span className="flex items-center gap-2"><Phone className="size-3.5" />Emergency? Call <b>020 4123 9000</b>, open 24 × 7</span>
          <span className="hidden items-center gap-2 sm:flex"><Clock className="size-3.5" />Mon–Sat 8 am – 9 pm · Sun 9 am – 1 pm</span>
        </Container>
      </div>
      <Container className="flex h-16 items-center gap-8 border-b border-border">
        <a href="/" className="flex items-center gap-2 font-semibold"><span className="size-6 rounded-full bg-primary" aria-hidden />Ashvini Clinic</a>
        <nav aria-label="Main" className="hidden gap-6 text-sm text-fg-muted md:flex">
          {["Services", "Doctors", "Health checks", "Visit us"].map((l) => <a key={l} href="#" className="hover:text-fg">{l}</a>)}
        </nav>
        <a href="#" className="ml-auto rounded bg-primary px-4 py-2 text-sm font-medium text-primary-fg hover:bg-primary-hover">Book a visit</a>
      </Container>
    </header>
  );
}

function BookingCard() {
  return (
    <form aria-label="Book an appointment" className="grid gap-5 rounded-xl border border-border bg-bg p-5 shadow-xl sm:p-7">
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold">Book a visit</h2>
        <span className="rounded-full bg-success-soft px-2 py-0.5 text-xs font-medium text-success-fg">14 slots today</span>
      </div>
      <label className="grid gap-1.5 text-sm font-medium">Doctor
        <select defaultValue="rao" className="h-10 rounded border border-border-strong bg-bg px-3 font-normal">
          <option value="rao">Dr. Sneha Rao · General physician</option>
          <option value="shaikh">Dr. Imran Shaikh · Paediatrician</option>
        </select>
      </label>
      <fieldset>
        <legend className="mb-2 text-sm font-medium">Day</legend>
        <div className="grid grid-cols-5 gap-2">
          {days.map((d, i) => (
            <label key={d.d} className="cursor-pointer">
              <input type="radio" name="day" defaultChecked={i === 0} className="peer sr-only" />
              <span className="grid justify-items-center rounded border border-border py-2 text-xs text-fg-muted peer-checked:border-primary peer-checked:bg-primary peer-checked:text-primary-fg">
                {d.d}<b className="text-base">{d.n}</b>
              </span>
            </label>
          ))}
        </div>
      </fieldset>
      <fieldset>
        <legend className="mb-2 text-sm font-medium">Time</legend>
        <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
          {slots.map((s, i) => (
            <label key={s.t} className={cn(s.free ? "cursor-pointer" : "cursor-not-allowed")}>
              <input type="radio" name="slot" disabled={!s.free} defaultChecked={i === 3} className="peer sr-only" />
              <span className="block rounded border border-border py-2 text-center text-sm tabular-nums peer-checked:border-primary peer-checked:bg-primary-soft peer-checked:text-primary-soft-fg peer-disabled:bg-surface peer-disabled:text-fg-subtle peer-disabled:line-through">{s.t}</span>
            </label>
          ))}
        </div>
      </fieldset>
      <button type="submit" className="h-11 rounded bg-primary font-medium text-primary-fg hover:bg-primary-hover">Confirm Mon 19, 10:30 am</button>
      <p className="text-center text-sm text-fg-subtle">Consultation ₹600 · pay at the clinic · free to cancel</p>
    </form>
  );
}

function Hero() {
  return (
    <section className="bg-surface py-12 sm:py-16">
      <Container className="grid items-start gap-10 lg:grid-cols-2 lg:gap-14">
        <div className="grid justify-items-start gap-5 pt-2">
          <p className="text-sm font-medium text-primary">Family clinic in Baner, Pune · since 2009</p>
          <h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-6xl">Unhurried care for the whole family.</h1>
          <p className="max-w-xl text-lg text-fg-muted">Twelve doctors, a lab and a pharmacy under one roof. Book a slot online and be seen on time.</p>
          <div className="flex items-center gap-2 text-sm text-fg-muted"><Stars /><span><b className="text-fg">4.8</b> from 2,100 patient reviews</span></div>
          <ul className="mt-2 grid w-full gap-3 border-t border-border pt-6 text-sm sm:grid-cols-2">
            {[{ i: Check, t: "Same-day appointments" }, { i: ShieldCheck, t: "Cashless with 32 insurers" }, { i: Clock, t: "Seen within 10 minutes" }, { i: FileText, t: "Reports on your phone" }].map(({ i: Icon, t }) => (
              <li key={t} className="flex items-center gap-2.5"><Icon className="size-[18px] text-primary" />{t}</li>
            ))}
          </ul>
        </div>
        <BookingCard />
      </Container>
    </section>
  );
}

function Stats() {
  const items = [["16 years", "caring for Baner and Aundh"], ["42,000+", "patients seen"], ["12", "doctors, 8 specialties"], ["4.8 / 5", "patient rating"]];
  return (
    <section aria-label="Clinic in numbers" className="pt-4">
      <Container>
        <dl className="grid grid-cols-2 divide-border overflow-hidden rounded-xl border border-border lg:grid-cols-4 lg:divide-x">
          {items.map(([v, l]) => <div key={l} className="flex flex-col p-5 sm:p-7"><dt className="text-sm text-fg-muted">{l}</dt><dd className="order-first text-3xl font-semibold tracking-tight">{v}</dd></div>)}
        </dl>
      </Container>
    </section>
  );
}

function Services() {
  return (
    <section className="py-20">
      <Container>
        <Heading eyebrow="Services" title="Most of what your family needs, in one place" />
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {services.map(({ icon: Icon, title, body, fee }) => (
            <article key={title} className="grid content-start gap-3 rounded-lg border border-border p-6">
              <span className="grid size-10 place-items-center rounded bg-primary-soft text-primary-soft-fg"><Icon className="size-5" /></span>
              <h3 className="font-semibold">{title}</h3>
              <p className="text-sm text-fg-muted">{body}</p>
              <div className="mt-1 flex items-center justify-between border-t border-border pt-3 text-sm">
                <span className="text-fg-subtle">From <b className="text-fg">{fee}</b></span>
                <a href="#" className="inline-flex items-center gap-1 font-medium text-primary">Book <ArrowRight className="size-3.5" /></a>
              </div>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Doctors() {
  return (
    <section className="bg-surface py-20">
      <Container>
        <Heading center eyebrow="Our doctors" title="Doctors who remember your last visit" body="Every doctor has been with us for at least five years." />
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {doctors.map((d) => (
            <article key={d.name} className="overflow-hidden rounded-lg border border-border bg-bg">
              <div className="grid aspect-[5/4] place-items-center bg-gradient-to-br from-brand-400 to-brand-800 text-4xl font-semibold text-neutral-50" aria-hidden>
                {d.name.split(" ").slice(1).map((w) => w[0]).join("")}
              </div>
              <div className="grid gap-1 p-5">
                <h3 className="font-semibold">{d.name}</h3>
                <p className="text-sm text-fg-muted">{d.role}</p>
                <p className="text-sm text-fg-subtle">{d.meta}</p>
                <span className="mt-2 inline-flex w-fit items-center gap-1.5 rounded-full bg-success-soft px-2 py-0.5 text-xs font-medium text-success-fg"><Calendar className="size-3" />Next: {d.next}</span>
              </div>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Visit() {
  return (
    <section className="py-20">
      <Container>
        <Heading eyebrow="Your visit" title="From booking to follow-up" />
        <ol className="grid gap-8 md:grid-cols-3">
          {steps.map((s, i) => (
            <li key={s.title} className="flex gap-4">
              <span className="grid size-11 shrink-0 place-items-center rounded-full bg-primary-soft font-semibold text-primary-soft-fg">{i + 1}</span>
              <div><h3 className="font-semibold">{s.title}</h3><p className="mt-1 text-sm text-fg-muted">{s.body}</p></div>
            </li>
          ))}
        </ol>
      </Container>
    </section>
  );
}

function Reviews() {
  return (
    <section className="bg-surface py-20">
      <Container>
        <Heading center eyebrow="Patient reviews" title="What families say after a visit" />
        <div className="grid gap-5 md:grid-cols-3">
          {reviews.map((r) => (
            <figure key={r.name} className="grid gap-4 rounded-lg border border-border bg-bg p-6">
              <Stars /><blockquote>“{r.quote}”</blockquote>
              <figcaption className="text-sm"><p className="font-medium">{r.name}</p><p className="text-fg-subtle">{r.note}</p></figcaption>
            </figure>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Location() {
  return (
    <section className="py-20">
      <Container className="grid gap-10 lg:grid-cols-2">
        <div role="img" aria-label="Map showing the clinic on Baner Road" className="relative grid min-h-72 place-items-center rounded-xl bg-surface-2">
          <span className="grid size-10 place-items-center rounded-full bg-primary text-primary-fg"><MapPin className="size-5" /></span>
        </div>
        <div className="grid content-start gap-6">
          <Heading eyebrow="Visit us" title="Ground floor, Sai Plaza, Baner Road" body="Opposite Baner bus stop, Pune 411045. Free basement parking for patients." />
          <dl className="grid grid-cols-[1fr_auto] gap-x-6 gap-y-3 border-y border-border py-5">
            {hours.map((h) => <div key={h.day} className="contents"><dt className="text-fg-muted">{h.day}</dt><dd className="text-right tabular-nums">{h.time}</dd></div>)}
          </dl>
          <div className="flex flex-wrap gap-3">
            <a href="#" className="inline-flex h-10 items-center gap-2 rounded bg-primary px-4 font-medium text-primary-fg hover:bg-primary-hover"><MapPin className="size-4" />Get directions</a>
            <a href="tel:02041239000" className="inline-flex h-10 items-center gap-2 rounded border border-border-strong px-4 font-medium hover:bg-surface"><Phone className="size-4" />Call the desk</a>
          </div>
        </div>
      </Container>
    </section>
  );
}

function Faq() {
  return (
    <section className="bg-surface py-20">
      <Container className="max-w-3xl">
        <Heading center eyebrow="Questions" title="Before you visit" />
        <div className="border-t border-border">
          {faqs.map((f, i) => (
            <details key={f.q} open={i === 0} className="border-b border-border">
              <summary className="cursor-pointer list-none py-4 font-medium">{f.q}</summary>
              <p className="pb-5 text-sm text-fg-muted">{f.a}</p>
            </details>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Footer() {
  return (
    <footer className="border-t border-border py-12 text-sm">
      <Container className="flex flex-wrap justify-between gap-6 text-fg-muted">
        <p><b className="text-fg">Ashvini Clinic</b> · Sai Plaza, Baner Road, Pune 411045 · 020 4123 9000</p>
        <p>© 2026 Ashvini Healthcare Pvt. Ltd.</p>
      </Container>
    </footer>
  );
}

export default function Page() {
  return (
    <div className="bg-bg font-sans text-fg">
      <Header />
      <main>
        <Hero />
        <Stats />
        <Services />
        <Doctors />
        <Visit />
        <Reviews />
        <Location />
        <Faq />
      </main>
      <Footer />
    </div>
  );
}