import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { BookOpen, Gamepad, Info, Heart, X } from "lucide-react";

// Single-file React app (Tailwind expected). Default export a component ready to drop into a React app.
// Tailwind must be configured in the host project. This file uses inline maroon values for easy theming.

const MAROON = "#6b0f0f";
const DARK = "#0b0b0b";

function Nav({ page, setPage }) {
  const items = [
    { id: "about", label: "About", icon: Info },
    { id: "cartoons", label: "Cartoons", icon: BookOpen },
    { id: "games", label: "Games", icon: Gamepad },
  ];

  return (
    <nav className="w-full sticky top-0 z-40 backdrop-blur-md bg-black/40 border-b border-white/5">
      <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div
            className="flex items-center gap-2 cursor-pointer"
            onClick={() => setPage("about")}
          >
            <div
              style={{ background: MAROON }}
              className="w-10 h-10 rounded-lg shadow-md flex items-center justify-center"
            >
              <span className="font-semibold text-white">MB</span>
            </div>
            <div className="hidden sm:block">
              <h1 className="text-white text-lg font-medium">Minimal Business</h1>
              <p className="text-sm text-white/60">Sleek. Minimal. Modern.</p>
            </div>
          </div>
        </div>

        <div className="hidden md:flex items-center gap-6">
          {items.map((it) => (
            <button
              key={it.id}
              onClick={() => setPage(it.id)}
              className={`flex items-center gap-2 py-2 px-3 rounded-md transition-all ${
                page === it.id ? "bg-white/6 ring-1 ring-white/10" : "hover:bg-white/3"
              }`}
            >
              <it.icon size={16} className="text-white/80" />
              <span className="text-white/90 text-sm font-medium">{it.label}</span>
            </button>
          ))}
        </div>

        <div className="flex items-center gap-3">
          <button
            className="px-4 py-2 rounded-md border border-white/6 text-sm text-white/90 hover:scale-[1.03] transition-transform"
            onClick={() => alert('Contact: hi@minimalbusiness.example')}
          >
            Contact
          </button>
        </div>
      </div>
    </nav>
  );
}

function Hero({ onStart }) {
  return (
    <section className="max-w-6xl mx-auto px-6 py-16">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
        <div>
          <motion.h2
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.05 }}
            className="text-4xl sm:text-5xl font-extrabold leading-tight text-white"
          >
            Minimalist & Modern —
            <span style={{ color: MAROON }} className="ml-2">
              Built for business
            </span>
          </motion.h2>

          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.15 }}
            className="mt-6 text-white/75 max-w-xl"
          >
            A sleek, responsive website focused on clarity and conversion. Clean layout,
            subtle motion, and a strong visual palette — maroon and black — for a premium
            presence.
          </motion.p>

          <div className="mt-8 flex gap-3">
            <button
              onClick={onStart}
              style={{ background: MAROON }}
              className="px-5 py-3 rounded-lg text-white font-medium shadow-md hover:brightness-95 transition"
            >
              See Cartoons
            </button>

            <button
              onClick={() => alert('Let\'s build something together!')}
              className="px-5 py-3 rounded-lg border border-white/6 text-sm text-white/90"
            >
              Get in touch
            </button>
          </div>
        </div>

        <div className="relative">
          <div className="rounded-2xl p-6" style={{ background: "linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))" }}>
            <div className="aspect-video rounded-lg overflow-hidden border border-white/3">
              <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-black/60 to-black/40">
                <div className="text-white/80 text-center max-w-sm">
                  <p className="font-semibold">Interactive samples</p>
                  <p className="mt-3 text-sm text-white/60">Preview cartoons and a tiny game built into the site — fully interactive.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="max-w-6xl mx-auto px-6 py-12">
      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
        <h3 className="text-2xl font-semibold text-white">About</h3>
        <p className="mt-4 text-white/70 max-w-3xl">
          We design experiences that feel calm and confident. Our focus is on elegant
          interfaces, delightful micro-interactions, and products that scale. Whether you need
          illustrations (cartoons) or interactive experiences (games), we craft them with a
          business-first mindset.
        </p>

        <div className="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-4">
          <CardStat title="Design" value="Minimal UI" />
          <CardStat title="Motion" value="Framer-driven" />
          <CardStat title="Delivery" value="Fast & Reliable" />
        </div>
      </motion.div>
    </section>
  );
}

function CardStat({ title, value }) {
  return (
    <div className="p-4 rounded-lg border border-white/6 bg-white/2">
      <p className="text-sm text-white/70">{title}</p>
      <p className="text-lg font-semibold mt-2 text-white">{value}</p>
    </div>
  );
}

const SAMPLE_CARTOONS = [
  {
    id: "c1",
    title: "Office Mood",
    desc: "A minimalist strip about remote work.",
    color: "#7f1d1d",
  },
  { id: "c2", title: "Product Launch", desc: "Startup life in 3 panels.", color: "#5c0d0d" },
  { id: "c3", title: "The Pitch", desc: "A quick gag about slides.", color: "#8a1f1f" },
];

