// What I Do — full-bleed video section with five liquid-glass craft cards.

const WHAT_I_DO_VIDEO =
  "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_094631_d30ab262-45ee-4b7d-99f3-5d5848c8ef13.mp4";

const CRAFTS = [
  {
    icon: "websites",
    title: "Websites",
    tags: ["Fast Loading", "Looks Good Everywhere", "Easy to Update", "Built to Last"],
    body: "I build sites that work well and look good — from personal pages to full online stores.",
  },
  {
    icon: "apps",
    title: "Apps",
    tags: ["Simple to Use", "Feels Native", "Solves Real Problems", "Fun to Open"],
    body: "I design and build apps people actually enjoy using, from first sketch to app store.",
  },
  {
    icon: "product",
    title: "Product Design",
    tags: ["User First", "Clean Layouts", "Before & After", "Every Detail"],
    body: "I shape how a product looks, feels, and works for the people using it.",
  },
  {
    icon: "social",
    title: "Social Media",
    tags: ["Content Plans", "Reels & Posts", "Audience Growth", "Trend Aware"],
    body: "I plan and create content that grows an audience — and keeps it watching.",
  },
  {
    icon: "music",
    title: "Music",
    tags: ["Writing", "Producing", "Mixing", "Releasing"],
    body: "I write and produce music, from the first idea to the final release.",
  },
];

function CraftCard({ craft }) {
  const { MaterialIcon, TiltCard } = window;
  return (
    <TiltCard max={6} className="liquid-glass rounded-[1.25rem] p-6 min-h-[360px] h-full flex flex-col">
      <div className="flex items-start justify-between gap-4">
        <div className="liquid-glass rounded-[0.75rem] w-11 h-11 flex items-center justify-center shrink-0">
          <MaterialIcon name={craft.icon} className="h-6 w-6 text-white" />
        </div>
        <div className="flex flex-wrap justify-end gap-1.5 max-w-[70%]">
          {craft.tags.map((tag) => (
            <span
              key={tag}
              className="liquid-glass rounded-full px-3 py-1 text-[11px] text-white/90 font-body whitespace-nowrap"
            >
              {tag}
            </span>
          ))}
        </div>
      </div>

      <div className="flex-1"></div>

      <div className="mt-6">
        <h3 className="font-heading italic text-white text-3xl md:text-4xl tracking-[-1px] leading-none">
          {craft.title}
        </h3>
        <p className="mt-3 text-sm text-white/90 font-body font-light leading-snug max-w-[32ch]">
          {craft.body}
        </p>
      </div>
    </TiltCard>
  );
}

function WhatIDo() {
  const { FadingVideo, ParallaxLayer } = window;
  return (
    <section id="what-i-do" className="relative min-h-screen bg-black overflow-hidden">
      {/* scale-105 gives the parallax drift headroom so edges never show */}
      <ParallaxLayer strength={-22} className="absolute inset-0 z-0">
        <FadingVideo
          src={WHAT_I_DO_VIDEO}
          className="absolute inset-0 w-full h-full object-cover scale-105"
        />
      </ParallaxLayer>

      <div className="relative z-10 px-8 md:px-16 lg:px-20 pt-24 pb-10 flex flex-col min-h-screen">
        <div className="mb-auto">
          <p className="text-sm font-body text-white/80 mb-6">{"// What I Do"}</p>
          <h2 className="font-heading italic text-white text-6xl md:text-7xl lg:text-[6rem] leading-[0.9] tracking-[-3px]">
            Five crafts,
            <br />
            one maker
          </h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
          {CRAFTS.map((craft, i) => (
            <window.Reveal key={craft.title} delay={i * 0.08} className="h-full">
              <CraftCard craft={craft} />
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.WhatIDo = WhatIDo;