import React from "react";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Instagram, Youtube, Music2, Mail, MapPin, Calendar, ExternalLink, Spotify, Mic2, Disc3 } from "lucide-react";

// =============================
// Quick-start config (edit me)
// =============================
const CONFIG = {
  crewName: "夢(BOY)",
  tagline: "できるだけリアル。江古田発ラップクルー。",
  heroImage:
    "https://images.unsplash.com/photo-1540039155733-5bb30b53aa14?q=80&w=1920&auto=format&fit=crop", // TODO: replace with your photo
  primaryCTA: { label: "最新MVを見る", href: "https://www.youtube.com/" },
  secondaryCTA: { label: "配信リンク", href: "https://linkco.re/" },
  bookingEmail: "booking@example.com",
  pressKitUrl: "#", // URL to EPK / Google Drive / Dropbox
  location: "Tokyo, Nerima-ku",
  socials: [
    { label: "Instagram", href: "https://instagram.com/", icon: Instagram },
    { label: "YouTube", href: "https://youtube.com/", icon: Youtube },
  ],
  members: [
    { name: "MC A", role: "MC", bio: "日常と笑いを切り取る言葉の職人。", photo: "https://images.unsplash.com/photo-1601412436009-d964bd02edbc?q=80&w=640&auto=format&fit=crop" },
    { name: "MC B", role: "MC", bio: "江古田なまりのパンチライン担当。", photo: "https://images.unsplash.com/photo-1520975922320-2806a37bba53?q=80&w=640&auto=format&fit=crop" },
    { name: "MC C", role: "MC", bio: "メロディとフローの架け橋。", photo: "https://images.unsplash.com/photo-1546776310-eef45dd6d63c?q=80&w=640&auto=format&fit=crop" },
    { name: "MC D", role: "MC", bio: "ユーモア×リアリティで場を温める。", photo: "https://images.unsplash.com/photo-1520676889577-6b62b1d050a4?q=80&w=640&auto=format&fit=crop" },
  ],
  releases: [
    {
      title: "こんにちーっす (EP)",
      date: "2025-04-01",
      cover:
        "https://images.unsplash.com/photo-1526948128573-703ee1aeb6fa?q=80&w=600&auto=format&fit=crop",
      links: [
        { label: "YouTube", href: "https://youtube.com/" },
        { label: "Spotify", href: "https://open.spotify.com/" },
        { label: "Apple Music", href: "https://music.apple.com/" },
      ],
    },
    {
      title: "確実 (Single)",
      date: "2025-03-10",
      cover:
        "https://images.unsplash.com/photo-1517649763962-0c623066013b?q=80&w=600&auto=format&fit=crop",
      links: [
        { label: "YouTube", href: "https://youtube.com/" },
        { label: "Spotify", href: "https://open.spotify.com/" },
      ],
    },
  ],
  videos: [
    { title: "確実 - Official MV", url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ" },
  ],
  shows: [
    { date: "2025-09-14", venue: "江古田Club", city: "Tokyo", url: "#" },
    { date: "2025-10-05", venue: "渋谷WWW", city: "Tokyo", url: "#" },
  ],
};

// Small helpers
const Section = ({ id, title, children }: { id: string; title: string; children: React.ReactNode }) => (
  <section id={id} className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <h2 className="text-2xl sm:text-3xl font-bold mb-8">{title}</h2>
    {children}
  </section>
);

const NavLink = ({ href, children }: { href: string; children: React.ReactNode }) => (
  <a href={href} className="text-sm md:text-base opacity-80 hover:opacity-100 transition">
    {children}
  </a>
);

export default function Site() {
  return (
    <div className="min-h-screen bg-black text-white">
      {/* NAV */}
      <header className="sticky top-0 z-50 backdrop-blur bg-black/60 border-b border-white/10">
        <div className="max-w-6xl mx-auto flex items-center justify-between px-4 sm:px-6 lg:px-8 h-14">
          <div className="flex items-center gap-2">
            <Disc3 className="w-5 h-5" />
            <span className="font-bold">{CONFIG.crewName}</span>
          </div>
          <nav className="hidden md:flex items-center gap-6">
            <NavLink href="#about">About</NavLink>
            <NavLink href="#members">Members</NavLink>
            <NavLink href="#music">Music</NavLink>
            <NavLink href="#video">Video</NavLink>
            <NavLink href="#shows">Shows</NavLink>
            <NavLink href="#contact">Contact</NavLink>
          </nav>
          <div className="flex items-center gap-3">
            {CONFIG.socials.map((s) => (
              <a key={s.label} href={s.href} target="_blank" rel="noreferrer" aria-label={s.label} className="opacity-80 hover:opacity-100">
                <s.icon className="w-5 h-5" />
              </a>
            ))}
          </div>
        </div>
      </header>

      {/* HERO */}
      <section
        className="relative isolate overflow-hidden"
        style={{
          backgroundImage: `url(${CONFIG.heroImage})`,
          backgroundPosition: "center",
          backgroundSize: "cover",
        }}
      >
        <div className="bg-gradient-to-b from-black/50 to-black/90">
          <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-40">
            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="text-4xl md:text-6xl font-extrabold tracking-tight"
            >
              {CONFIG.crewName}
            </motion.h1>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.7, delay: 0.05 }}
              className="mt-4 text-lg md:text-xl max-w-2xl opacity-90"
            >
              {CONFIG.tagline}
            </motion.p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Button asChild className="rounded-2xl">
                <a href={CONFIG.primaryCTA.href} target="_blank" rel="noreferrer">
                  {CONFIG.primaryCTA.label}
                </a>
              </Button>
              <Button asChild variant="secondary" className="rounded-2xl">
                <a href={CONFIG.secondaryCTA.href} target="_blank" rel="noreferrer">
                  {CONFIG.secondaryCTA.label}
                </a>
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* ABOUT */}
      <Section id="about" title="About">
        <div className="grid md:grid-cols-3 gap-6">
          <Card className="bg-white/5 border-white/10">
            <CardHeader>
              <CardTitle>エッセンス</CardTitle>
            </CardHeader>
            <CardContent className="opacity-90 text-sm leading-7">
              <p>
                2024年、東京・練馬区で結成された4MCラップクルー。2000年代の温度感と現代のユーモアを混ぜた“できるだけリアル”なピースフル・ミュージックを響かせる。
              </p>
            </CardContent>
          </Card>
          <Card className="bg-white/5 border-white/10">
            <CardHeader>
              <CardTitle>ハイライト</CardTitle>
            </CardHeader>
            <CardContent className="opacity-90 text-sm space-y-2">
              <ul className="list-disc list-inside">
                <li>1st EP「こんにちーっす」(2025)</li>
                <li>話題曲「確実」MV公開</li>
                <li>江古田ローカルとカルチャーのミックス</li>
              </ul>
            </CardContent>
          </Card>
          <Card className="bg-white/5 border-white/10">
            <CardHeader>
              <CardTitle>拠点</CardTitle>
            </CardHeader>
            <CardContent className="flex items-center gap-2 opacity-90">
              <MapPin className="w-4 h-4" />
              <span>{CONFIG.location}</span>
            </CardContent>
          </Card>
        </div>
      </Section>

      {/* MEMBERS */}
      <Section id="members" title="Members">
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {CONFIG.members.map((m) => (
            <Card key={m.name} className="bg-white/5 border-white/10 overflow-hidden">
              <img src={m.photo} alt={m.name} className="w-full h-48 object-cover" />
              <CardHeader>
                <CardTitle className="text-lg">{m.name} — {m.role}</CardTitle>
              </CardHeader>
              <CardContent className="opacity-90 text-sm">{m.bio}</CardContent>
            </Card>
          ))}
        </div>
      </Section>

      {/* MUSIC */}
      <Section id="music" title="Music">
        <div className="grid md:grid-cols-3 gap-6">
          {CONFIG.releases.map((r) => (
            <Card key={r.title} className="bg-white/5 border-white/10">
              <img src={r.cover} alt={r.title} className="w-full h-56 object-cover" />
              <CardHeader>
                <CardTitle className="text-lg">{r.title}</CardTitle>
                <p className="text-xs opacity-70">{new Date(r.date).toLocaleDateString()}</p>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  {r.links.map((l) => (
                    <Button key={l.label} asChild size="sm" variant="secondary" className="rounded-xl">
                      <a href={l.href} target="_blank" rel="noreferrer" className="flex items-center gap-1">
                        <ExternalLink className="w-3 h-3" /> {l.label}
                      </a>
                    </Button>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </Section>

      {/* VIDEO */}
      <Section id="video" title="Video">
        <div className="grid gap-6 md:grid-cols-2">
          {CONFIG.videos.map((v) => (
            <div key={v.title} className="aspect-video w-full bg-white/5 border border-white/10 rounded-2xl overflow-hidden">
              <iframe
                className="w-full h-full"
                src={v.url.replace("watch?v=", "embed/")}
                title={v.title}
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowFullScreen
              />
            </div>
          ))}
        </div>
      </Section>

      {/* SHOWS */}
      <Section id="shows" title="Shows">
        <div className="grid gap-4">
          {CONFIG.shows.map((s) => (
            <Card key={`${s.date}-${s.venue}`} className="bg-white/5 border-white/10">
              <CardContent className="p-4 flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <Calendar className="w-4 h-4" />
                  <div>
                    <p className="font-semibold">{new Date(s.date).toLocaleDateString()} — {s.venue}</p>
                    <p className="text-sm opacity-80">{s.city}</p>
                  </div>
                </div>
                <Button asChild size="sm" className="rounded-xl">
                  <a href={s.url} target="_blank" rel="noreferrer">TICKET</a>
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </Section>

      {/* CONTACT */}
      <Section id="contact" title="Contact / Booking">
        <div className="grid md:grid-cols-2 gap-6">
          <Card className="bg-white/5 border-white/10">
            <CardHeader>
              <CardTitle>出演依頼・取材</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <p className="opacity-90">ライブ、イベント、メディアのご相談はメールでお気軽にご連絡ください。</p>
              <Button asChild className="rounded-2xl">
                <a href={`mailto:${CONFIG.bookingEmail}`}><Mail className="w-4 h-4 mr-1" /> {CONFIG.bookingEmail}</a>
              </Button>
              <Button asChild variant="secondary" className="rounded-2xl">
                <a href={CONFIG.pressKitUrl} target="_blank" rel="noreferrer">プレスキット (EPK)</a>
              </Button>
            </CardContent>
          </Card>

          <Card className="bg-white/5 border-white/10">
            <CardHeader>
              <CardTitle>ニュースレター</CardTitle>
            </CardHeader>
            <CardContent>
              <form action="#" onSubmit={(e) => e.preventDefault()} className="flex gap-2">
                <input
                  type="email"
                  placeholder="your@email.com"
                  className="w-full rounded-xl bg-white/10 border border-white/20 px-3 py-2 outline-none placeholder:opacity-60"
                />
                <Button className="rounded-xl">登録</Button>
              </form>
              <p className="text-xs opacity-70 mt-2">※ 実運用では外部フォーム（Beehiiv / Mailchimp など）に差し替えてください。</p>
            </CardContent>
          </Card>
        </div>
      </Section>

      {/* FOOTER */}
      <footer className="border-t border-white/10">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10 text-sm opacity-70 flex flex-col md:flex-row items-center justify-between gap-4">
          <p>© {new Date().getFullYear()} {CONFIG.crewName}. All rights reserved.</p>
          <div className="flex items-center gap-3">
            {CONFIG.socials.map((s) => (
              <a key={s.label} href={s.href} target="_blank" rel="noreferrer" aria-label={s.label} className="opacity-80 hover:opacity-100">
                <s.icon className="w-5 h-5" />
              </a>
            ))}
          </div>
        </div>
      </footer>
    </div>
  );
}