import Image from 'next/image'
import { Flame, MapPin, Package } from 'lucide-react'

interface Person {
  name: string
  role: string
  bio: string
  image: string
  tags: string[]
}

const team: Person[] = [
  {
    name: 'Ben',
    role: 'The wok',
    bio: "Ben cooks the noodles himself. He watched Newcastle's street food settle into kota, shisa nyama and chips, and set his wok down beside it: wheat noodles flashed over high heat with garlic, fresh cabbage, a dark soy glaze and a hit of local chilli that keeps it South African. When the queue at the window gets long, he is the reason it still moves.",
    image: 'https://images.pexels.com/photos/38975158/pexels-photo-38975158.jpeg?auto=compress&cs=tinysrgb&h=350',
    tags: ['Signature wok-tossed noodles', 'Dark soy glaze', 'Heat levels'],
  },
  {
    name: 'Nomsa',
    role: 'Counter and takeaway',
    bio: 'Nomsa runs the counter and the takeaway window: she takes the order, checks how hot you want it, calls it through to the wok and hands it over without letting it go cold. If it is your first time at the corner, ask her what to start with.',
    image: 'https://images.pexels.com/photos/28182159/pexels-photo-28182159.jpeg?auto=compress&cs=tinysrgb&h=350',
    tags: ['Orders and collection', 'First-timers', 'School-rush queue'],
  },
  {
    name: 'Sipho',
    role: 'Prep and fresh vegetables',
    bio: 'Sipho keeps the prep station stocked so nothing sits still while the wok is hot: cabbage shredded, spring onion and chilli ready, takeaway boxes stacked within reach, and the counter wiped down between orders.',
    image: 'https://images.pexels.com/photos/1820575/pexels-photo-1820575.jpeg?auto=compress&cs=tinysrgb&h=350',
    tags: ['Prep station', 'Fresh vegetables', 'Boxes and packing'],
  },
]

function LeadProfile({ person }: { person: Person }) {
  return (
    <article className="overflow-hidden rounded-lg border border-foreground/20 bg-foreground/10 backdrop-blur-md lg:col-span-2">
      <div className="grid md:grid-cols-2">
        <div className="relative aspect-[4/3] w-full overflow-hidden md:aspect-auto md:min-h-[460px]">
          <Image
            src={person.image}
            alt={person.name + ', ' + person.role}
            fill
            sizes="(max-width: 768px) 100vw, 50vw"
            className="object-cover"
          />
          <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-background/70 via-transparent to-transparent" />
        </div>
        <div className="flex flex-col justify-center p-8 sm:p-10 lg:p-12">
          <span className="inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.3em] text-accent">
            <Flame className="h-4 w-4" />
            Behind the wok
          </span>
          <h3 className="font-display mt-4 text-2xl font-light tracking-tight sm:text-3xl">{person.name}</h3>
          <p className="mt-2 text-[11px] uppercase tracking-[0.25em] text-muted-foreground">{person.role}</p>
          <p className="mt-6 text-base leading-relaxed text-muted-foreground">{person.bio}</p>
          <ul className="mt-7 flex flex-wrap gap-2">
            {person.tags.map((tag) => (
              <li
                key={tag}
                className="rounded-full border border-foreground/20 px-3 py-1 text-[11px] uppercase tracking-[0.15em] text-muted-foreground"
              >
                {tag}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </article>
  )
}

function TeammateCard({ person }: { person: Person }) {
  return (
    <article className="group overflow-hidden rounded-lg border border-foreground/20 bg-foreground/10 backdrop-blur-md transition-all duration-200 ease-out hover:border-accent/60">
      <div className="relative aspect-[4/3] w-full overflow-hidden">
        <Image
          src={person.image}
          alt={person.name + ', ' + person.role}
          fill
          sizes="(max-width: 1024px) 100vw, 50vw"
          className="object-cover transition-transform duration-500 ease-out group-hover:scale-105"
        />
        <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
      </div>
      <div className="p-6 sm:p-8">
        <h3 className="font-display text-xl font-light tracking-tight">{person.name}</h3>
        <p className="mt-1 text-[11px] uppercase tracking-[0.25em] text-accent">{person.role}</p>
        <p className="mt-4 text-sm leading-relaxed text-muted-foreground">{person.bio}</p>
        <ul className="mt-5 flex flex-wrap gap-2">
          {person.tags.map((tag) => (
            <li
              key={tag}
              className="rounded-full border border-foreground/20 px-3 py-1 text-[11px] uppercase tracking-[0.15em] text-muted-foreground"
            >
              {tag}
            </li>
          ))}
        </ul>
      </div>
    </article>
  )
}

export default function FamilyBehindTheWokSection() {
  return (
    <section
      id="family-behind-wok"
      data-vula-section="familybehindwok"
      className="bg-card text-card-foreground py-24 sm:py-32"
    >
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl">
          <span className="text-[11px] uppercase tracking-[0.3em] text-accent">Madadeni Section 4, Newcastle</span>
          <h2 className="font-display mt-6 text-3xl font-light leading-tight tracking-tight sm:text-4xl lg:text-5xl">
            Ben works the wok. <span className="italic text-accent">The family works the corner.</span>
          </h2>
          <p className="mt-6 text-base leading-relaxed text-muted-foreground sm:text-lg">
            A neighbourhood kitchen is not a machine. It is a few people who know your face, your usual order, and exactly how much chilli you can take.
          </p>
        </div>

        <div className="mt-16 grid grid-cols-1 gap-6 lg:grid-cols-2">
          {team.map((person, i) =>
            i === 0 ? (
              <LeadProfile key={person.name} person={person} />
            ) : (
              <TeammateCard key={person.name} person={person} />
            )
          )}
        </div>

        <div className="mt-14 flex flex-wrap items-center gap-x-10 gap-y-4 text-[11px] uppercase tracking-[0.25em] text-muted-foreground">
          <span className="inline-flex items-center gap-2">
            <Flame className="h-4 w-4 text-accent" />
            Cooked to order
          </span>
          <span className="inline-flex items-center gap-2">
            <Package className="h-4 w-4 text-accent" />
            Boxed to go
          </span>
          <span className="inline-flex items-center gap-2">
            <MapPin className="h-4 w-4 text-accent" />
            Made here, in Section 4
          </span>
        </div>
      </div>
    </section>
  )
}