"use client";

import { motion, type Variants } from "framer-motion";
import { ArrowUpRight, Download, Mail, User } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

/**
 * Resume intro block.
 *
 * Adapted from the 21st.dev glassmorphism portfolio block. The layout is kept —
 * two columns, highlight stack, profile card, social list — but every colour,
 * radius and shadow is driven by the site's tokens rather than the component's
 * own values.
 *
 * Notably NOT carried over: rounded-3xl, blurred glows, and the layered drop
 * shadows. The brand guide rules those out explicitly (near-square 2px radius,
 * hairlines instead of elevation), and glassmorphism on a washi ground reads as
 * a different site. What survives is the structure and the motion.
 */

/**
 * No brand glyphs. lucide removed them in v1 (they live in simple-icons now),
 * and adding a second icon package to draw four logos would be the wrong trade
 * on a page built around restraint. Label plus handle already identifies the
 * network; a single consistent arrow does the affordance.
 */
type IconName = string;

export interface ResumeIntroProps {
  name: string;
  headline: string;
  summary: string;
  highlights: { title: string; description: string }[];
  social: { label: string; handle: string; href: string; icon: IconName }[];
  email: string;
  resumeHref: string;
  /**
   * Portrait for the light theme. Leave undefined to render the placeholder
   * frame; the frame reserves the same space either way, so adding a photo
   * later cannot reflow the layout.
   */
  photoSrc?: string;
  /**
   * Optional dark-theme portrait. Both are rendered and CSS shows one, because
   * the theme is class-based (.dark on <html>) rather than media-query based —
   * a <picture media="(prefers-color-scheme: dark)"> would ignore the site's
   * own toggle and follow the OS instead.
   */
  photoSrcDark?: string;
}

const listVariants: Variants = {
  hidden: { opacity: 0, y: 16 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.4, staggerChildren: 0.07 },
  },
};

const itemVariants: Variants = {
  hidden: { opacity: 0, y: 12 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },
};

const EASE = [0.33, 0.1, 0.25, 1] as const;

export function ResumeIntro({
  name,
  headline,
  summary,
  highlights,
  social,
  email,
  resumeHref,
  photoSrc,
  photoSrcDark,
}: ResumeIntroProps) {
  return (
    <section className="relative overflow-hidden px-5 py-16 md:py-24">
      <div className="mx-auto max-w-6xl">
        <motion.div
          initial={{ opacity: 0, y: 32 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.2 }}
          transition={{ duration: 0.6, ease: EASE }}
          className="relative overflow-hidden rounded-[var(--radius)] border border-border bg-card/60 p-6 backdrop-blur-xl md:p-12"
        >
          {/* kintsugi seam, in place of the original's gradient wash */}
          <span
            className="absolute top-0 left-[12%] h-px w-11 bg-[var(--ca-seal)]"
            aria-hidden="true"
          />

          <div className="relative grid gap-12 lg:grid-cols-[1.35fr_1fr]">
            <div className="space-y-8">
              <Badge
                variant="outline"
                className="rounded-[var(--radius)] border-border bg-transparent px-3 py-1 font-mono text-[0.7rem] tracking-[0.2em] text-muted-foreground uppercase"
              >
                Curriculum Vitae
              </Badge>

              <div className="space-y-5">
                <motion.h1
                  initial={{ opacity: 0, y: 18 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: 0.08, ease: EASE }}
                  className="font-serif text-[clamp(2rem,5vw,3.1rem)] leading-tight tracking-tight text-balance"
                >
                  {name}
                </motion.h1>

                <motion.p
                  initial={{ opacity: 0, y: 18 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: 0.14, ease: EASE }}
                  className="font-mono text-xs tracking-[0.16em] text-muted-foreground uppercase"
                >
                  {headline}
                </motion.p>

                <motion.p
                  initial={{ opacity: 0, y: 18 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: 0.2, ease: EASE }}
                  className="max-w-[62ch] leading-relaxed text-[var(--ca-ink-2)]"
                >
                  {summary}
                </motion.p>
              </div>

              <div className="grid gap-0">
                {highlights.map((item, index) => (
                  <motion.div
                    key={item.title}
                    initial={{ opacity: 0, y: 16 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.4, delay: 0.1 * index, ease: EASE }}
                    className="border-t border-border py-4 last:border-b"
                  >
                    <p className="font-mono text-[0.7rem] tracking-[0.18em] text-[var(--ca-ink-4)] uppercase">
                      {item.title}
                    </p>
                    <p className="mt-1.5 max-w-[58ch] text-sm leading-relaxed text-muted-foreground">
                      {item.description}
                    </p>
                  </motion.div>
                ))}
              </div>

              <motion.div
                initial={{ opacity: 0, y: 16 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: 0.3, ease: EASE }}
                className="flex flex-wrap items-center gap-4"
              >
                <Button
                  asChild
                  size="lg"
                  className="h-12 gap-2 rounded-[var(--radius)] px-6 text-sm font-medium"
                >
                  <a href={resumeHref} download>
                    <Download className="h-4 w-4" />
                    Download PDF
                  </a>
                </Button>
                <a href={`mailto:${email}`} className="ca-quiet inline-flex items-center gap-2 text-sm">
                  <Mail className="h-4 w-4" />
                  {email}
                </a>
              </motion.div>
            </div>

            {/* Profile column — a seal card rather than an avatar with a glow. */}
            <div className="relative">
              <div className="flex h-full flex-col justify-between gap-8 border border-border p-6 md:p-7">
                <div>
                  {photoSrc ? (
                    <>
                      <img
                        src={photoSrc}
                        alt={name}
                        className="ca-portrait ca-portrait-light"
                        width={760}
                        height={950}
                      />
                      {photoSrcDark && (
                        <img
                          src={photoSrcDark}
                          alt=""
                          aria-hidden="true"
                          className="ca-portrait ca-portrait-dark"
                          width={760}
                          height={950}
                        />
                      )}
                    </>
                  ) : (
                    <div className="ca-portrait ca-portrait-empty" role="img" aria-label="Portrait placeholder">
                      <User className="h-7 w-7" strokeWidth={1.25} aria-hidden="true" />
                      <span>Portrait</span>
                    </div>
                  )}

                  <span className="ca-menu-seal mt-6 inline-flex" aria-hidden="true">
                    印
                  </span>
                  <p className="mt-5 font-serif text-2xl leading-snug tracking-tight">
                    Twenty-six years, one instinct.
                  </p>
                  <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                    If a process is repetitive, it should build and run itself. That
                    started on a Commodore&nbsp;64 in 1988 and it hasn&rsquo;t changed.
                  </p>
                </div>

                <motion.div
                  variants={listVariants}
                  initial="hidden"
                  whileInView="visible"
                  viewport={{ once: true, margin: "-60px" }}
                  className="flex flex-col"
                >
                  {social.map((s) => (
                    <motion.a
                      key={s.label}
                      variants={itemVariants}
                      href={s.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="group flex items-center gap-3 border-t border-border py-3 last:border-b"
                    >
                      <span className="text-sm">{s.label}</span>
                      <span className="ml-auto font-mono text-[0.7rem] text-[var(--ca-ink-4)]">
                        {s.handle}
                      </span>
                      <ArrowUpRight className="h-3.5 w-3.5 text-[var(--ca-ink-4)] transition-all group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-[var(--ca-seal)]" />
                    </motion.a>
                  ))}
                </motion.div>
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

export default ResumeIntro;
