import { branding } from '@/app/config/branding';
import { DbIcon } from './icons';
import { useT } from './ContentProvider';
import { SUGGESTION_TONES, useSuggestions } from './suggestions';
import { cx } from './ui';

export function WelcomeScreen({ onPickSuggestion }: { onPickSuggestion: (prompt: string) => void }) {
  const t = useT();
  const suggestions = useSuggestions();
  return (
    <div className="flex min-h-full flex-col items-center justify-center gap-8 px-6 py-12">
      {/* Animated gradient orb */}
      <div className="relative">
        <div className="absolute -inset-6 rounded-[50%] bg-orb-glow blur-[20px]" />
        <div className="relative flex size-20 items-center justify-center rounded-[20px] bg-orb [box-shadow:var(--shadow-orb)]">
          <DbIcon size={36} color="white" />
        </div>
      </div>

      {/* Hero text */}
      <div className="max-w-[480px] text-center">
        <h2 className="mb-2.5 bg-hero-text bg-clip-text text-[32px] leading-[1.2] font-bold [-webkit-text-fill-color:transparent]">
          {t('copy.welcomeTitle')}
        </h2>
        <p className="m-0 text-[16px] leading-[1.7] text-muted">
          {t('copy.welcomeBody', { company: branding.company })}
        </p>
      </div>

      {/* 2x2 suggestion grid */}
      <div className="grid w-full max-w-[560px] grid-cols-2 gap-3">
        {suggestions.map((s, i) => {
          const { Icon } = s;
          const tone = SUGGESTION_TONES[s.tone];
          return (
            <button
              key={i}
              onClick={() => onPickSuggestion(s.prompt)}
              className={cx('flex cursor-pointer flex-col gap-2 rounded-[14px] border border-edge bg-surface px-4 py-3.5 text-left transition-all duration-180 hover:[box-shadow:var(--shadow-card-hover)] hover:[transform:translateY(-2px)]', tone.card)}
            >
              <div className={cx('flex size-[30px] items-center justify-center rounded-lg border', tone.box)}>
                <Icon size={15} color={tone.color} />
              </div>
              <div>
                <p className="mb-[3px] text-[15px] font-semibold text-ink">{s.label}</p>
                <p className="m-0 line-clamp-2 text-[13px] leading-[1.5] text-muted">
                  {s.prompt}
                </p>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}