import { useState } from 'react';

const pages = ['Αρχική', 'Προσφορές', 'Προϊόντα', 'Τοποθεσία', 'Επικοινωνία'];

export default function MouriesSite() {
  const [page, setPage] = useState('Αρχική');

  return (
    <main className="min-h-screen bg-white text-gray-900">
      <div className="bg-red-600 px-4 py-2 text-center text-sm font-bold text-white">
        Μεγάλες προσφορές κάθε μέρα στο κατάστημά μας • Παραγγελίες: 6955470865
      </div>

      <header className="sticky top-0 z-50 border-b bg-white shadow-sm">
        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-5 py-4">
          <button onClick={() => setPage('Αρχική')} className="text-left">
            <div className="text-2xl font-black text-red-600">Mouries</div>
            <div className="-mt-1 text-sm font-bold uppercase tracking-wide text-green-700">Super Market</div>
          </button>

          <nav className="hidden items-center gap-2 md:flex">
            {pages.map((item) => (
              <button
                key={item}
                onClick={() => setPage(item)}
                className={`rounded-lg px-4 py-2 text-sm font-bold transition ${page === item ? 'bg-red-600 text-white' : 'hover:bg-gray-100'}`}
              >
                {item}
              </button>
            ))}
          </nav>

          <a href="tel:6955470865" className="rounded-lg bg-green-700 px-5 py-3 text-sm font-black text-white hover:bg-green-800">
            📞 Καλέστε τώρα
          </a>
        </div>

        <div className="flex gap-2 overflow-x-auto border-t px-3 py-3 md:hidden">
          {pages.map((item) => (
            <button
              key={item}
              onClick={() => setPage(item)}
              className={`whitespace-nowrap rounded-lg px-4 py-2 text-sm font-bold ${page === item ? 'bg-red-600 text-white' : 'bg-gray-100'}`}
            >
              {item}
            </button>
          ))}
        </div>
      </header>

      {page === 'Αρχική' && <Home setPage={setPage} />}
      {page === 'Προσφορές' && <Offers />}
      {page === 'Προϊόντα' && <Products />}
      {page === 'Τοποθεσία' && <Location />}
      {page === 'Επικοινωνία' && <Contact />}

      <footer className="bg-gray-950 px-5 py-10 text-white">
        <div className="mx-auto grid max-w-7xl gap-8 md:grid-cols-4">
          <div>
            <div className="text-2xl font-black text-red-500">Mouries</div>
            <div className="text-sm font-bold uppercase tracking-wide text-green-400">Super Market</div>
            <p className="mt-4 text-sm text-gray-300">Το καθημερινό σας σούπερ μάρκετ στις Μουριές Χαλκιδικής.</p>
          </div>
          <div>
            <h4 className="font-black">Μενού</h4>
            <div className="mt-3 grid gap-2 text-sm text-gray-300">
              {pages.map((item) => <button key={item} onClick={() => setPage(item)} className="text-left hover:text-white">{item}</button>)}
            </div>
          </div>
          <div>
            <h4 className="font-black">Ωράριο</h4>
            <p className="mt-3 text-sm text-gray-300">Δευτέρα – Σάββατο<br />08:00 – 21:00</p>
            <p className="mt-2 text-sm text-gray-300">Κυριακή: Κλειστά</p>
          </div>
          <div>
            <h4 className="font-black">Επικοινωνία</h4>
            <p className="mt-3 text-sm text-gray-300">📍 Μουριές Χαλκιδικής</p>
            <p className="text-sm text-gray-300">📞 6955470865</p>
            <p className="text-sm text-gray-300">✉️ contact@mouries-supermarket.gr</p>
          </div>
        </div>
        <div className="mx-auto mt-8 max-w-7xl border-t border-gray-800 pt-5 text-center text-xs text-gray-400">
          © 2026 Σούπερ Μάρκετ Mouries – Όλα τα δικαιώματα διατηρούνται.
        </div>
      </footer>
    </main>
  );
}

