// Onboarding gate — full-screen pricing forced on first trial session
// Shown after signup/login when accountStatus === 'trial' and localStorage has not seen it yet.

function OnboardingGate({ open, onSubscribe, onSkip }) {
  useLang();
  const [selected, setSelected] = React.useState('starter');

  if (!open) return null;

  const plan = SUBSCRIPTION_PLANS.find(p => p.id === selected) || SUBSCRIPTION_PLANS[1];

  return (
    <div className="fixed inset-0 z-[100] overflow-y-auto"
         style={{background:'radial-gradient(1200px 800px at 50% -10%, #EEF2FE 0%, #FAFCFF 45%, #F6F9FE 100%)'}}>
      {/* Dotted bg */}
      <div className="absolute inset-0 pointer-events-none opacity-[0.35]"
           style={{backgroundImage:'radial-gradient(#C6D2EF 1px, transparent 1px)', backgroundSize:'24px 24px'}}/>

      <div className="relative max-w-[1080px] mx-auto px-6 py-10 pb-20">
        {/* Brand mark */}
        <div className="flex items-center justify-between mb-10">
          <div className="flex items-center gap-2">
            <div className="w-7 h-7 rounded-md flex items-center justify-center text-white font-semibold text-[12px]"
                 style={{background:'linear-gradient(107.45deg, #1479FC 18.94%, #B880FC 123.42%)'}}>
              L
            </div>
            <span className="text-[14px] font-semibold text-ink tracking-tight">Leadscraper</span>
          </div>
          <button onClick={onSkip}
                  className="text-[12.5px] text-ink-soft hover:text-ink transition-colors">
            {t('og.later')}
          </button>
        </div>

        {/* Hero */}
        <div className="text-center mb-10">
          <div className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium text-ink-muted mb-4"
               style={{background:'rgba(52,101,227,0.08)', border:'1px solid rgba(52,101,227,0.15)'}}>
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500"/>
            {t('og.ready')}
          </div>
          <h1 className="text-[36px] font-semibold text-ink tracking-tight leading-[1.1]">
            {t('og.welcome')}
          </h1>
          <p className="text-[15px] text-ink-muted mt-3 max-w-[540px] mx-auto leading-relaxed">
            {t('og.sub1')} <span className="font-medium text-ink">{t('og.sub1b')}</span>.
            {' '}{t('og.sub2')}
          </p>
        </div>

        {/* Plan cards */}
        <div className="grid grid-cols-3 gap-4 mb-6">
          {SUBSCRIPTION_PLANS.map(p => (
            <OnboardingPlanCard
              key={p.id}
              plan={p}
              selected={selected === p.id}
              onSelect={() => setSelected(p.id)}
            />
          ))}
        </div>

        {/* Trust row */}
        <div className="flex items-center justify-center gap-6 text-[12px] text-ink-soft mb-6">
          <span className="inline-flex items-center gap-1.5"><Ogb.Shield/> {t('og.moneyBack')}</span>
          <span className="w-1 h-1 rounded-full bg-[#D4DAE6]"/>
          <span className="inline-flex items-center gap-1.5"><Ogb.Lock/> {t('og.dsgvo')}</span>
          <span className="w-1 h-1 rounded-full bg-[#D4DAE6]"/>
          <span className="inline-flex items-center gap-1.5"><Ogb.Cross/> {t('og.cancelAny')}</span>
        </div>

        {/* CTA */}
        <div className="flex flex-col items-center gap-3">
          <button
            onClick={() => onSubscribe(selected)}
            className="group inline-flex items-center gap-2 px-8 h-[48px] rounded-lg text-[14px] font-semibold text-white transition-transform hover:scale-[1.015] active:scale-[0.985]"
            style={{background:'linear-gradient(107.45deg, #1479FC 18.94%, #B880FC 123.42%)',
                    boxShadow:'0 8px 24px rgba(52,101,227,0.28), 0 2px 6px rgba(52,101,227,0.18)'}}>
            {t('og.cta', { plan: plan.name })}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" className="transition-transform group-hover:translate-x-0.5"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
          </button>
          <p className="text-[11.5px] text-ink-soft tabular-nums">
            {t('og.ctaSub', { price: plan.priceMonthly, leads: plan.trialLeads })}
          </p>
        </div>
      </div>
    </div>
  );
}

