import React, { useMemo, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Mail, Instagram, ArrowRight, Phone } from 'lucide-react';

const pages = {
  home: 'home',
  portfolio: 'portfolio',
  contact: 'contact',
};

const imageCards = [
  {
    id: 'still-life',
    title: 'Still Life',
    subtitle: 'Product Architecture / Quiet Detail',
    mood: 'Texture first, everything else after.',
    className: 'from-stone-200 via-neutral-100 to-white',
  },
  {
    id: 'on-model',
    title: 'On Model',
    subtitle: 'Soft. Strong. Intimate.',
    mood: 'A visual language shaped by layering, intimacy, and movement.',
    className: 'from-zinc-900 via-zinc-700 to-stone-400 text-white',
  },
  {
    id: 'campaign',
    title: 'Campaign',
    subtitle: 'Real life, real layers.',
    mood: 'From morning to night — same system.',
    className: 'from-neutral-100 via-stone-200 to-zinc-300',
  },
];

const portfolioItems = [
  {
    category: 'Brand World',
    title: 'System / Modularity',
    description:
      '3ZONE introduces a modular clothing system composed of three essential garments designed to adapt to different moments of the day.',
  },
  {
    category: 'Product',
    title: 'TOB / TNK / TN3',
    description:
      'Three core pieces without a fixed hierarchy of layering: they can cover, reveal, shift, and reframe the silhouette naturally.',
  },
  {
    category: 'Campaign',
    title: 'Daily Narrative',
    description:
      'The campaign follows real routines and micro-adaptations rather than outfit changes. The focus is not styling, but use.',
  },
  {
    category: 'Tone of Voice',
    title: 'Calm. Confident. Contemporary.',
    description:
      'Never loud, never forced. Sensual without being explicit. Intelligent, but accessible.',
  },
  {
    category: 'Positioning',
    title: 'Between Bodywear and Contemporary Fashion',
    description:
      '3ZONE occupies an under-served space between functionality, sensuality, and everyday wearability.',
  },
  {
    category: 'Materiality',
    title: 'Soft Structures',
    description:
      'Cotton jersey, transparency, close-to-skin layers, and wearable modularity designed for repeated use.',
  },
];

function NavLink({ active, children, onClick }) {
  return (
    <button
      onClick={onClick}
      className={`relative text-[11px] uppercase tracking-[0.28em] transition-colors duration-300 ${
        active ? 'text-black' : 'text-black/45 hover:text-black'
      }`}
    >
      {children}
      <span
        className={`absolute -bottom-2 left-0 h-px bg-black transition-all duration-300 ${
          active ? 'w-full' : 'w-0'
        }`}
      />
    </button>
  );
}

function PlaceholderImage({ title, subtitle, mood, className }) {
  return (
    <motion.div
      whileHover={{ y: -6, scale: 1.01 }}
      transition={{ duration: 0.35, ease: 'easeOut' }}
      className={`group relative min-h-[420px] overflow-hidden rounded-[2rem] border border-black/10 bg-gradient-to-br ${className}`}
    >
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.55),transparent_32%)]" />
      <div className="absolute inset-0 opacity-0 transition duration-500 group-hover:opacity-100 bg-black/10" />
      <div className="relative flex h-full flex-col justify-between p-8 md:p-10">
        <div>
          <p className="text-[10px] uppercase tracking-[0.35em] opacity-70">Deck image placeholder</p>
          <h3 className="mt-4 max-w-xs text-3xl font-light tracking-tight md:text-4xl">{title}</h3>
        </div>
        <div>
          <p className="text-[11px] uppercase tracking-[0.28em] opacity-75">{subtitle}</p>
          <p className="mt-3 max-w-sm text-sm leading-6 opacity-80">{mood}</p>
        </div>
      </div>
    </motion.div>
  );
}

