import Link from "next/link";
import Image from "next/image";
import { ArrowRight, CheckCircle2, ExternalLink } from "lucide-react";
import { FOUNDER_CREDENTIALS } from "@/lib/constants/site";

interface FounderBioSectionProps {
  variant?: "editorial" | "about" | "card" | "compact";
  className?: string;
}

export default function FounderBioSection({
  variant = "editorial",
  className = "",
}: FounderBioSectionProps) {
  // 1. Editorial Variant (Homepage Full Story)
  if (variant === "editorial") {
    return (
      <section className={`py-20 lg:py-28 bg-brand-sand/40 border-b border-brand-border/60 ${className}`}>
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
            {/* Author Portrait */}
            <div className="lg:col-span-5 flex justify-center">
              <div className="relative max-w-md w-full">
                <div className="absolute -inset-3 rounded-3xl bg-gradient-to-tr from-brand-gold/30 via-transparent to-brand-gold/20 blur-sm pointer-events-none" />
                <div className="relative rounded-3xl overflow-hidden bg-white border border-brand-border/80 shadow-xl p-3">
                  <div className="relative rounded-2xl overflow-hidden bg-brand-sand/60 aspect-[4/5] w-full">
                    <Image
                      src={FOUNDER_CREDENTIALS.portraitImage}
                      alt={`${FOUNDER_CREDENTIALS.name} - Founder of Vietnam Wedding Guide`}
                      fill
                      className="object-cover object-top hover:scale-105 transition-transform duration-500"
                      sizes="(min-width: 1024px) 400px, (min-width: 640px) 50vw, 90vw"
                      priority
                    />
                  </div>
                  <div className="p-4 text-center">
                    <h3 className="font-title text-lg font-bold text-brand-dark">
                      {FOUNDER_CREDENTIALS.name}
                    </h3>
                    <p className="text-xs text-brand-muted tracking-wider uppercase mt-0.5">
                      Founder &amp; Senior Destination Wedding Consultant
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Author Story & Vision */}
            <div className="lg:col-span-7">
              <div className="inline-flex items-center text-xs font-semibold text-brand-gold tracking-[0.25em] uppercase mb-5">
                <span>Founder&apos;s Perspective</span>
              </div>

              <h2 className="font-title text-3xl sm:text-4xl lg:text-5xl font-bold text-brand-dark leading-tight mb-6">
                The <span className="gold-gradient-text">Story Behind</span> This Blog
              </h2>

              <div className="space-y-4 text-brand-muted text-base sm:text-lg leading-relaxed mb-8">
                <p>
                  For years, I&apos;ve watched international couples dream of an immersive Vietnamese wedding:{" "}
                  <span className="text-brand-dark font-medium italic">
                    a journey filled with culture, heritage, and discovery for their loved ones.
                  </span>
                </p>
                <p>
                  But I also saw the friction: the gap between that beautiful vision and the stressful reality of navigating unfamiliar contract terms, local supplier pricing, and high-stakes luxury production.
                </p>
                <p>
                  This guide is my answer: a space to bridge that gap with{" "}
                  <strong className="text-brand-dark font-semibold">clarity, objective frameworks, and a consultant&apos;s perspective</strong>{" "}
                  to make your planning journey serene and transparent.
                </p>
              </div>

              {/* Trust Credentials */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4 pb-8 border-t border-brand-border/60">
                <div className="flex items-start gap-3">
                  <div className="w-8 h-8 rounded-full bg-white flex items-center justify-center text-brand-gold shrink-0 border border-brand-border mt-0.5">
                    <CheckCircle2 size={16} />
                  </div>
                  <div>
                    <span className="text-xs font-bold uppercase tracking-wider text-brand-dark block">
                      {FOUNDER_CREDENTIALS.yearsHospitality}
                    </span>
                    <span className="text-xs text-brand-muted">
                      {FOUNDER_CREDENTIALS.hospitalityPedigree}
                    </span>
                  </div>
                </div>

                <div className="flex items-start gap-3">
                  <div className="w-8 h-8 rounded-full bg-white flex items-center justify-center text-brand-gold shrink-0 border border-brand-border mt-0.5">
                    <CheckCircle2 size={16} />
                  </div>
                  <div>
                    <span className="text-xs font-bold uppercase tracking-wider text-brand-dark block">
                      {FOUNDER_CREDENTIALS.productionLabel}
                    </span>
                    <span className="text-xs text-brand-muted">
                      {FOUNDER_CREDENTIALS.productionRigor}
                    </span>
                  </div>
                </div>
              </div>

              {/* Author Actions */}
              <div className="flex flex-wrap items-center gap-4">
                <Link
                  href="/about"
                  className="inline-flex items-center gap-2 bg-brand-gold hover:bg-brand-gold-hover text-white px-7 py-3 rounded-full text-xs font-semibold uppercase tracking-widest transition-all duration-300 shadow-sm hover:shadow-md"
                >
                  <span>Get to Know Me</span>
                  <ArrowRight size={14} />
                </Link>
                <a
                  href={FOUNDER_CREDENTIALS.websiteUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 bg-white hover:bg-brand-sand text-brand-dark border border-brand-border hover:border-brand-gold px-7 py-3 rounded-full text-xs font-semibold uppercase tracking-widest transition-all duration-300 shadow-xs"
                >
                  <span>Visit {FOUNDER_CREDENTIALS.websiteLabel}</span>
                  <ExternalLink size={14} className="text-brand-gold" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // 2. About Variant (About Page Bio Card)
  if (variant === "about") {
    return (
      <section className={`py-20 lg:py-24 bg-brand-sand/30 border-b border-brand-border/60 ${className}`}>
        <div className="container max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="card-luxury rounded-3xl p-8 sm:p-12 bg-white border border-brand-border">
            <div className="flex flex-col sm:flex-row items-center gap-8">
              <div className="relative w-28 h-28 sm:w-36 sm:h-36 rounded-full overflow-hidden bg-brand-sand border-2 border-brand-gold/60 shrink-0 shadow-md">
                <Image
                  src={FOUNDER_CREDENTIALS.portraitImage}
                  alt={`${FOUNDER_CREDENTIALS.name} - Founder & Curator of Vietnam Wedding Guide`}
                  fill
                  className="object-cover object-top"
                  sizes="144px"
                />
              </div>

              <div className="space-y-4 text-center sm:text-left">
                <div className="inline-block">
                  <span className="text-xs font-semibold text-brand-gold uppercase tracking-[0.2em]">
                    Platform Founder &amp; Curator
                  </span>
                </div>
                <h3 className="font-title text-2xl sm:text-3xl font-bold text-brand-dark">
                  {FOUNDER_CREDENTIALS.name}
                </h3>
                <p className="text-sm text-brand-muted leading-relaxed">
                  {FOUNDER_CREDENTIALS.aboutBio}
                </p>
                <div className="pt-2 flex flex-wrap items-center justify-center sm:justify-start gap-4">
                  <a
                    href={FOUNDER_CREDENTIALS.websiteUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-brand-gold hover:text-brand-gold-hover transition-colors"
                  >
                    <span>Visit {FOUNDER_CREDENTIALS.websiteLabel}</span>
                    <ExternalLink className="w-3.5 h-3.5" />
                  </a>
                  <span className="text-brand-border">&bull;</span>
                  <span className="text-xs text-brand-muted">
                    Read career background &amp; hospitality thoughts at {FOUNDER_CREDENTIALS.websiteLabel}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // 3. Card Variant (Service Detail Credibility)
  if (variant === "card") {
    return (
      <section className={`py-20 lg:py-24 ${className}`}>
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="card-luxury rounded-3xl p-8 sm:p-12 bg-white border border-brand-border max-w-5xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-center">
              <div className="md:col-span-4 flex justify-center">
                <div className="relative w-48 h-56 sm:w-56 sm:h-64 rounded-2xl overflow-hidden bg-brand-sand border border-brand-border/80 shadow-md">
                  <Image
                    src={FOUNDER_CREDENTIALS.portraitImage}
                    alt={`${FOUNDER_CREDENTIALS.name} - Senior Destination Wedding Consultant`}
                    fill
                    className="object-cover object-top"
                    sizes="(min-width: 640px) 250px, 200px"
                  />
                </div>
              </div>
              <div className="md:col-span-8">
                <div className="inline-block mb-3">
                  <span className="text-xs font-semibold text-brand-gold uppercase tracking-[0.2em]">
                    Senior Advisory Lead
                  </span>
                </div>
                <h3 className="font-title text-2xl sm:text-3xl font-bold text-brand-dark mb-3">
                  Meet {FOUNDER_CREDENTIALS.name}
                </h3>
                <p className="text-sm sm:text-base text-brand-muted leading-relaxed mb-6">
                  {FOUNDER_CREDENTIALS.cardBio}
                </p>
                <div className="flex flex-wrap items-center gap-4">
                  <Link
                    href="/about"
                    className="inline-flex items-center gap-2 bg-brand-sand hover:bg-brand-border/80 text-brand-dark px-6 py-2.5 rounded-full text-xs font-semibold uppercase tracking-widest transition-all duration-300"
                  >
                    <span>Read Full Story</span>
                    <ArrowRight size={13} />
                  </Link>
                  <a
                    href={FOUNDER_CREDENTIALS.websiteUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-brand-gold hover:underline"
                  >
                    <span>Portfolio at {FOUNDER_CREDENTIALS.websiteLabel}</span>
                    <ExternalLink size={13} />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // 4. Compact Variant (Blog Article Bio Card)
  return (
    <div className={`mt-16 pt-10 border-t border-brand-border/80 ${className}`}>
      <div className="card-luxury rounded-3xl p-8 sm:p-10 bg-white border border-brand-border">
        <div className="flex flex-col sm:flex-row items-center sm:items-start gap-6 text-center sm:text-left">
          <div className="relative w-24 h-24 sm:w-28 sm:h-28 rounded-2xl overflow-hidden bg-brand-sand border border-brand-border shrink-0 shadow-sm">
            <Image
              src={FOUNDER_CREDENTIALS.portraitImage}
              alt={FOUNDER_CREDENTIALS.name}
              fill
              className="object-cover object-top"
              sizes="112px"
            />
          </div>
          <div className="space-y-3">
            <div className="inline-block">
              <span className="text-xs font-semibold text-brand-gold uppercase tracking-[0.2em]">
                Author &amp; Advisor
              </span>
            </div>
            <h3 className="font-title text-2xl font-bold text-brand-dark">
              Written by {FOUNDER_CREDENTIALS.name}
            </h3>
            <p className="text-sm text-brand-muted leading-relaxed">
              {FOUNDER_CREDENTIALS.compactBio}
            </p>
            <div className="pt-2 flex flex-wrap items-center justify-center sm:justify-start gap-4">
              <Link
                href="/about"
                className="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-brand-gold hover:underline"
              >
                <span>About {FOUNDER_CREDENTIALS.name}</span>
                <ArrowRight size={12} />
              </Link>
              <a
                href={FOUNDER_CREDENTIALS.websiteUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-brand-muted hover:text-brand-dark"
              >
                <span>{FOUNDER_CREDENTIALS.websiteLabel}</span>
                <ExternalLink size={12} />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}