// LouiseKeys Ltd — starter single‑file site
// Replace `/logo.png` with your actual logo path or data URL.

import { useState } from "react";

export default function LouiseKeysSite() {
  const [emailCopied, setEmailCopied] = useState(false);
  const email = "hello@louisekeys.co.uk"; // change if needed

  const keyringTypes = [
    "Name & Initial Keyrings",
    "Photo Keyrings (clear / glitter acrylic)",
    "Engraved Metal Tags",
    "Leather & Faux‑Leather Tags",
    "Acrylic Charms (stars, hearts, initials)",
    "Bottle‑Opener Keyrings",
    "LED / Safety Keyrings",
    "Trolley Coin Keyrings",
    "Lanyard Keyrings",
    "Pom‑Pom & Tassel Keyrings",
    "Novelty & Collectable Shapes",
    "Custom Logo/Business Keyrings",
  ];

  return (
    <div className="min-h-screen bg-gradient-to-b from-white to-sky-50 text-slate-800">
      {/* Header */}
      <header className="mx-auto w-full max-w-6xl px-6 py-6 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <img
            src="/logo.png"
            alt="LouiseKeys Ltd logo"
            className="h-14 w-14 rounded-full ring-4 ring-pink-200 object-cover"
            onError={(e) => {
              // Fallback if logo not yet uploaded
              (e.currentTarget as HTMLImageElement).style.display = "none";
            }}
          />
          <span className="text-2xl sm:text-3xl font-extrabold tracking-tight">
            <span className="text-pink-600">Louise</span>
            <span className="text-cyan-600">Keys</span>{" "}
            <span className="text-violet-600">Ltd</span>
          </span>
        </div>
        <a
          href="#contact"
          className="hidden sm:inline-block rounded-2xl bg-pink-600 px-5 py-2 font-semibold text-white shadow hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
        >
          Contact
        </a>
      </header>

      {/* Hero */}
      <section className="mx-auto w-full max-w-6xl px-6 pb-12 pt-4 grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
        <div>
          <h1 className="text-4xl sm:text-5xl font-extrabold leading-tight">
            Colourful keyrings for everyday smiles
          </h1>
          <p className="mt-4 text-lg text-slate-700">
            LouiseKeys Ltd designs and supplies all kinds of high‑quality, affordable keyrings – from cute initials and charms to practical engraved tags and bottle‑openers. Personal gifts, wholesale, and custom branding available.
          </p>
          <div className="mt-6 flex flex-wrap gap-3">
            <span className="inline-flex items-center rounded-full bg-cyan-100 px-4 py-2 text-cyan-800 font-medium">Local stockists</span>
            <span className="inline-flex items-center rounded-full bg-violet-100 px-4 py-2 text-violet-800 font-medium">Custom orders</span>
            <span className="inline-flex items-center rounded-full bg-pink-100 px-4 py-2 text-pink-800 font-medium">Wholesale</span>
          </div>
          <div className="mt-8 rounded-2xl border border-dashed border-pink-300 bg-white/70 p-5 shadow-sm">
            <p className="text-pink-800 font-semibold">
              Online store: <span className="font-extrabold">coming soon</span>
            </p>
            <p className="text-slate-600">In the meantime, find our items in local stores (see below) or contact us for orders.</p>
          </div>
        </div>
        <div className="relative">
          <div className="absolute -inset-4 -z-10 rounded-3xl bg-gradient-to-tr from-pink-200 via-amber-100 to-cyan-200 blur-2xl opacity-60" />
          <div className="rounded-3xl bg-white p-6 shadow-xl ring-1 ring-slate-100">
            <img
              src="/logo.png"
              alt="LouiseKeys logo"
              className="mx-auto h-56 w-auto"
              onError={(e) => ((e.currentTarget as HTMLImageElement).style.display = "none")}
            />
            <div className="mt-4 text-center text-slate-600">
              {/* Fallback art if logo not present */}
              <svg className="mx-auto h-28 w-28 text-pink-400" viewBox="0 0 24 24" fill="currentColor">
                <path d="M7 7a5 5 0 1 1 10 0c0 2.761-2.239 5-5 5v2h2a3 3 0 1 1 0 6H9a3 3 0 1 1 0-6h2v-2A5 5 0 0 1 7 7z" />
              </svg>
              <p className="mt-2">Upload your logo as <code>/logo.png</code> to show it here.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Products overview */}
      <section id="products" className="bg-white/80">
        <div className="mx-auto max-w-6xl px-6 py-12">
          <h2 className="text-3xl font-bold">What we sell</h2>
          <p className="mt-2 text-slate-600">A quick look at the kinds of keyrings we make and source:</p>
          <ul className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {keyringTypes.map((t) => (
              <li key={t} className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                <div className="flex items-start gap-3">
                  <span className="mt-1 inline-block h-3 w-3 rounded-full bg-pink-500" />
                  <span className="font-semibold">{t}</span>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* Stockists */}
      <section id="stockists" className="">
        <div className="mx-auto max-w-6xl px-6 py-12">
          <h2 className="text-3xl font-bold">Where to buy</h2>
          <div className="mt-4 grid gap-4 md:grid-cols-2">
            <div className="rounded-2xl border border-cyan-200 bg-cyan-50 p-6">
              <h3 className="text-xl font-semibold text-cyan-900">Local stores</h3>
              <p className="mt-1 text-cyan-900/80">
                Our products will be available in local shops across your area. Stockist list is being finalised — check back soon!
              </p>
            </div>
            <div className="rounded-2xl border border-violet-200 bg-violet-50 p-6">
              <h3 className="text-xl font-semibold text-violet-900">Online shop</h3>
              <p className="mt-1 text-violet-900/80">
                The LouiseKeys online store is launching soon. Sign up below and we'll email you when it goes live.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Contact / Notify */}
      <section id="contact" className="bg-white">
        <div className="mx-auto max-w-6xl px-6 py-12">
          <h2 className="text-3xl font-bold">Say hello</h2>
          <p className="mt-2 text-slate-600">Questions, custom requests, or wholesale? Drop us a line.</p>

          <div className="mt-6 grid gap-6 md:grid-cols-2">
            <form
              onSubmit={(e) => {
                e.preventDefault();
                alert("Thanks! We'll be in touch.");
              }}
              className="rounded-2xl border border-slate-200 bg-slate-50 p-6 shadow-sm"
            >
              <label className="block text-sm font-medium">Your name</label>
              <input className="mt-1 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-300" required />

              <label className="mt-4 block text-sm font-medium">Email</label>
              <input type="email" className="mt-1 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-300" required />

              <label className="mt-4 block text-sm font-medium">Message</label>
              <textarea className="mt-1 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 h-28 focus:outline-none focus:ring-2 focus:ring-pink-300" required />

              <button type="submit" className="mt-5 w-full rounded-2xl bg-pink-600 px-5 py-3 font-semibold text-white shadow hover:bg-pink-700">
                Send message
              </button>
              <p className="mt-3 text-xs text-slate-500">This form is a placeholder. Replace with your preferred form service (e.g. Formspree) when ready.</p>
            </form>

            <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
              <div className="flex items-center gap-3">
                <div className="h-10 w-10 rounded-xl bg-pink-100 grid place-items-center text-pink-700 font-bold">LK</div>
                <div>
                  <p className="font-semibold">LouiseKeys Ltd</p>
                  <p className="text-sm text-slate-600">Colourful keyrings, personalised & wholesale</p>
                </div>
              </div>

              <div className="mt-5 space-y-2 text-slate-700">
                <p>
                  <strong>Email:</strong>{" "}
                  <button
                    className="underline decoration-pink-400 underline-offset-2 hover:text-pink-700"
                    onClick={async () => {
                      await navigator.clipboard.writeText(email);
                      setEmailCopied(true);
                      setTimeout(() => setEmailCopied(false), 1800);
                    }}
                  >
                    {email}
                  </button>
                  {emailCopied && <span className="ml-2 text-xs text-green-700">copied</span>}
                </p>
                <p><strong>Instagram:</strong> @louisekeys (placeholder)</p>
                <p><strong>Company No.:</strong> (add your number)</p>
              </div>

              <div className="mt-6 rounded-xl bg-slate-50 p-4 text-sm text-slate-600">
                <p>
                  <strong>Availability:</strong> In local stores and online soon. For stockist enquiries or custom jobs, please email us.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-slate-200 bg-white/70">
        <div className="mx-auto max-w-6xl px-6 py-6 text-sm text-slate-600 flex flex-col sm:flex-row items-center justify-between gap-2">
          <p>© {new Date().getFullYear()} LouiseKeys Ltd — All rights reserved.</p>
          <p>Made with ♥ for bright little things.</p>
        </div>
      </footer>
    </div>
  );
}