import React, { ReactElement, useEffect, useMemo, useState } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import MadeDreamsStoreHeader from '../components/MadeDreamsStoreHeader';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';
import useMadeDreamsCart from '../hooks/useMadeDreamsCart';
import { formatCurrency, madeDreamsProducts, MadeDreamsProduct } from '../helpers/madeDreamsCart';

type WorkflowStep = 'upload' | 'configure' | 'checkout';

const categories = [
  {
    title: 'Adult Paint By Numbers',
    copy: 'Museum-inspired canvases with layered color maps for mindful evenings.',
    accent: 'from-stone-200 to-amber-100',
  },
  {
    title: 'Anime Collection',
    copy: 'Cinematic linework, expressive palettes, and premium numbered detail.',
    accent: 'from-violet-200 to-pink-100',
  },
  {
    title: 'Celebrity Collection',
    copy: 'Iconic portraits translated into statement art kits for grown-up spaces.',
    accent: 'from-zinc-200 to-neutral-100',
  },
  {
    title: 'Family Memories Collection',
    copy: 'Turn weddings, vacations, and heirloom photos into keepsake canvases.',
    accent: 'from-rose-100 to-orange-100',
  },
  {
    title: 'Custom Paint By Numbers Generator',
    copy: 'Upload your photo, preview the conversion, then choose your kit finish.',
    accent: 'from-emerald-100 to-cyan-100',
  },
];

const reviews = [
  'The kit felt like opening a luxury gift. My wedding photo turned into a beautiful weekend project.',
  'The numbered canvas was detailed but relaxing, and the paints were much richer than craft-store kits.',
  'I bought one for my mom and one for myself. The custom preview made ordering feel effortless.',
];

const faqs = [
  {
    question: 'How does the custom generator work?',
    answer:
      'Upload a clear photo, choose your canvas size and difficulty, and Made Dreams prepares a numbered canvas kit with acrylic paints and brushes.',
  },
  {
    question: 'What makes these kits premium?',
    answer:
      'Each kit is designed for adults with elevated palettes, gallery-style packaging, pre-numbered canvas, curated paints, and detail brushes.',
  },
  {
    question: 'Can I use a family or pet photo?',
    answer:
      'Yes. Family portraits, travel memories, pets, and celebration photos are ideal for the custom workflow.',
  },
];

