import React, { ReactElement, useEffect, useMemo, useState } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';

type Product = {
  name: string;
  category: string;
  price: string;
  badge: string;
  palette: string[];
  imageClass: string;
  description: string;
  reviews: number;
};

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 products: Product[] = [
  {
    name: 'Golden Hour Atelier Kit', category: 'Best seller', price: '$68', badge: 'Ships in 3 days',
    palette: ['#1f2937', '#b45309', '#f59e0b', '#fde68a', '#fff7ed'], imageClass: 'from-[#19130f] via-[#9a5b22] to-[#f6d287]',
    description: 'A warm architectural canvas with 28 rich acrylic colors and three fine-detail brushes.', reviews: 184,
  },
  {
    name: 'Moonlit Anime Portrait', category: 'New arrival', price: '$74', badge: 'Limited drop',
    palette: ['#111827', '#4c1d95', '#7c3aed', '#c4b5fd', '#f5f3ff'], imageClass: 'from-[#111827] via-[#6d28d9] to-[#ddd6fe]',
    description: 'A dramatic anime-inspired design with crisp numbered shapes and luminous violet hues.', reviews: 92,
  },
  {
    name: 'Forever Family Custom Kit', category: 'Personalized', price: '$89', badge: 'Upload-ready',
    palette: ['#292524', '#7f1d1d', '#fb7185', '#fed7aa', '#fff7ed'], imageClass: 'from-[#292524] via-[#be123c] to-[#fed7aa]',
    description: 'Our premium custom kit for treasured photos, hand-balanced for a painterly finish.', reviews: 267,
  },
];

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(products[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 [cartCount, setCartCount] = useState(0);

  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 handleCheckout = () => {
    if (!uploadedFile) {
      setError('Upload a photo first to create your custom Made Dreams kit.');
      setStep('upload');
      return;
    }
    setError('');
    setSuccess(`Custom kit request added: ${uploadedFile.name} · ${size} · ${difficulty} difficulty · $${kitPrice}`);
    setCartCount((current) => current + 1);
    setStep('checkout');
  };

  const addProductToCart = (product: Product) => {
    setSelectedProduct(product);
    setCartCount((current) => current + 1);
    setSuccess(`${product.name} added to your Made Dreams cart.`);
  };

  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>

      <header className="sticky top-0 z-30 border-b border-[#e5d5c4]/80 bg-[#f8f1e8]/90 backdrop-blur-xl">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 lg:px-8">
          <Link href="/" className="group flex items-center gap-3" aria-label="Made Dreams home">
            <span className="grid h-10 w-10 place-items-center rounded-full bg-[#201713] text-lg font-semibold text-[#f8f1e8] shadow-lg shadow-[#201713]/20">MD</span>
            <span><span className="block font-serif text-xl tracking-[0.18em] text-[#201713]">Made Dreams</span><span className="text-xs uppercase tracking-[0.32em] text-[#8b6f57]">Painted personally</span></span>
          </Link>
          <nav className="hidden items-center gap-8 text-sm font-medium text-[#4e3b31] md:flex">
            <a className="transition hover:text-[#a0672a]" href="#collections">Collections</a>
            <a className="transition hover:text-[#a0672a]" href="#generator">Custom generator</a>
            <a className="transition hover:text-[#a0672a]" href="#products">Products</a>
            <a className="transition hover:text-[#a0672a]" href="#faq">FAQ</a>
          </nav>
          <div className="flex items-center gap-3">
            <span className="hidden rounded-full border border-[#dcc5ad] px-3 py-1 text-xs text-[#6d5546] sm:inline-flex">Cart {cartCount}</span>
            <Link href="/login" className="rounded-full bg-[#201713] px-4 py-2 text-sm font-semibold text-[#fffaf3] shadow-lg shadow-[#201713]/15 transition hover:-translate-y-0.5 hover:bg-[#3a2921] focus:outline-none focus:ring-2 focus:ring-[#c99455] focus:ring-offset-2 focus:ring-offset-[#f8f1e8]">Admin login</Link>
          </div>
        </div>
      </header>

      <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</p></div></div></div>
              <div className="absolute bottom-8 left-0 rounded-3xl border border-[#eadac9] bg-white/80 p-5 shadow-xl backdrop-blur"><p className="text-xs uppercase tracking-[0.28em] text-[#a0672a]">Kit includes</p><p className="mt-2 font-semibold">Numbered canvas · Acrylic paints · 3 brushes</p></div>
            </div>
          </div>
        </section>

        <section id="collections" className="mx-auto max-w-7xl px-5 py-16 lg:px-8">
          <div className="mb-9 flex flex-col justify-between gap-4 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">Product categories</h2></div><p className="max-w-xl text-[#6d5546]">A high-end art-store experience for adults who want beautiful kits, personal stories, and polished gifts.</p></div>
          <div className="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-[#e3d0bc] bg-white/55 p-4 shadow-sm transition hover:-translate-y-1 hover:bg-white hover:shadow-xl"><div className={`mb-5 h-36 rounded-[1.5rem] bg-gradient-to-br ${category.accent} transition group-hover:scale-[1.02]`} /><h3 className="font-serif text-2xl leading-7">{category.title}</h3><p className="mt-3 text-sm leading-6 text-[#725b4c]">{category.copy}</p></a>)}</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-8 lg:grid-cols-[0.92fr_1.08fr]">
            <div><p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#d7a25d]">Custom Paint By Numbers Generator</p><h2 className="mt-4 font-serif text-4xl tracking-[-0.03em] md:text-6xl">Upload → AI pattern → choose your kit → checkout.</h2><p className="mt-6 max-w-xl text-lg leading-8 text-[#d9c9bc]">This first Made Dreams workflow gives customers a complete guided request: image upload, conversion preview, size and difficulty selection, and a checkout-ready confirmation.</p><div className="mt-8 grid gap-3 sm:grid-cols-3">{(['upload', 'configure', 'checkout'] as WorkflowStep[]).map((item, index) => <div key={item} className={`rounded-2xl border p-4 ${step === item ? 'border-[#d7a25d] bg-[#d7a25d]/15' : 'border-white/10 bg-white/5'}`}><span className="text-xs uppercase tracking-[0.25em] text-[#d7a25d]">Step {index + 1}</span><p className="mt-2 capitalize">{item}</p></div>)}</div></div>
            <div className="rounded-[2.2rem] border border-white/10 bg-[#2b201a] p-4 shadow-2xl shadow-black/25 md:p-6"><div className="grid gap-5 lg:grid-cols-[1fr_0.9fr]">
              <div className="rounded-[1.75rem] border border-white/10 bg-[#fff8ef] p-4 text-[#201713]"><div className="flex min-h-[350px] items-center justify-center overflow-hidden rounded-[1.4rem] bg-[#ead8c3]">{previewUrl ? <div className="relative h-full min-h-[350px] w-full"><img src={previewUrl} alt="Uploaded custom kit preview" className="absolute inset-0 h-full w-full object-cover" /><div className="absolute inset-0 bg-[linear-gradient(to_right,_rgba(32,23,19,0.22)_1px,_transparent_1px),linear-gradient(to_bottom,_rgba(32,23,19,0.22)_1px,_transparent_1px)] bg-[size:54px_54px] mix-blend-multiply" /><div className="absolute inset-0 bg-[#fff8ef]/20" /><div className="absolute bottom-4 left-4 right-4 rounded-2xl bg-[#201713]/80 p-4 text-[#fff8ef] backdrop-blur"><p className="text-xs uppercase tracking-[0.3em] text-[#d7a25d]">AI pattern preview</p><p className="mt-1 text-sm">Generated from {uploadedFile?.name}</p></div></div> : <div className="p-8 text-center"><div className="mx-auto mb-5 grid h-20 w-20 place-items-center rounded-full bg-[#201713] text-3xl text-[#fff8ef]">＋</div><p className="font-serif text-3xl">Upload your photo</p><p className="mt-3 text-sm leading-6 text-[#725b4c]">JPG, PNG, or WEBP images work best. Choose bright, high-resolution photos.</p></div>}</div>{error ? <p className="mt-4 rounded-2xl bg-red-50 px-4 py-3 text-sm text-red-700">{error}</p> : null}{success ? <p className="mt-4 rounded-2xl bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{success}</p> : null}</div>
              <div className="space-y-4"><label className="block rounded-[1.5rem] border border-dashed border-[#d7a25d]/70 bg-white/5 p-5 transition hover:bg-white/10"><span className="text-sm font-semibold uppercase tracking-[0.22em] text-[#d7a25d]">1. Upload image</span><input className="mt-4 block w-full cursor-pointer rounded-xl border border-white/10 bg-[#201713] text-sm text-[#fff8ef] file:mr-4 file:cursor-pointer file:border-0 file:bg-[#d7a25d] file:px-4 file:py-3 file:font-semibold file:text-[#201713]" type="file" accept="image/*" onChange={handleUpload} /></label>
                <div className="rounded-[1.5rem] border border-white/10 bg-white/5 p-5"><p className="text-sm font-semibold uppercase tracking-[0.22em] text-[#d7a25d]">2. Select size</p><div className="mt-4 grid gap-2">{['12 × 16 in', '16 × 20 in', '24 × 36 in'].map((option) => <button key={option} type="button" onClick={() => setSize(option)} className={`rounded-2xl border px-4 py-3 text-left transition focus:outline-none focus:ring-2 focus:ring-[#d7a25d] ${size === option ? 'border-[#d7a25d] bg-[#d7a25d] text-[#201713]' : 'border-white/10 bg-[#201713] text-[#fff8ef] hover:border-white/30'}`}>{option}</button>)}</div></div>
                <div className="rounded-[1.5rem] border border-white/10 bg-white/5 p-5"><p className="text-sm font-semibold uppercase tracking-[0.22em] text-[#d7a25d]">3. Choose difficulty</p><select value={difficulty} onChange={(event) => setDifficulty(event.target.value)} className="mt-4 w-full rounded-2xl border border-white/10 bg-[#201713] px-4 py-3 text-[#fff8ef] focus:border-[#d7a25d] focus:outline-none focus:ring-2 focus:ring-[#d7a25d]"><option>Simple</option><option>Balanced</option><option>Masterpiece</option></select></div>
                <button type="button" onClick={handleCheckout} className="w-full rounded-full bg-[#d7a25d] px-6 py-4 text-sm font-black uppercase tracking-[0.2em] text-[#201713] shadow-xl shadow-[#d7a25d]/20 transition hover:-translate-y-1 hover:bg-[#e8b66f] focus:outline-none focus:ring-2 focus:ring-white">Continue to checkout · ${kitPrice}</button>
              </div>
            </div></div>
          </div>
        </section>

        <section id="products" className="mx-auto max-w-7xl px-5 py-16 lg:px-8">
          <div className="mb-9 flex flex-col justify-between gap-4 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 product pages</h2></div><p className="max-w-xl text-[#6d5546]">Select a kit to view its gallery-style detail panel with canvas preview, paints, brushes, reviews, and add-to-cart.</p></div>
          <div className="grid gap-6 lg:grid-cols-[1fr_1.05fr]"><div className="grid gap-4 md:grid-cols-3 lg:grid-cols-1">{products.map((product) => <button type="button" key={product.name} onClick={() => setSelectedProduct(product)} className={`rounded-[2rem] border bg-white/60 p-4 text-left shadow-sm transition hover:-translate-y-1 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-[#a0672a] ${selectedProduct.name === product.name ? 'border-[#a0672a]' : 'border-[#e3d0bc]'}`}><div className={`mb-4 h-36 rounded-[1.5rem] bg-gradient-to-br ${product.imageClass}`} /><span className="text-xs font-bold uppercase tracking-[0.25em] text-[#a0672a]">{product.category}</span><h3 className="mt-2 font-serif text-2xl">{product.name}</h3><p className="mt-2 text-sm text-[#725b4c]">{product.description}</p><p className="mt-4 font-bold">{product.price}</p></button>)}</div>
            <article className="rounded-[2.4rem] border border-[#e3d0bc] bg-[#fffaf3] p-4 shadow-2xl shadow-[#5b3a22]/10 md:p-6"><div className="grid gap-5 md:grid-cols-[0.95fr_1.05fr]"><div><div className={`h-80 rounded-[2rem] bg-gradient-to-br ${selectedProduct.imageClass} p-5`}><div className="h-full rounded-[1.5rem] border border-white/40 bg-white/10 p-4"><div className="grid h-full grid-cols-5 gap-2">{Array.from({ length: 35 }).map((_, index) => <span key={index} className="rounded-lg border border-white/30 bg-white/20 text-center text-[10px] text-white">{index + 1}</span>)}</div></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={() => addProductToCart(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 · {selectedProduct.price}</button></div>
            </div></article>
          </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></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>;
};
