import { useState } from "react";

// -----------------------------
// SEO + BRAND SYSTEM (Blumen Haag)
// -----------------------------
const SEO = {
  title: "Blumen Haag Heubach | Floristik, Blumen & Sträuße",
  description:
    "Blumen Haag in Heubach – Ihr Florist für Hochzeiten, Trauerfloristik, Geburtstage und individuelle Blumensträuße. Familienbetrieb mit persönlicher Beratung.",
  keywords:
    "Blumen Haag, Florist Heubach, Blumen Heubach, Blumensträuße, Hochzeit Blumen Heubach, Trauerfloristik Heubach",
};

const BRAND = {
  colors: {
    background: "#F8F6F2",
    dark: "#1F2D26",
    accent: "#C8A7A3",
    gold: "#B89B5E",
  },
};

// -----------------------------
// LOGO
// -----------------------------
function Logo() {
  return (
    <div className="font-serif text-2xl tracking-wide" aria-label="Blumen Haag Logo">
      Blumen <span className="italic">Haag</span>
    </div>
  );
}

// -----------------------------
// NAV (SEO-friendly links)
// -----------------------------
function Nav({ page, setPage }) {
  const items = ["Home", "Philosophie", "Anlässe", "Über uns", "Kontakt"];

  return (
    <header className="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md z-50 border-b" role="navigation">
      <div className="max-w-6xl mx-auto flex justify-between items-center p-4">
        <Logo />
        <nav className="flex gap-6 text-sm">
          {items.map((item) => (
            <button
              key={item}
              onClick={() => setPage(item)}
              aria-label={`Navigate to ${item}`}
              className={`hover:opacity-70 transition ${page === item ? "font-semibold" : ""}`}
            >
              {item}
            </button>
          ))}
        </nav>
      </div>
    </header>
  );
}

// -----------------------------
// HOME (SEO optimized)
// -----------------------------
function Home() {
  return (
    <main>
      {/* HERO */}
      <section
        className="h-screen flex items-center justify-center bg-[url('https://image.jimcdn.com/app/cms/image/transf/none/path/sbfc2b72146b15962/image/i1339c53ff659bdf8/version/1459150064/image.jpg')] bg-cover bg-center relative"
        aria-label="Blumenstrauß Hero Bild"
      >
        <div className="absolute inset-0 bg-black/50" />
        <div className="relative text-center text-white max-w-3xl px-6">
          <h1 className="text-5xl md:text-6xl font-serif font-light">
            Blumen Haag Heubach – Floristik mit Herz
          </h1>
          <p className="mt-6 text-lg opacity-90">
            Ihr Florist in Heubach für Hochzeiten, Trauerfloristik, Geburtstage und individuelle Blumensträuße.
          </p>
        </div>
      </section>

      {/* TRUST */}
      <section className="grid md:grid-cols-3 text-center py-16" aria-label="Vorteile">
        <div>🌿 Frische Blumen aus der Region</div>
        <div>💐 Handgebundene Sträuße</div>
        <div>🤝 Persönliche Beratung im Geschäft</div>
      </section>
    </main>
  );
}

// -----------------------------
// PHILOSOPHIE
// -----------------------------
function Philosophie() {
  return (
    <section className="min-h-screen flex items-center justify-center px-6 text-center" aria-label="Philosophie">
      <div className="max-w-2xl">
        <h2 className="text-4xl font-serif mb-6">Unsere Philosophie</h2>
        <p className="opacity-80 text-lg">
          Blumen Haag ist ein Familienbetrieb in Heubach. Wir gestalten Blumensträuße,
          die Emotionen ausdrücken – für Freude, Liebe, Dankbarkeit und Erinnerung.
          Jede Floristik wird individuell von Hand gefertigt.
        </p>
      </div>
    </section>
  );
}

