import { ArrowRight, Check, Star } from "lucide-react";

export interface ExpertFloatingQuote {
  /** Inner HTML allowed for <strong> emphasis. */
  quote: string;
  author: string;
  /** If avatarSrc is missing, avatarFallback (e.g. "$40K") fills the circle. */
  avatarSrc?: string;
  avatarFallback?: string;
  /** Where the bubble docks against the image. */
  position:
    | "top-left"
    | "top-right"
    | "mid-left"
    | "mid-right"
    | "bottom-left"
    | "bottom-right";
}

export interface ExpertFloatingQuotesProps {
  eyebrow?: string;
  headline?: string;
  highlightedText?: string;
  tagline?: string;
  description?: string;
  bullets?: string[];
  primaryCta?: { label: string; href: string };
  socialProof?: string;
  avatarStack?: { src: string; alt: string }[];
  imageSrc?: string;
  imageAlt?: string;
  floatingQuotes?: ExpertFloatingQuote[];
  /** Default = Laurie Mabelis brand-light-bg #F3F8FB */
  bgColor?: string;
  /** Default = brand-orange #FF6C00 */
  accentColor?: string;
  /** Default = brand-cta #FF6240 (gradient end) */
  accentGradientEnd?: string;
  /** Default = brand-orange-dark #E55F00 (CTA hover) */
  accentDark?: string;
  /** Default = brand-navy #000321 (headline + bullets) */
  navyColor?: string;
  /** Default = brand-body-text #607179 (description + bubble subline) */
  bodyColor?: string;
}

const positionClasses: Record<ExpertFloatingQuote["position"], string> = {
  "top-left": "top-4 -left-4",
  "top-right": "top-4 -right-4",
  "mid-left": "top-[50%] -left-4",
  "mid-right": "top-[25%] -right-4",
  "bottom-left": "bottom-4 -left-4",
  "bottom-right": "top-[75%] -right-4",
};