function HomePage({ goPortfolio, goContact }) {
  return (
    <>
      <section className="px-5 pt-28 md:px-10 lg:px-14">
        <div className="grid gap-8 border-t border-black/10 pt-8 lg:grid-cols-[1.05fr_0.95fr] lg:gap-14">
          <div className="flex min-h-[70vh] flex-col justify-between">
            <div>
              <p className="text-[11px] uppercase tracking-[0.35em] text-black/45">3ZONE / Contemporary System</p>
              <h1 className="mt-8 max-w-3xl text-5xl font-light leading-[0.95] tracking-[-0.04em] md:text-7xl lg:text-[6.6rem]">
                Soft. Strong. <br />
                Intimate.
              </h1>
              <p className="mt-8 max-w-xl text-base leading-8 text-black/62 md:text-lg">
                3ZONE is a modular wardrobe system designed for real urban life: three essential garments,
                one fluid visual language, and a calm sensuality that adapts instead of forcing change.
              </p>
            </div>

            <div className="flex flex-wrap gap-4 pt-8">
              <button
                onClick={goPortfolio}
                className="inline-flex items-center gap-2 rounded-full border border-black px-6 py-3 text-[11px] uppercase tracking-[0.28em] transition hover:bg-black hover:text-white"
              >
                View Portfolio <ArrowRight size={16} />
              </button>
              <button
                onClick={goContact}
                className="inline-flex items-center gap-2 rounded-full border border-black/10 px-6 py-3 text-[11px] uppercase tracking-[0.28em] transition hover:border-black/30"
              >
                Contact
              </button>
            </div>
          </div>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, ease: 'easeOut' }}
            className="relative min-h-[70vh] overflow-hidden rounded-[2rem] border border-black/10 bg-neutral-100"
          >
            <div className="absolute inset-0 bg-[linear-gradient(120deg,rgba(255,255,255,0.85),rgba(228,228,228,0.6),rgba(120,120,120,0.18))]" />
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_78%_18%,rgba(0,0,0,0.15),transparent_22%)]" />
            <div className="relative flex h-full flex-col justify-between p-8 md:p-10">
              <p className="text-[10px] uppercase tracking-[0.35em] text-black/55">Hero image from deck</p>
              <div className="self-end text-right">
                <p className="text-[11px] uppercase tracking-[0.28em] text-black/45">Brand Manifesto</p>
                <p className="mt-3 max-w-sm text-sm leading-6 text-black/65 md:text-base">
                  A reduced but intelligent wardrobe. A system that stays, because it comes from daily use,
                  not from trend.
                </p>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      <section className="px-5 py-20 md:px-10 lg:px-14 lg:py-24">
        <div className="grid gap-6 md:grid-cols-3">
          {imageCards.map((item, index) => (
            <motion.div
              key={item.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, amount: 0.25 }}
              transition={{ duration: 0.55, delay: index * 0.06, ease: 'easeOut' }}
            >
              <PlaceholderImage {...item} />
            </motion.div>
          ))}
        </div>
      </section>

      <section className="border-y border-black/10 px-5 py-20 md:px-10 lg:px-14 lg:py-24">
        <div className="grid gap-12 lg:grid-cols-[0.8fr_1.2fr]">
          <div>
            <p className="text-[11px] uppercase tracking-[0.35em] text-black/45">About</p>
            <h2 className="mt-5 text-4xl font-light tracking-[-0.03em] md:text-5xl">A wardrobe built as a system.</h2>
          </div>
          <div className="space-y-6 text-base leading-8 text-black/68 md:text-lg">
            <p>
              3ZONE was born from the observation of real women’s lives: long days, fluid rhythms, and
              constant transitions between work, movement, sociality, and personal time.
            </p>
            <p>
              The project responds with essential, modular garments designed to function alone or in
              combination — not as seasonal excess, but as a clear and adaptive language.
            </p>
            <p>
              The value is not in the single piece, but in the system the pieces create together.
            </p>
          </div>
        </div>
      </section>

      <section className="px-5 py-20 md:px-10 lg:px-14 lg:py-24">
        <div className="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
          <div className="overflow-hidden rounded-[2rem] border border-black/10 bg-zinc-900 text-white">
            <div className="flex min-h-[520px] flex-col justify-between bg-[linear-gradient(140deg,rgba(28,28,28,1),rgba(68,68,68,0.95),rgba(190,190,190,0.32))] p-8 md:p-10">
              <div>
                <p className="text-[10px] uppercase tracking-[0.35em] text-white/55">Campaign video</p>
                <h3 className="mt-4 max-w-md text-4xl font-light tracking-[-0.03em] md:text-5xl">
                  From morning to night — same system.
                </h3>
              </div>
              <p className="max-w-md text-sm leading-7 text-white/72 md:text-base">
                The campaign follows daily gestures and micro-adaptations rather than complete outfit
                changes. The focus is not styling, but use.
              </p>
            </div>
          </div>

          <div className="space-y-5">
            {[
              'Real life, real layers.',
              'No styling needed. It just works.',
              'Minimal layers, maximum effect.',
              'Quiet work, clean results.',
            ].map((line) => (
              <motion.div
                whileHover={{ x: 6 }}
                transition={{ duration: 0.25 }}
                key={line}
                className="rounded-[1.6rem] border border-black/10 px-6 py-8"
              >
                <p className="text-xl font-light tracking-[-0.02em]">{line}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function PortfolioPage() {
  return (
    <section className="px-5 pb-20 pt-28 md:px-10 lg:px-14">
      <div className="border-t border-black/10 pt-8">
        <p className="text-[11px] uppercase tracking-[0.35em] text-black/45">Portfolio</p>
        <h1 className="mt-6 max-w-4xl text-5xl font-light leading-[0.95] tracking-[-0.04em] md:text-7xl">
          Selected brand, product, and campaign directions.
        </h1>
      </div>

      <div className="mt-14 grid gap-px overflow-hidden rounded-[2rem] border border-black/10 bg-black/10 md:grid-cols-2 xl:grid-cols-3">
        {portfolioItems.map((item, index) => (
          <motion.article
            key={item.title}
            initial={{ opacity: 0, y: 24 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.2 }}
            transition={{ duration: 0.5, delay: index * 0.04 }}
            whileHover={{ y: -4 }}
            className="group bg-white p-7 md:p-8"
          >
            <p className="text-[10px] uppercase tracking-[0.35em] text-black/45">{item.category}</p>
            <h2 className="mt-5 text-2xl font-light tracking-[-0.02em] md:text-[1.95rem]">{item.title}</h2>
            <p className="mt-5 text-sm leading-7 text-black/65 md:text-base">{item.description}</p>
            <div className="mt-8 overflow-hidden rounded-[1.4rem] border border-black/10 bg-neutral-100">
              <div className="aspect-[4/5] bg-[linear-gradient(140deg,rgba(255,255,255,1),rgba(232,232,232,0.95),rgba(163,163,163,0.5))] transition duration-500 group-hover:scale-[1.03]" />
            </div>
          </motion.article>
        ))}
      </div>
    </section>
  );
}

function ContactPage() {
  return (
    <section className="px-5 pb-20 pt-28 md:px-10 lg:px-14">
      <div className="grid gap-10 border-t border-black/10 pt-8 lg:grid-cols-[0.9fr_1.1fr]">
        <div>
          <p className="text-[11px] uppercase tracking-[0.35em] text-black/45">Contact</p>
          <h1 className="mt-6 text-5xl font-light leading-[0.96] tracking-[-0.04em] md:text-7xl">
            Let’s build something clear, strong, and unforgettable.
          </h1>
        </div>

        <div className="grid gap-5">
          {[
            {
              icon: Mail,
              label: 'Email',
              value: 'hello@trezonestudio.com',
              href: 'mailto:hello@trezonestudio.com',
            },
            {
              icon: Instagram,
              label: 'Instagram',
              value: '@trezonestudio',
              href: 'https://instagram.com/trezonestudio',
            },
            {
              icon: Phone,
              label: 'Phone',
              value: '+39 340 000 0000',
              href: 'tel:+393400000000',
            },
          ].map((item) => {
            const Icon = item.icon;
            return (
              <a
                key={item.label}
                href={item.href}
                className="group flex items-center justify-between rounded-[1.8rem] border border-black/10 px-6 py-7 transition hover:border-black/25 hover:bg-black/[0.02]"
              >
                <div className="flex items-center gap-4">
                  <div className="rounded-full border border-black/10 p-3">
                    <Icon size={18} />
                  </div>
                  <div>
                    <p className="text-[10px] uppercase tracking-[0.35em] text-black/45">{item.label}</p>
                    <p className="mt-2 text-lg font-light tracking-[-0.02em] md:text-xl">{item.value}</p>
                  </div>
                </div>
                <ArrowRight className="transition group-hover:translate-x-1" size={18} />
              </a>
            );
          })}

          <div className="rounded-[1.8rem] border border-black/10 bg-neutral-50 p-6 text-sm leading-7 text-black/68 md:text-base">
            For press, showroom appointments, collaborations, and campaign requests, write directly or use
            the links above. This section is ready for your real contact details.
          </div>
        </div>
      </div>
    </section>
  );
}

export default function TreZoneStudioHelmutStyle() {
  const [page, setPage] = useState(pages.home);

  const currentPage = useMemo(() => {
    switch (page) {
      case pages.portfolio:
        return <PortfolioPage />;
      case pages.contact:
        return <ContactPage />;
      default:
        return <HomePage goPortfolio={() => setPage(pages.portfolio)} goContact={() => setPage(pages.contact)} />;
    }
  }, [page]);

  return (
    <div className="min-h-screen bg-white text-black">
      <header className="fixed inset-x-0 top-0 z-50 bg-white/90 backdrop-blur-md">
        <div className="flex items-center justify-between px-5 py-5 md:px-10 lg:px-14">
          <button
            onClick={() => setPage(pages.home)}
            className="text-[12px] uppercase tracking-[0.38em] text-black"
          >
            3ZONE
          </button>

          <nav className="flex items-center gap-6 md:gap-8">
            <NavLink active={page === pages.home} onClick={() => setPage(pages.home)}>
              Home
            </NavLink>
            <NavLink active={page === pages.portfolio} onClick={() => setPage(pages.portfolio)}>
              Portfolio
            </NavLink>
            <NavLink active={page === pages.contact} onClick={() => setPage(pages.contact)}>
              Contact
            </NavLink>
          </nav>
        </div>
      </header>

      <AnimatePresence mode="wait">
        <motion.main
          key={page}
          initial={{ opacity: 0, y: 18 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -10 }}
          transition={{ duration: 0.45, ease: 'easeOut' }}
        >
          {currentPage}
        </motion.main>
      </AnimatePresence>
    </div>
  );
}