export interface WilsonHeroProps {
  imageSrc?: string;
  imageAlt?: string;
  eyebrow?: string;
  headlinePart1?: string;
  italicHighlight?: string;
  headlinePart2?: string;
  description?: string;
  /** Default = Wilson cream #FAF6EF */
  bgColor?: string;
  /** Default = Wilson navy ink #1F2E3B */
  inkColor?: string;
  /** Default = Wilson teal-deep #4E8A9A */
  accentColor?: string;
  /** Default = Wilson body #5A6472 */
  bodyColor?: string;
  /** Default = Wilson ink-soft #45576A (for eyebrow) */
  eyebrowColor?: string;
}

export default function WilsonHero({
  imageSrc = "/heroes/wilson/docs.webp",
  imageAlt = "The doctors of Deborah Wilson, M.D. and Associates",
  eyebrow = "Gynecology · Wellness · Aesthetics",
  headlinePart1 = "Women caring",
  italicHighlight = "for women",
  headlinePart2 = ", in Scottsdale.",
  description = "Dr. Roberts, Dr. Allen, and Dr. Montes are nationally recognized minimally invasive gynecologic surgeons with decades of experience behind them. You'll find the doctors easy to talk to and willing to discuss any problems you have. They understand, because they're women just like you.",
  bgColor = "#FAF6EF",
  inkColor = "#1F2E3B",
  accentColor = "#4E8A9A",
  bodyColor = "#5A6472",
  eyebrowColor = "#45576A",
}: WilsonHeroProps) {
  return (
    <>
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap"
      />
      <section
        className="relative pb-12"
        style={{ background: bgColor, fontFamily: "'Inter', sans-serif" }}
      >
        {/* Wide cinematic image at top */}
        <div
          className="relative w-full overflow-hidden"
          style={{ aspectRatio: "24/10" }}
        >
          <img
            src={imageSrc}
            alt={imageAlt}
            className="w-full h-full"
            style={{ objectFit: "cover", objectPosition: "center 40%" }}
            loading="eager"
            fetchPriority="high"
            decoding="async"
          />
        </div>

        {/* Cream caption card overlapping below the image */}
        <div
          className="relative mx-auto text-center"
          style={{
            maxWidth: 960,
            background: bgColor,
            padding: "60px 40px 20px",
            marginTop: -90,
            zIndex: 2,
          }}
        >
          <span
            className="inline-block"
            style={{
              fontSize: "0.78rem",
              letterSpacing: "0.35em",
              textTransform: "uppercase",
              color: eyebrowColor,
              marginBottom: 18,
              fontFamily: "'Inter', sans-serif",
              fontWeight: 400,
            }}
          >
            {eyebrow}
          </span>
          <h1
            className="m-0"
            style={{
              fontFamily: "'Fraunces', serif",
              fontWeight: 300,
              fontSize: "clamp(2.25rem, 5vw, 3.4rem)",
              lineHeight: 1.1,
              color: inkColor,
              marginBottom: 28,
              letterSpacing: "-0.01em",
            }}
          >
            {headlinePart1}{" "}
            <em style={{ fontStyle: "italic", fontWeight: 300, color: accentColor }}>
              {italicHighlight}
            </em>
            {headlinePart2}
          </h1>
          <p
            className="m-0 mx-auto"
            style={{
              fontSize: "1.12rem",
              lineHeight: 1.75,
              maxWidth: 620,
              color: bodyColor,
            }}
          >
            {description}
          </p>
        </div>
      </section>
    </>
  );
}