import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { ArrowUpRight, Mail, Instagram, Music, Heart, Star, Sparkles } from "lucide-react";

const projectImages = [
  "https://images.unsplash.com/photo-1542038784456-1ea8e935640e?auto=format&fit=crop&w=900&q=80",
  "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=900&q=80",
  "https://images.unsplash.com/photo-1490750967868-88aa4486c946?auto=format&fit=crop&w=900&q=80",
  "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=900&q=80",
];

const projects = [
  ["NIGHT DRIVE", "poster design"],
  ["DON'T OVERTHINK IT", "editorial design"],
  ["FLEUR", "magazine layout"],
  ["DIGITAL DREAMS", "web design"],
];

function TornPaper({ children, className = "" }) {
  return <div className={`torn relative ${className}`}>{children}</div>;
}

function Tape({ className = "" }) {
  return <div className={`absolute z-20 h-8 w-28 bg-[#d9b6a9]/70 shadow-sm backdrop-blur-[1px] ${className}`} />;
}

function Scribble({ children, className = "" }) {
  return <span className={`font-hand text-pink-300 ${className}`}>{children}</span>;
}

function ProjectCard({ title, type, img, i }) {
  return (
    <motion.article
      whileHover={{ y: -10, rotate: i % 2 ? 1.5 : -1.5 }}
      className="relative min-h-[430px] border border-black/30 bg-[#f4d7dc] p-3 shadow-[10px_10px_0_rgba(0,0,0,.35)]"
    >
      <Tape className="-top-3 left-10 rotate-[-7deg]" />
      <div className="relative h-[285px] overflow-hidden border border-black/40 bg-black">
        <img src={img} className="h-full w-full object-cover grayscale contrast-125" />
        <div className="absolute inset-0 bg-pink-500/35 mix-blend-screen" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,.35),transparent_25%),linear-gradient(180deg,transparent,rgba(0,0,0,.6))]" />
        <span className="absolute left-3 top-3 bg-black px-2 py-1 font-mono text-[10px] uppercase tracking-widest text-pink-200">0{i + 1}</span>
        <Scribble className="absolute bottom-3 right-4 rotate-[-8deg] text-4xl">☆</Scribble>
      </div>
      <h3 className="mt-5 font-serif text-4xl uppercase leading-none text-black">{title}</h3>
      <div className="mt-3 flex items-center justify-between">
        <p className="font-mono text-xs uppercase tracking-[.18em] text-black/60">{type}</p>
        <div className="grid h-9 w-9 place-items-center rounded-full border border-black/40"><ArrowUpRight size={17} /></div>
      </div>
    </motion.article>
  );
}

