CedarCopilot/cedar-mail

import { useEffect } from 'react';
import { Calendar, MessageSquare, Phone } from 'lucide-react';
import confetti from 'canvas-confetti';
import { Button } from '@/components/ui/button';

interface SetupCompleteProps {
  onEnterApp: () => void;
}

/** The hand-off screen. Same three routes to a human the old flow ended on. */
export function SetupComplete({ onEnterApp }: SetupCompleteProps) {
  useEffect(() => {
    confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
  }, []);

  return (
    <div className="mx-auto flex w-full max-w-xl flex-col items-center gap-8 py-16 text-center">
      <div>
        <h1 className="text-4xl font-semibold tracking-tight">You&apos;re set up</h1>
        <p className="text-muted-foreground mt-3">
          Our agents are analysing and syncing your past threads, meetings and CRM deals. That
          runs in the background — you can start using Cedar now.
        </p>
      </div>

      <Button size="lg" className="cursor-pointer" onClick={onEnterApp}>
        Open Cedar
      </Button>

      <div className="w-full space-y-3 text-left">
        <div className="flex items-start gap-3 rounded-xl border p-4">
          <Calendar className="mt-0.5 h-5 w-5 shrink-0 text-blue-500" />
          <div className="flex-1">
            <h4 className="text-sm font-semibold">Schedule an onboarding call</h4>
            <p className="text-muted-foreground mb-2 text-sm">
              Thirty minutes to get set up with a human.
            </p>
            <Button asChild size="sm" variant="outline" className="cursor-pointer">
              <a
                href="https://calendly.com/jesse-cedarcopilot/30min"
                target="_blank"
                rel="noopener noreferrer"
              >
                Book a time
              </a>
            </Button>
          </div>
        </div>

        <div className="flex items-start gap-3 rounded-xl border p-4">
          <Phone className="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" />
          <div className="flex-1">
            <h4 className="text-sm font-semibold">Call or text Jesse</h4>
            <p className="text-muted-foreground text-sm">
              For anything — it doesn&apos;t have to be urgent.
            </p>
            <a href="tel:7703095037" className="text-primary font-mono text-sm hover:underline">
              (770) 309-5037
            </a>
          </div>
        </div>

        <div className="flex items-start gap-3 rounded-xl border p-4">
          <MessageSquare className="mt-0.5 h-5 w-5 shrink-0 text-purple-500" />
          <div className="flex-1">
            <h4 className="text-sm font-semibold">Join the Slack channel</h4>
            <p className="text-muted-foreground text-sm">
              If we don&apos;t have a Slack Connect set up yet, text or email me.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}