function Home({ setPage }) {
  return (
    <>
      <section className="bg-gradient-to-r from-red-600 via-red-600 to-green-700 text-white">
        <div className="mx-auto grid max-w-7xl items-center gap-10 px-5 py-16 md:grid-cols-2 md:py-24">
          <div>
            <div className="mb-5 inline-block rounded-full bg-yellow-300 px-4 py-2 text-sm font-black text-gray-950">ΠΡΟΣΦΟΡΕΣ ΚΑΘΕ ΜΕΡΑ</div>
            <h1 className="text-4xl font-black leading-tight md:text-6xl">Σούπερ Μάρκετ Mouries</h1>
            <p className="mt-5 text-xl font-semibold text-white/95">Φρέσκα προϊόντα, χαμηλές τιμές και γρήγορη εξυπηρέτηση στις Μουριές Χαλκιδικής.</p>
            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              <button onClick={() => setPage('Προσφορές')} className="rounded-xl bg-yellow-300 px-7 py-4 font-black text-gray-950 hover:bg-yellow-400">Δείτε Προσφορές</button>
              <a href="tel:6955470865" className="rounded-xl bg-white px-7 py-4 text-center font-black text-red-600 hover:bg-gray-100">📞 Παραγγελία</a>
            </div>
            <p className="mt-5 font-semibold">🚚 Παράδοση κατ’ οίκον για αγορές άνω των 30€ έως 10 χλμ.</p>
          </div>
          <div className="rounded-3xl bg-white p-6 text-gray-950 shadow-2xl">
            <h2 className="text-3xl font-black">Σήμερα θα βρείτε</h2>
            <div className="mt-6 grid gap-4">
              <Feature emoji="🥦" title="Φρέσκα φρούτα & λαχανικά" />
              <Feature emoji="🥛" title="Γαλακτοκομικά & βασικά τρόφιμα" />
              <Feature emoji="🥤" title="Ποτά, αναψυκτικά & νερά" />
              <Feature emoji="🧽" title="Είδη σπιτιού & καθαριστικά" />
            </div>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-5 py-14">
        <div className="grid gap-4 md:grid-cols-4">
          <Badge title="Καθημερινές προσφορές" text="Νέες ευκαιρίες κάθε μέρα" />
          <Badge title="Φρέσκα προϊόντα" text="Ποιότητα για κάθε σπίτι" />
          <Badge title="Χαμηλές τιμές" text="Οικονομία στις αγορές σας" />
          <Badge title="Delivery" text="Έως 10 χλμ. από το κατάστημα" />
        </div>
      </section>

      <section className="bg-gray-50 px-5 py-16">
        <div className="mx-auto max-w-7xl">
          <div className="mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-end">
            <div>
              <p className="font-black text-red-600">Δημοφιλείς κατηγορίες</p>
              <h2 className="text-4xl font-black">Όλα για τις καθημερινές σας ανάγκες</h2>
            </div>
            <button onClick={() => setPage('Προϊόντα')} className="rounded-xl bg-green-700 px-6 py-3 font-black text-white">Όλα τα προϊόντα</button>
          </div>
          <CategoryGrid />
        </div>
      </section>
    </>
  );
}

function Offers() {
  return (
    <section className="mx-auto max-w-7xl px-5 py-14">
      <PageTitle label="Προσφορές" title="Οι τρέχουσες προσφορές μας" text="Ανακαλύψτε καθημερινές, εβδομαδιαίες και εποχιακές προσφορές σε προϊόντα που χρειάζεστε πραγματικά." />
      <div className="mt-10 grid gap-6 md:grid-cols-3">
        <OfferBox title="Καθημερινές Προσφορές" items={['Εμφιαλωμένα νερά', 'Φρέσκο ψωμί', 'Εποχιακά φρούτα', 'Εποχιακά λαχανικά', 'Ελαιόλαδο']} />
        <OfferBox title="Εβδομαδιαίες Προσφορές" items={['Γαλακτοκομικά', 'Φρέσκα κρέατα', 'Ελληνικές σπεσιαλιτέ', 'Επιλεγμένα ποτά']} />
        <OfferBox title="Μόνιμα Χαμηλές Τιμές" items={['Βασικά τρόφιμα', 'Ρύζι & ζυμαρικά', 'Κονσέρβες', 'Καθαριστικά']} />
      </div>
      <div className="mt-10 rounded-3xl bg-red-600 p-8 text-center text-white">
        <h3 className="text-3xl font-black">Θέλετε να μάθετε τις σημερινές προσφορές;</h3>
        <p className="mt-3 text-white/90">Καλέστε μας και ενημερωθείτε άμεσα.</p>
        <a href="tel:6955470865" className="mt-6 inline-block rounded-xl bg-yellow-300 px-8 py-4 font-black text-gray-950">📞 6955470865</a>
      </div>
    </section>
  );
}

function Products() {
  return (
    <section className="mx-auto max-w-7xl px-5 py-14">
      <PageTitle label="Προϊόντα" title="Μεγάλη ποικιλία στο Σούπερ Μάρκετ Mouries" text="Στο κατάστημά μας θα βρείτε προϊόντα για κάθε καθημερινή ανάγκη, με έμφαση στη φρεσκάδα, την ποιότητα και τις προσιτές τιμές." />
      <div className="mt-10"><CategoryGrid /></div>
      <div className="mt-10 rounded-3xl bg-green-50 p-8">
        <h3 className="text-3xl font-black text-green-900">Φρέσκα από τη Χαλκιδική</h3>
        <p className="mt-4 max-w-4xl text-lg text-gray-700">Δίνουμε ιδιαίτερη έμφαση σε φρέσκα προϊόντα από τοπικούς παραγωγούς της Χαλκιδικής, εποχιακά αγαθά και προσεκτικά επιλεγμένες επιλογές για κάθε πελάτη.</p>
      </div>
    </section>
  );
}

