"use client";

import { useLucideIcons } from "@/hooks/useLucideIcons";

interface CtaAction {
  href: string;
  label: string;
  variant: "primary" | "green" | "dark" | "glass";
  iconBefore?: string;
  iconAfter?: string;
  external?: boolean;
}

interface CtaSectionProps {
  /** Outer wrapper variant — controls section padding. */
  variant?: "dusk" | "tight";
  /** Inner band color — defaults follow the variant when omitted. */
  band?: "dusk" | "purple" | "green";
  eyebrow: string;
  title: React.ReactNode;
  body: string;
  actions: ReadonlyArray<CtaAction>;
  screenLabel?: string;
}

const BUTTON_CLASSES: Record<CtaAction["variant"], string> = {
  primary: "btn btn-primary btn-lg",
  green: "btn btn-green btn-lg",
  dark: "btn btn-dark btn-lg",
  glass: "btn btn-glass btn-lg",
};

export function CtaSection({
  variant = "dusk",
  band,
  eyebrow,
  title,
  body,
  actions,
  screenLabel = "06 CTA",
}: CtaSectionProps) {
  useLucideIcons();
  const sectionClass = variant === "tight" ? "sec-tight" : "cta-wrap";
  const resolvedBand = band ?? (variant === "tight" ? "purple" : "dusk");
  const bandClass = `cta-band ${resolvedBand}`;

  return (
    <section className={sectionClass} data-screen-label={screenLabel}>
      <div className="wrap">
        <div className={bandClass}>
          <div>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,0.9)" }}>
              <span
                className="pip"
                style={{ background: "#fff", boxShadow: "0 0 0 4px rgba(255,255,255,0.18)" }}
              />
              {eyebrow}
            </span>
            <h2>{title}</h2>
            <p>{body}</p>
          </div>
          <div className="actions" style={{ justifyContent: "flex-end" }}>
            {actions.map((action) => (
              <a
                key={action.href + action.label}
                href={action.href}
                className={BUTTON_CLASSES[action.variant]}
                {...(action.external ? { rel: "noopener noreferrer", target: "_blank" } : {})}
              >
                {action.iconBefore && <i data-lucide={action.iconBefore} />}
                {action.label}
                {action.iconAfter && <i data-lucide={action.iconAfter} />}
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}