// -----------------------------
// ANLÄSSE (SEO structured content)
// -----------------------------
function Anlaesse() {
  return (
    <section className="min-h-screen py-24 px-6 max-w-5xl mx-auto" aria-label="Anlässe Floristik Heubach">
      <h2 className="text-4xl font-serif text-center mb-12">
        Floristik für jeden Anlass in Heubach
      </h2>
      <div className="grid md:grid-cols-2 gap-6">
        <article className="p-6 border rounded-xl">
          <h3 className="text-xl font-medium">💍 Hochzeit Floristik Heubach</h3>
          <p className="opacity-80 mt-2">
            Brautsträuße und Hochzeitsdekoration individuell gestaltet.
          </p>
        </article>
        <article className="p-6 border rounded-xl">
          <h3 className="text-xl font-medium">🕊️ Trauerfloristik Heubach</h3>
          <p className="opacity-80 mt-2">
            Würdevolle Blumenarrangements für einen respektvollen Abschied.
          </p>
        </article>
        <article className="p-6 border rounded-xl">
          <h3 className="text-xl font-medium">🎂 Geburtstags Blumensträuße</h3>
          <p className="opacity-80 mt-2">
            Frische und farbenfrohe Sträuße für besondere Momente.
          </p>
        </article>
        <article className="p-6 border rounded-xl">
          <h3 className="text-xl font-medium">🌿 Blumen für Zuhause & Büro</h3>
          <p className="opacity-80 mt-2">
            Dekorative Floristik für Wohnräume und Geschäftsräume.
          </p>
        </article>
      </div>
    </section>
  );
}

// -----------------------------
// ABOUT
// -----------------------------
function UeberUns() {
  return (
    <section className="min-h-screen flex items-center justify-center px-6" aria-label="Über Blumen Haag">
      <div className="max-w-3xl text-center">
        <h2 className="text-4xl font-serif mb-6">Über Blumen Haag Heubach</h2>
        <p className="text-lg opacity-80">
          Blumen Haag ist ein traditionsreicher Familienbetrieb aus Heubach.
          Wir stehen für persönliche Beratung, regionale Floristik und kreative
          Blumenarrangements mit hoher Qualität.
        </p>
      </div>
    </section>
  );
}

// -----------------------------
// CONTACT
// -----------------------------
function Kontakt() {
  return (
    <section className="min-h-screen flex items-center justify-center bg-[#1F2D26] text-white px-6" aria-label="Kontakt Blumen Haag Heubach">
      <div className="text-center max-w-xl">
        <h2 className="text-4xl font-serif mb-4">Kontakt Blumen Haag</h2>
        <p className="opacity-80 mb-6">
          Hauptstraße 50, 73540 Heubach<br />
          Telefon: 07173 / 4324
        </p>
        <p className="opacity-70 mb-8 text-sm">
          Öffnungszeiten: Mo–Fr 08:00–13:00 & 14:30–18:00 · Mi 08:00–13:00 · Sa 08:00–13:00
        </p>
        <button className="bg-white text-black px-6 py-3 rounded-full">
          Anfrage senden
        </button>
      </div>
    </section>
  );
}

// -----------------------------
// APP
// -----------------------------
export default function BlumenhaagWebsite() {
  const [page, setPage] = useState("Home");

  return (
    <div className="bg-[#F8F6F2] text-[#1F2D26] min-h-screen">
      {/* SEO Head (for frameworks like Next.js this would go in <Head>) */}
      <div className="hidden">
        <title>{SEO.title}</title>
        <meta name="description" content={SEO.description} />
        <meta name="keywords" content={SEO.keywords} />
      </div>

      <Nav page={page} setPage={setPage} />

      <div className="pt-20">
        {page === "Home" && <Home />}
        {page === "Philosophie" && <Philosophie />}
        {page === "Anlässe" && <Anlaesse />}
        {page === "Über uns" && <UeberUns />}
        {page === "Kontakt" && <Kontakt />}
      </div>
    </div>
  );
}