import React from 'react';
import { CalendarCheck, Mail } from 'lucide-react';
import styles from '../styles/results.module.css';

interface BookingCTAProps {
  consultantName: string;
  bookingUrl: string;
}

export const BookingCTA: React.FC<BookingCTAProps> = ({ consultantName, bookingUrl }) => {
  if (!bookingUrl) return null;

  const isEmail = bookingUrl.includes('@') && !bookingUrl.includes('://');
  const href = isEmail ? `mailto:${bookingUrl}?subject=Audit%20Results%20Follow-Up` : bookingUrl;
  const buttonText = isEmail ? 'Email Us to Get Started →' : 'Book My Free Call →';

  return (
    <div className={styles.bookingCta}>
      <span className={styles.ctaIcon}>
        {isEmail
          ? <Mail size={32} color="var(--noon-accent)" />
          : <CalendarCheck size={32} color="var(--noon-accent)" />
        }
      </span>
      <h3 className={styles.ctaTitle}>
        Let's fix this — {isEmail ? 'get in touch for a free triage call' : 'book a free 15-minute triage call'}
      </h3>
      <p className={styles.ctaSubtitle}>
        Speak directly with {consultantName} to identify your highest-priority
        wins and get a clear action plan.
      </p>
      <a
        href={href}
        target={isEmail ? '_self' : '_blank'}
        rel={isEmail ? undefined : 'noopener noreferrer'}
        className={styles.ctaButton}
        id="noon-audit-book"
      >
        {buttonText}
      </a>
    </div>
  );
};