// About — plain-language bio, identity card, quick facts, resume link.
// Transparent bg so the starfield shows through; glow spots add depth.

const QUICK_FACTS = [
  { label: "Location", value: "Vienna, Austria · CET" },
  { label: "Current focus", value: "Building Leoup — an AI-powered system for nail salons" },
  { label: "Fun fact", value: "I've rewritten my own site more times than any client's" },
];

const ABOUT_CRAFT_TAGS = ["Websites", "Apps", "Product", "Social", "Music"];

function About() {
  const { ArrowUpRight, TiltCard, Reveal, GlowSpot } = window;
  return (
    <section id="about" className="relative overflow-hidden px-8 md:px-16 lg:px-20 py-24">
      <GlowSpot className="-top-48 -right-48" size={700} opacity={0.06} />
      <GlowSpot className="bottom-0 -left-56" size={600} opacity={0.05} />

      <Reveal>
        <p className="text-sm font-body text-white/80 mb-6">{"// About"}</p>
      </Reveal>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
        <div>
          <Reveal>
            <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-7xl leading-[0.9] tracking-[-3px]">
              Part coder,
              <br />
              part designer,
              <br />
              part creator
            </h2>
          </Reveal>

          {/* Identity card */}
          <Reveal delay={0.15} className="mt-12">
            <TiltCard max={8} className="liquid-glass rounded-[1.25rem] p-8 max-w-sm flex flex-col gap-6">
              <div className="flex items-center justify-between">
                <div className="liquid-glass rounded-full w-16 h-16 flex items-center justify-center">
                  <span className="font-heading italic text-white text-4xl leading-none">m</span>
                </div>
                <span className="liquid-glass rounded-full px-3.5 py-1 text-[11px] text-white/90 font-body">
                  Open to work
                </span>
              </div>
              <div>
                <div className="font-heading italic text-white text-3xl tracking-[-1px] leading-none">
                  Mikky Thai
                </div>
                <div className="text-sm text-white/70 font-body font-light mt-2">
                  Creative Technologist
                </div>
              </div>
              <div className="flex flex-wrap gap-1.5">
                {ABOUT_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>
            </TiltCard>
          </Reveal>
        </div>

        <div className="flex flex-col gap-8">
          <Reveal delay={0.1}>
            <p className="text-base md:text-lg text-white/90 font-body font-light leading-relaxed max-w-[55ch]">
              "Creative technologist" is a fancy title for a simple idea: I'm
              comfortable on both sides of the screen. One day I'm writing code for a
              website, the next I'm sketching how an app should feel, planning a
              month of social posts, or finishing a song. I like the whole journey —
              from "what if we…" to something real that people actually use. If it
              can be built, designed, filmed, or recorded, I'm probably up for it.
            </p>
          </Reveal>

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            {QUICK_FACTS.map((fact, i) => (
              <Reveal key={fact.label} delay={0.15 + i * 0.08} className="h-full">
                <TiltCard max={10} className="liquid-glass rounded-[1.25rem] p-5 h-full">
                  <div className="text-xs text-white/70 font-body font-light">
                    {fact.label}
                  </div>
                  <div className="mt-2 text-sm text-white font-body font-medium leading-snug">
                    {fact.value}
                  </div>
                </TiltCard>
              </Reveal>
            ))}
          </div>

          {/* Drop a resume.pdf into /public to make this work. */}
          <Reveal delay={0.3}>
            <a
              href="/resume.pdf"
              className="liquid-glass-strong rounded-full px-5 py-2.5 text-sm font-medium text-white font-body inline-flex items-center gap-2 transition-transform duration-300 hover:scale-105"
            >
              Download Resume
              <ArrowUpRight className="h-5 w-5" />
            </a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.About = About;