function Cartoons() {
  const [favorites, setFavorites] = useState([]);
  const [selected, setSelected] = useState(null);

  function toggleFav(id) {
    setFavorites((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id]));
  }

  return (
    <section className="max-w-6xl mx-auto px-6 py-12">
      <div className="flex items-center justify-between">
        <h3 className="text-2xl font-semibold text-white">Cartoons</h3>
        <div className="text-white/70">Favorites: {favorites.length}</div>
      </div>

      <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {SAMPLE_CARTOONS.map((c) => (
          <motion.div
            layout
            key={c.id}
            className="rounded-xl p-4 border border-white/6 bg-white/3 cursor-pointer"
            whileHover={{ scale: 1.02 }}
            onClick={() => setSelected(c)}
          >
            <div className="flex items-start gap-3">
              <div className="w-12 h-12 rounded-md flex items-center justify-center" style={{ background: c.color }}>
                <span className="text-white font-semibold">C</span>
              </div>
              <div>
                <h4 className="text-white font-medium">{c.title}</h4>
                <p className="text-sm text-white/70 mt-1">{c.desc}</p>
              </div>
            </div>

            <div className="mt-4 flex items-center justify-between">
              <div className="text-sm text-white/60">3 panels — silent</div>
              <div className="flex items-center gap-2">
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    toggleFav(c.id);
                  }}
                  className="p-2 rounded-md border border-white/6"
                >
                  <Heart size={16} className={`text-white ${favorites.includes(c.id) ? "opacity-100" : "opacity-60"}`} />
                </button>
              </div>
            </div>
          </motion.div>
        ))}
      </div>

      <AnimatePresence>
        {selected && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 flex items-center justify-center p-6"
          >
            <div className="absolute inset-0 bg-black/70" onClick={() => setSelected(null)} />
            <motion.div
              initial={{ scale: 0.98, y: 8 }}
              animate={{ scale: 1, y: 0 }}
              exit={{ scale: 0.98, opacity: 0 }}
              className="relative z-60 max-w-2xl w-full bg-white/3 border border-white/6 rounded-2xl p-6"
            >
              <div className="flex justify-between items-start">
                <div>
                  <h4 className="text-xl font-semibold text-white">{selected.title}</h4>
                  <p className="text-white/70 mt-1">{selected.desc}</p>
                </div>
                <button onClick={() => setSelected(null)} className="p-2">
                  <X className="text-white/80" />
                </button>
              </div>

              <div className="mt-6">
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                  {[1, 2, 3].map((i) => (
                    <div key={i} className="h-40 rounded-md flex items-center justify-center" style={{ background: selected.color }}>
                      <div className="text-white/90 font-bold">Panel {i}</div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="mt-6 flex items-center justify-between">
                <div className="text-white/70">License: Personal & commercial</div>
                <button
                  onClick={() => alert('Downloaded! (pretend)')}
                  className="px-4 py-2 rounded-md text-sm font-medium"
                  style={{ background: MAROON, color: 'white' }}
                >
                  Download
                </button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
}

function Games() {
  return (
    <section className="max-w-6xl mx-auto px-6 py-12">
      <h3 className="text-2xl font-semibold text-white">Games</h3>
      <p className="mt-3 text-white/70 max-w-2xl">Tiny interactive experiences that show how a playful product can still feel premium.</p>

      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="rounded-xl p-6 border border-white/6 bg-white/3">
          <h4 className="text-lg font-medium text-white">Tic‑Tac‑Toe (Play)</h4>
          <p className="text-white/70 mt-2">A small demo built with React state — playable right here.</p>

          <div className="mt-4">
            <TicTacToe />
          </div>
        </div>

        <div className="rounded-xl p-6 border border-white/6 bg-white/3">
          <h4 className="text-lg font-medium text-white">Coming Soon</h4>
          <p className="text-white/70 mt-2">More micro-games and interactive art — we prototype quickly and ship often.</p>
        </div>
      </div>
    </section>
  );
}

function TicTacToe() {
  const [board, setBoard] = useState(Array(9).fill(null));
  const [xNext, setXNext] = useState(true);
  const winner = calculateWinner(board);

  function handleClick(i) {
    if (board[i] || winner) return;
    const next = board.slice();
    next[i] = xNext ? "X" : "O";
    setBoard(next);
    setXNext(!xNext);
  }

  function reset() {
    setBoard(Array(9).fill(null));
    setXNext(true);
  }

  return (
    <div className="mt-4">
      <div className="grid grid-cols-3 gap-2 w-56">
        {board.map((cell, i) => (
          <button
            key={i}
            onClick={() => handleClick(i)}
            className={`h-14 flex items-center justify-center rounded-md text-xl font-semibold border border-white/10 ${
              cell ? "bg-white/5" : "bg-white/2 hover:bg-white/4"
            }`}
          >
            {cell}
          </button>
        ))}
      </div>

      <div className="mt-4 flex items-center gap-3">
        <div className="text-white/80">{winner ? `Winner: ${winner}` : `Next: ${xNext ? 'X' : 'O'}`}</div>
        <button onClick={reset} className="px-3 py-2 rounded-md border border-white/6 text-white/90">Reset</button>
      </div>
    </div>
  );
}

function calculateWinner(board) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (board[a] && board[a] === board[b] && board[a] === board[c]) {
      return board[a];
    }
  }
  return null;
}

export default function App() {
  const [page, setPage] = useState('about');

  useEffect(() => {
    document.documentElement.style.background = DARK;
    document.documentElement.style.color = '#fff';
  }, []);

  return (
    <div className="min-h-screen text-white antialiased">
      <Nav page={page} setPage={setPage} />

      <main className="pb-24">
        <Hero onStart={() => setPage('cartoons')} />

        <div>
          {page === 'about' && <About />}
          {page === 'cartoons' && <Cartoons />}
          {page === 'games' && <Games />}
        </div>
      </main>

      <footer className="border-t border-white/5 mt-12 py-6">
        <div className="max-w-6xl mx-auto px-6 flex items-center justify-between">
          <div className="text-white/70">© {new Date().getFullYear()} Minimal Business</div>
          <div className="text-white/60 text-sm">Built with care — maroon & black aesthetic.</div>
        </div>
      </footer>
    </div>
  );
}