Cta App

import { Mic, Sparkles, Star } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CtaAppProps {
  title?: string;
  description?: string;
  stores?: { label: string; sub: string; href: string }[];
  rating?: string;
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

/** App download CTA: copy, two glass store buttons and rating on the left; an HTML phone mock-up recording an in-person meeting on the right. */
export function CtaApp({
  title = "Take Halo to the meeting room",
  description = "Put your phone on the table. Halo records, transcribes and recaps in-person meetings exactly like calls.",
  stores = [
    { label: "App Store", sub: "Download on the", href: "#ios" },
    { label: "Google Play", sub: "Get it on", href: "#android" },
  ],
  rating = "4.8 · 12k ratings",
  className,
}: CtaAppProps) {
  return (
    <section className={cn("da-section overflow-hidden text-da-fg", className)}>
      <div className="da-container">
        <div className={cn("grid items-center gap-10 overflow-hidden rounded-da-lg px-6 pt-10 shadow-da-lg sm:px-12 md:grid-cols-2 md:pt-0", GLASS)}>
          <div className="md:py-14">
            <h2 className="font-da-display text-[clamp(1.75rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display text-balance">{title}</h2>
            <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
            <div className="mt-8 flex flex-wrap gap-3">
              {stores.map((s) => (
                <a
                  key={s.href}
                  href={s.href}
                  className="da-focus da-transition flex h-14 items-center rounded-da-md bg-da-fg px-5 text-da-bg shadow-da-md hover:-translate-y-0.5"
                >
                  <span className="leading-tight">
                    <span className="block text-[11px] opacity-80">{s.sub}</span>
                    <span className="block font-da-display text-lg font-semibold">{s.label}</span>
                  </span>
                </a>
              ))}
            </div>
            <p className="mt-5 inline-flex items-center gap-1.5 text-sm text-da-muted-fg">
              <Star aria-hidden className="size-4 fill-da-warning text-da-warning" /> {rating}
            </p>
          </div>
          <div aria-hidden className="relative mx-auto h-[380px] w-[230px] self-end">
            <div className="absolute inset-x-0 top-0 h-[460px] rounded-[40px] border-[6px] border-da-fg/85 bg-gradient-to-b from-da-primary/30 via-da-surface-2 to-da-accent/30 p-4 shadow-da-lg">
              <div className="mx-auto h-5 w-20 rounded-full bg-da-fg/85" />
              <p className="mt-6 text-center text-xs font-semibold">Product offsite · Room 4B</p>
              <div className="mx-auto mt-6 grid size-24 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent shadow-da-lg">
                <Mic className="size-9 text-da-primary-fg" />
              </div>
              <p className="mt-3 text-center font-da-mono text-sm">18:42</p>
              <div className="mt-4 flex h-10 items-center justify-center gap-1">
                {[12, 26, 18, 34, 22, 30, 14, 28, 20, 32, 16, 24].map((h, i) => (
                  <span key={i} className="w-1.5 rounded-full bg-gradient-to-t from-da-primary to-da-accent" style={{ height: h }} />
                ))}
              </div>
              <p className="mt-5 flex items-center gap-1.5 rounded-da-md bg-da-surface p-2.5 text-[11px] shadow-da-sm">
                <Sparkles className="size-3.5 shrink-0 text-da-primary" /> 3 decisions captured so far
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default CtaApp;