// --- Plan card (onboarding variant) ---------------------------------------

function OnboardingPlanCard({ plan, selected, onSelect }) {
  useLang();
  const isRecommended = plan.id === 'starter';
  return (
    <button
      onClick={onSelect}
      className={`relative text-left bg-white rounded-xl p-5 transition-all ${
        selected
          ? 'ring-2 ring-[#3465E3] shadow-[0_8px_24px_rgba(52,101,227,0.12)]'
          : 'ring-1 ring-line hover:ring-[#C6D2EF] hover:shadow-[0_4px_12px_rgba(0,0,0,0.04)]'
      }`}>
      {isRecommended && (
        <span className="absolute -top-2.5 left-5 inline-flex items-center gap-1 px-2 py-[3px] rounded-full text-[10.5px] font-semibold text-white"
              style={{background:'linear-gradient(107.45deg, #1479FC 18.94%, #B880FC 123.42%)'}}>
          {t('og.recommended')}
        </span>
      )}

      {/* Header */}
      <div className="flex items-start justify-between mb-1">
        <div>
          <div className="text-[11px] uppercase tracking-[0.08em] text-ink-soft font-medium">Abo</div>
          <div className="text-[18px] font-semibold text-ink tracking-tight mt-0.5">{plan.name}</div>
        </div>
        <div className={`w-5 h-5 rounded-full flex items-center justify-center transition-all ${
          selected ? 'bg-[#3465E3]' : 'bg-transparent ring-1 ring-[#D4DAE6]'
        }`}>
          {selected && (
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
          )}
        </div>
      </div>

      {/* Price */}
      <div className="flex items-baseline gap-1 mt-3">
        <span className="text-[28px] font-semibold text-ink tracking-tight tabular-nums">{plan.priceMonthly}</span>
        <span className="text-[13px] text-ink-muted">{t('og.perMonth')}</span>
      </div>
      <div className="text-[11.5px] text-ink-soft mt-0.5">
        {t('og.leadsIncl', { n: plan.leadsPerMonth })}
      </div>

      {/* Trial block */}
      <div className="mt-4 p-3 rounded-lg border border-emerald-100 bg-emerald-50/60">
        <div className="flex items-center gap-1.5 text-[11px] font-medium text-emerald-700">
          <Ogb.Gift/>
          {t('og.trial')}
        </div>
        <div className="text-[11.5px] text-emerald-700/80 mt-0.5">
          {t('og.trialIncl')} <span className="font-semibold">{t('og.trialLeadsN', { n: plan.trialLeads })}</span>
        </div>
      </div>

      {/* Features */}
      <ul className="mt-4 space-y-1.5">
        {plan.features.slice(0, 4).map((f, i) => (
          <li key={i} className="flex items-start gap-2 text-[12.5px] text-ink-muted leading-snug">
            <Ogb.Check/>
            <span>{f}</span>
          </li>
        ))}
      </ul>
    </button>
  );
}

// --- Icons ----------------------------------------------------------------

const Ogb = {
  Check: ({ size = 13 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="#3465E3" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="flex-shrink-0 mt-[2px]"><polyline points="20 6 9 17 4 12"/></svg>
  ),
  Gift: ({ size = 12 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 12 20 22 4 22 4 12"/><rect x="2" y="7" width="20" height="5"/><line x1="12" y1="22" x2="12" y2="7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></svg>
  ),
  Shield: ({ size = 13 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
  ),
  Lock: ({ size = 13 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
  ),
  Cross: ({ size = 13 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/></svg>
  ),
};

Object.assign(window, { OnboardingGate });