/* About page — Algora-themed (light surface, deep-green accents).
   identity → Summary → Skills & tools → How I define myself → More about me → closing */

const ABOUT_DARK = "#002E1F";
const ABOUT_MID  = "#0E8C63";
const ABOUT_HL   = "#5FE6AC";
const ABOUT_CARD = "#EAF3EE";
const aRes = (n, f) => (typeof window !== "undefined" && window.__resources && window.__resources[n]) || f;

function AboutPill({ children }) {
  return (
    <span className="inline-flex items-center rounded-full px-3.5 py-1.5 text-[13px] uppercase tracking-[0.16em]"
          style={{ background: "rgba(14,140,99,.08)", border: "1px solid rgba(14,140,99,.28)", color: ABOUT_MID }}>
      {children}
    </span>
  );
}

/* one principle row in "How I define myself" */
function DefineRow({ icon, title, body }) {
  return (
    <div className="grid grid-cols-[auto_1fr] gap-x-5 md:grid-cols-[56px_1fr_1.4fr] md:gap-x-10 gap-y-2 items-start py-7 border-t" style={{ borderColor: "rgba(255,255,255,.14)" }}>
      <span className="row-start-1 grid place-items-center rounded-full shrink-0" style={{ width: 52, height: 52, background: "rgba(95,230,172,.14)", color: ABOUT_HL }}>{icon}</span>
      <h3 className="row-start-1 self-center md:self-start md:mt-2 font-display font-medium text-[20px] md:text-[24px] leading-tight text-white">{title}</h3>
      <p className="col-span-2 md:col-span-1 md:row-start-1 md:mt-1.5 text-[16px] md:text-[17px] leading-[1.65]" style={{ color: "rgba(255,255,255,.72)" }}>{body}</p>
    </div>
  );
}

/* a "More about me" photo block — collage image showing only its title;
   on hover a translucent veil fades in and the story text moves up from the bottom. */
