type ContactBits = {
  supportEmail: string;
  supportPhone: string;
  address: string;
  facebookUrl: string;
  instagramUrl: string;
  twitterUrl: string;
  youtubeUrl: string;
  tiktokUrl: string;
};

function IconPhone({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.81.36 1.6.7 2.35a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.75.34 1.54.57 2.35.7A2 2 0 0 1 22 16.92z" />
    </svg>
  );
}

function IconMail({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
      <rect width="20" height="16" x="2" y="4" rx="2" />
      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
    </svg>
  );
}

function IconMap({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
      <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
      <circle cx="12" cy="10" r="3" />
    </svg>
  );
}

function IconFacebook({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden>
      <path d="M14 8.5V6.8c0-.8.2-1.3 1.4-1.3H17V3h-2.3C12.1 3 11 4.5 11 6.6V8.5H9v2.7h2V21h3v-9.8h2.4l.4-2.7H14z" />
    </svg>
  );
}

function IconInstagram({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
      <rect width="20" height="20" x="2" y="2" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
    </svg>
  );
}

function IconX({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden>
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.748l7.725-8.835L1.254 2.25H8.08l4.259 5.686L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z" />
    </svg>
  );
}

function IconYoutube({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden>
      <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31.5 31.5 0 0 0 0 12a31.5 31.5 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31.5 31.5 0 0 0 24 12a31.5 31.5 0 0 0-.5-5.8zM9.8 15.5v-7l6.2 3.5-6.2 3.5z" />
    </svg>
  );
}

function IconTikTok({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden>
      <path d="M19.6 7.4a5.7 5.7 0 0 1-3.4-1.1v7.3a5.5 5.5 0 1 1-5.5-5.5c.3 0 .6 0 .9.1v2.7a2.8 2.8 0 1 0 2 2.7V2.5h2.7c.2 1.8 1.4 3.4 3.1 4.2l.2.7z" />
    </svg>
  );
}

/** Phone, email, address + social links for footer / contact / about. */
export function StoreContactBlock({
  settings,
  showAddress = true,
}: {
  settings: ContactBits;
  showAddress?: boolean;
  compact?: boolean;
}) {
  const phone =
    settings.supportPhone?.trim() || "+1 (800) 555-0147";
  const email = settings.supportEmail?.trim() || "support@bhofit.com";
  const address =
    settings.address?.trim() ||
    "1200 Market Street, Suite 400, San Francisco, CA 94103, USA";
  const telHref = `tel:${phone.replace(/[^\d+]/g, "")}`;

  const socials = [
    { href: settings.facebookUrl, label: "Facebook", Icon: IconFacebook },
    { href: settings.instagramUrl, label: "Instagram", Icon: IconInstagram },
    { href: settings.twitterUrl, label: "X", Icon: IconX },
    { href: settings.youtubeUrl, label: "YouTube", Icon: IconYoutube },
    { href: settings.tiktokUrl, label: "TikTok", Icon: IconTikTok },
  ].filter((item) => item.href?.trim());

  return (
    <div className="space-y-3.5">
      <a
        href={telHref}
        className="flex items-start gap-2.5 text-sm text-muted transition hover:text-[var(--brand-blue)]"
      >
        <IconPhone className="mt-0.5 h-4 w-4 shrink-0 text-[var(--brand-orange)]" />
        <span className="font-medium text-foreground/90">{phone}</span>
      </a>
      <a
        href={`mailto:${email}`}
        className="flex items-start gap-2.5 text-sm text-muted transition hover:text-[var(--brand-blue)]"
      >
        <IconMail className="mt-0.5 h-4 w-4 shrink-0 text-[var(--brand-blue)]" />
        <span className="font-medium text-foreground/90">{email}</span>
      </a>
      {showAddress ? (
        <p className="flex items-start gap-2.5 text-sm leading-relaxed text-muted">
          <IconMap className="mt-0.5 h-4 w-4 shrink-0 text-[var(--brand-orange)]" />
          <span>{address}</span>
        </p>
      ) : null}
      {socials.length > 0 ? (
        <div className="flex flex-wrap gap-2 pt-1">
          {socials.map(({ href, label, Icon }) => (
            <a
              key={label}
              href={href!}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={label}
              className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border bg-card text-foreground transition hover:border-[var(--brand-blue)] hover:text-[var(--brand-blue)]"
            >
              <Icon className="h-4 w-4" />
            </a>
          ))}
        </div>
      ) : null}
    </div>
  );
}