const defaultAvatarStack = [
  { src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop&crop=face", alt: "" },
  { src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face", alt: "" },
  { src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop&crop=face", alt: "" },
  { src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face", alt: "" },
];

const defaultFloatingQuotes: ExpertFloatingQuote[] = [
  {
    quote: 'She is <strong>epically good.</strong>',
    author: "Joost de Bruin",
    avatarSrc: "https://images.leadconnectorhq.com/image/f_webp/q_80/r_1200/u_https://assets.cdn.filesafe.space/MIlJgDYFMB8RoNmvPXpT/media/6739da62732b00b40631c80f.png",
    position: "top-left",
  },
  {
    quote: '<strong>THE Speaking Expert</strong>',
    author: "Peter John Mather",
    avatarSrc: "https://images.leadconnectorhq.com/image/f_webp/q_80/r_1200/u_https://assets.cdn.filesafe.space/MIlJgDYFMB8RoNmvPXpT/media/6739da44732b000f0531c801.png",
    position: "mid-right",
  },
  {
    quote: '<strong>She is just magical.</strong>',
    author: "Noel Rippe",
    avatarSrc: "https://images.leadconnectorhq.com/image/f_webp/q_80/r_1200/u_https://assets.cdn.filesafe.space/MIlJgDYFMB8RoNmvPXpT/media/6739da51f5dd35c6337ecce0.jpeg",
    position: "mid-left",
  },
  {
    quote: '<strong>Landed a deal</strong> in 3 weeks!',
    author: "Richie Acosta",
    avatarFallback: "$40K",
    position: "bottom-right",
  },
];

export default function ExpertFloatingQuotesHero({
  eyebrow = "For Entrepreneurs, Coaches & Experts",
  headline = "Grow Your Profits Massively by Radically Improving Your",
  highlightedText = "Speaking Skills",
  tagline = "Even if you're an introvert who's never given a keynote",
  description = "I help entrepreneurs craft a signature talk, land their first (or next) paid speaking gig, and become the obvious expert in their industry.",
  bullets = [
    "TEDx-ready keynote in 8 weeks",
    "Clients who come to YOU",
    "Speaking fees from €500 to €10,000+",
  ],
  primaryCta = { label: "BOOK FREE STRATEGY CALL", href: "#contact" },
  socialProof = "Trusted by Impact Makers Worldwide",
  avatarStack = defaultAvatarStack,
  imageSrc = "https://images.leadconnectorhq.com/image/f_webp/q_80/r_1200/u_https://assets.cdn.filesafe.space/MIlJgDYFMB8RoNmvPXpT/media/6739d4ba21b02d559cd3559f.jpeg",
  imageAlt = "Laurie Mabelis on stage with Nick Santonastasso",
  floatingQuotes = defaultFloatingQuotes,
  bgColor = "#F3F8FB",
  accentColor = "#FF6C00",
  accentGradientEnd = "#FF6240",
  accentDark = "#E55F00",
  navyColor = "#000321",
  bodyColor = "#607179",
}: ExpertFloatingQuotesProps) {
  return (
    <section
      className="relative min-h-screen flex items-center overflow-hidden"
      style={{ background: bgColor }}
    >
      <div className="mx-auto max-w-7xl w-full px-4 sm:px-6 lg:px-8 py-12 md:py-20">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Left: copy + bullets + CTA + social proof */}
          <div className="space-y-6">
            <p
              className="font-semibold tracking-wider uppercase text-sm"
              style={{ color: accentColor }}
            >
              {eyebrow}
            </p>
            <h1
              className="font-black text-4xl md:text-5xl lg:text-6xl leading-tight"
              style={{ color: navyColor }}
            >
              {headline}{" "}
              <span
                className="bg-clip-text text-transparent"
                style={{
                  backgroundImage: `linear-gradient(135deg, ${accentColor} 0%, ${accentGradientEnd} 100%)`,
                }}
              >
                {highlightedText}
              </span>
            </h1>
            <p className="text-xl md:text-2xl font-medium" style={{ color: navyColor }}>
              {tagline}
            </p>
            <p className="text-lg leading-relaxed max-w-xl" style={{ color: bodyColor }}>
              {description}
            </p>
            <div className="flex flex-col gap-2 font-medium" style={{ color: navyColor }}>
              {bullets.map((b) => (
                <div key={b} className="flex items-center gap-2">
                  <Check className="w-5 h-5 flex-shrink-0" style={{ color: accentColor }} />
                  <span>{b}</span>
                </div>
              ))}
            </div>
            <div className="pt-4">
              <a
                href={primaryCta.href}
                className="inline-flex items-center gap-2 rounded-lg px-8 py-4 text-white font-bold text-lg transition-all hover:-translate-y-0.5"
                style={{
                  background: `linear-gradient(135deg, ${accentColor} 0%, ${accentDark} 100%)`,
                  boxShadow: `0 4px 20px ${accentColor}66`,
                }}
              >
                {primaryCta.label}
                <ArrowRight className="w-5 h-5" />
              </a>
            </div>
            <div className="flex items-center gap-4 pt-6">
              {avatarStack.length > 0 && (
                <div className="flex -space-x-3">
                  {avatarStack.map((a, i) => (
                    <img
                      key={i}
                      src={a.src}
                      alt={a.alt}
                      width={40}
                      height={40}
                      className="w-10 h-10 rounded-full border-2 border-white object-cover"
                    />
                  ))}
                </div>
              )}
              <div className="flex items-center gap-2">
                <Star className="w-5 h-5 text-yellow-400 fill-yellow-400" />
                <span className="font-medium" style={{ color: bodyColor }}>{socialProof}</span>
              </div>
            </div>
          </div>

          {/* Right: hero image with floating quote bubbles */}
          <div className="relative">
            <div className="relative rounded-2xl overflow-hidden shadow-2xl">
              <img
                src={imageSrc}
                alt={imageAlt}
                width={900}
                height={1100}
                loading="eager"
                fetchPriority="high"
                decoding="async"
                className="w-full h-auto object-cover"
              />
            </div>
            <div className="hidden md:block">
              {floatingQuotes.map((q, i) => (
                <div
                  key={i}
                  className={`absolute ${positionClasses[q.position]} bg-white rounded-xl shadow-xl p-3 w-[220px]`}
                >
                  <div className="flex items-start gap-2">
                    {q.avatarSrc ? (
                      <img
                        src={q.avatarSrc}
                        alt={q.author}
                        width={40}
                        height={40}
                        className="w-10 h-10 rounded-full object-cover flex-shrink-0"
                      />
                    ) : (
                      <div
                        className="w-10 h-10 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0"
                        style={{ background: accentColor }}
                      >
                        {q.avatarFallback}
                      </div>
                    )}
                    <div>
                      <p
                        className="text-xs font-medium leading-tight"
                        style={{ color: navyColor }}
                        dangerouslySetInnerHTML={{ __html: q.quote }}
                      />
                      <p className="text-xs mt-1" style={{ color: bodyColor }}>
                        {q.author}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}