function MoreBlock({ img, pill, entries }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div className="relative rounded-2xl overflow-hidden cursor-default"
         onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
         style={{ border: "1px solid rgba(0,76,51,.12)", boxShadow: "0 30px 80px -40px rgba(0,46,31,.4)" }}>
      <img src={img} alt={pill} draggable="false" className="w-full h-[420px] object-cover block select-none" />
      {/* resting state — title pill bottom-left over a soft scrim */}
      <div className="absolute inset-x-0 bottom-0 px-6 pb-7 pt-24 md:px-8 md:pb-8"
           style={{ background: "linear-gradient(transparent, rgba(0,22,14,.78))", opacity: hover ? 0 : 1, transition: "opacity .3s ease" }}>
        <AboutPill>{pill}</AboutPill>
      </div>
      {/* hover veil + moving-in text */}
      <div className="absolute inset-0 flex flex-col justify-end px-6 pb-8 pt-10 md:px-8"
           style={{ background: "linear-gradient(rgba(0,20,13,.55), rgba(0,18,12,.92))", opacity: hover ? 1 : 0, transition: "opacity .35s ease", pointerEvents: hover ? "auto" : "none" }}>
        <span className="font-display font-medium text-[18px] md:text-[20px] mb-3" style={{ color: ABOUT_HL }}>{pill}</span>
        <div className="space-y-3" style={{ maxHeight: "330px", overflowY: "auto", transform: hover ? "translateY(0)" : "translateY(26px)", transition: "transform .5s cubic-bezier(.16,1,.3,1)" }}>
          {entries.map((e, i) => (
            <div key={i} className="flex flex-col">
              {e.k && <span className="font-display font-medium text-[15px] md:text-[16px]" style={{ color: "#fff" }}>{e.k}</span>}
              <span className="text-[13px] md:text-[14px] leading-[1.55] text-white/85">{e.v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function About({ navigate }) {
  const CAPS = (typeof window !== "undefined" && window.CAPABILITIES) || [];
  const CV = aRes("cvFile", "assets/Tuna_Aldemir_CV.pdf");
  const IMG_STORY  = aRes("aboutDesignStory", "assets/about-design-story.png");
  const IMG_HOBBY  = aRes("aboutHobbies", "assets/about-hobbies.png");
  const IMG_FAMILY = aRes("aboutFamily", "assets/about-family.png");

  const Arrow = () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" className="transition-transform group-hover:translate-x-1">
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  );

  const define = [
    {
      title: "Absolute Problem Solver",
      body: "Design is all about problem solving! I love solving UX problems, but in my professional life, I realized that I am also good at solving operational & management problems. I think this is the main reason why I was offered team leadership in the places I worked.",
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M15 4V2M15 16v-2M8 9h2M20 9h2M17.8 11.8 19 13M17.8 6.2 19 5M3 21l9-9M12.2 6.2 11 5"/></svg>),
    },
    {
      title: "Harmonious Team Player",
      body: "I can claim that everyone I have ever had a subordinate / superior or customer / vendor relationship with will be a reference for me.",
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><path d="M16 5.5a3 3 0 0 1 0 5.5M18 14c2 .9 3.4 2.8 3.4 5"/></svg>),
    },
    {
      title: "Continuous Improvement",
      body: "I have worked hard to improve my weaknesses and I am still working hard. I know that there will always be improvement.",
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M4 18 L10 12 L14 15 L21 7"/><path d="M21 12V7h-5"/></svg>),
    },
  ];

  const story = [
    { k: "7 Years", v: "It all started with a mice :)" },
    { k: "10 Years Old", v: "Yes, father. I shall become a bat." },
    { k: "14 Years Old", v: "The fascinating Euro 2000 tournament inspired me to create a magazine, which sparked my love for page design." },
    { k: "21 Years Old", v: "In my adulthood, I started drawing cartoons." },
    { k: "30 Years Old", v: "For my marriage proposal I designed a board game and a pop-up book which are integrated. And she said yes :)" },
  ];

  const hobbies = [
    { k: "Collections", v: "An obsessed collector — a big football-jersey collection with classics from last century (≈350 shirts so far), plus Panini albums of every World Cup & Euros, and vintage vinyl records." },
    { k: "History", v: "Very into history and geography. I keep every important historic event in my memory year by year — Rain Man style." },
    { k: "Travel", v: "I love travelling the world, especially the places that inspire me intellectually." },
  ];

  const family = [
    { v: "I saved the most important for last! I'm married, I have a child as energetic as an atomic bomb, and I love doing things with them!" },
  ];

  return (
    <main className="pb-28" style={{ background: "#FCFCFC", color: "#0f1a16" }}>

      {/* 1 — OPENING: full-bleed dark-green hero band */}
      <section className="pt-[108px] pb-[44px] px-6" style={{ background: ABOUT_DARK, borderBottom: "1px solid rgba(255,255,255,.08)" }}>
        <div className="max-w-[1100px] mx-auto text-center">
          <Reveal>
            <h1 className="font-display font-medium leading-[1.1] tracking-tight">
              <span className="block text-[40px] md:text-[64px] text-white">Tuna Aldemir</span>
              <span className="block text-[30px] md:text-[44px]" style={{ color: ABOUT_HL }}>Senior UX &amp; Product Designer</span>
            </h1>
          </Reveal>
          <Reveal delay={140}>
            <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
              <a href={CV} target="_blank" rel="noopener noreferrer"
                 className="group inline-flex items-center gap-2.5 rounded-full px-5 py-3 text-sm font-medium"
                 style={{ background: "#15D997", color: "#0a0a0a" }}>
                View CV <span className="opacity-60 text-[12px]">PDF</span> <Arrow />
              </a>
              <a href="mailto:tunaaldemir@gmail.com"
                 className="inline-flex items-center gap-2 rounded-full px-5 py-3 text-sm transition"
                 style={{ border: "1px solid rgba(255,255,255,.25)", color: "rgba(255,255,255,.85)" }}>
                Get in touch
              </a>
            </div>
          </Reveal>
        </div>
      </section>

      <div className="max-w-[1100px] mx-auto px-6">

        {/* 2 — SUMMARY */}
        <section className="mt-16 max-w-[72ch] mx-auto">
          <Reveal><AboutPill>Summary</AboutPill></Reveal>
          <Reveal delay={80}>
            <div className="mt-6 space-y-5 text-[18px] md:text-[22px] leading-[1.55]" style={{ color: "rgba(15,26,22,.82)" }}>
              <p>8+ years across banking, fintech, insurtech, and B2B SaaS — currently <strong className="font-semibold" style={{ color: "#0f1a16" }}>Head of UX &amp; UI at Agency Look</strong>, leading a six-person design pod for clients like Allianz, Unilever, and Fiat.</p>
              <p>Also built my own AI-native products on the side (<strong className="font-semibold" style={{ color: ABOUT_MID }}>Algora</strong>, shipped solo to production in 10 weeks).</p>
              <p>I care about design that's defensible: every decision traceable back to a real constraint or a real user.</p>
            </div>
          </Reveal>
        </section>

        {/* 3 — SKILLS & TOOLS (shared token) */}
        <section className="mt-20 max-w-[72ch] mx-auto">
          <Reveal><AboutPill>Skills &amp; tools</AboutPill></Reveal>
          <Reveal delay={80}>
            <div className="mt-7 flex flex-wrap gap-2.5">
              {CAPS.map((s) => (
                <span key={s} className="inline-flex items-center rounded-full px-4 py-2 text-sm transition"
                      style={{ background: "#EAEAEC", color: "#3f3f46" }}>
                  {s}
                </span>
              ))}
            </div>
          </Reveal>
        </section>

        {/* 4 — HOW I DEFINE MYSELF */}
        <section className="mt-24 rounded-3xl px-6 md:px-12 py-12 md:py-16" style={{ background: ABOUT_DARK, color: "#fff" }}>
          <Reveal>
            <h2 className="font-display font-medium text-[30px] md:text-[44px] leading-tight tracking-tight text-white">How I define myself</h2>
          </Reveal>
          <div className="mt-6">
            {define.map((d) => (
              <Reveal key={d.title}><DefineRow icon={d.icon} title={d.title} body={d.body} /></Reveal>
            ))}
          </div>
        </section>

        {/* 5 — MORE ABOUT ME */}
        <section className="mt-28">
          <Reveal>
            <h2 className="font-display font-medium text-[30px] md:text-[44px] leading-tight tracking-tight">More about me</h2>
          </Reveal>
          <Reveal delay={70}>
            <p className="mt-4 text-[17px] leading-[1.6] max-w-[60ch]" style={{ color: "rgba(15,26,22,.6)" }}>
              The non-CV side — where the obsession with design, detail and collecting actually comes from.
            </p>
          </Reveal>
          <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-7 items-stretch">
            <MoreBlock img={IMG_STORY} pill="My Alternative Design Story" entries={story} />
            <MoreBlock img={IMG_HOBBY} pill="Hobbies" entries={hobbies} />
            <MoreBlock img={IMG_FAMILY} pill="Family" entries={family} />
          </div>
        </section>

        {/* divider before closing */}
        <div className="mt-28 border-t" style={{ borderColor: "rgba(15,26,22,.1)" }}></div>

        {/* 6 — CLOSING */}
        <section className="mt-32 text-center">
          <Reveal>
            <h2 className="font-display font-normal text-[44px] md:text-[72px] leading-[0.98] tracking-tight" style={{ color: ABOUT_DARK }}>
              Let's work<span style={{ color: ABOUT_MID }}> together</span><span style={{ color: "rgba(0,46,31,.45)" }}>.</span>
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <a href="mailto:tunaaldemir@gmail.com"
               className="mt-8 inline-block font-display font-normal text-[16px] md:text-[22px] tracking-tight"
               style={{ color: ABOUT_MID, textDecoration: "underline", textUnderlineOffset: "4px", textDecorationColor: "rgba(14,140,99,.4)" }}>
              tunaaldemir@gmail.com
            </a>
            <div className="mt-2">
              <a href={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent) ? "tel:+31634483433" : "facetime:+31634483433"}
                 className="inline-block font-display font-normal text-[14px] md:text-[17px] tracking-tight"
                 style={{ color: "rgba(14,140,99,.6)", textDecoration: "underline", textUnderlineOffset: "4px", textDecorationColor: "rgba(14,140,99,.25)" }}>
                +31 06 34 48 34 33
              </a>
            </div>
          </Reveal>
          <Reveal delay={200}>
            <div className="mt-9 flex items-center justify-center gap-3">
              <a href="https://wa.me/905353130311" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" className="transition-transform hover:-translate-y-0.5">
                <svg width="44" height="44" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="17" cy="17" r="17" fill={ABOUT_DARK}/>
                  <g transform="translate(7 7) scale(0.833)">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.885-9.885 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.892c0 2.096.549 4.142 1.595 5.945L0 24l6.335-1.652a12.062 12.062 0 005.71 1.447h.005c6.585 0 11.946-5.335 11.949-11.893a11.821 11.821 0 00-3.484-8.45" fill="#fff"/>
                  </g>
                </svg>
              </a>
              <a href="https://www.linkedin.com/in/tuna-aldemir/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="transition-transform hover:-translate-y-0.5">
                <svg width="44" height="44" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="17" cy="17" r="17" fill={ABOUT_DARK}/>
                  <path d="M12.6 13.2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-1.27 1.15h2.53v8.15h-2.53v-8.15Zm4.12 0h2.42v1.11h.04c.34-.62 1.16-1.28 2.39-1.28 2.56 0 3.03 1.64 3.03 3.78v4.54h-2.53v-4.03c0-.96-.02-2.2-1.36-2.2-1.36 0-1.57 1.04-1.57 2.13v4.1h-2.53v-8.15Z" fill="#fff"/>
                </svg>
              </a>
              <a href={CV} target="_blank" rel="noopener noreferrer" aria-label="View CV (PDF)" className="transition-transform hover:-translate-y-0.5">
                <span className="grid place-items-center size-11 rounded-full" style={{ background: ABOUT_DARK, color: "#fff" }}>
                  <span className="font-display font-semibold text-[14px] tracking-tight">CV</span>
                </span>
              </a>
            </div>
          </Reveal>
        </section>

      </div>
    </main>
  );
}

window.About = About;