import { createFileRoute } from '@tanstack/react-router'
import { getHomeData } from '~/lib/data'
import { QuickReserveForm } from '~/components/quick-reserve-form'

export const Route = createFileRoute('/')({
  head: () => ({
    meta: [
      {
        title: 'The Great Bear Microbrewery | Chandigarh’s Finest Craft Brewery',
      },
      {
        name: 'description',
        content:
          'Handcrafted small-batch brews, wood-fired gastronomy, and the city’s most vibrant rooftop lounge — SCO 32, Sector 26, Chandigarh.',
      },
    ],
  }),
  loader: () => getHomeData(),
  component: HomePage,
})

function HomePage() {
  const { stats, featuredBrews, experiences, testimonials } = Route.useLoaderData()

  return (
    <div className="flex w-full flex-col">
      {/* Cinematic Hero Section */}
      <section className="relative -mt-20 flex min-h-[870px] w-full items-center justify-center overflow-hidden pt-20">
        <div
          className="absolute inset-0 z-0 scale-105 bg-cover bg-center transition-transform duration-1000"
          style={{ backgroundImage: "url('/images/hero-home.jpg')" }}
        />
        <div className="absolute inset-0 z-10 bg-gradient-to-t from-surface via-surface/60 to-transparent" />
        <div className="relative z-20 mx-auto flex max-w-7xl flex-col items-center gap-space-lg px-grid-margin py-space-2xl text-center">
          <div className="inline-flex items-center gap-space-sm rounded-full border border-outline-variant/30 bg-surface-container/80 px-space-md py-space-xs text-label-lg uppercase tracking-widest text-primary backdrop-blur-md">
            <span className="material-symbols-outlined text-[16px]">local_bar</span>
            SCO 32, Sector 26, Chandigarh
          </div>
          <h1 className="max-w-4xl font-headline-xl text-headline-xl tracking-tight text-on-surface">
            Chandigarh's Finest <span className="text-primary">Craft Brewery</span>
          </h1>
          <p className="max-w-2xl font-body-lg text-body-lg text-on-surface-variant">
            Where industrial warmth meets artisanal mastery. Experience handcrafted small-batch
            brews, wood-fired gastronomy, and the city's most vibrant rooftop lounge.
          </p>
          <div className="mt-space-sm flex flex-wrap items-center justify-center gap-space-md">
            <a
              className="flex items-center gap-space-sm rounded-lg bg-primary px-space-lg py-space-md font-label-lg text-on-primary transition-all hover:bg-primary-container hover:shadow-[0_0_20px_rgba(217,119,6,0.4)]"
              href="#brews"
            >
              <span>Explore Brews</span>
              <span className="material-symbols-outlined text-[18px]">arrow_forward</span>
            </a>
            <a
              className="flex items-center gap-space-sm rounded-lg bg-surface-container-high/80 font-label-lg text-on-surface backdrop-blur-md transition-all hover:bg-surface-bright"
              href="#reserve"
            >
              <span>Reserve a Table</span>
              <span className="material-symbols-outlined text-[18px]">event_seat</span>
            </a>
          </div>
        </div>
      </section>

      {/* Quick Stats / Highlights Bar */}
      <section className="w-full bg-surface-container-low py-space-xl">
        <div className="mx-auto grid max-w-7xl grid-cols-2 gap-grid-gutter px-grid-margin text-center md:grid-cols-4">
          {stats.map((stat) => (
            <div
              key={stat.uid}
              className="flex flex-col gap-space-xs rounded-xl bg-surface-container/50 p-space-md"
            >
              <span className="font-headline-xl text-primary">{stat.value}</span>
              <span className="font-label-lg uppercase text-on-surface-variant">{stat.label}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Featured Artisan Beers */}
      <section className="w-full py-space-2xl" id="brews">
        <div className="mx-auto flex max-w-7xl flex-col gap-space-xl px-grid-margin">
          <div className="flex flex-col justify-between gap-space-md md:flex-row md:items-end">
            <div className="flex flex-col gap-space-xs">
              <span className="text-label-lg uppercase tracking-widest text-primary">
                Fresh From The Cellar
              </span>
              <h2 className="font-headline-lg text-on-surface">Featured Artisan Beers</h2>
            </div>
            <p className="max-w-md text-body-md text-on-surface-variant">
              Brewed on-site using imported German hops, crystal-clear Himalayan water, and
              traditional time-honored techniques.
            </p>
          </div>
          <div className="grid grid-cols-1 gap-grid-gutter md:grid-cols-2 lg:grid-cols-4">
            {featuredBrews.map((brew) => (
              <div
                key={brew.uid}
                className="group flex flex-col overflow-hidden rounded-xl bg-surface-container shadow-md transition-all duration-300 hover:-translate-y-1"
              >
                <div
                  className="relative h-64 w-full bg-cover bg-center"
                  style={{ backgroundImage: `url('${brew.image}')` }}
                >
                  <div className="absolute right-space-sm top-space-sm rounded bg-surface/80 px-space-sm py-space-xs text-label-md uppercase text-primary backdrop-blur-sm">
                    ABV {brew.abv}%
                  </div>
                </div>
                <div className="flex flex-1 flex-col justify-between gap-space-md p-space-lg">
                  <div className="flex flex-col gap-space-xs">
                    <div className="text-label-md uppercase tracking-wider text-primary">
                      {brew.style}
                    </div>
                    <h3 className="font-headline-md text-on-surface">{brew.name}</h3>
                    <p className="text-body-sm text-on-surface-variant">{brew.description}</p>
                  </div>
                  <div className="flex items-center justify-between border-t border-outline-variant/10 pt-space-md">
                    <span className="text-label-md text-on-surface-variant">IBU: {brew.ibu}</span>
                    <a
                      href="/our-brews"
                      className="flex items-center gap-space-xs text-label-lg text-primary group-hover:underline"
                    >
                      Tasting Notes{' '}
                      <span className="material-symbols-outlined text-[16px]">chevron_right</span>
                    </a>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Ambiance Highlights (Bento Grid layout) */}
      <section className="w-full bg-surface-container-low py-space-2xl">
        <div className="mx-auto flex max-w-7xl flex-col gap-space-xl px-grid-margin">
          <div className="mx-auto flex max-w-2xl flex-col gap-space-xs text-center">
            <span className="text-label-lg uppercase tracking-widest text-primary">
              The Experience
            </span>
            <h2 className="font-headline-lg text-on-surface">Designed for Unforgettable Nights</h2>
            <p className="text-body-md text-on-surface-variant">
              Sector 26's premier destination for craft connoisseurs and social gatherings.
            </p>
          </div>
          <div className="grid grid-cols-1 gap-grid-gutter md:grid-cols-3">
            {experiences.map((exp) => (
              <div key={exp.uid} className="group flex flex-col overflow-hidden rounded-xl bg-surface-container">
                <div
                  className="h-72 w-full bg-cover bg-center transition-transform duration-700 group-hover:scale-105"
                  style={{ backgroundImage: `url('${exp.image}')` }}
                />
                <div className="flex flex-col gap-space-sm p-space-lg">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/20 text-primary">
                    <span className="material-symbols-outlined">{exp.icon}</span>
                  </div>
                  <h3 className="font-headline-md text-on-surface">{exp.title}</h3>
                  <p className="text-body-sm text-on-surface-variant">{exp.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Customer Testimonials */}
      <section className="w-full py-space-2xl">
        <div className="mx-auto flex max-w-7xl flex-col gap-space-xl px-grid-margin">
          <div className="mx-auto flex max-w-2xl flex-col gap-space-xs text-center">
            <span className="text-label-lg uppercase tracking-widest text-primary">
              Testimonials
            </span>
            <h2 className="font-headline-lg text-on-surface">Loved by Chandigarh</h2>
          </div>
          <div className="grid grid-cols-1 gap-grid-gutter md:grid-cols-3">
            {testimonials.map((t) => (
              <div
                key={t.uid}
                className="flex flex-col justify-between gap-space-lg rounded-xl bg-surface-container p-space-lg"
              >
                <div className="flex flex-col gap-space-md">
                  <div className="flex items-center gap-space-xs text-primary">
                    {Array.from({ length: t.rating }).map((_, i) => (
                      <span
                        key={i}
                        className="material-symbols-outlined text-[18px]"
                        style={{ fontVariationSettings: "'FILL' 1" }}
                      >
                        star
                      </span>
                    ))}
                  </div>
                  <p className="text-body-md italic text-on-surface">"{t.quote}"</p>
                </div>
                <div className="flex items-center gap-space-md border-t border-outline-variant/10 pt-space-md">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-surface-bright font-headline-md text-primary">
                    {t.name
                      .split(' ')
                      .map((part) => part[0])
                      .slice(0, 2)
                      .join('')
                      .toUpperCase()}
                  </div>
                  <div className="flex flex-col">
                    <span className="text-label-lg text-on-surface">{t.name}</span>
                    <span className="text-label-md text-on-surface-variant">{t.role}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Reserve / CTA Section */}
      <section
        className="relative w-full overflow-hidden bg-surface-container-low py-space-2xl"
        id="reserve"
      >
        <div
          className="absolute inset-0 bg-cover bg-center opacity-10"
          style={{ backgroundImage: "url('/images/reserve-bg.jpg')" }}
        />
        <div className="relative z-10 mx-auto flex max-w-4xl flex-col items-center gap-space-lg px-grid-margin text-center">
          <div className="inline-flex items-center gap-space-sm rounded-full bg-primary/20 px-space-md py-space-xs text-label-lg uppercase tracking-widest text-primary">
            <span className="material-symbols-outlined text-[16px]">schedule</span>
            Book Your Experience
          </div>
          <h2 className="font-headline-xl text-on-surface">Join Us For a Pint Tonight</h2>
          <p className="max-w-xl text-body-lg text-on-surface-variant">
            Whether it's an intimate dinner or a large celebration, secure your table at
            Chandigarh's finest microbrewery in advance.
          </p>
          <div className="mt-space-md w-full max-w-xl">
            <QuickReserveForm />
          </div>
        </div>
      </section>
    </div>
  )
}
