import { createFileRoute } from "@tanstack/react-router";
import { SiteHeader } from "@/components/SiteHeader";
import logo from "@/assets/buna-logo.jpg";
import interior from "@/assets/buna-interior.jpg";
import team from "@/assets/buna-team.jpg";
import menuPhoto from "@/assets/buna-menu.jpg";
import terrace from "@/assets/buna-terrace.jpg";
import counter from "@/assets/buna-counter.jpg";
import storefront from "@/assets/buna-storefront.jpg";

export const Route = createFileRoute("/")({
  component: Index,
  head: () => ({
    meta: [
      { title: "BUNA Charlottenburg – Specialty Coffee in Berlin" },
      {
        name: "description",
        content:
          "BUNA Charlottenburg – Ihr Café für handverlesenen Espresso, Cappuccino und hausgemachtes Gebäck mitten in Berlin-Charlottenburg.",
      },
    ],
  }),
});

type MenuItem = {
  name: string;
  marker?: string;
  variants?: { label: string; price: string }[];
  price?: string;
  note?: string;
};

const menuLeft: MenuItem[] = [
  {
    name: "Espresso",
    marker: "(2)",
    variants: [
      { label: "einfach", price: "2,20 €" },
      { label: "doppelt", price: "3,20 €" },
    ],
  },
  {
    name: "Espresso Macchiato",
    marker: "(2)",
    variants: [
      { label: "einfach", price: "2,70 €" },
      { label: "doppelt", price: "3,90 €" },
    ],
  },
  { name: "Kaffee", marker: "(2)", price: "3,30 €" },
  { name: "Cappuccino", marker: "(G,2)", price: "3,90 €" },
];

const menuRight: MenuItem[] = [
  { name: "Latte Macchiato", marker: "(G,2)", price: "4,40 €" },
  { name: "Milchkaffee", marker: "(G,2)", price: "4,40 €" },
  { name: "Flat White", marker: "(G,2)", price: "4,60 €" },
  { name: "extra Shot", price: "1,30 €" },
  { name: "Schokolade", marker: "(1)", price: "3,90 €" },
  { name: "Tee", price: "2,90 €", note: "Schwarz, Grün, Kräuter" },
];

function MenuRow({ item }: { item: MenuItem }) {
  return (
    <div className="border-b border-dashed border-border pb-4">
      <div className="flex items-baseline gap-3">
        <h3 className="font-display text-xl text-primary">
          {item.name}
          {item.marker && (
            <sup className="ml-1 text-[0.6em] text-muted-foreground">{item.marker}</sup>
          )}
        </h3>
        <span className="flex-1 border-b border-dotted border-border/70" />
        {item.price && <span className="font-display text-lg text-accent">{item.price}</span>}
      </div>
      {item.variants && (
        <div className="mt-2 space-y-1 pl-4 text-sm">
          {item.variants.map((v) => (
            <div key={v.label} className="flex items-baseline gap-3">
              <span className="text-muted-foreground">{v.label}</span>
              <span className="flex-1 border-b border-dotted border-border/70" />
              <span className="text-foreground">{v.price}</span>
            </div>
          ))}
        </div>
      )}
      {item.note && <p className="mt-1 text-sm text-muted-foreground">{item.note}</p>}
    </div>
  );
}