function Location() {
  return (
    <section className="mx-auto max-w-7xl px-5 py-14">
      <PageTitle label="Τοποθεσία" title="Βρείτε μας εύκολα και άνετα" text="Το Σούπερ Μάρκετ Mouries βρίσκεται στις Μουριές Χαλκιδικής και είναι εύκολα προσβάσιμο με αυτοκίνητο ή με τα πόδια." />
      <div className="mt-10 grid gap-6 md:grid-cols-2">
        <div className="rounded-3xl border bg-white p-8 shadow-sm">
          <h3 className="text-3xl font-black">Ωράριο λειτουργίας</h3>
          <div className="mt-6 space-y-4 text-lg">
            <p>🕒 Δευτέρα – Σάββατο: <b>08:00 – 21:00</b></p>
            <p>🚪 Κυριακή: <b>Κλειστά</b></p>
            <p>📍 ΠΕΡΙΟΧΗ ΜΟΥΡΙΕΣ 0, Mouries 63200</p>
            <p>📞 6955470865</p>
          </div>
        </div>
        <div className="rounded-3xl bg-gray-950 p-8 text-white shadow-sm">
          <h3 className="text-3xl font-black">Πώς θα μας βρείτε</h3>
          <p className="mt-5 text-lg text-gray-200">Κοντά στο χωριό και στους βασικούς δρόμους της περιοχής, ώστε να μας βρίσκετε γρήγορα και άνετα.</p>
          <a href="https://www.google.com/maps/search/?api=1&query=Supermarket-Mouries%2C%20Mouries%2063200" className="mt-7 inline-block rounded-xl bg-green-600 px-7 py-4 font-black hover:bg-green-700">Άνοιγμα στο Google Maps</a>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section className="mx-auto max-w-7xl px-5 py-14">
      <PageTitle label="Επικοινωνία" title="Καλέστε μας για πληροφορίες ή παραγγελίες" text="Έχετε απορίες ή θέλετε να κάνετε παραγγελία; Επικοινωνήστε μαζί μας άμεσα." />
      <div className="mt-10 grid gap-6 md:grid-cols-3">
        <ContactCard title="Τηλέφωνο" text="6955470865" emoji="📞" />
        <ContactCard title="Email" text="contact@mouries-supermarket.gr" emoji="✉️" />
        <ContactCard title="Παράδοση" text="Άνω των 30€ έως 10 χλμ." emoji="🚚" />
      </div>
      <div className="mt-10 rounded-3xl bg-yellow-300 p-8 text-center">
        <h3 className="text-3xl font-black">Γρήγορη παραγγελία τηλεφωνικά</h3>
        <p className="mt-3 text-lg">Καλέστε μας και θα σας εξυπηρετήσουμε άμεσα.</p>
        <a href="tel:6955470865" className="mt-6 inline-block rounded-xl bg-red-600 px-8 py-4 font-black text-white">📞 Καλέστε τώρα</a>
      </div>
    </section>
  );
}

function PageTitle({ label, title, text }) {
  return (
    <div className="max-w-4xl">
      <p className="font-black text-red-600">{label}</p>
      <h1 className="mt-2 text-4xl font-black md:text-6xl">{title}</h1>
      <p className="mt-5 text-xl text-gray-600">{text}</p>
    </div>
  );
}

function Feature({ emoji, title }) {
  return <div className="rounded-xl bg-gray-100 p-4 text-lg font-black">{emoji} {title}</div>;
}

function Badge({ title, text }) {
  return <div className="rounded-2xl border bg-white p-6 text-center shadow-sm"><h3 className="font-black text-green-800">{title}</h3><p className="mt-2 text-sm text-gray-600">{text}</p></div>;
}

function CategoryGrid() {
  const cats = ['Τρόφιμα & Παντοπωλείο', 'Φρέσκα Φρούτα & Λαχανικά', 'Γαλακτοκομικά', 'Ποτά & Αναψυκτικά', 'Κατεψυγμένα', 'Είδη Καθαρισμού', 'Προσωπική Φροντίδα', 'Είδη Σπιτιού'];
  return <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">{cats.map((cat) => <div key={cat} className="rounded-2xl border bg-white p-6 font-black shadow-sm hover:border-red-300">{cat}</div>)}</div>;
}

function OfferBox({ title, items }) {
  return <div className="rounded-3xl border bg-white p-6 shadow-sm"><h3 className="text-2xl font-black text-red-600">{title}</h3><div className="mt-5 grid gap-3">{items.map((item) => <div key={item} className="flex items-center justify-between rounded-xl bg-gray-50 p-4"><span className="font-bold">{item}</span><span className="rounded-full bg-yellow-300 px-3 py-1 text-sm font-black">Προσφορά</span></div>)}</div></div>;
}

function ContactCard({ title, text, emoji }) {
  return <div className="rounded-3xl border bg-white p-8 text-center shadow-sm"><div className="text-4xl">{emoji}</div><h3 className="mt-4 text-2xl font-black">{title}</h3><p className="mt-3 text-gray-600">{text}</p></div>;
}