export default function MadeDreamsHome() {
  const [step, setStep] = useState<WorkflowStep>('upload');
  const [selectedProduct, setSelectedProduct] = useState<MadeDreamsProduct>(madeDreamsProducts[0]);
  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
  const [previewUrl, setPreviewUrl] = useState('');
  const [size, setSize] = useState('16 × 20 in');
  const [difficulty, setDifficulty] = useState('Balanced');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const { addProduct, addCustomKit } = useMadeDreamsCart();

  useEffect(() => {
    if (!uploadedFile) {
      setPreviewUrl('');
      return undefined;
    }

    const objectUrl = URL.createObjectURL(uploadedFile);
    setPreviewUrl(objectUrl);

    return () => URL.revokeObjectURL(objectUrl);
  }, [uploadedFile]);

  const kitPrice = useMemo(() => {
    const base = size === '12 × 16 in' ? 64 : size === '16 × 20 in' ? 89 : 124;
    const difficultyPremium = difficulty === 'Masterpiece' ? 18 : difficulty === 'Simple' ? 0 : 9;
    return base + difficultyPremium;
  }, [difficulty, size]);

  const handleUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    setSuccess('');

    if (!file) return;

    if (!file.type.startsWith('image/')) {
      setError('Please upload a JPG, PNG, or WEBP image so we can create your custom canvas preview.');
      setUploadedFile(null);
      setStep('upload');
      return;
    }

    setError('');
    setUploadedFile(file);
    setStep('configure');
  };

  const handleAddProductToCart = (product: MadeDreamsProduct) => {
    try {
      setSelectedProduct(product);
      addProduct(product);
      setError('');
      setSuccess(`${product.name} added to your Made Dreams cart.`);
    } catch (addError) {
      console.error('Failed to add Made Dreams product to cart:', addError);
      setError('We could not save this product to your cart. Please try again.');
      throw addError;
    }
  };

  const handleAddCustomKitToCart = () => {
    if (!uploadedFile) {
      setError('Upload a photo first to create your custom Made Dreams kit.');
      setStep('upload');
      return;
    }

    try {
      addCustomKit({
        uploadedFileName: uploadedFile.name,
        size,
        difficulty,
        price: kitPrice,
      });
      setError('');
      setSuccess(
        `Custom kit added: ${uploadedFile.name} · ${size} · ${difficulty} difficulty · ${formatCurrency(
          kitPrice,
        )}`,
      );
      setStep('checkout');
    } catch (addError) {
      console.error('Failed to add Made Dreams custom kit to cart:', addError);
      setError('We could not save your custom kit to the cart. Please try again.');
      throw addError;
    }
  };

  return (
    <div className="min-h-screen bg-[#f8f1e8] text-[#201713] antialiased">
      <Head>
        <title>{getPageTitle('Made Dreams Premium Paint By Numbers')}</title>
        <meta
          name="description"
          content="Made Dreams creates premium adult paint by numbers canvas kits and custom photo-to-canvas painting experiences."
        />
      </Head>

      <MadeDreamsStoreHeader />

      {success && (
        <div
          className="fixed bottom-5 left-1/2 z-40 w-[calc(100%-2rem)] max-w-2xl -translate-x-1/2 rounded-[1.5rem] border border-[#d7a25d] bg-[#201713] p-4 text-[#fff8ef] shadow-2xl shadow-[#201713]/25"
          aria-live="polite"
        >
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <p className="text-sm leading-6">{success}</p>
            <div className="flex shrink-0 items-center gap-3">
              <Link href="/cart" className="rounded-full bg-[#d7a25d] px-4 py-2 text-xs font-bold uppercase tracking-[0.18em] text-[#201713]">
                View cart
              </Link>
              <button type="button" className="text-xs font-semibold uppercase tracking-[0.18em]" onClick={() => setSuccess('')}>
                Dismiss
              </button>
            </div>
          </div>
        </div>
      )}

      <main>
        <section className="relative overflow-hidden">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(208,158,95,0.35),_transparent_34%),radial-gradient(circle_at_80%_20%,_rgba(75,43,32,0.18),_transparent_28%)]" />
          <div className="relative mx-auto grid max-w-7xl gap-12 px-5 py-16 lg:grid-cols-[1.02fr_0.98fr] lg:px-8 lg:py-24">
            <div className="flex flex-col justify-center">
              <p className="mb-5 inline-flex w-fit rounded-full border border-[#d5b98f] bg-white/45 px-4 py-2 text-xs font-semibold uppercase tracking-[0.35em] text-[#9a6332]">
                Premium custom canvas kits
              </p>
              <h1 className="max-w-3xl font-serif text-5xl leading-[0.95] tracking-[-0.04em] text-[#201713] md:text-7xl">
                Turn your most meaningful photos into frame-worthy paint by numbers art.
              </h1>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-[#6d5546]">
                Made Dreams sells adult paint by numbers kits for collectors, gift-givers, and creative nights in. Upload a
                photo, preview the numbered artwork, choose your finish, and start painting something personal.
              </p>
              <div className="mt-9 flex flex-col gap-3 sm:flex-row">
                <a
                  href="#generator"
                  className="rounded-full bg-[#a0672a] px-7 py-4 text-center text-sm font-bold uppercase tracking-[0.18em] text-white shadow-2xl shadow-[#a0672a]/30 transition hover:-translate-y-1 hover:bg-[#8c5520] focus:outline-none focus:ring-2 focus:ring-[#201713] focus:ring-offset-2 focus:ring-offset-[#f8f1e8]"
                >
                  Create custom kit
                </a>
                <a
                  href="#products"
                  className="rounded-full border border-[#cbb49b] bg-white/40 px-7 py-4 text-center text-sm font-bold uppercase tracking-[0.18em] text-[#2b201a] transition hover:-translate-y-1 hover:bg-white focus:outline-none focus:ring-2 focus:ring-[#c99455] focus:ring-offset-2 focus:ring-offset-[#f8f1e8]"
                >
                  Shop best sellers
                </a>
              </div>
            </div>

            <div className="relative min-h-[520px]">
              <div className="absolute left-4 top-8 h-64 w-52 rounded-[2rem] bg-gradient-to-br from-[#201713] via-[#7b5030] to-[#f0c171] p-4 shadow-2xl shadow-[#3b261d]/30 md:left-10">
                <div className="h-full rounded-[1.5rem] border border-white/30 bg-white/10 p-4 backdrop-blur-sm">
                  <div className="grid h-full grid-cols-4 gap-2 opacity-80">
                    {Array.from({ length: 24 }).map((_, index) => (
                      <span key={index} className="rounded-full bg-white/20 text-center text-[10px] text-white">
                        {index + 1}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
              <div className="absolute right-0 top-0 h-[430px] w-[78%] rounded-[3rem] bg-[#fff8ef] p-5 shadow-2xl shadow-[#533621]/20 md:w-[68%]">
                <div className="relative h-full overflow-hidden rounded-[2.4rem] bg-gradient-to-br from-[#271b16] via-[#9d6737] to-[#f3d4a3]">
                  <div className="absolute inset-0 bg-[linear-gradient(115deg,_transparent_0_18%,_rgba(255,255,255,0.28)_18%_19%,_transparent_19%_42%,_rgba(255,255,255,0.18)_42%_43%,_transparent_43%)]" />
                  <div className="absolute bottom-5 left-5 right-5 rounded-3xl border border-white/30 bg-white/20 p-5 text-white backdrop-blur-md">
                    <p className="text-xs uppercase tracking-[0.3em]">Custom preview</p>
                    <p className="mt-2 font-serif text-3xl">AI-numbered canvas artwork</p>
                  </div>
                </div>
              </div>
              <div className="absolute bottom-6 left-0 max-w-xs rounded-[2rem] border border-[#ead8c3] bg-white/80 p-5 shadow-xl backdrop-blur-md">
                <p className="text-xs font-bold uppercase tracking-[0.3em] text-[#a0672a]">Kit includes</p>
                <p className="mt-3 text-sm leading-6 text-[#5e493d]">
                  Numbered canvas, acrylic paints, brush set, reference guide, and gift-ready packaging.
                </p>
              </div>
            </div>
          </div>
        </section>

        <section id="collections" className="mx-auto max-w-7xl px-5 py-16 lg:px-8">
          <div className="flex flex-col justify-between gap-5 md:flex-row md:items-end">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#a0672a]">Shop by mood</p>
              <h2 className="mt-3 font-serif text-4xl tracking-[-0.03em] md:text-5xl">Curated collections for adult artists.</h2>
            </div>
            <p className="max-w-xl leading-7 text-[#6d5546]">
              Browse ready-made canvases or start from a personal photo. Every kit is designed to feel premium from
              checkout to final brushstroke.
            </p>
          </div>
          <div className="mt-10 grid gap-4 md:grid-cols-2 lg:grid-cols-5">
            {categories.map((category) => (
              <a
                key={category.title}
                href={category.title.includes('Generator') ? '#generator' : '#products'}
                className="group rounded-[2rem] border border-[#ead8c3] bg-white/55 p-4 shadow-sm transition hover:-translate-y-1 hover:bg-white hover:shadow-xl"
              >
                <div className={`h-40 rounded-[1.5rem] bg-gradient-to-br ${category.accent}`} />
                <h3 className="mt-5 font-serif text-2xl leading-7 text-[#201713]">{category.title}</h3>
                <p className="mt-3 text-sm leading-6 text-[#6d5546]">{category.copy}</p>
                <span className="mt-5 inline-flex text-xs font-bold uppercase tracking-[0.22em] text-[#a0672a]">
                  Explore
                </span>
              </a>
            ))}
          </div>
        </section>

        <section id="products" className="bg-[#fffaf3] px-5 py-16 lg:px-8">
          <div className="mx-auto max-w-7xl">
            <div className="flex flex-col justify-between gap-5 md:flex-row md:items-end">
              <div>
                <p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#a0672a]">Best sellers & new arrivals</p>
                <h2 className="mt-3 font-serif text-4xl tracking-[-0.03em] md:text-5xl">Premium kits ready for your cart.</h2>
              </div>
              <p className="max-w-xl leading-7 text-[#6d5546]">
                Every product now has a working add-to-cart button with saved quantities, inventory limits, and a cart drawer.
              </p>
            </div>

            <div className="mt-10 grid gap-6 lg:grid-cols-3">
              {madeDreamsProducts.map((product) => (
                <article key={product.id} className="rounded-[2rem] border border-[#ead8c3] bg-[#f8f1e8] p-4 shadow-sm">
                  <button
                    type="button"
                    className={`h-64 w-full rounded-[1.7rem] bg-gradient-to-br ${product.imageClass} p-5 text-left shadow-inner`}
                    onClick={() => setSelectedProduct(product)}
                  >
                    <span className="rounded-full bg-white/20 px-3 py-1 text-xs font-bold uppercase tracking-[0.22em] text-white">
                      {product.category}
                    </span>
                    <div className="mt-16 grid grid-cols-5 gap-2 opacity-70">
                      {Array.from({ length: 15 }).map((_, index) => (
                        <span key={index} className="rounded bg-white/25 text-center text-[10px] text-white">
                          {index + 1}
                        </span>
                      ))}
                    </div>
                  </button>
                  <div className="p-3">
                    <div className="flex items-start justify-between gap-3">
                      <h3 className="font-serif text-3xl leading-8">{product.name}</h3>
                      <span className="font-bold text-[#a0672a]">{formatCurrency(product.price)}</span>
                    </div>
                    <p className="mt-3 text-sm leading-6 text-[#6d5546]">{product.description}</p>
                    <div className="mt-5 flex items-center justify-between gap-3">
                      <button
                        type="button"
                        onClick={() => setSelectedProduct(product)}
                        className="text-xs font-bold uppercase tracking-[0.2em] text-[#6d5546] underline underline-offset-4"
                      >
                        Preview
                      </button>
                      <button
                        type="button"
                        onClick={() => handleAddProductToCart(product)}
                        className="rounded-full bg-[#201713] px-5 py-3 text-xs font-bold uppercase tracking-[0.18em] text-white transition hover:-translate-y-0.5 hover:bg-[#3a2921]"
                      >
                        Add to cart
                      </button>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>

        <section id="generator" className="bg-[#201713] px-5 py-16 text-[#fff8ef] lg:px-8">
          <div className="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[0.95fr_1.05fr]">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#d7a25d]">Custom Paint By Numbers Generator</p>
              <h2 className="mt-3 font-serif text-4xl tracking-[-0.03em] md:text-6xl">
                Upload image → AI pattern → choose size → add to cart.
              </h2>
              <p className="mt-5 leading-8 text-[#d9c9bc]">
                This workflow now creates a saved cart item for the customer&apos;s personalized kit. The next phase will
                convert it into a paid backend order after Stripe or PayPal confirms payment.
              </p>
              <div className="mt-8 grid gap-3 sm:grid-cols-3">
                {['Upload photo', 'Select finish', 'Review cart'].map((label, index) => (
                  <div
                    key={label}
                    className={`rounded-3xl border p-4 ${
                      step === (index === 0 ? 'upload' : index === 1 ? 'configure' : 'checkout')
                        ? 'border-[#d7a25d] bg-[#d7a25d]/10'
                        : 'border-white/10 bg-white/5'
                    }`}
                  >
                    <span className="text-xs font-bold uppercase tracking-[0.3em] text-[#d7a25d]">Step {index + 1}</span>
                    <p className="mt-2 font-serif text-2xl">{label}</p>
                  </div>
                ))}
              </div>
            </div>

            <div className="rounded-[2.5rem] border border-white/10 bg-white/5 p-5 shadow-2xl shadow-black/20">
              <label className="flex min-h-[280px] cursor-pointer flex-col items-center justify-center rounded-[2rem] border border-dashed border-[#d7a25d]/50 bg-[#130f0d]/50 p-6 text-center transition hover:border-[#d7a25d]">
                {previewUrl ? (
                  <img src={previewUrl} alt="Uploaded custom kit preview" className="max-h-64 rounded-[1.5rem] object-contain shadow-2xl" />
                ) : (
                  <div>
                    <p className="font-serif text-3xl">Upload your photo</p>
                    <p className="mt-3 max-w-md text-sm leading-6 text-[#d9c9bc]">
                      JPG, PNG, or WEBP works best. High-contrast family, pet, portrait, travel, and wedding images are ideal.
                    </p>
                  </div>
                )}
                <input className="sr-only" type="file" accept="image/*" onChange={handleUpload} />
              </label>

              {error && <p className="mt-4 rounded-2xl bg-red-500/15 p-4 text-sm text-red-100">{error}</p>}

              <div className="mt-5 grid gap-4 sm:grid-cols-2">
                <label className="block">
                  <span className="text-xs font-bold uppercase tracking-[0.25em] text-[#d7a25d]">Canvas size</span>
                  <select
                    value={size}
                    onChange={(event) => setSize(event.target.value)}
                    className="mt-2 w-full rounded-2xl border border-white/10 bg-[#fff8ef] px-4 py-3 text-[#201713]"
                  >
                    <option>12 × 16 in</option>
                    <option>16 × 20 in</option>
                    <option>24 × 36 in</option>
                  </select>
                </label>
                <label className="block">
                  <span className="text-xs font-bold uppercase tracking-[0.25em] text-[#d7a25d]">Difficulty</span>
                  <select
                    value={difficulty}
                    onChange={(event) => setDifficulty(event.target.value)}
                    className="mt-2 w-full rounded-2xl border border-white/10 bg-[#fff8ef] px-4 py-3 text-[#201713]"
                  >
                    <option>Simple</option>
                    <option>Balanced</option>
                    <option>Masterpiece</option>
                  </select>
                </label>
              </div>

              <div className="mt-5 rounded-[2rem] bg-[#fff8ef] p-5 text-[#201713]">
                <div className="flex items-start justify-between gap-4">
                  <div>
                    <p className="text-xs font-bold uppercase tracking-[0.25em] text-[#a0672a]">Canvas preview</p>
                    <p className="mt-2 font-serif text-3xl">{uploadedFile ? uploadedFile.name : 'Waiting for upload'}</p>
                    <p className="mt-2 text-sm text-[#6d5546]">
                      {size} · {difficulty} difficulty · numbered pattern kit
                    </p>
                  </div>
                  <p className="font-serif text-3xl">{formatCurrency(kitPrice)}</p>
                </div>
                <button
                  type="button"
                  onClick={handleAddCustomKitToCart}
                  className="mt-5 w-full rounded-full bg-[#a0672a] px-6 py-4 text-sm font-bold uppercase tracking-[0.18em] text-white transition hover:bg-[#8c5520]"
                >
                  Add custom kit to cart
                </button>
              </div>
            </div>
          </div>
        </section>

        <section className="mx-auto max-w-7xl px-5 py-16 lg:px-8">
          <div className="rounded-[2.5rem] border border-[#ead8c3] bg-[#fffaf3] p-5 shadow-xl shadow-[#533621]/10 md:p-8">
            <div className="grid gap-8 lg:grid-cols-[1fr_0.9fr]">
              <div className="rounded-[2rem] bg-[#201713] p-4">
                <div className={`h-72 rounded-[1.6rem] bg-gradient-to-br ${selectedProduct.imageClass} p-5`}>
                  <div className="grid h-full grid-cols-6 gap-2 opacity-75">
                    {Array.from({ length: 36 }).map((_, index) => (
                      <span key={index} className="rounded bg-white/20 text-center text-[10px] text-white">
                        {index + 1}
                      </span>
                    ))}
                  </div>
                </div>
                <div className="mt-3 grid grid-cols-3 gap-3">
                  {[1, 2, 3].map((item) => (
                    <div
                      key={item}
                      className={`h-20 rounded-2xl bg-gradient-to-br ${selectedProduct.imageClass} ${
                        item === 1 ? 'opacity-100' : 'opacity-70'
                      }`}
                    />
                  ))}
                </div>
              </div>

              <div className="flex flex-col">
                <span className="w-fit rounded-full bg-[#f0dfca] px-3 py-1 text-xs font-bold uppercase tracking-[0.22em] text-[#8c5520]">
                  {selectedProduct.badge}
                </span>
                <h3 className="mt-4 font-serif text-4xl tracking-[-0.03em]">{selectedProduct.name}</h3>
                <p className="mt-4 leading-7 text-[#6d5546]">{selectedProduct.description}</p>
                <div className="mt-6 rounded-3xl bg-[#f5eadc] p-5">
                  <p className="text-sm font-semibold uppercase tracking-[0.25em] text-[#a0672a]">Paint colors</p>
                  <div className="mt-4 flex gap-2">
                    {selectedProduct.palette.map((color) => (
                      <span key={color} className="h-10 w-10 rounded-full border border-white shadow" style={{ backgroundColor: color }} />
                    ))}
                  </div>
                </div>
                <div className="mt-4 grid gap-3 sm:grid-cols-2">
                  <div className="rounded-3xl border border-[#e3d0bc] p-4">
                    <p className="font-semibold">Brush information</p>
                    <p className="mt-2 text-sm text-[#725b4c]">Includes wide, medium, and micro-detail nylon brushes.</p>
                  </div>
                  <div className="rounded-3xl border border-[#e3d0bc] p-4">
                    <p className="font-semibold">Reviews</p>
                    <p className="mt-2 text-sm text-[#725b4c]">★★★★★ {selectedProduct.reviews} verified painters</p>
                  </div>
                </div>
                <button
                  type="button"
                  onClick={() => handleAddProductToCart(selectedProduct)}
                  className="mt-6 rounded-full bg-[#201713] px-6 py-4 text-sm font-bold uppercase tracking-[0.2em] text-white transition hover:-translate-y-1 hover:bg-[#3a2921] focus:outline-none focus:ring-2 focus:ring-[#a0672a] focus:ring-offset-2 focus:ring-offset-[#fffaf3]"
                >
                  Add to cart · {formatCurrency(selectedProduct.price)}
                </button>
              </div>
            </div>
          </div>
        </section>

        <section className="bg-[#fffaf3] px-5 py-16 lg:px-8">
          <div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-[0.8fr_1.2fr]">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#a0672a]">Customer reviews</p>
              <h2 className="mt-3 font-serif text-4xl tracking-[-0.03em] md:text-5xl">Made to become a memory.</h2>
            </div>
            <div className="grid gap-4 md:grid-cols-3">
              {reviews.map((review) => (
                <blockquote key={review} className="rounded-[2rem] border border-[#ead8c3] bg-white p-6 shadow-sm">
                  <p className="text-lg leading-8 text-[#4e3b31]">“{review}”</p>
                  <footer className="mt-5 text-sm font-semibold uppercase tracking-[0.22em] text-[#a0672a]">Verified customer</footer>
                </blockquote>
              ))}
            </div>
          </div>
        </section>

        <section id="faq" className="mx-auto grid max-w-7xl gap-8 px-5 py-16 lg:grid-cols-[0.8fr_1.2fr] lg:px-8">
          <div>
            <p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#a0672a]">FAQ</p>
            <h2 className="mt-3 font-serif text-4xl tracking-[-0.03em] md:text-5xl">Questions before you paint?</h2>
            <div className="mt-8 rounded-[2rem] bg-[#201713] p-6 text-[#fff8ef]">
              <p className="font-serif text-3xl">Join the studio list</p>
              <p className="mt-3 text-sm leading-6 text-[#d9c9bc]">Get new arrivals, custom kit tips, and launch offers.</p>
              <form className="mt-5 flex flex-col gap-3 sm:flex-row" onSubmit={(event) => event.preventDefault()}>
                <input
                  className="min-w-0 flex-1 rounded-full border border-white/10 bg-white/10 px-5 py-3 text-white placeholder:text-[#d9c9bc] focus:border-[#d7a25d] focus:outline-none focus:ring-2 focus:ring-[#d7a25d]"
                  placeholder="you@example.com"
                  type="email"
                  aria-label="Email address"
                />
                <button className="rounded-full bg-[#d7a25d] px-5 py-3 text-sm font-bold uppercase tracking-[0.18em] text-[#201713]" type="submit">
                  Subscribe
                </button>
              </form>
            </div>
          </div>
          <div className="space-y-3">
            {faqs.map((faq) => (
              <details key={faq.question} className="group rounded-[1.5rem] border border-[#e3d0bc] bg-white/65 p-5 open:bg-white">
                <summary className="cursor-pointer list-none font-serif text-2xl text-[#201713] marker:hidden">{faq.question}</summary>
                <p className="mt-3 leading-7 text-[#6d5546]">{faq.answer}</p>
              </details>
            ))}
          </div>
        </section>
      </main>

      <footer className="bg-[#130f0d] px-5 py-14 text-[#fff8ef] lg:px-8">
        <div className="mx-auto grid max-w-7xl gap-10 md:grid-cols-[1.2fr_repeat(3,1fr)]">
          <div>
            <p className="font-serif text-3xl tracking-[0.18em]">Made Dreams</p>
            <p className="mt-4 max-w-sm leading-7 text-[#cdbbac]">
              A premium personalized art marketplace for adult paint by numbers canvas kits.
            </p>
          </div>
          <div>
            <h4 className="text-sm font-bold uppercase tracking-[0.3em] text-[#d7a25d]">Shop</h4>
            <ul className="mt-4 space-y-3 text-[#d9c9bc]">
              <li>
                <a href="#collections" className="hover:text-white">
                  Adult Paint By Numbers
                </a>
              </li>
              <li>
                <a href="#collections" className="hover:text-white">
                  Anime Collection
                </a>
              </li>
              <li>
                <a href="#generator" className="hover:text-white">
                  Custom Generator
                </a>
              </li>
              <li>
                <Link href="/cart" className="hover:text-white">
                  Cart
                </Link>
              </li>
            </ul>
          </div>
          <div>
            <h4 className="text-sm font-bold uppercase tracking-[0.3em] text-[#d7a25d]">Customer Support</h4>
            <ul className="mt-4 space-y-3 text-[#d9c9bc]">
              <li>
                <a href="#faq" className="hover:text-white">
                  FAQ
                </a>
              </li>
              <li>
                <a href="#faq" className="hover:text-white">
                  Returns Policy
                </a>
              </li>
              <li>
                <a href="mailto:hello@madedreams.example" className="hover:text-white">
                  Contact Us
                </a>
              </li>
            </ul>
          </div>
          <div>
            <h4 className="text-sm font-bold uppercase tracking-[0.3em] text-[#d7a25d]">Policies</h4>
            <ul className="mt-4 space-y-3 text-[#d9c9bc]">
              <li>
                <Link href="/privacy-policy" className="hover:text-white">
                  Privacy Policy
                </Link>
              </li>
              <li>
                <a href="#faq" className="hover:text-white">
                  Terms Of Service
                </a>
              </li>
              <li>
                <Link href="/login" className="hover:text-white">
                  Admin interface
                </Link>
              </li>
            </ul>
          </div>
        </div>
        <div className="mx-auto mt-10 max-w-7xl border-t border-white/10 pt-6 text-sm text-[#a89587]">
          © 2026 Made Dreams. All rights reserved.
        </div>
      </footer>
    </div>
  );
}

MadeDreamsHome.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
