/* ─────────────────────────────────────────────────────────────
   VorsorgeCTA · Vorsorge-Call-to-Action
   Varianten (Tokens kombinierbar via "solid compact"):
   - "outline" (Default · Header)  → weiße Pille mit Salbei-Rand
   - "solid"                       → Salbei-Verlauf, kräftiger CTA-Block
   - "compact"                     → einzeilig, ohne Sub-Label · Sidebar / Footer
   - "solid compact"               → einzeilige Salbei-Pille · Inline / Strip
   - "small"                       → 9 px Caps, gefüllt · Kostenkarte / Footer
   - "chip"                        → Soft-Fill + Outline · Tag / Eyebrow-Aktion
   Props: variant, sub (override sub-label), label (override main label), href
   ───────────────────────────────────────────────────────────── */

function VorsorgeCTA({
  variant = 'outline',
  label   = 'Kostenrechner',
  sub     = 'Vorsorge · Kostenrechner',
  href    = '#vorsorge',
}) {
  const tokens  = String(variant).split(/[\s-]+/);
  const solid   = tokens.includes('solid');
  const compact = tokens.includes('compact');
  const small   = tokens.includes('small');
  const chip    = tokens.includes('chip');
  const singleLine = compact || small || chip;

  // ── wrap ───────────────────────────────────────────────
  let wrap;
  if (chip) {
    wrap = {
      display:'inline-flex', alignItems:'center', gap:6,
      padding:'5px 10px',
      background:'var(--accent-vorsorge-soft)',
      color:'var(--accent-vorsorge)',
      textDecoration:'none',
      border:'1px solid var(--accent-vorsorge)',
      boxShadow:'none',
      transition:'background .18s',
    };
  } else if (small) {
    wrap = {
      display:'inline-flex', alignItems:'center', gap:8,
      padding:'8px 14px 8px 10px',
      background:'linear-gradient(135deg,var(--accent-vorsorge),var(--accent-vorsorge-ink))',
      color:'#fff',
      textDecoration:'none',
      border:'1px solid transparent',
      boxShadow:'0 8px 18px -10px rgba(106,120,106,.4), inset 0 1px 0 rgba(255,255,255,.18)',
      transition:'transform .18s, box-shadow .18s, background .18s',
    };
  } else {
    wrap = {
      display:'inline-flex', alignItems:'center', gap: compact ? 10 : 12,
      padding: compact ? '10px 18px 10px 14px' : '13px 24px 13px 18px',
      background: solid ? 'linear-gradient(135deg,var(--accent-vorsorge),var(--accent-vorsorge-ink))' : 'var(--surface)',
      color: solid ? '#fff' : 'var(--accent-vorsorge-ink)',
      textDecoration:'none',
      border: solid ? '1px solid transparent' : '1px solid var(--accent-vorsorge)',
      boxShadow: solid
        ? '0 14px 28px -10px rgba(106,120,106,.45), inset 0 1px 0 rgba(255,255,255,.18)'
        : '0 10px 22px -12px rgba(106,120,106,.4)',
      transition:'transform .18s, box-shadow .18s, background .18s',
    };
  }

  // ── icon wrapper ───────────────────────────────────────
  let iconWrap;
  if (chip) {
    iconWrap = { width:16, height:16, borderRadius:'50%', flexShrink:0, background:'transparent', color:'var(--accent-vorsorge)', display:'flex', alignItems:'center', justifyContent:'center' };
  } else if (small) {
    iconWrap = { width:18, height:18, borderRadius:'50%', flexShrink:0, background:'rgba(255,255,255,.18)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center' };
  } else {
    iconWrap = {
      width:  compact ? 24 : 30, height: compact ? 24 : 30,
      borderRadius:'50%', flexShrink:0,
      background: solid ? 'rgba(255,255,255,.18)' : 'var(--accent-vorsorge-soft)',
      color: solid ? '#fff' : 'var(--accent-vorsorge-ink)',
      display:'flex', alignItems:'center', justifyContent:'center',
    };
  }

  // ── label / sub typography ─────────────────────────────
  const labelStyle = {
    display:'block',
    // Bigger variants (outline/solid) use the display serif for editorial weight;
    // the smaller chip/compact/small use Mulish so the metrics stay tight.
    font: (chip || small || compact)
      ? '500 9px/1 var(--f-body)'
      : '500 11px/1 var(--f-display)',
    letterSpacing: chip ? 'var(--ls-caps-md)' : 'var(--ls-caps)',
    textTransform:'uppercase',
    color: chip ? 'var(--accent-vorsorge)' : (solid || small) ? '#fff' : 'var(--ink-900)',
  };
  const subStyle = {
    display:'block',
    font:'600 9px/1 var(--f-body)',
    letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
    color: solid ? 'rgba(255,255,255,.78)' : 'var(--accent-vorsorge)',
    marginTop: 4,
  };

  const iconSize = (chip || small) ? 9 : (compact ? 13 : 15);

  return (
    <a href={href} aria-label={label} style={wrap}
       onMouseEnter={e => {
         if (chip) { e.currentTarget.style.background = 'var(--accent-vorsorge-soft)'; return; }
         e.currentTarget.style.transform = 'translateY(-2px)';
         if (!solid && !small) e.currentTarget.style.background = 'var(--accent-vorsorge-soft)';
       }}
       onMouseLeave={e => {
         if (chip) return;
         e.currentTarget.style.transform = 'translateY(0)';
         if (!solid && !small) e.currentTarget.style.background = 'var(--surface)';
       }}>
      <span style={iconWrap}>
        <svg width={iconSize} height={iconSize} viewBox="0 0 24 24"
             fill="none" stroke="currentColor"
             strokeWidth={(chip || small) ? 2 : 1.6}
             strokeLinecap="round" strokeLinejoin="round">
          <rect x="4" y="3" width="16" height="18" rx="1"/>
          <path d="M8 7h8M8 11h8M8 15h5"/>
        </svg>
      </span>
      {singleLine ? (
        <span style={labelStyle}>{label}</span>
      ) : (
        <span>
          <span style={labelStyle}>{label}</span>
          {sub ? <span style={subStyle}>{sub}</span> : null}
        </span>
      )}
    </a>
  );
}

Object.assign(window, { VorsorgeCTA });