export default function PinkDigitalArchivePortfolio() {
  const [xy, setXy] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const move = (e) => setXy({ x: e.clientX, y: e.clientY });
    window.addEventListener("mousemove", move);
    return () => window.removeEventListener("mousemove", move);
  }, []);

  return (
    <main className="relative min-h-screen overflow-x-hidden bg-[#100b10] text-[#140d10] selection:bg-pink-400 selection:text-black">
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,700;6..96,900&family=Space+Mono:wght@400;700&family=Shadows+Into+Light&display=swap');
        .font-serif{font-family:'Bodoni Moda',serif}.font-mono{font-family:'Space Mono',monospace}.font-hand{font-family:'Shadows Into Light',cursive}
        .noise:before{content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.18;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:overlay}
        .lines:after{content:"";position:fixed;inset:0;z-index:81;pointer-events:none;opacity:.08;background:repeating-linear-gradient(0deg,transparent 0,transparent 4px,#ff4fa3 5px)}
        .torn{clip-path:polygon(0 3%,8% 0,17% 4%,25% 1%,36% 4%,44% 0,55% 3%,67% 1%,76% 5%,86% 1%,100% 4%,98% 18%,100% 33%,97% 49%,100% 64%,98% 78%,100% 97%,89% 100%,76% 96%,64% 100%,52% 97%,39% 100%,26% 96%,13% 100%,0 97%,3% 80%,0 66%,2% 50%,0 34%,3% 18%)}
        .chrome{background:linear-gradient(180deg,#fff 0%,#9d9d9d 18%,#fff 32%,#2b2b2b 45%,#f8c6dd 60%,#fff 72%,#666 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 8px 20px rgba(255,83,170,.45)}
        .pinkprint{background-image:linear-gradient(rgba(255,74,155,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,74,155,.08) 1px,transparent 1px);background-size:34px 34px}
      `}</style>

      <div className="noise lines" />
      <div className="pointer-events-none fixed z-[90] hidden h-8 w-8 rounded-full border border-pink-300 bg-pink-300/20 mix-blend-screen md:block" style={{ left: xy.x - 16, top: xy.y - 16 }} />

      <section className="relative min-h-screen overflow-hidden bg-black text-pink-50">
        <img src="https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1800&q=80" className="absolute inset-0 h-full w-full object-cover opacity-70 grayscale contrast-125" />
        <div className="absolute inset-0 bg-[linear-gradient(90deg,#050305_0%,rgba(5,3,5,.82)_40%,rgba(255,35,135,.26)_100%)]" />
        <div className="absolute inset-0 bg-pink-700/25 mix-blend-screen" />

        <nav className="relative z-20 flex items-center justify-between px-6 py-7 md:px-12">
          <div className="font-hand text-5xl leading-8 text-pink-300 drop-shadow-[0_0_18px_rgba(255,74,160,.9)]">mel<br />grace</div>
          <div className="hidden gap-9 font-hand text-2xl text-pink-100 md:flex">
            <a className="underline decoration-pink-400 underline-offset-8" href="#work">work</a>
            <a href="#about">about</a>
            <a href="#diary">diary</a>
            <a href="#contact">contact</a>
          </div>
          <TornPaper className="hidden bg-[#f3c4d1] px-7 py-3 font-mono text-xs uppercase tracking-widest text-black rotate-[-3deg] md:block">open for projects ♡</TornPaper>
        </nav>

        <div className="relative z-10 mx-auto grid max-w-[1500px] gap-10 px-6 pb-16 pt-8 md:grid-cols-[220px_1fr] md:px-12">
          <aside className="hidden pt-32 md:block">
            <div className="space-y-4">
              {["01 WORK", "02 ABOUT", "03 DIARY", "04 PLAYLIST", "05 CONTACT"].map((x, idx) => (
                <a href={idx === 0 ? "#work" : idx === 1 ? "#about" : idx === 2 ? "#diary" : "#contact"} key={x} className="torn block border border-white/30 bg-pink-400/30 px-5 py-5 font-mono text-sm tracking-widest text-white shadow-[8px_8px_0_rgba(255,83,170,.25)] backdrop-blur-sm hover:bg-pink-300/50">{x}</a>
              ))}
            </div>
            <div className="mt-20 h-56 w-56 rounded-full border border-pink-200/30 bg-[radial-gradient(circle,#ffc1d8_0%,#e23e92_36%,#0b070b_70%)] p-10 text-center font-hand text-2xl text-black shadow-[0_0_40px_rgba(255,70,160,.55)]">good things<br />take time<br />:)</div>
          </aside>

          <div className="relative min-h-[760px]">
            <motion.div initial={{ opacity: 0, scale: .95 }} animate={{ opacity: 1, scale: 1 }} className="absolute right-0 top-8 hidden h-[540px] w-[520px] overflow-hidden rounded-[3rem] border border-pink-200/20 bg-pink-400/20 shadow-[0_0_80px_rgba(255,67,158,.25)] md:block">
              <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=1000&q=80" className="h-full w-full object-cover grayscale contrast-125" />
              <div className="absolute inset-0 bg-pink-500/40 mix-blend-screen" />
            </motion.div>

            <div className="relative z-20 pt-24 md:pt-36">
              <p className="mb-5 font-mono text-xs uppercase tracking-[.45em] text-pink-200">visual artist & designer</p>
              <h1 className="max-w-[850px] font-serif text-[27vw] font-black uppercase leading-[.72] tracking-[-.08em] text-pink-500 mix-blend-screen md:text-[12rem]">
                MEL
                <span className="chrome block translate-y-[-.06em] font-hand text-[31vw] normal-case leading-[.55] tracking-[-.08em] md:text-[13rem]">Grace</span>
              </h1>
              <p className="mt-8 max-w-[620px] font-hand text-4xl leading-tight text-white md:text-5xl">
                I create visual stories that feel like <span className="rounded-full border border-pink-300 px-5 text-pink-200">memories</span>
              </p>
              <TornPaper className="mt-10 inline-block bg-pink-400 px-9 py-4 font-mono text-sm uppercase tracking-[.25em] text-black shadow-[10px_10px_0_rgba(255,255,255,.15)]">welcome to my digital archive</TornPaper>
            </div>

            <motion.div drag className="absolute right-8 top-[120px] z-30 hidden w-72 rotate-6 rounded-2xl border border-pink-100/40 bg-pink-300/30 p-5 text-white shadow-2xl backdrop-blur-md lg:block">
              <p className="font-hand text-3xl">now playing ☆</p>
              <div className="mt-3 flex gap-4">
                <div className="h-16 w-16 bg-black/70" />
                <p className="font-mono text-xs">pink archive radio<br />soft grunge mix</p>
              </div>
            </motion.div>

            <motion.div drag className="absolute bottom-20 right-12 z-30 hidden w-72 rotate-[8deg] border border-white/30 bg-[#efbdd0] p-4 shadow-[10px_10px_0_rgba(0,0,0,.45)] lg:block">
              <Tape className="-top-3 left-8 rotate-[-8deg]" />
              <div className="h-60 bg-[url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=700&q=80')] bg-cover bg-center grayscale" />
              <p className="mt-3 font-hand text-4xl text-pink-800">take up space baby</p>
            </motion.div>

            <Scribble className="absolute left-[43%] top-[19%] z-30 text-5xl">☆</Scribble>
            <Scribble className="absolute right-[20%] top-[48%] z-30 text-3xl text-pink-100">chaos is beautiful</Scribble>
            <Scribble className="absolute bottom-[8%] left-[28%] z-30 text-3xl">dream<br />create<br />inspire<br />repeat</Scribble>
          </div>
        </div>
      </section>

      <section id="work" className="pinkprint relative bg-[#efd5d9] px-6 py-24 md:px-12">
        <div className="mx-auto max-w-[1450px]">
          <div className="mb-12 flex flex-col justify-between gap-6 md:flex-row md:items-end">
            <div>
              <p className="font-mono text-xs uppercase tracking-[.5em] text-pink-700">selected works</p>
              <h2 className="font-serif text-6xl uppercase tracking-[-.06em] md:text-8xl">poster archive <Scribble className="text-6xl">★</Scribble></h2>
            </div>
            <a href="#" className="font-hand text-3xl underline decoration-pink-500 underline-offset-8">view all projects →</a>
          </div>
          <div className="grid gap-9 md:grid-cols-2 xl:grid-cols-4">
            {projects.map(([title, type], i) => <ProjectCard key={title} title={title} type={type} img={projectImages[i]} i={i} />)}
          </div>
        </div>
      </section>

      <section id="about" className="relative bg-[#efd5d9] px-6 py-20 md:px-12">
        <div className="mx-auto grid max-w-[1450px] gap-12 md:grid-cols-[.9fr_1.1fr]">
          <TornPaper className="bg-[#f7e4e3] p-5 shadow-[12px_12px_0_rgba(0,0,0,.25)] rotate-[-2deg]">
            <Tape className="-top-4 left-1/2 rotate-[6deg]" />
            <img src="https://images.unsplash.com/photo-1512316609839-ce289d3eba0a?auto=format&fit=crop&w=900&q=80" className="h-[430px] w-full object-cover grayscale contrast-125" />
            <div className="absolute inset-0 bg-pink-400/20 mix-blend-screen" />
          </TornPaper>

          <div className="grid gap-10 md:grid-cols-2">
            <div>
              <h2 className="font-mono text-lg uppercase tracking-widest">a few words<br />about me</h2>
              <div className="mt-3 h-1 w-44 bg-pink-500" />
              <p className="mt-8 font-hand text-3xl leading-snug">I'm Mel, a visual artist and designer who loves mixing emotion, stories, aesthetics and beautiful chaos into meaningful visuals.</p>
              <button className="mt-8 rounded-full bg-pink-400 px-8 py-3 font-hand text-2xl shadow-[7px_7px_0_rgba(0,0,0,.25)]">more about me →</button>
            </div>
            <TornPaper className="bg-[#f7e4e3] p-8 shadow-[12px_12px_0_rgba(0,0,0,.18)]">
              <h3 className="font-hand text-4xl">my philosophy</h3>
              <div className="mt-8 space-y-6 font-mono text-sm">
                <p><Star className="mr-3 inline text-pink-500" /> observe — find beauty in tiny details</p>
                <p><Sparkles className="mr-3 inline text-pink-500" /> imagine — let ideas bloom from daydreams</p>
                <p><Heart className="mr-3 inline text-pink-500" /> create — make work with intention</p>
              </div>
            </TornPaper>
          </div>
        </div>
      </section>

      <section id="diary" className="pinkprint bg-[#efd5d9] px-6 py-24 md:px-12">
        <div className="mx-auto max-w-[1450px]">
          <h2 className="font-hand text-7xl">from the diary ♡</h2>
          <div className="mt-10 grid gap-7 md:grid-cols-3">
            {["creative block & self doubt", "little things that inspire me", "learning to romanticize the ordinary"].map((entry, i) => (
              <motion.div whileHover={{ rotate: i - 1, y: -10 }} key={entry} className="relative border border-black/25 bg-[#f8e5e5] p-4 shadow-[9px_9px_0_rgba(0,0,0,.22)]">
                <Tape className="-top-3 left-8 rotate-[-8deg]" />
                <div className="h-48 bg-black">
                  <img src={projectImages[i]} className="h-full w-full object-cover grayscale opacity-80" />
                </div>
                <p className="mt-5 font-hand text-3xl leading-tight">{entry}</p>
                <p className="mt-3 font-mono text-xs uppercase text-black/50">apr {16 + i}, 2026</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      <section id="contact" className="relative overflow-hidden bg-[#0b070b] px-6 py-24 text-pink-50 md:px-12">
        <div className="absolute bottom-0 right-0 h-[420px] w-[420px] rounded-full bg-pink-500/20 blur-3xl" />
        <div className="mx-auto grid max-w-[1450px] gap-10 md:grid-cols-[1fr_.8fr]">
          <h2 className="font-serif text-6xl uppercase leading-none tracking-[-.06em] md:text-9xl">let's create something <span className="text-pink-400">beautiful</span> together.</h2>
          <TornPaper className="bg-[#f3c7d2] p-8 text-black shadow-[12px_12px_0_rgba(255,78,164,.25)]">
            <Tape className="-top-4 left-1/2 rotate-6" />
            <p className="mb-8 font-mono text-xs uppercase tracking-[.4em]">get in touch</p>
            <div className="space-y-6 font-hand text-3xl">
              <p><Mail className="mr-3 inline" /> hello@melgrace.studio</p>
              <p><Instagram className="mr-3 inline" /> @melgrace.design</p>
              <p><Music className="mr-3 inline" /> pink archive playlist</p>
            </div>
          </TornPaper>
        </div>
        <footer className="mx-auto mt-20 flex max-w-[1450px] justify-between border-t border-pink-100/20 pt-6 font-mono text-xs text-pink-200/70">
          <span>© 2026 Mel Grace</span>
          <span>stay creative xoxo</span>
        </footer>
      </section>
    </main>
  );
}