function Index() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <SiteHeader />

      {/* HERO */}
      <section className="relative overflow-hidden">
        <div className="mx-auto grid max-w-6xl gap-12 px-6 py-20 md:grid-cols-2 md:items-center md:py-28">
          <div className="space-y-6">
            <span className="inline-block text-xs uppercase tracking-[0.4em] text-accent">
              Specialty Coffee · Berlin
            </span>
            <h1 className="font-display text-5xl leading-[1.05] text-primary md:text-6xl">
              Wo der Tag mit einer guten Tasse Kaffee beginnt.
            </h1>
            <p className="max-w-md text-base leading-relaxed text-muted-foreground">
              Willkommen im BUNA Charlottenburg. Ein ruhiger Ort für handgebrühten
              Kaffee, frisches Gebäck und ehrliche Gastfreundschaft – mitten in Berlin.
            </p>
            <div className="flex flex-wrap gap-3 pt-2">
              <a
                href="#karte"
                className="rounded-full bg-primary px-6 py-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-accent"
              >
                Unsere Karte
              </a>
              <a
                href="#kontakt"
                className="rounded-full border border-primary/30 px-6 py-3 text-sm font-medium text-primary transition-colors hover:bg-secondary"
              >
                Besuch uns
              </a>
            </div>
          </div>
          <div className="relative">
            <div className="absolute -inset-6 -z-10 rounded-[2rem] bg-secondary/60 blur-2xl" />
            <img
              src={interior}
              alt="Innenraum des BUNA Charlottenburg Cafés"
              className="aspect-[4/5] w-full rounded-[1.5rem] object-cover shadow-xl"
            />
            <div className="absolute -bottom-6 -left-6 hidden rounded-2xl border border-border bg-card p-4 shadow-lg md:block">
              <img src={logo} alt="" className="h-16 w-16 rounded-full" />
            </div>
          </div>
        </div>
      </section>

      {/* ÜBER UNS */}
      <section id="ueber-uns" className="border-t border-border/60 bg-card/40">
        <div className="mx-auto grid max-w-6xl gap-12 px-6 py-20 md:grid-cols-2 md:items-center">
          <img
            src={team}
            alt="Das Team des BUNA Charlottenburg"
            className="aspect-[4/3] w-full rounded-2xl object-cover shadow-md"
          />
          <div className="space-y-5">
            <span className="text-xs uppercase tracking-[0.4em] text-accent">Über uns</span>
            <h2 className="font-display text-4xl text-primary">
              „Buna" – das äthiopische Wort für Kaffee.
            </h2>
            <p className="leading-relaxed text-muted-foreground">
              Bei uns trifft die jahrhundertealte Kaffeetradition Äthiopiens auf das
              entspannte Lebensgefühl von Charlottenburg. Wir rösten sorgfältig, brühen
              mit Liebe und servieren in einer Atmosphäre, in der man gerne länger bleibt.
            </p>
            <p className="leading-relaxed text-muted-foreground">
              Ob Espresso to go, lange Gespräche bei Cappuccino oder ein Stück
              Kuchen am Nachmittag – wir freuen uns auf Sie.
            </p>
          </div>
        </div>
      </section>

      {/* KARTE */}
      <section id="karte" className="mx-auto max-w-6xl px-6 py-20">
        <div className="mb-12 flex flex-col items-center text-center">
          <span className="text-xs uppercase tracking-[0.4em] text-accent">Speisekarte</span>
          <h2 className="mt-2 font-display text-5xl tracking-[0.2em] text-primary">BUNA</h2>
          <img src={logo} alt="" aria-hidden className="mt-3 h-8 w-8 rounded-full opacity-80" />
        </div>
        <div className="grid gap-x-16 gap-y-6 md:grid-cols-2">
          <div className="space-y-6">
            {menuLeft.map((item) => (
              <MenuRow key={item.name} item={item} />
            ))}
          </div>
          <div className="space-y-6">
            {menuRight.map((item) => (
              <MenuRow key={item.name} item={item} />
            ))}
          </div>
        </div>
        <p className="mt-10 text-center text-xs leading-relaxed text-muted-foreground">
          (1) mit Farbstoff, (2) Koffeinhaltig, (G,2) Milch enthalten (einschließlich Laktose).
          Wenn Sie von Allergien und Unverträglichkeiten betroffen sind, sprechen Sie bitte vor der
          Bestellung mit unserem Personal. Alle Preise in Euro inkl. MwSt. und Bedienung. Irrtümer
          und Druckfehler vorbehalten. Abbildungen ähnlich.
        </p>
      </section>

      {/* GALERIE */}
      <section id="galerie" className="border-t border-border/60 bg-card/40">
        <div className="mx-auto max-w-6xl px-6 py-20">
          <div className="mb-12 text-center">
            <span className="text-xs uppercase tracking-[0.4em] text-accent">Galerie</span>
            <h2 className="mt-2 font-display text-4xl text-primary">Ein Blick zu uns</h2>
          </div>
          <div className="grid gap-4 md:grid-cols-3">
            <img src={interior} alt="Café-Theke" className="aspect-[3/4] w-full rounded-xl object-cover md:row-span-2 md:aspect-auto md:h-full" />
            <img src={team} alt="Team an der Espressomaschine" className="aspect-[4/3] w-full rounded-xl object-cover" />
            <img src={menuPhoto} alt="Karte an der Wand" className="aspect-[4/3] w-full rounded-xl object-cover" />
            <img src={terrace} alt="Terrasse vor dem Café" className="aspect-[4/3] w-full rounded-xl object-cover" />
            <img src={counter} alt="Sitzbereich mit Theke und La Marzocco" className="aspect-[4/3] w-full rounded-xl object-cover" />
            <img src={storefront} alt="Eingang und Schaufenster des BUNA Charlottenburg" className="aspect-[4/3] w-full rounded-xl object-cover" />
          </div>
        </div>
      </section>

      {/* KONTAKT */}
      <section id="kontakt" className="mx-auto max-w-6xl px-6 py-20">
        <div className="grid gap-12 md:grid-cols-2">
          <div className="space-y-5">
            <span className="text-xs uppercase tracking-[0.4em] text-accent">Kontakt</span>
            <h2 className="font-display text-4xl text-primary">Besuchen Sie uns</h2>
            <p className="text-muted-foreground">
              Wir freuen uns auf Sie – ob auf einen schnellen Espresso oder einen
              gemütlichen Nachmittag.
            </p>
            <div className="space-y-2 pt-4 text-sm">
              <p><span className="text-muted-foreground">Adresse: </span>Charlottenburg, Berlin</p>
              <p><span className="text-muted-foreground">Telefon: </span>auf Anfrage</p>
              <p><span className="text-muted-foreground">E-Mail: </span>hallo@buna-charlottenburg.de</p>
            </div>
          </div>
          <div className="rounded-2xl border border-border bg-card p-8">
            <h3 className="font-display text-2xl text-primary">Öffnungszeiten</h3>
            <dl className="mt-5 space-y-3 text-sm">
              {[
                ["Montag – Freitag", "08:00 – 18:00"],
                ["Samstag", "09:00 – 18:00"],
                ["Sonntag", "10:00 – 17:00"],
              ].map(([d, h]) => (
                <div key={d} className="flex justify-between border-b border-dashed border-border pb-3">
                  <dt className="text-foreground">{d}</dt>
                  <dd className="text-accent">{h}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </section>

      <footer className="border-t border-border/60 bg-card/60">
        <div className="mx-auto flex max-w-6xl flex-col items-center gap-2 px-6 py-10 text-center">
          <img src={logo} alt="" className="h-10 w-10 rounded-full" />
          <p className="font-display tracking-[0.3em] text-primary">BUNA CHARLOTTENBURG</p>
          <p className="text-xs text-muted-foreground">
            © {new Date().getFullYear()} BUNA Charlottenburg · Mit Liebe gebrüht in Berlin
          </p>
        </div>
      </footer>
    </div>
  );
}