// Page sections
const { motion: m2, useInView: useInView2 } = window.Motion;
const { useRef: useRef2, useEffect: useEffect2, useState: useState2 } = React;

const NAV_ITEMS = [
  { label: "Biolab consulting", href: "#biolab" },
  { label: "Biodesign consulting", href: "#biodesign" },
  { label: "Bioart", href: "#bioart" },
  { label: "Microscopy", href: "#microscopy" },
  { label: "Photography", href: "#photography" },
  { label: "Time lapses", href: "#timelapses" },
  { label: "Woodworking", href: "#woodworking" },
  { label: "Machines", href: "#machines" },
  { label: "About", href: "#about" },
];

// ---- Hero --------------------------------------------------------
function Hero() {
  const heroVideoRef = useRef2(null);
  const [heroNeedsTap, setHeroNeedsTap] = useState2(false);
  return (
    <section className="relative h-screen w-full p-3 md:p-5">
      <div className="relative h-full w-full rounded-2xl md:rounded-[28px] overflow-hidden" style={{ background: "#0e0c0a" }}>
        {/* Biolab hero video */}
        <div
          className="absolute inset-0"
          style={{ background: "radial-gradient(ellipse at 30% 60%, #2a211a 0%, #0e0c0a 55%), radial-gradient(ellipse at 75% 30%, #1e1813 0%, transparent 60%)" }}
        />
        {window.HERO_VIDEO_SRC && (
          <>
            <video
              ref={heroVideoRef}
              autoPlay
              loop
              muted
              playsInline
              preload="auto"
              poster={window.HERO_VIDEO_POSTER}
              onCanPlay={(e) => {
                const p = e.currentTarget.play();
                if (p && typeof p.catch === "function") p.catch(() => setHeroNeedsTap(true));
              }}
              className="absolute inset-0 w-full h-full object-cover"
              src={window.HERO_VIDEO_SRC}
            />
            {heroNeedsTap && (
              <button
                type="button"
                aria-label="Play background video"
                onClick={() => {
                  const v = heroVideoRef.current;
                  if (!v) return;
                  v.muted = true;
                  v.play().then(() => setHeroNeedsTap(false)).catch(() => {});
                }}
                className="absolute z-10 flex items-center justify-center"
                style={{
                  bottom: "calc(env(safe-area-inset-bottom, 0px) + 24px)",
                  right: "24px",
                  width: "48px",
                  height: "48px",
                  borderRadius: "9999px",
                  background: "rgba(8,7,6,0.7)",
                  border: "1px solid rgba(232,226,208,0.3)",
                  backdropFilter: "blur(4px)",
                }}
              >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="#E8E2D0">
                  <path d="M8 5v14l11-7z" />
                </svg>
              </button>
            )}
          </>
        )}
        {!window.HERO_VIDEO_SRC && (
          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
            <span className="font-mono text-[10px] tracking-[0.3em] uppercase text-[#e8e2d0]/25">
              video · biolab — set window.HERO_VIDEO_SRC
            </span>
          </div>
        )}

        {/* Noise overlay */}
        <div className="noise-overlay absolute inset-0 opacity-[0.55] mix-blend-overlay pointer-events-none" />

        {/* Gradient scrim */}
        <div className="absolute inset-0 pointer-events-none" style={{
          background: "linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 35%, transparent 55%, rgba(0,0,0,0.75) 100%)"
        }} />

        {/* Navbar */}
        <nav className="absolute top-0 left-1/2 -translate-x-1/2 z-20">
          <div className="bg-black/95 backdrop-blur rounded-b-2xl md:rounded-b-[22px] px-4 py-2.5 md:px-7 md:py-3 flex items-center gap-3 sm:gap-5 md:gap-9 lg:gap-11">
            {NAV_ITEMS.map((item) => (
              <a
                key={item.label}
                href={item.href}
                className="transition-colors whitespace-nowrap text-[10px] sm:text-xs md:text-[13px] tracking-[0.02em]"
                style={{ color: "rgba(232,226,208,0.72)" }}
                onMouseEnter={(e) => (e.currentTarget.style.color = "#E8E2D0")}
                onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(232,226,208,0.72)")}
              >
                {item.label}
              </a>
            ))}
          </div>
        </nav>

        {/* Top-left mark (positioned below nav pill vertically) */}
        <div className="absolute top-16 md:top-20 left-5 md:left-8 z-10 flex items-center gap-2">
          <div className="w-1.5 h-1.5 rounded-full bg-[#e8e2d0]" />
          <span className="font-mono text-[10px] md:text-[11px] tracking-[0.25em] uppercase text-[#e8e2d0]/70">
            studio · est. 2020
          </span>
        </div>

        {/* Top-right meta */}
        <div className="absolute top-16 md:top-20 right-5 md:right-8 z-10 text-right hidden sm:block">
          <div className="font-mono text-[10px] md:text-[11px] tracking-[0.2em] uppercase text-[#e8e2d0]/55">
            Geneva, Switzerland
          </div>
          <div className="font-mono text-[10px] md:text-[11px] tracking-[0.2em] uppercase text-[#e8e2d0]/40">
            46.20°N / 6.14°E
          </div>
        </div>

        {/* Bottom content grid */}
        <div className="absolute inset-x-0 bottom-0 p-5 sm:p-7 md:p-10 z-10">
          <div className="grid grid-cols-12 gap-4 md:gap-6 items-end">
            <div className="col-span-12 lg:col-span-8">
              <h1
                className="font-medium tracking-[-0.06em]"
                style={{ color: "#E8E2D0", lineHeight: 0.84 }}
              >
                <span
                  className="block font-normal tracking-[0.01em]"
                  style={{ fontSize: "clamp(22px, 3vw, 52px)", textTransform: "uppercase", color: "rgba(232,226,208,0.85)", marginBottom: "0.15em" }}
                >
                  <WordsPullUp text="Studio of" />
                </span>
                <span
                  className="block"
                  style={{ fontSize: "clamp(64px, 14vw, 220px)", lineHeight: 0.82 }}
                >
                  <WordsPullUp text="Shem" />
                </span>
              </h1>
            </div>
            <div className="col-span-12 lg:col-span-4 flex flex-col gap-5 sm:gap-6 lg:pb-4">
              <m2.p
                initial={{ y: 20, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ duration: 1, delay: 0.6, ease: [0.16, 1, 0.3, 1] }}
                className="text-sm sm:text-base md:text-lg lg:text-xl leading-[1.35] max-w-sm"
                style={{ color: "rgba(232,226,208,0.72)" }}
              >
                Biologist, builder, designer and artist — working at the interface between science, art, and design.
              </m2.p>
              <m2.div
                initial={{ y: 20, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ duration: 1, delay: 0.78, ease: [0.16, 1, 0.3, 1] }}
              >
                <a
                  href="#biolab"
                  className="group inline-flex items-center gap-2 hover:gap-3 transition-all rounded-full pl-5 pr-1.5 py-1.5"
                  style={{ background: "#E8E2D0", color: "#0e0c0a" }}
                >
                  <span className="text-sm sm:text-base font-medium whitespace-nowrap">Enter the studio</span>
                  <span className="inline-flex items-center justify-center w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-[#0e0c0a] transition-transform group-hover:scale-110">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#E8E2D0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M5 12h14M13 5l7 7-7 7" />
                    </svg>
                  </span>
                </a>
              </m2.div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Generic Grid Section ---------------------------------------
function GridSection({ id, number, title, tagline, italic, tiles, columns = 3, padded = true }) {
  const colsClass = {
    2: "grid-cols-1 sm:grid-cols-2",
    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
    4: "grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
  }[columns] || "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
  return (
    <section id={id} className={padded ? "px-5 sm:px-8 md:px-12 py-20 sm:py-28 md:py-36" : ""}>
      <div className="max-w-[1600px] mx-auto">
        <SectionHeader number={number} title={title} tagline={tagline} italic={italic} />
        <div className={`grid ${colsClass} gap-3 sm:gap-4 md:gap-5`}>
          {tiles.map((t, i) => (
            <div key={i} className={t.span === 2 ? "sm:col-span-2" : ""}>
              <PlaceholderTile {...t} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Biolab Consulting (asymmetric) ----------------------------
function BiolabSection({ tiles }) {
  return (
    <section id="biolab" className="px-5 sm:px-8 md:px-12 py-20 sm:py-28 md:py-36">
      <div className="max-w-[1600px] mx-auto">
        <div className="flex items-baseline gap-4 sm:gap-6 mb-10 sm:mb-14">
          <span className="font-mono text-[10px] sm:text-xs tracking-[0.25em] text-[#e8e2d0]/45">01</span>
          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl tracking-[-0.02em] leading-[0.95]" style={{ color: "#E8E2D0" }}>
            Biolab consulting
          </h2>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12 lg:gap-16">
          <div className="lg:col-span-4 xl:col-span-4">
            <div className="lg:sticky lg:top-24 space-y-6">
              <p className="text-base sm:text-lg leading-[1.45] text-[#E8E2D0]">
                Experienced consultant for building biolabs — especially crossover spaces between design, art, and science — with a focus on living systems, biomaterials, and sustainability-oriented projects.
              </p>
              <p className="text-sm sm:text-base leading-[1.55] text-[#e8e2d0]/70">
                Shem built the Grow Lab at Central Saint Martins from the ground up and ran it as lab manager.
                He's also consulted for the Royal College of Arts Material Science Research Center.
                Building on the success of these spaces, Shem helps other institutions develop cross-collaborative
                labs to push research and design into novel directions — having supported hundreds of master's
                students in Biodesign, Material Futures, and Art &amp; Science along the way.
              </p>
              <div className="pt-4 space-y-2">
                <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-[#e8e2d0]/45">Services</div>
                <ul className="text-sm text-[#e8e2d0]/80 space-y-1.5">
                  <li>— Lab infrastructure planning &amp; equipment specification</li>
                  <li>— Build-out and running cost analysis</li>
                  <li>— Health &amp; Safety, biosafety, &amp; regulatory guidance</li>
                  <li>— Staff training &amp; workshops</li>
                  <li>— Structuring interactions between staff and users</li>
                  <li>— Guidance on specific organisms of interest</li>
                </ul>
              </div>
              <a href="mailto:hello@studioofshem.com" className="inline-flex items-center gap-2 text-sm text-[#E8E2D0] border-b border-[#e8e2d0]/40 hover:border-[#E8E2D0] pb-0.5">
                Enquire about a build <span>→</span>
              </a>
            </div>
          </div>

          <div className="lg:col-span-8 xl:col-span-8">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 md:gap-5">
              {tiles.map((t, i) => (
                <PlaceholderTile key={i} {...t} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Biodesign / Biomaterials (asymmetric) ---------------------
function BiodesignSection({ tiles }) {
  return (
    <section id="biodesign" className="px-5 sm:px-8 md:px-12 py-20 sm:py-28 md:py-36">
      <div className="max-w-[1600px] mx-auto">
        <div className="flex items-baseline gap-4 sm:gap-6 mb-10 sm:mb-14">
          <span className="font-mono text-[10px] sm:text-xs tracking-[0.25em] text-[#e8e2d0]/45">02</span>
          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl tracking-[-0.02em] leading-[0.95]" style={{ color: "#E8E2D0" }}>
            Biodesign consulting
          </h2>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12 lg:gap-16">
          <div className="lg:col-span-4">
            <div className="lg:sticky lg:top-24 space-y-6">
              <p className="text-base sm:text-lg leading-[1.45] text-[#E8E2D0]">
                Six+ years in a high-energy lab environment working with a vast list of organisms, bioprocesses, and biomaterials — well-poised to consult companies, startups, and the highly curious on their ideas.
              </p>
              <div className="pt-4 space-y-2">
                <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-[#e8e2d0]/45">Services</div>
                <ul className="text-sm text-[#e8e2d0]/80 space-y-1.5">
                  <li>— Experimental design, scientific approach, feasibility</li>
                  <li>— Bacteria, algae, mycelium, plants, and others</li>
                  <li>— Biomaterials, bioprocesses, and scale-up</li>
                  <li>— Sustainability-focused, circular thinking</li>
                  <li>— Grounded, realistic approaches to modern problems</li>
                </ul>
              </div>
              <div className="pt-2 space-y-2">
                <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-[#e8e2d0]/45">Material library</div>
                <p className="text-sm text-[#e8e2d0]/70 leading-[1.55]">
                  Bacterial cellulose · bacterial pigments · 3D-printed biomaterials · bioplastics ·
                  nanocellulose · biomineralized substrates · mycelium materials.
                </p>
              </div>
              <a href="mailto:hello@studioofshem.com" className="inline-flex items-center gap-2 text-sm text-[#E8E2D0] border-b border-[#e8e2d0]/40 hover:border-[#E8E2D0] pb-0.5">
                Enquire about a project <span>→</span>
              </a>
            </div>
          </div>

          <div className="lg:col-span-8">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 md:gap-5">
              {tiles.map((t, i) => (
                <PlaceholderTile key={i} {...t} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- About ------------------------------------------------------
function About() {
  return (
    <section id="about" className="px-5 sm:px-8 md:px-12 py-24 sm:py-32 md:py-44">
      <div className="max-w-[1600px] mx-auto">
        <div
          className="relative rounded-2xl md:rounded-[28px] px-6 sm:px-10 md:px-16 py-16 sm:py-24 md:py-32 overflow-hidden"
          style={{ background: "#141210" }}
        >
          <div className="bg-noise absolute inset-0 opacity-[0.12] pointer-events-none" />
          <div className="relative max-w-3xl mx-auto text-center">
            <div className="flex items-center justify-center gap-2 mb-8 sm:mb-12">
              <span className="w-1 h-1 rounded-full bg-[#e8e2d0]/60" />
              <span className="font-mono text-[10px] sm:text-xs tracking-[0.3em] uppercase text-[#e8e2d0]/60">
                About the studio
              </span>
              <span className="w-1 h-1 rounded-full bg-[#e8e2d0]/60" />
            </div>

            <h2
              className="text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-[40px] leading-[1.2] tracking-[-0.015em]"
              style={{ color: "#E8E2D0", paddingBottom: "0.18em" }}
            >
              <WordsPullUpMultiStyle
                segments={[
                  { text: "Dr. Shem Johnson is a biologist by training and the DIY type that enjoys exploring and tinkering with nature and machines." },
                  { text: "He hopes to convince the world that cross-platforming biology, art, and design together in a single space is a worthwhile endeavor.", className: "text-[0.78em]", style: { color: "rgba(232,226,208,0.82)" } },
                ]}
              />
            </h2>

            <div className="mt-14 sm:mt-20 grid grid-cols-2 sm:grid-cols-4 gap-6 sm:gap-8 text-left">
              <div>
                <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-[#e8e2d0]/45 mb-2">Contact</div>
                <a href="mailto:hello@studioofshem.com" className="text-sm sm:text-base text-[#E8E2D0] hover:opacity-70 transition">
                  hello@studioofshem.com
                </a>
              </div>
              <div>
                <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-[#e8e2d0]/45 mb-2">Instagram</div>
                <a href="https://instagram.com/studio_of_shem" className="text-sm sm:text-base text-[#E8E2D0] hover:opacity-70 transition">
                  @studio_of_shem
                </a>
              </div>
              <div>
                <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-[#e8e2d0]/45 mb-2">Inquiries</div>
                <div className="text-sm sm:text-base text-[#E8E2D0]/80">
                  Consulting, residencies,<br/>commissions.
                </div>
              </div>
              <div>
                <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-[#e8e2d0]/45 mb-2">CV</div>
                <a
                  href="Dr Shem Johnson_CV.pdf"
                  target="_blank"
                  rel="noopener"
                  className="text-sm sm:text-base text-[#E8E2D0] hover:opacity-70 transition"
                >
                  Dr Shem Johnson_CV
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="mt-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 px-2">
          <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-[#e8e2d0]/35">
            © 2026 Studio of Shem — All works original
          </div>
          <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-[#e8e2d0]/35">
            v 0.1 — portfolio build
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, GridSection, BiolabSection, BiodesignSection, About, NAV_ITEMS });