import type { HomeVariantContent } from "@/content/types";
import { getEmailHref } from "@/lib/site";

type ComingSoonPanelProps = {
  content: HomeVariantContent;
};

export default function ComingSoonPanel({ content }: ComingSoonPanelProps) {
  const emailHref = getEmailHref();

  return (
    <section className="coming-soon panel">
      <div className="coming-soon-copy">
        <p className="availability-badge">{content.badge}</p>
        <p className="eyebrow">{content.kicker}</p>
        <h1>{content.title}</h1>
        <p className="lead">{content.description}</p>

        <div className="cta-row">
          {emailHref ? (
            <a href={emailHref} className="cta-btn">
              {content.primaryCta}
            </a>
          ) : (
            <span className="cta-btn is-disabled" aria-disabled="true">
              {content.primaryCta}
            </span>
          )}
        </div>
      </div>

      <div className="coming-soon-meta" aria-label="Launch status">
        {content.highlights.map((item) => (
          <article key={item.label} className="coming-soon-card">
            <span className="coming-soon-value">{item.value}</span>
            <span className="coming-soon-label">{item.label}</span>
          </article>
        ))}
      </div>
    </section>
  );
}