import React, { useState } from "react";

// Single‑file React site that recreates the structure of matthewsitu.com
// (landing + About Me + Projects + Socials) and adds a simple Shop section.
// Styling uses Tailwind (preconfigured in this preview). Replace placeholder
// text/images/links with your real content. You can export this as a single
// index.html by building with a bundler, or copy the JSX into a React app.

export default function Site() {
  const [mobileOpen, setMobileOpen] = useState(false);

  const nav = [
    { id: "about", label: "ABOUT ME" },
    { id: "projects", label: "PROJECTS" },
    { id: "socials", label: "SOCIALS" },
    { id: "shop", label: "SHOP" },
  ];

  const projects = [
    {
      title: "Convertible Tote → Picnic Blanket",
      blurb:
        "Patent‑pending soft‑goods concept. Modular straps, quick‑fold pattern.",
      img: "https://images.unsplash.com/photo-1520975916090-3105956dac38?w=1200",
      href: "#",
      tags: ["soft goods", "prototype"],
    },
    {
      title: "Solar Arduino Counter",
      blurb:
        "Low‑power logger: capacitive touch, DFPlayer Mini, SD data capture.",
      img: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=1200",
      href: "#",
      tags: ["electronics", "arduino"],
    },
    {
      title: "Shadow Lamp Studies",
      blurb:
        "Folded sheet experiments—controllable penumbra patterns with a single LED.",
      img: "https://images.unsplash.com/photo-1553877522-43269d4ea984?w=1200",
      href: "#",
      tags: ["lighting", "materials"],
    },
  ];

  const products = [
    {
      id: "sku_tote_01",
      name: "Convertible Tote v1",
      price: 45,
      img: "https://images.unsplash.com/photo-1520975916090-3105956dac38?w=1000",
      desc: "Everyday tote that unfolds into a picnic blanket. Pre‑order batch.",
      // Replace checkout link with your Stripe Checkout (or Shopify) URL
      checkout: "https://buy.stripe.com/test_12345", // ← placeholder
    },
    {
      id: "sku_lamp_01",
      name: "Shadow Lamp Study A",
      price: 90,
      img: "https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=1000",
      desc: "CNC‑cut sheet lamp—limited run of 10.",
      checkout: "https://buy.stripe.com/test_67890", // ← placeholder
    },
    {
      id: "sku_print_01",
      name: "Poster: Crow Nest Concept",
      price: 25,
      img: "https://images.unsplash.com/photo-1483721310020-03333e577078?w=1000",
      desc: "A2 risograph print on recycled stock.",
      checkout: "https://buy.stripe.com/test_abcdEfgHi", // ← placeholder
    },
  ];

  return (
    <div className="min-h-screen bg-neutral-950 text-neutral-100">
      {/* Header / Nav */}
      <header className="fixed top-0 z-50 w-full border-b border-neutral-800/60 backdrop-blur bg-neutral-950/60">
        <div className="mx-auto max-w-6xl px-4 py-3 flex items-center justify-between">
          <a href="#top" className="font-extrabold tracking-tight text-lg">MATTHEW SITU</a>
          <nav className="hidden md:flex items-center gap-6">
            {nav.map(n => (
              <a key={n.id} href={`#${n.id}`} className="text-sm tracking-widest hover:opacity-80">{n.label}</a>
            ))}
          </nav>
          <button className="md:hidden" onClick={() => setMobileOpen(v => !v)} aria-label="Toggle menu">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
          </button>
        </div>
        {mobileOpen && (
          <div className="md:hidden border-t border-neutral-800 bg-neutral-950">
            <div className="mx-auto max-w-6xl px-4 py-4 grid gap-3">
              {nav.map(n => (
                <a key={n.id} href={`#${n.id}`} className="py-1 tracking-widest" onClick={() => setMobileOpen(false)}>{n.label}</a>
              ))}
            </div>
          </div>
        )}
      </header>

      {/* Hero */}
      <section id="top" className="relative isolate pt-28 md:pt-36">
        <div className="mx-auto max-w-6xl px-4 py-16 md:py-24">
          <h1 className="text-5xl md:text-7xl font-extrabold leading-[0.9]">MATTHEW SITU</h1>
          <p className="mt-4 max-w-2xl text-neutral-300">Industrial designer · prototyper · traveler. Scroll down.</p>
          <div className="mt-8 flex flex-wrap gap-3">
            <a href="#projects" className="px-4 py-2 rounded-2xl bg-white text-black text-sm font-semibold">See Projects</a>
            <a href="#shop" className="px-4 py-2 rounded-2xl border border-neutral-700 text-sm">Visit Shop</a>
          </div>
        </div>
      </section>

      {/* About */}
      <section id="about" className="relative border-t border-neutral-800/60">
        <div className="mx-auto max-w-6xl px-4 py-14 md:py-20 grid md:grid-cols-5 gap-10">
          <div className="md:col-span-2">
            <h2 className="text-xl tracking-widest text-neutral-400">ABOUT ME</h2>
            <p className="mt-4 text-2xl font-semibold">Designer focused on functional, joyful objects.</p>
            <p className="mt-4 text-neutral-300">I’m an industrial design student at Emily Carr/Lund (exchange). I prototype quickly across soft goods, electronics, and 3D printing. I like making things people actually use.</p>
            <div className="mt-6 flex gap-4 text-sm">
              <a href="#socials" className="underline">Contact</a>
              <a href="#projects" className="underline">Portfolio</a>
            </div>
          </div>
          <div className="md:col-span-3 grid gap-4 sm:grid-cols-2">
            <img className="rounded-2xl object-cover aspect-[4/3]" src="https://images.unsplash.com/photo-1525097487452-6278ff080c31?w=1200" alt="Workshop"/>
            <img className="rounded-2xl object-cover aspect-[4/3]" src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=1200" alt="Prototype"/>
          </div>
        </div>
      </section>

      {/* Projects */}
      <section id="projects" className="relative border-t border-neutral-800/60">
        <div className="mx-auto max-w-6xl px-4 py-14 md:py-20">
          <div className="flex items-end justify-between gap-6">
            <h2 className="text-xl tracking-widest text-neutral-400">PROJECTS</h2>
            <a className="text-sm underline" href="#">Download CV</a>
          </div>
          <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {projects.map(p => (
              <a key={p.title} href={p.href} className="group">
                <div className="overflow-hidden rounded-2xl ring-1 ring-neutral-800">
                  <img src={p.img} alt={p.title} className="aspect-[4/3] w-full object-cover group-hover:scale-105 transition"/>
                </div>
                <div className="mt-3">
                  <h3 className="font-semibold text-lg">{p.title}</h3>
                  <p className="mt-1 text-sm text-neutral-300">{p.blurb}</p>
                  <div className="mt-2 flex gap-2 text-xs text-neutral-400">
                    {p.tags.map(t => (
                      <span key={t} className="rounded-full border border-neutral-700 px-2 py-0.5">{t}</span>
                    ))}
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Shop */}
      <section id="shop" className="relative border-t border-neutral-800/60">
        <div className="mx-auto max-w-6xl px-4 py-14 md:py-20">
          <div className="flex items-end justify-between gap-6">
            <h2 className="text-xl tracking-widest text-neutral-400">SHOP</h2>
            <p className="text-sm text-neutral-400">Payments via Stripe/Shopify links.</p>
          </div>
          <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {products.map(prod => (
              <div key={prod.id} className="rounded-2xl ring-1 ring-neutral-800 overflow-hidden">
                <img src={prod.img} alt={prod.name} className="aspect-[4/3] w-full object-cover"/>
                <div className="p-4">
                  <h3 className="font-semibold">{prod.name}</h3>
                  <p className="mt-1 text-sm text-neutral-300">{prod.desc}</p>
                  <div className="mt-4 flex items-center justify-between">
                    <span className="font-semibold">${'{'}prod.price{'}'}</span>
                    <a href={prod.checkout} className="px-3 py-1.5 rounded-xl bg-white text-black text-sm font-semibold" target="_blank" rel="noreferrer">Buy</a>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <p className="mt-6 text-xs text-neutral-400">Tip: replace the placeholder checkout URLs with Stripe Checkout links (one per product) or Shopify product links. For a full cart experience on a static site, integrate Snipcart or Lemon Squeezy.</p>
        </div>
      </section>

      {/* Socials */}
      <section id="socials" className="relative border-t border-neutral-800/60">
        <div className="mx-auto max-w-6xl px-4 py-14 md:py-20 grid md:grid-cols-3 gap-10">
          <div>
            <h2 className="text-xl tracking-widest text-neutral-400">SOCIALS</h2>
            <p className="mt-3 text-neutral-300">Say hi for collabs or commissions.</p>
          </div>
          <ul className="md:col-span-2 grid gap-3 text-sm">
            <li><a className="underline" href="mailto:hello@matthewsitu.com">hello@matthewsitu.com</a></li>
            <li><a className="underline" href="https://www.instagram.com/matthew.situ" target="_blank" rel="noreferrer">Instagram @matthew.situ</a></li>
            <li><a className="underline" href="https://www.linkedin.com/" target="_blank" rel="noreferrer">LinkedIn</a></li>
            <li><a className="underline" href="https://github.com/" target="_blank" rel="noreferrer">GitHub</a></li>
          </ul>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-neutral-800/60">
        <div className="mx-auto max-w-6xl px-4 py-8 text-xs text-neutral-400 flex flex-wrap items-center justify-between gap-4">
          <span>© {new Date().getFullYear()} Matthew Situ</span>
          <div className="flex gap-4">
            <a href="#top" className="underline">Back to top</a>
            <a href="/privacy" className="underline opacity-60">Privacy</a>
          </div>
        </div>
      </footer>

      {/* Smooth scroll (native behavior is fine; this is a small enhancement) */}
      <style>{`html { scroll-behavior: smooth; }`}</style>
    </div>
  );
}