import { Link } from 'react-router-dom'
import type { Treatment, Testimonial, TeamMember, BlogPost, Package, GalleryImage } from '../lib/types'
import { CheckCircle, Clock, StarRating, Instagram, Facebook } from './icons'

export function TreatmentCard({ t }: { t: Treatment }) {
  return (
    <article className="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-card transition-all duration-300 hover:-translate-y-2 hover:shadow-soft">
      <div className="relative aspect-[4/3] overflow-hidden">
        <img
          src={t.image}
          alt={t.name}
          loading="lazy"
          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.07]"
        />
        <span className="absolute top-3.5 right-3.5 rounded-full bg-white/85 px-3.5 py-1.5 text-[0.85rem] font-bold text-ocean-700 backdrop-blur-md">
          ${t.price} USD
        </span>
      </div>
      <div className="flex flex-1 flex-col p-6">
        <h3 className="mb-2 text-[1.22rem] text-ocean-700">{t.name}</h3>
        <p className="flex-1 text-[0.9rem] text-muted">{t.description}</p>
        <span className="mt-4 inline-flex items-center gap-2 text-[0.8rem] font-semibold tracking-wider uppercase text-turquoise-500">
          <Clock width={15} height={15} /> {t.duration}
        </span>
      </div>
    </article>
  )
}

export function TestimonialCard({ t }: { t: Testimonial }) {
  return (
    <div className="glass-card p-8 shadow-card transition-transform duration-300 hover:-translate-y-2">
      <StarRating rating={t.rating} />
      <blockquote className="mb-6 text-[0.95rem] italic">“{t.review}”</blockquote>
      <div className="flex items-center gap-3.5">
        <img src={t.photo} alt={t.client_name} loading="lazy" className="h-12 w-12 rounded-full object-cover" />
        <div>
          <strong className="block text-[0.92rem]">{t.client_name}</strong>
          <span className="text-[0.78rem] text-muted">{t.location}</span>
        </div>
      </div>
    </div>
  )
}

export function TeamCard({ m }: { m: TeamMember }) {
  return (
    <div className="group text-center">
      <div className="relative aspect-[4/4.7] overflow-hidden rounded-3xl shadow-card">
        <img
          src={m.photo}
          alt={m.name}
          loading="lazy"
          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
        />
        <div className="absolute inset-x-0 bottom-0 flex translate-y-full justify-center gap-3 bg-gradient-to-t from-ocean-700/75 to-transparent p-4 transition-transform duration-300 group-hover:translate-y-0">
          {m.socials.instagram && (
            <a href={m.socials.instagram} aria-label={`${m.name} on Instagram`} className="grid h-9 w-9 place-items-center rounded-full bg-white/90 text-ocean-700 transition-transform hover:-translate-y-0.5">
              <Instagram />
            </a>
          )}
          {m.socials.facebook && (
            <a href={m.socials.facebook} aria-label={`${m.name} on Facebook`} className="grid h-9 w-9 place-items-center rounded-full bg-white/90 text-ocean-700 transition-transform hover:-translate-y-0.5">
              <Facebook />
            </a>
          )}
        </div>
      </div>
      <h3 className="mt-5 text-[1.2rem] text-ocean-700">{m.name}</h3>
      <p className="mt-1 text-[0.83rem] font-semibold tracking-widest uppercase text-turquoise-500">
        {m.position}
      </p>
    </div>
  )
}

export function BlogCard({ p }: { p: BlogPost }) {
  const date = new Date(p.published_at).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
  return (
    <article className="group overflow-hidden rounded-3xl bg-white shadow-card transition-all duration-300 hover:-translate-y-2 hover:shadow-soft">
      <Link to={`/blog/${p.slug}`} className="block">
        <div className="aspect-[16/10] overflow-hidden">
          <img
            src={p.image}
            alt={p.title}
            loading="lazy"
            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
          />
        </div>
        <div className="p-6">
          <div className="mb-2.5 text-[0.75rem] font-semibold tracking-widest uppercase text-turquoise-500">
            {p.category} · {date}
          </div>
          <h3 className="mb-2.5 text-[1.15rem] text-ocean-700">{p.title}</h3>
          <p className="text-[0.88rem] text-muted">{p.excerpt}</p>
          <span className="mt-4 inline-flex items-center gap-2 text-[0.85rem] font-semibold text-turquoise-500 transition-all group-hover:gap-3">
            Read More →
          </span>
        </div>
      </Link>
    </article>
  )
}

export function PackageCard({ p, ctaHref = '/contact' }: { p: Package; ctaHref?: string }) {
  return (
    <div className="grid overflow-hidden rounded-[28px] bg-white shadow-soft lg:grid-cols-[1.1fr_1fr]">
      <div className="relative min-h-[280px] lg:min-h-[420px]">
        <img src={p.image} alt={p.name} loading="lazy" className="absolute inset-0 h-full w-full object-cover" />
        <span className="absolute top-5 left-5 rounded-full bg-coral-400 px-4 py-2 text-[0.75rem] font-bold tracking-widest uppercase text-white">
          {p.tag}
        </span>
      </div>
      <div className="p-8 lg:p-11">
        <h3 className="mb-1.5 text-[1.9rem] text-ocean-700">{p.name}</h3>
        <p className="mb-4 text-[0.85rem] font-semibold tracking-widest uppercase text-turquoise-500">
          {p.dates_label}
        </p>
        <p className="mb-5 text-muted">{p.description}</p>
        <ul className="mb-7 grid gap-3 sm:grid-cols-2">
          {p.included.map((item) => (
            <li key={item} className="flex items-start gap-2.5 text-[0.9rem] font-medium">
              <CheckCircle className="mt-0.5 shrink-0 text-turquoise-500" width={18} height={18} />
              {item}
            </li>
          ))}
        </ul>
        <div className="mb-7 flex flex-wrap gap-6">
          <div className="rounded-2xl bg-mist px-5 py-3.5">
            <strong className="block font-display text-[1.55rem] text-ocean-700">${p.price}</strong>
            <span className="text-[0.75rem] font-semibold tracking-wider uppercase text-muted">
              {p.price_label}
            </span>
          </div>
          {p.promo_price && (
            <div className="rounded-2xl bg-mist px-5 py-3.5">
              <strong className="block font-display text-[1.55rem] text-ocean-700">
                ${p.promo_price}
              </strong>
              <span className="text-[0.75rem] font-semibold tracking-wider uppercase text-muted">
                {p.promo_label}
              </span>
            </div>
          )}
        </div>
        <Link to={ctaHref} className="btn-primary">
          Reserve Your Escape
        </Link>
      </div>
    </div>
  )
}

export function GalleryGrid({ images, onOpen }: { images: GalleryImage[]; onOpen?: (i: number) => void }) {
  return (
    <div className="grid auto-rows-[170px] grid-cols-2 gap-4 md:auto-rows-[210px] md:grid-cols-4">
      {images.map((img, i) => (
        <button
          key={img.id}
          type="button"
          onClick={() => onOpen?.(i)}
          className={`group relative cursor-pointer overflow-hidden rounded-2xl ${
            img.size === 'tall' ? 'row-span-2' : img.size === 'wide' ? 'col-span-2' : ''
          }`}
        >
          <img
            src={img.src}
            alt={img.alt}
            loading="lazy"
            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.08]"
          />
          <span className="absolute inset-0 bg-gradient-to-t from-ocean-700/55 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
        </button>
      ))}
    </div>
  )
}
