const { useState, useEffect, useRef } = React;

/**
 * Læge.dk - UI-prototype
 * Roligt, dansk, voksent. Papir og pejs, ikke skærm og skarp lys.
 * Single-file React. Tailwind core utilities + inline style for tokens.
 */

// - design tokens -
const c = {
  bg: '#FCF9F4',
  surface: '#FFFFFF',
  surfaceMuted: '#F5F0E6',
  textPrimary: '#1A1A17',
  textSecondary: '#5C5A54',
  textTertiary: '#8E8A82',
  accent: '#095759',
  accentHover: '#074749',
  accentSoft: '#CCE1E1',
  warmAlert: '#B86F52',
  warmAlertSoft: '#F3E0D6',
  success: '#4A6B52',
  border: '#E8E2D4',
  borderStrong: '#D5CDB7',
};

const serif = "'Source Serif 4', Georgia, 'Times New Roman', serif";
const sans = "'Inter', system-ui, -apple-system, sans-serif";

// - Nadia Paarup Dridi, foto (base64 - i prototypen; i produktion fra CDN) -
const DRIDI_PHOTO = 'data:image/webp;base64,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';


// - global styles + fonts -
const GlobalStyles = () => (
  <style>{`
    @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,380;0,8..60,400;0,8..60,500;1,8..60,400&family=Inter:wght@400;450;500;600&display=swap');
    html, body, #root { background: ${c.bg}; margin: 0; }
    * { box-sizing: border-box; }
    body { font-family: ${sans}; color: ${c.textPrimary}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    ::placeholder { color: ${c.textTertiary}; opacity: 1; }
    button { font-family: inherit; cursor: pointer; }
    input, textarea { font-family: inherit; outline: none; }
    textarea { resize: none; }

    /* Bedre tap-targets overalt */
    button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes dotPulse {
      0%, 80%, 100% { opacity: 0.25; }
      40%           { opacity: 1; }
    }
    @keyframes logoDkOut {
      0%, 15%  { opacity: 1; transform: translateX(0); max-width: 2em; }
      55%      { opacity: 0; transform: translateX(6px); max-width: 2em; }
      100%     { opacity: 0; transform: translateX(6px); max-width: 0; }
    }
    .logo-dk-anim {
      animation: logoDkOut 1400ms cubic-bezier(0.4, 0, 0.2, 1) 600ms forwards;
    }

    /* Fade-in/out transition på ekstra punktummer (JS-styret in/out) */
    .logo-dot-extra {
      transition: opacity 220ms ease;
    }
    .fade-in { animation: fadeInUp 380ms cubic-bezier(0.2, 0.6, 0.2, 1) both; }
    .dot { animation: dotPulse 1.4s infinite; }
    .tab-num { font-variant-numeric: tabular-nums lining-nums; }
    .serif { font-family: ${serif}; }
    .sans  { font-family: ${sans}; }
    .focus-ring:focus-visible {
      outline: 2px solid ${c.accent};
      outline-offset: 2px;
    }

    /* ============ RESPONSIVT - MOBILE FIRST (< 768px) ============ */
    @media (max-width: 767px) {
      /* Top bar */
      .topbar-nav-links { display: none !important; }
      .topbar-inner { padding: 12px 16px !important; }
      .topbar-login { padding: 8px 12px !important; font-size: 13px !important; }

      /* Landing page */
      .lp-main { padding: 32px 16px 72px !important; max-width: 100% !important; }
      .lp-kicker { font-size: 11px !important; margin-bottom: 16px !important; }
      .lp-h1 { font-size: 34px !important; line-height: 1.08 !important; margin-bottom: 14px !important; }
      .lp-sub { font-size: 15px !important; }
      .lp-chat-card { padding: 16px !important; }
      .lp-chip-grid {
        grid-template-columns: 1fr !important;
        margin-left: 0 !important;
        gap: 6px !important;
      }
      .lp-chip-grid > button { font-size: 14px !important; padding: 11px 14px !important; min-height: 44px !important; }
      .lp-trust-row { gap: 12px 18px !important; margin-top: 28px !important; flex-direction: row !important; justify-content: center !important; }
      .lp-trust-row > span { font-size: 12px !important; }
      .lp-quote-section { margin-top: 40px !important; padding-top: 32px !important; }
      .lp-quote-text { font-size: 18px !important; line-height: 1.45 !important; }
      .lp-featured-doctor {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 14px !important;
        padding: 14px !important;
      }

      /* Conversation view */
      .conv-main { padding: 16px 16px 0 !important; max-width: 100% !important; }
      .conv-header { flex-wrap: wrap !important; gap: 8px !important; }
      .conv-header-center { display: none !important; }
      .conv-results-pad { margin-left: 0 !important; }
      .conv-filter-row { gap: 6px !important; }
      .conv-filter-row > button { font-size: 12px !important; padding: 6px 10px !important; min-height: 36px !important; }

      /* User + AI bubbles should be wider on mobile */
      .user-bubble-wrap > div { max-width: 88% !important; font-size: 15px !important; }
      .ai-bubble-box { font-size: 15px !important; padding: 12px 14px !important; }

      /* Chat input */
      .chat-input-wrap { border-radius: 16px !important; padding: 6px !important; align-items: center !important; }
      .chat-input-wrap textarea { font-size: 16px !important; padding: 10px 8px !important; min-height: 52px !important; }
      .chat-input-wrap button { width: 42px !important; height: 42px !important; min-width: 42px !important; }

      /* Clinic detail */
      .clinic-main { padding: 16px 16px 48px !important; max-width: 100% !important; }
      .clinic-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
      }
      .clinic-hero-h1 { font-size: 26px !important; line-height: 1.2 !important; }
      .clinic-hero-address { font-size: 14px !important; margin-bottom: 22px !important; }
      .clinic-stats-grid { grid-template-columns: 1fr !important; }
      .clinic-stats-cell { border-right: 0 !important; border-bottom: 1px solid ${c.border} !important; padding: 14px 16px !important; }
      .clinic-stats-cell-last { border-bottom: 0 !important; }
      .clinic-ydelser-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
      .clinic-ydelser-grid > li { font-size: 14px !important; }
      .clinic-doctor-bio-row { flex-direction: column !important; gap: 16px !important; }
      .clinic-doctor-bio-photo { width: 100% !important; height: 220px !important; }
      .booking-sticky { position: static !important; top: auto !important; }
      .booking-slot-btn > span:first-child { font-size: 13px !important; white-space: nowrap !important; }
      .booking-slot-btn > span:last-child { white-space: nowrap !important; }

      /* Behandler cards */
      .behandler-card { padding: 14px !important; }
      .behandler-card h3 { font-size: 17px !important; }

      /* Escalation banner */
      .escalation-banner { padding: 12px 14px !important; gap: 10px !important; }

      /* View switcher (prototype control) */
      .view-switcher-prefix { display: none !important; }
      .view-switcher-btn { padding: 6px 10px !important; font-size: 11px !important; }
    }

    /* ============ DESKTOP POLISH (>= 1024px) ============ */
    @media (min-width: 1024px) {
      .lp-main { padding: 84px 24px 100px !important; }
      .lp-kicker { margin-bottom: 26px !important; }
      .lp-h1 { font-size: 60px !important; }
      .lp-featured-doctor-section { margin-top: 32px !important; }
      .clinic-main { padding: 32px 32px 80px !important; }
    }

    /* ============ SMALL-PHONE (< 400px) - strammeste reduktion ============ */
    @media (max-width: 399px) {
      .lp-h1 { font-size: 30px !important; }
      .lp-trust-row > span { font-size: 11px !important; }
      .booking-slot-btn { font-size: 13px !important; padding: 9px 10px !important; }
    }
  `}</style>
);

// - helpers -
const Divider = ({ color = c.border, style = {} }) => (
  <div style={{ height: 1, background: color, ...style }} />
);

// - logo + avatar -
const Logo = ({ size = 20, animate = false }) => {
  const [extraDots, setExtraDots] = useState(0);
  useEffect(() => {
    if (!animate) return;
    const timers = [
      setTimeout(() => setExtraDots(1), 2100),
      setTimeout(() => setExtraDots(2), 2300),
      setTimeout(() => setExtraDots(0), 4000),
    ];
    return () => timers.forEach(clearTimeout);
  }, [animate]);

  const dotStyle = {
    color: c.accent,
    fontSize: '2em',
    lineHeight: 0,
    display: 'inline-block',
    verticalAlign: 'baseline',
  };

  return (
    <div
      className="serif"
      style={{
        fontSize: size,
        fontWeight: 500,
        letterSpacing: '-0.01em',
        color: c.textPrimary,
        lineHeight: 1,
        display: 'inline-flex',
        alignItems: 'baseline',
        gap: 1,
      }}
    >
      læge
      <span
        style={{
          display: 'inline-flex',
          alignItems: 'baseline',
          gap: '0.08em',
          marginLeft: 1,
        }}
      >
        <span
          className={extraDots > 0 ? 'dot' : undefined}
          style={{ ...dotStyle, animationDelay: '0ms' }}
        >
          .
        </span>
        {animate && extraDots >= 1 && (
          <span
            aria-hidden
            className="dot"
            style={{ ...dotStyle, animationDelay: '200ms' }}
          >
            .
          </span>
        )}
        {animate && extraDots >= 2 && (
          <span
            aria-hidden
            className="dot"
            style={{ ...dotStyle, animationDelay: '400ms' }}
          >
            .
          </span>
        )}
      </span>
      {animate && (
        <span
          className="logo-dk-anim"
          style={{
            color: c.textSecondary,
            fontWeight: 400,
            display: 'inline-block',
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            marginLeft: 1,
          }}
        >
          dk
        </span>
      )}
    </div>
  );
};

const AIAvatar = ({ size = 36 }) => (
  <div
    style={{
      width: size,
      height: size,
      borderRadius: '50%',
      background: c.accentSoft,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexShrink: 0,
    }}
    aria-hidden="true"
  >
    <span
      className="serif"
      style={{
        color: c.accent,
        fontSize: size * 0.6,
        fontStyle: 'italic',
        fontWeight: 500,
        lineHeight: 1,
        transform: 'translateY(-1px)',
      }}
    >
      l
    </span>
  </div>
);

// - top bar -
const TopBar = ({ onHome, onMitID, onHow, showSave = false }) => (
  <header
    style={{
      borderBottom: `1px solid ${c.border}`,
      background: c.bg,
      position: 'sticky',
      top: 0,
      zIndex: 20,
      backdropFilter: 'saturate(140%)',
    }}
  >
    <div
      className="flex items-center justify-between topbar-inner"
      style={{
        maxWidth: 1180,
        margin: '0 auto',
        padding: '16px 24px',
      }}
    >
      <button
        onClick={onHome}
        className="focus-ring"
        style={{
          background: 'none',
          border: 0,
          padding: 4,
          margin: -4,
          borderRadius: 6,
        }}
        aria-label="til forsiden"
      >
        <Logo size={22} animate />
      </button>

      <nav className="flex items-center topbar-nav-links" style={{ gap: 24 }}>
        <button
          onClick={onHow}
          className="focus-ring"
          style={{
            background: 'none',
            border: 0,
            color: c.textSecondary,
            fontSize: 14,
            padding: 0,
            cursor: 'pointer',
            fontFamily: 'inherit',
          }}
        >
          Sådan virker det
        </button>
        <button
          onClick={onMitID}
          className="topbar-login focus-ring"
          style={{
            background: 'none',
            border: `1px solid ${c.borderStrong}`,
            color: c.textPrimary,
            padding: '8px 14px',
            borderRadius: 8,
            fontSize: 14,
            fontWeight: 500,
            cursor: 'pointer',
          }}
        >
          Log ind med MitID
        </button>
      </nav>
    </div>
  </header>
);

// - trust row -
const TrustRow = () => (
  <div
    className="flex items-center justify-center flex-wrap lp-trust-row"
    style={{
      gap: 28,
      marginTop: 24,
      color: c.textTertiary,
      fontSize: 13,
    }}
  >
    <span className="flex items-center" style={{ gap: 8 }}>
      <Dot /> MitID-sikret
    </span>
    <span className="flex items-center" style={{ gap: 8 }}>
      <Dot /> Danske læger står bag
    </span>
    <span className="flex items-center" style={{ gap: 8 }}>
      <Dot /> GDPR, data i DK
    </span>
    <span className="flex items-center" style={{ gap: 8 }}>
      <Dot /> STPS-godkendt videokonsultation
    </span>
  </div>
);

const Dot = () => (
  <span
    style={{
      width: 4,
      height: 4,
      borderRadius: '50%',
      background: c.textTertiary,
      display: 'inline-block',
    }}
  />
);

// - suggestion chip -
const SuggestionChip = ({ label, onClick }) => (
  <button
    onClick={onClick}
    className="focus-ring suggestion-chip"
    style={{
      background: c.accent,
      border: `1px solid ${c.accent}`,
      color: '#fff',
      fontSize: 14,
      padding: '10px 18px',
      borderRadius: 999,
      textAlign: 'left',
      transition: 'background 160ms ease, transform 160ms ease',
      lineHeight: 1.35,
      cursor: 'pointer',
      whiteSpace: 'normal',
      fontWeight: 450,
    }}
    onMouseEnter={(e) => { e.currentTarget.style.background = c.accentHover; }}
    onMouseLeave={(e) => { e.currentTarget.style.background = c.accent; }}
  >
    {label}
  </button>
);

// - chat input -
const ChatInput = ({ value, onChange, onSubmit, autoFocus = false, placeholder = 'Skriv hvad der er galt - eller stil et spørgsmål' }) => {
  const ref = useRef(null);
  useEffect(() => {
    if (autoFocus && ref.current) ref.current.focus();
  }, [autoFocus]);

  const handleKey = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      if (value.trim()) onSubmit();
    }
  };

  return (
    <div
      className="chat-input-wrap"
      style={{
        background: c.surface,
        border: `1px solid ${c.border}`,
        borderRadius: 18,
        padding: 8,
        display: 'flex',
        alignItems: 'flex-end',
        gap: 8,
        transition: 'border-color 160ms ease, box-shadow 160ms ease',
      }}
      onFocus={(e) => {
        e.currentTarget.style.borderColor = c.borderStrong;
      }}
      onBlur={(e) => {
        e.currentTarget.style.borderColor = c.border;
      }}
    >
      <textarea
        ref={ref}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onKeyDown={handleKey}
        placeholder={placeholder}
        rows={1}
        style={{
          flex: 1,
          minWidth: 0,
          width: '100%',
          border: 0,
          background: 'transparent',
          padding: '10px 10px',
          fontSize: 16,
          lineHeight: 1.5,
          color: c.textPrimary,
          minHeight: 24,
          maxHeight: 180,
        }}
        onInput={(e) => {
          e.target.style.height = 'auto';
          e.target.style.height = Math.min(e.target.scrollHeight, 180) + 'px';
        }}
      />
      <div className="flex items-center" style={{ gap: 4, paddingBottom: 4 }}>
        <button
          onClick={onSubmit}
          disabled={!value.trim()}
          aria-label="send"
          className="focus-ring"
          style={{
            width: 38,
            height: 38,
            borderRadius: 10,
            background: value.trim() ? c.accent : 'transparent',
            border: 0,
            color: value.trim() ? c.surface : c.textTertiary,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            transition: 'all 160ms ease',
          }}
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14M13 6l6 6-6 6" />
          </svg>
        </button>
      </div>
    </div>
  );
};

// - message bubbles -
const UserBubble = ({ text }) => (
  <div className="flex justify-end fade-in user-bubble-wrap" style={{ marginBottom: 20 }}>
    <div
      style={{
        background: c.surfaceMuted,
        color: c.textPrimary,
        padding: '12px 16px',
        borderRadius: 18,
        borderBottomRightRadius: 6,
        maxWidth: '80%',
        fontSize: 16,
        lineHeight: 1.5,
      }}
    >
      {text}
    </div>
  </div>
);

const AIBubble = ({ children, showDisclaimer = false }) => (
  <div className="flex fade-in" style={{ gap: 12, marginBottom: 20, alignItems: 'flex-start' }}>
    <AIAvatar />
    <div style={{ flex: 1, minWidth: 0 }}>
      <div
        className="flex items-baseline"
        style={{ gap: 8, marginBottom: 6 }}
      >
        <span
          style={{
            fontSize: 13,
            fontWeight: 500,
            color: c.textPrimary,
          }}
        >
          Sekretæren
        </span>
        <span
          style={{
            fontSize: 11,
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            color: c.textTertiary,
          }}
        >
          ai
        </span>
      </div>
      <div
        className="ai-bubble-box"
        style={{
          background: c.surface,
          border: `1px solid ${c.border}`,
          padding: '14px 18px',
          borderRadius: 18,
          borderTopLeftRadius: 6,
          fontSize: 16,
          lineHeight: 1.55,
          color: c.textPrimary,
        }}
      >
        {children}
        {showDisclaimer && (
          <>
            <div style={{ height: 1, background: c.border, margin: '14px -18px 10px' }} />
            <p
              className="serif"
              style={{
                fontStyle: 'italic',
                fontSize: 13,
                color: c.textTertiary,
                margin: 0,
                lineHeight: 1.5,
              }}
            >
              Dette er ikke en diagnose. Kun læger må diagnosticere.
            </p>
          </>
        )}
      </div>
    </div>
  </div>
);

const TypingBubble = () => (
  <div className="flex" style={{ gap: 12, marginBottom: 20, alignItems: 'flex-start' }}>
    <AIAvatar />
    <div
      style={{
        background: c.surface,
        border: `1px solid ${c.border}`,
        padding: '14px 18px',
        borderRadius: 18,
        borderTopLeftRadius: 6,
        display: 'flex',
        alignItems: 'center',
        gap: 6,
      }}
    >
      {[0, 1, 2].map((i) => (
        <span
          key={i}
          className="dot"
          style={{
            width: 6,
            height: 6,
            borderRadius: '50%',
            background: c.accent,
            display: 'inline-block',
            animationDelay: `${i * 180}ms`,
          }}
        />
      ))}
    </div>
  </div>
);

// - filter chips -
const FilterChip = ({ label, active, onClick }) => (
  <button
    onClick={onClick}
    className="focus-ring"
    style={{
      background: active ? c.textPrimary : 'transparent',
      border: `1px solid ${active ? c.textPrimary : c.border}`,
      color: active ? c.bg : c.textSecondary,
      fontSize: 13,
      padding: '6px 12px',
      borderRadius: 8,
      fontWeight: 450,
      transition: 'all 140ms ease',
    }}
  >
    {label}
  </button>
);

// - behandler card -
const BehandlerCard = ({ b, onSelect }) => {
  const hasWait = typeof b.waitWeeks === 'number';
  const waitWhole = hasWait ? Math.round(b.waitWeeks) : null;
  const longWait = hasWait && waitWhole >= 6;
  const isOnline = !!b.online;
  const sameDay = hasWait && waitWhole === 0;
  return (
    <article
      onClick={onSelect}
      className="focus-ring fade-in behandler-card"
      tabIndex={0}
      onKeyDown={(e) => e.key === 'Enter' && onSelect && onSelect()}
      style={{
        background: isOnline ? '#EEF5F4' : c.surface,
        border: `1px solid ${isOnline ? '#CFE2E1' : c.border}`,
        borderRadius: 12,
        padding: 18,
        transition: 'border-color 160ms ease, transform 160ms ease',
        cursor: 'pointer',
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.borderColor = isOnline ? c.accent : c.borderStrong;
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.borderColor = isOnline ? '#CFE2E1' : c.border;
      }}
    >
      <div className="flex items-start justify-between" style={{ gap: 12, marginBottom: 10 }}>
        <div style={{ minWidth: 0 }}>
          <div
            style={{
              fontSize: 11,
              letterSpacing: '0.09em',
              textTransform: 'uppercase',
              color: c.accent,
              fontWeight: 500,
              marginBottom: 6,
              display: 'flex',
              alignItems: 'center',
              gap: 6,
            }}
          >
            {isOnline && (
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M23 7l-7 5 7 5V7z" />
                <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
              </svg>
            )}
            {b.specialty}
          </div>
          <h3
            className="serif"
            style={{
              fontSize: 19,
              fontWeight: 500,
              color: c.textPrimary,
              margin: 0,
              letterSpacing: '-0.005em',
              lineHeight: 1.25,
            }}
          >
            {b.name}
          </h3>
          <p
            style={{
              fontSize: 14,
              color: c.textSecondary,
              margin: '4px 0 0',
            }}
          >
            {b.city} · {b.distance}
          </p>
        </div>
        <span
          style={{
            background: isOnline ? c.accent : (b.public ? c.surfaceMuted : c.accentSoft),
            color: isOnline ? c.surface : (b.public ? c.textSecondary : c.accent),
            fontSize: 11,
            padding: '4px 8px',
            borderRadius: 6,
            letterSpacing: '0.04em',
            whiteSpace: 'nowrap',
            flexShrink: 0,
            fontWeight: isOnline ? 500 : 400,
          }}
        >
          {isOnline ? 'Online' : (b.public ? 'Offentlig' : 'Privat')}
        </span>
      </div>

      {isOnline && b.description && (
        <p
          style={{
            fontSize: 14,
            color: c.textSecondary,
            margin: '4px 0 0',
            lineHeight: 1.45,
          }}
        >
          {b.description}
        </p>
      )}

      {isOnline && Array.isArray(b.benefits) && b.benefits.length > 0 && (
        <ul
          style={{
            listStyle: 'none',
            padding: 0,
            margin: '14px 0 0',
            display: 'flex',
            flexDirection: 'column',
            gap: 8,
          }}
        >
          {b.benefits.map((text) => (
            <li
              key={text}
              style={{
                display: 'flex',
                alignItems: 'flex-start',
                gap: 10,
                fontSize: 14,
                color: c.textPrimary,
                lineHeight: 1.4,
              }}
            >
              <span
                aria-hidden
                style={{
                  flex: '0 0 auto',
                  marginTop: 2,
                  width: 18,
                  height: 18,
                  borderRadius: '50%',
                  background: c.accentSoft,
                  color: c.accent,
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12l5 5L20 7" />
                </svg>
              </span>
              <span>{text}</span>
            </li>
          ))}
        </ul>
      )}

      <Divider style={{ margin: '14px 0', background: isOnline ? '#DCE9E8' : c.border, height: 1 }} />

      <div className="flex items-end justify-between" style={{ gap: 16 }}>
        <div>
          <div
            style={{
              fontSize: 11,
              letterSpacing: '0.08em',
              textTransform: 'uppercase',
              color: c.textTertiary,
              marginBottom: 4,
            }}
          >
            ventetid
          </div>
          {!hasWait ? (
            <span
              className="serif"
              style={{
                fontSize: 18,
                fontWeight: 500,
                fontStyle: 'italic',
                color: c.textSecondary,
                lineHeight: 1.1,
                letterSpacing: '-0.005em',
              }}
            >
              Oplyses ikke
            </span>
          ) : sameDay ? (
            <span
              className="serif"
              style={{
                fontSize: 22,
                fontWeight: 500,
                fontStyle: 'italic',
                color: c.textPrimary,
                lineHeight: 1,
                letterSpacing: '-0.005em',
              }}
            >
              Samme dag
            </span>
          ) : (
            <div className="flex items-baseline tab-num" style={{ gap: 4 }}>
              <span
                className="serif"
                style={{
                  fontSize: 28,
                  fontWeight: 500,
                  color: longWait ? c.warmAlert : c.textPrimary,
                  lineHeight: 1,
                  letterSpacing: '-0.01em',
                }}
              >
                {waitWhole}
              </span>
              <span
                style={{
                  fontSize: 13,
                  color: longWait ? c.warmAlert : c.textSecondary,
                }}
              >
                uger
              </span>
            </div>
          )}
        </div>

        <div style={{ textAlign: 'right' }}>
          <div
            style={{
              fontSize: 11,
              letterSpacing: '0.08em',
              textTransform: 'uppercase',
              color: c.textTertiary,
              marginBottom: 4,
            }}
          >
            egenbetaling
          </div>
          <div
            className="serif tab-num"
            style={{
              fontSize: 16,
              color: c.textPrimary,
              fontWeight: 500,
            }}
          >
            {b.price}
          </div>
        </div>
      </div>

      {!b.public && (
        <div style={{ marginTop: 14 }}>
          <div
            style={{
              fontSize: 11,
              letterSpacing: '0.08em',
              textTransform: 'uppercase',
              color: c.textTertiary,
              marginBottom: 8,
            }}
          >
            Næste ledige tider
          </div>
          <div className="flex flex-wrap" style={{ gap: 8 }}>
            {(isOnline
              ? ['Om 10 min', 'I dag 14:20', 'I dag 16:45']
              : ['Ons 14:30', 'Tor 09:15', 'Fre 11:00']
            ).map((slot) => (
              <button
                key={slot}
                type="button"
                onClick={(e) => {
                  e.stopPropagation();
                  onSelect && onSelect({ slot, bookNow: true });
                }}
                className="focus-ring"
                style={{
                  background: c.surface,
                  border: `1px solid ${c.accent}`,
                  color: c.accent,
                  padding: '8px 14px',
                  borderRadius: 999,
                  fontSize: 13,
                  fontWeight: 500,
                  cursor: 'pointer',
                  transition: 'all 140ms ease',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = c.accent;
                  e.currentTarget.style.color = '#fff';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = c.surface;
                  e.currentTarget.style.color = c.accent;
                }}
              >
                {slot}
              </button>
            ))}
          </div>
        </div>
      )}
    </article>
  );
};

// - landing view -
const LandingView = ({ onSend, onChip }) => {
  const [input, setInput] = useState('');
  const submit = () => {
    if (input.trim()) onSend(input.trim());
  };
  return (
    <main
      className="lp-main"
      style={{
        maxWidth: 820,
        margin: '0 auto',
        padding: '64px 24px 80px',
      }}
    >
      {/* headline */}
      <div style={{ textAlign: 'center', marginBottom: 36 }}>
        <h1
          className="serif lp-h1"
          style={{
            fontSize: 52,
            lineHeight: 1.05,
            letterSpacing: '-0.015em',
            fontWeight: 400,
            color: c.textPrimary,
            margin: 0,
            marginBottom: 18,
          }}
        >
          Find den rette læge
          <br />
          <span style={{ color: c.accent, fontStyle: 'italic', fontWeight: 380 }}>
            - uden ventetid
          </span>
        </h1>
        <p
          className="lp-sub"
          style={{
            fontSize: 17,
            lineHeight: 1.55,
            color: c.textSecondary,
            maxWidth: 620,
            margin: '0 auto',
          }}
        >
          Beskriv dine symptomer. Vores <strong style={{ color: c.textPrimary, fontWeight: 500 }}>AI-sekretær</strong> matcher dig med den rette læge - offentlig eller privat - der er <strong style={{ color: c.textPrimary, fontWeight: 500 }}>tættest på dig</strong> og har <strong style={{ color: c.textPrimary, fontWeight: 500 }}>kortest ventetid</strong>.
        </p>
      </div>

      {/* chat card */}
      <section
        aria-label="chat med sekretæren"
        className="lp-chat-card"
        style={{
          background: c.surface,
          border: `1.5px solid ${c.accent}`,
          borderRadius: 16,
          padding: 20,
          display: 'flex',
          flexDirection: 'column',
          minHeight: 420,
          boxShadow: `0 1px 0 ${c.accentSoft}`,
        }}
      >
        {/* AI greeting - talebobel ligesom i samtale-view */}
        <AIBubble>
          <p style={{ margin: 0 }}>
            Hej - jeg er Læge.dks sekretær. Hvad kan jeg hjælpe dig videre med i dag?
          </p>
        </AIBubble>

        {/* spacer pusher chips ned til input */}
        <div style={{ flex: 1, minHeight: 40 }} />

        {/* smart replies - pill-buttons aligned med input */}
        <div
          className="lp-chip-grid"
          style={{
            display: 'flex',
            flexWrap: 'wrap',
            gap: 8,
            marginBottom: 12,
          }}
        >
          {[
            'Jeg har trykken for brystet når jeg går på trapper',
            'Mit hjerte hopper over engang imellem',
            'Jeg bliver hurtigt forpustet ved lidt anstrengelse',
            'Jeg har haft forhøjet blodtryk et stykke tid',
          ].map((s) => (
            <SuggestionChip
              key={s}
              label={s}
              onClick={() => {
                onSend(s);
              }}
            />
          ))}
        </div>

        {/* input */}
        <ChatInput
          value={input}
          onChange={setInput}
          onSubmit={submit}
          autoFocus
        />
      </section>

      <TrustRow />

      {/* social proof - portræt først, dernæst citat og attribution */}
      <div
        className="lp-quote-section"
        style={{
          maxWidth: 580,
          margin: '56px auto 0',
          paddingTop: 40,
          borderTop: `1px solid ${c.border}`,
          textAlign: 'center',
        }}
      >
        <div
          className="lp-featured-doctor-section"
          style={{
            display: 'flex',
            justifyContent: 'center',
            marginBottom: 20,
          }}
        >
          <div
            style={{
              width: 72,
              height: 72,
              borderRadius: '50%',
              overflow: 'hidden',
              background: c.surfaceMuted,
              border: `1px solid ${c.border}`,
            }}
          >
            <img
              src={DRIDI_PHOTO}
              alt=""
              style={{
                width: '100%',
                height: '100%',
                objectFit: 'cover',
                display: 'block',
                filter: 'saturate(0.92)',
              }}
            />
          </div>
        </div>
        <blockquote
          className="serif lp-quote-text"
          style={{
            fontSize: 21,
            fontStyle: 'italic',
            fontWeight: 400,
            lineHeight: 1.5,
            color: c.textPrimary,
            margin: 0,
            letterSpacing: '-0.005em',
          }}
        >
          “AI Sekretæren stiller aldrig diagnosen. Den hjælper dig bare hurtigere frem til den rette type læge.”
        </blockquote>
        <p
          style={{
            marginTop: 14,
            fontSize: 13,
            color: c.textTertiary,
            letterSpacing: '0.02em',
          }}
        >
          - Medicinsk direktør, Læge.dk
        </p>
      </div>
    </main>
  );
};

// - conversation view -
const sampleBehandlere = [
  {
    id: 1,
    specialty: 'Hjertelæge',
    name: 'Hjertelæge Nadia Paarup Dridi',
    city: 'København K',
    distance: '1,8 km',
    waitWeeks: 1,
    price: 'Fra 2.200 kr.',
    priceDetail: '2.200',
    priceUnit: 'kr.',
    address: 'Store Kongensgade 36, 4. th, 1264 København K',
    phone: '53 83 98 76',
    website: 'hjertelaege.dk',
    doctorPhoto: DRIDI_PHOTO,
    doctorName: 'Nadia Paarup Dridi',
    doctorTitle: 'Speciallæge i kardiologi',
    public: false,
  },
  {
    id: 2,
    specialty: 'Hjertelæge',
    name: 'Speciallægecentret Østerbro',
    city: 'København Ø',
    distance: '3,1 km',
    waitWeeks: 3,
    price: 'Offentlig m. henvisning',
    priceDetail: '0',
    priceUnit: 'kr. m. henvisning',
    address: 'Østerbrogade 114, 2100 København Ø',
    phone: '35 38 12 40',
    website: 'speciallaegecentret-osterbro.dk',
    public: true,
  },
  {
    id: 3,
    specialty: 'Hjertelæge',
    name: 'Rigshospitalet - Hjertemedicinsk klinik',
    city: 'København N',
    distance: '4,2 km',
    waitWeeks: 10,
    price: 'Offentlig m. henvisning',
    priceDetail: '0',
    priceUnit: 'kr. m. henvisning',
    address: 'Blegdamsvej 9, 2100 København Ø',
    phone: '35 45 35 45',
    website: 'rigshospitalet.dk',
    public: true,
  },
  {
    id: 4,
    specialty: 'Almen praktiserende læge · Online',
    name: 'Tal med en læge på video',
    city: 'Video · hele Danmark',
    distance: 'Ingen transport',
    waitWeeks: 0,
    price: 'Fra 395 kr.',
    priceDetail: '395',
    priceUnit: 'kr.',
    online: true,
    public: false,
    description: 'Er du i tvivl om du skal ses af en specialist? En almen praktiserende læge vurderer din situation og hjælper dig videre.',
    benefits: [
      'Få en faglig vurdering af dine symptomer',
      'Få en henvisning til speciallæge i det offentlige',
      'Få en recept, hvis du har brug for medicin',
    ],
  },
];

// Hard client-side akut-gate: kører FØR API-kald.
// Spejlet på serveren i app/api/chat/route.ts — dobbelt sikring.
const ACUTE_PATTERNS = [
  /brystsmert/i,
  /smerte[r]? i brystet/i,
  /stråle[rn]?.{0,20}(arm|kæbe|hals)/i,
  /åndenød/i,
  /koldsved/i,
  /(pludselig|akut).{0,20}lammels/i,
  /sløret tale/i,
  /ansigt.{0,10}hænger/i,
  /værste hovedpine/i,
  /eksplosiv hovedpine/i,
  /selvmord/i,
  /tage mit (eget )?liv/i,
  /kan ikke trække vejret/i,
  /bevidsthedstab/i,
  /besvim/i,
  /krampeanfald/i,
  /hals.{0,10}hæver/i,
  /anafylak/i,
];
const ACUTE_REPLY =
  'Det du beskriver kan være alvorligt. Ring 112 hvis det er livstruende — fx brystsmerter der stråler ud i armen, åndenød, koldsved, pludselig lammelse eller værste hovedpine nogensinde. Er det mindre akut kan du ringe til akuttelefonen: 1813 i hovedstaden, 70 11 31 31 i resten af landet.';

function isAcute(text) {
  if (!text) return false;
  return ACUTE_PATTERNS.some((p) => p.test(text));
}

async function readSSE(response, onEvent) {
  if (!response.body) throw new Error('no response body');
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let buffer = '';
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    buffer += decoder.decode(value, { stream: true });
    let idx;
    while ((idx = buffer.indexOf('\n\n')) !== -1) {
      const raw = buffer.slice(0, idx);
      buffer = buffer.slice(idx + 2);
      let eventName = 'message';
      let dataStr = '';
      for (const line of raw.split('\n')) {
        if (line.startsWith('event:')) eventName = line.slice(6).trim();
        else if (line.startsWith('data:')) dataStr += line.slice(5).trim();
      }
      if (!dataStr) continue;
      let data;
      try { data = JSON.parse(dataStr); } catch { data = {}; }
      onEvent(eventName, data);
    }
  }
}

const ConversationView = ({ initialMessage, onBack, onSelectBehandler, escalation = false }) => {
  const [messages, setMessages] = useState(() => [
    { role: 'user', text: initialMessage },
  ]);
  const [input, setInput] = useState('');
  const [typing, setTyping] = useState(true);
  const [resultsVisible, setResultsVisible] = useState(false);
  const [filter, setFilter] = useState('Alle');
  const [location, setLocation] = useState(null); // { postnummer, lat, lng, by, source }
  const scrollRef = useRef(null);
  const didInit = useRef(false);
  const inFlight = useRef(false);
  const locationRef = useRef(null);
  locationRef.current = location;

  // Hent best-effort lokation på mount: først IP-lookup via backend, derefter
  // prøv navigator.geolocation (kræver brugerens samtykke, ikke-blokerende).
  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const r = await fetch('/api/location');
        if (!r.ok) return;
        const d = await r.json();
        if (cancelled) return;
        if (d.postnummer || d.lat != null) {
          setLocation({
            postnummer: d.postnummer || null,
            lat: d.lat ?? null,
            lng: d.lng ?? null,
            by: d.by || null,
            source: d.source || 'ip',
          });
        }
      } catch {/* ignore */}
    })();
    if (typeof navigator !== 'undefined' && navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        async (pos) => {
          const lat = pos.coords.latitude;
          const lng = pos.coords.longitude;
          try {
            const r = await fetch('/api/location?lat=' + lat + '&lng=' + lng);
            const d = r.ok ? await r.json() : null;
            if (cancelled) return;
            setLocation({
              postnummer: d?.postnummer || null,
              lat,
              lng,
              by: d?.by || null,
              source: 'geolocation',
            });
          } catch {
            if (cancelled) return;
            setLocation((prev) => ({
              postnummer: prev?.postnummer || null,
              lat,
              lng,
              by: prev?.by || null,
              source: 'geolocation',
            }));
          }
        },
        () => { /* afvist — bliver ved IP eller spørger */ },
        { timeout: 5000, maximumAge: 600000 },
      );
    }
    return () => { cancelled = true; };
  }, []);

  const runTurn = async (history) => {
    if (inFlight.current) return;
    inFlight.current = true;
    const lastUser = history[history.length - 1];
    if (lastUser && isAcute(lastUser.text)) {
      setTyping(false);
      setMessages((m) => [
        ...m,
        {
          role: 'ai',
          text: ACUTE_REPLY,
          showDisclaimer: true,
          escalation: true,
        },
      ]);
      inFlight.current = false;
      return;
    }
    setTyping(true);
    let aiIndex = null;
    try {
      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          messages: history.map((msg) => ({
            role: msg.role === 'ai' ? 'assistant' : 'user',
            content: msg.text,
          })),
          location: locationRef.current
            ? {
                postnummer: locationRef.current.postnummer,
                lat: locationRef.current.lat,
                lng: locationRef.current.lng,
                by: locationRef.current.by,
              }
            : null,
        }),
      });
      if (!res.ok) {
        const txt = await res.text().catch(() => '');
        throw new Error('HTTP ' + res.status + ': ' + txt.slice(0, 200));
      }
      await readSSE(res, (event, data) => {
        if (event === 'delta' && data.text) {
          setTyping(false);
          setMessages((m) => {
            if (aiIndex === null) {
              aiIndex = m.length;
              return [...m, { role: 'ai', text: data.text }];
            }
            const copy = m.slice();
            copy[aiIndex] = {
              ...copy[aiIndex],
              text: (copy[aiIndex].text || '') + data.text,
            };
            return copy;
          });
        } else if (event === 'acute' && data.text) {
          setTyping(false);
          setMessages((m) => [
            ...m,
            {
              role: 'ai',
              text: data.text,
              showDisclaimer: true,
              escalation: true,
            },
          ]);
        } else if (event === 'behandlere' && Array.isArray(data.results)) {
          // Knyt resultaterne til den AI-bubble vi streamer til. Hvis Claude
          // gik direkte til tool_use uden tekst først, skal vi oprette en
          // tom AI-bubble så resultaterne ikke havner på user-bubben.
          setMessages((m) => {
            const copy = m.slice();
            let target;
            if (aiIndex != null) {
              target = aiIndex;
            } else {
              target = copy.length;
              aiIndex = target;
              copy.push({ role: 'ai', text: '' });
            }
            copy[target] = {
              ...copy[target],
              results: data.results.map((b, i) => ({ ...b, id: b.id ?? i })),
              resultsMeta: {
                specialty: data.specialty,
                postnummer: data.postnummer,
                preference: data.preference,
              },
            };
            return copy;
          });
          setResultsVisible(false);
          setTimeout(() => setResultsVisible(true), 600);
        } else if (event === 'done') {
          setMessages((m) => {
            if (aiIndex === null) return m;
            const copy = m.slice();
            copy[aiIndex] = { ...copy[aiIndex], showDisclaimer: true };
            return copy;
          });
        } else if (event === 'error') {
          setTyping(false);
          setMessages((m) => [
            ...m,
            {
              role: 'ai',
              text:
                'Der opstod en fejl hos sekretæren: ' +
                (data.message || 'ukendt') +
                '. Prøv igen om et øjeblik.',
            },
          ]);
        }
      });
    } catch (err) {
      setTyping(false);
      setMessages((m) => [
        ...m,
        {
          role: 'ai',
          text:
            'Forbindelsen til sekretæren blev afbrudt. Tjek at du er online og prøv igen.',
        },
      ]);
      console.error(err);
    } finally {
      inFlight.current = false;
    }
  };

  useEffect(() => {
    if (didInit.current) return;
    didInit.current = true;
    if (escalation) {
      const t = setTimeout(() => {
        setTyping(false);
        setMessages((m) => [
          ...m,
          {
            role: 'ai',
            text: ACUTE_REPLY,
            showDisclaimer: true,
            escalation: true,
          },
        ]);
      }, 600);
      return () => clearTimeout(t);
    }
    runTurn([{ role: 'user', text: initialMessage }]);
  }, []);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages, typing]);

  const submit = () => {
    const trimmed = input.trim();
    if (!trimmed || inFlight.current) return;
    const next = [...messages, { role: 'user', text: trimmed }];
    setMessages(next);
    setInput('');
    runTurn(next);
  };

  const filtered = (list) => {
    let result = list;
    if (filter === 'Offentlig') result = list.filter((b) => b.public);
    if (filter === 'Privat') result = list.filter((b) => !b.public);
    return [...result].sort((a, b) => a.waitWeeks - b.waitWeeks);
  };

  return (
    <main
      className="conv-main"
      style={{
        maxWidth: 820,
        margin: '0 auto',
        padding: '24px 24px 0',
        display: 'flex',
        flexDirection: 'column',
        minHeight: 'calc(100vh - 64px)',
      }}
    >
      {/* conv header */}
      <div
        className="flex items-center justify-between conv-header"
        style={{ marginBottom: 16, paddingBottom: 12, borderBottom: `1px solid ${c.border}` }}
      >
        <button
          onClick={onBack}
          className="focus-ring"
          style={{
            background: 'none',
            border: 0,
            color: c.textSecondary,
            fontSize: 14,
            padding: 4,
            margin: -4,
            borderRadius: 6,
            display: 'flex',
            alignItems: 'center',
            gap: 6,
          }}
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M19 12H5M11 18l-6-6 6-6" />
          </svg>
          Ny samtale
        </button>
        <div
          className="conv-header-center"
          style={{
            fontSize: 11,
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            color: c.textTertiary,
          }}
        >
          Samtale · lige nu
        </div>
        <button
          className="focus-ring"
          style={{
            background: 'none',
            border: 0,
            color: c.textSecondary,
            fontSize: 14,
            padding: 4,
            margin: -4,
            borderRadius: 6,
          }}
        >
          Gem
        </button>
      </div>

      {/* escalation banner */}
      {escalation && (
        <div
          role="alert"
          className="fade-in escalation-banner"
          style={{
            background: c.warmAlertSoft,
            border: `1px solid ${c.warmAlert}`,
            borderRadius: 12,
            padding: '14px 16px',
            marginBottom: 20,
            display: 'flex',
            gap: 12,
            alignItems: 'flex-start',
          }}
        >
          <div
            style={{
              width: 28,
              height: 28,
              borderRadius: '50%',
              background: c.warmAlert,
              color: c.surface,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
              fontWeight: 500,
              fontSize: 15,
              fontFamily: serif,
            }}
            aria-hidden="true"
          >
            !
          </div>
          <div style={{ flex: 1 }}>
            <div
              className="serif"
              style={{
                fontSize: 16,
                fontWeight: 500,
                color: c.warmAlert,
                marginBottom: 4,
              }}
            >
              det her kan haste.
            </div>
            <p
              style={{
                fontSize: 14,
                lineHeight: 1.5,
                color: c.textPrimary,
                margin: 0,
              }}
            >
              ring <a href="tel:112" style={{ color: c.textPrimary, fontWeight: 500 }}>112</a> ved akut nød. er det mindre akut, ring <a href="tel:1813" style={{ color: c.textPrimary, fontWeight: 500 }}>1813</a> (region hovedstaden) eller din lokale akuttelefon. bliv på linjen - jeg fortsætter også gerne her.
            </p>
          </div>
        </div>
      )}

      {/* chat card - samme stil som start-siden */}
      <section
        className="conv-chat-card"
        style={{
          background: c.surface,
          border: `1.5px solid ${c.accent}`,
          borderRadius: 16,
          padding: 20,
          boxShadow: `0 1px 0 ${c.accentSoft}`,
          display: 'flex',
          flexDirection: 'column',
          flex: 1,
          minHeight: 420,
        }}
      >
      {/* messages */}
      <div ref={scrollRef} style={{ flex: 1, paddingTop: 4 }}>
        {messages.map((m, i) => {
          if (m.role === 'user') return <UserBubble key={i} text={m.text} />;
          return (
            <React.Fragment key={i}>
              <AIBubble showDisclaimer={m.showDisclaimer}>
                <p style={{ margin: 0 }}>{m.text}</p>
              </AIBubble>
              {m.results && !resultsVisible && (
                <div
                  className="fade-in"
                  style={{
                    marginLeft: 48,
                    marginBottom: 24,
                    display: 'flex',
                    alignItems: 'center',
                    gap: 10,
                    color: c.textSecondary,
                    fontSize: 14,
                  }}
                >
                  <span>Finder læger nærmest dig</span>
                  <span className="flex items-center" style={{ gap: 4 }} aria-hidden>
                    {[0, 1, 2].map((i) => (
                      <span
                        key={i}
                        className="dot"
                        style={{
                          width: 5,
                          height: 5,
                          borderRadius: '50%',
                          background: c.accent,
                          display: 'inline-block',
                          animationDelay: `${i * 180}ms`,
                        }}
                      />
                    ))}
                  </span>
                </div>
              )}
              {m.results && resultsVisible && (
                <div className="fade-in conv-results-pad" style={{ marginLeft: 48, marginBottom: 24 }}>
                  {/* filters */}
                  <div
                    className="flex items-center flex-wrap conv-filter-row"
                    style={{ gap: 8, marginBottom: 14 }}
                  >
                    <span
                      style={{
                        fontSize: 12,
                        letterSpacing: '0.06em',
                        textTransform: 'uppercase',
                        color: c.textTertiary,
                        marginRight: 4,
                      }}
                    >
                      Filtre
                    </span>
                    {['Alle', 'Offentlig', 'Privat'].map((f) => (
                      <FilterChip
                        key={f}
                        label={f}
                        active={filter === f}
                        onClick={() => setFilter(f)}
                      />
                    ))}
                    {(() => {
                      const meta = m.resultsMeta || {};
                      const label = meta.postnummer
                        ? (location?.by && location?.postnummer === meta.postnummer
                            ? location.by + ' ' + meta.postnummer
                            : meta.postnummer)
                        : (location?.by || 'Danmark');
                      return <FilterChip label={label} active />;
                    })()}
                    <FilterChip label="Sortér: ventetid" active />
                  </div>
                  {/* cards */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                    {filtered(m.results).map((b) => (
                      <BehandlerCard
                        key={b.id}
                        b={b}
                        onSelect={() => onSelectBehandler(b)}
                      />
                    ))}
                  </div>
                  <div
                    style={{
                      marginTop: 14,
                      fontSize: 13,
                      color: c.textTertiary,
                      textAlign: 'center',
                    }}
                  >
                    Opdateret i dag
                  </div>
                </div>
              )}
            </React.Fragment>
          );
        })}
        {typing && <TypingBubble />}
      </div>

      {/* input - del af chat-kortet */}
      <div style={{ marginTop: 12 }}>
        <ChatInput
          value={input}
          onChange={setInput}
          onSubmit={submit}
          placeholder="Skriv videre…"
        />
      </div>
      </section>
      <div style={{ height: 24 }} />
    </main>
  );
};

// - clinic detail -
const ClinicDetailView = ({ clinic, onBack }) => {
  const [selectedSlot, setSelectedSlot] = useState(null);
  const slots = [
    { day: 'ons 23 apr', time: '09:15' },
    { day: 'ons 23 apr', time: '11:40' },
    { day: 'tor 24 apr', time: '08:30' },
    { day: 'tor 24 apr', time: '13:20' },
    { day: 'fre 25 apr', time: '10:00' },
    { day: 'man 28 apr', time: '14:15' },
  ];
  return (
    <main
      className="clinic-main"
      style={{
        maxWidth: 1080,
        margin: '0 auto',
        padding: '24px 24px 64px',
      }}
    >
      <button
        onClick={onBack}
        className="focus-ring"
        style={{
          background: 'none',
          border: 0,
          color: c.textSecondary,
          fontSize: 14,
          padding: 4,
          margin: '0 0 24px -4px',
          borderRadius: 6,
          display: 'flex',
          alignItems: 'center',
          gap: 6,
        }}
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M19 12H5M11 18l-6-6 6-6" />
        </svg>
        tilbage til samtale
      </button>

      <div
        className="clinic-grid"
        style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)',
          gap: 48,
        }}
      >
        {/* main */}
        <section>
          {/* hero image w/ warm sand fallback */}
          {clinic.heroImage && (
            <>
              <div
                style={{
                  width: '100%',
                  height: 300,
                  borderRadius: 12,
                  background: c.surfaceMuted,
                  marginBottom: 10,
                  overflow: 'hidden',
                  border: `1px solid ${c.border}`,
                  position: 'relative',
                }}
              >
                <img
                  src={clinic.heroImage}
                  alt={`${clinic.name} - omgivelser`}
                  loading="lazy"
                  style={{
                    width: '100%',
                    height: '100%',
                    objectFit: 'cover',
                    display: 'block',
                    filter: 'saturate(0.9)',
                  }}
                  onError={(e) => {
                    e.currentTarget.style.display = 'none';
                  }}
                />
              </div>
              {clinic.heroCaption && (
                <p
                  className="serif"
                  style={{
                    fontStyle: 'italic',
                    fontSize: 13,
                    color: c.textTertiary,
                    margin: '0 0 28px',
                    lineHeight: 1.5,
                  }}
                >
                  {clinic.heroCaption}
                </p>
              )}
            </>
          )}

          <div
            style={{
              fontSize: 11,
              letterSpacing: '0.09em',
              textTransform: 'uppercase',
              color: c.accent,
              fontWeight: 500,
              marginBottom: 10,
            }}
          >
            {clinic.specialty} · {clinic.public ? 'Offentlig' : 'Privat'}
          </div>
          <h1
            className="serif clinic-hero-h1"
            style={{
              fontSize: 36,
              fontWeight: 400,
              letterSpacing: '-0.01em',
              margin: 0,
              marginBottom: 8,
              lineHeight: 1.15,
            }}
          >
            {clinic.name}
          </h1>
          <p
            className="clinic-hero-address"
            style={{
              fontSize: 16,
              color: c.textSecondary,
              margin: 0,
              marginBottom: 32,
            }}
          >
            {clinic.address || `${clinic.city} · ${clinic.distance} fra dig`}
            {clinic.address && ` · ${clinic.distance} fra dig`}
          </p>

          <div
            className="clinic-stats-grid"
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 0,
              border: `1px solid ${c.border}`,
              borderRadius: 12,
              marginBottom: 36,
              overflow: 'hidden',
            }}
          >
            <StatCell
              label="ventetid"
              value={`${clinic.waitWeeks}`}
              unit="uger"
              warn={clinic.waitWeeks >= 6}
            />
            <StatCell
              label="egenbetaling"
              value={clinic.priceDetail || (clinic.public ? '0' : '-')}
              unit={clinic.priceUnit || (clinic.public ? 'kr. m. henvisning' : 'kr.')}
            />
            <StatCell label="konsultation" value="~45" unit="minutter" border={false} />
          </div>

          <section style={{ marginBottom: 36 }}>
            <h2
              className="serif"
              style={{
                fontSize: 20,
                fontWeight: 500,
                margin: '0 0 12px',
                letterSpacing: '-0.005em',
              }}
            >
              om klinikken
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: c.textPrimary, margin: 0 }}>
              privat speciallægeklinik i indre københavn med fokus på udredning og behandling af hjerte-kar-sygdomme. klinikken varetager bl.a. tidlig opsporing af åreforkalkning og vurdering af symptomer som brystsmerter, åndenød, hjertebanken og forhøjet blodtryk. der tages både privatbetalende og patienter med henvisning via sygesikringens overenskomst.
            </p>
          </section>

          {clinic.id === 1 && (
            <section style={{ marginBottom: 36 }}>
              <h2
                className="serif"
                style={{
                  fontSize: 20,
                  fontWeight: 500,
                  margin: '0 0 16px',
                  letterSpacing: '-0.005em',
                }}
              >
                om speciallægen
              </h2>
              <div
                className="clinic-doctor-bio-row"
                style={{
                  display: 'flex',
                  gap: 20,
                  alignItems: 'flex-start',
                }}
              >
                {clinic.doctorPhoto && (
                  <div
                    className="clinic-doctor-bio-photo"
                    style={{
                      width: 128,
                      height: 128,
                      borderRadius: 10,
                      overflow: 'hidden',
                      flexShrink: 0,
                      background: c.surfaceMuted,
                      border: `1px solid ${c.border}`,
                    }}
                  >
                    <img
                      src={clinic.doctorPhoto}
                      alt={clinic.doctorName}
                      style={{
                        width: '100%',
                        height: '100%',
                        objectFit: 'cover',
                        display: 'block',
                        filter: 'saturate(0.92)',
                      }}
                    />
                  </div>
                )}
                <div style={{ flex: 1, minWidth: 0 }}>
                  {clinic.doctorName && (
                    <div
                      className="serif"
                      style={{
                        fontSize: 17,
                        fontWeight: 500,
                        color: c.textPrimary,
                        marginBottom: 2,
                        letterSpacing: '-0.005em',
                      }}
                    >
                      {clinic.doctorName}
                    </div>
                  )}
                  {clinic.doctorTitle && (
                    <div
                      style={{
                        fontSize: 13,
                        color: c.textTertiary,
                        letterSpacing: '0.02em',
                        marginBottom: 12,
                      }}
                    >
                      {clinic.doctorTitle}
                    </div>
                  )}
                  <p style={{ fontSize: 16, lineHeight: 1.65, color: c.textPrimary, margin: 0 }}>
                    har drevet praksis på store kongensgade siden 2010. ved siden af klinikken er hun aktiv inden for hospitalskardiologien og har publiceret forskning i bl.a. european heart journal og journal of cardiac failure, primært om hjertesvigt og behandling af hjerte-kar-sygdomme.
                  </p>
                </div>
              </div>
            </section>
          )}

          <section style={{ marginBottom: 36 }}>
            <h2 className="serif" style={{ fontSize: 20, fontWeight: 500, margin: '0 0 12px' }}>
              ydelser
            </h2>
            <ul
              className="clinic-ydelser-grid"
              style={{
                listStyle: 'none',
                padding: 0,
                margin: 0,
                display: 'grid',
                gridTemplateColumns: 'repeat(2, 1fr)',
                gap: '10px 24px',
              }}
            >
              {[
                'ekkokardiografi (ultralyd af hjertet)',
                'ekg og arbejds-ekg',
                'holter-monitorering',
                '24-timers blodtryksmåling',
                'udredning af åreforkalkning',
                'vurdering af brystsmerter og hjertebanken',
              ].map((y) => (
                <li
                  key={y}
                  style={{
                    fontSize: 15,
                    color: c.textPrimary,
                    display: 'flex',
                    alignItems: 'center',
                    gap: 10,
                    lineHeight: 1.35,
                  }}
                >
                  <span
                    style={{
                      width: 20,
                      height: 20,
                      borderRadius: '50%',
                      background: c.accentSoft,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      flexShrink: 0,
                    }}
                  >
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={c.accent} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12" />
                    </svg>
                  </span>
                  {y}
                </li>
              ))}
            </ul>
          </section>

          <section style={{ marginBottom: 36 }}>
            <h2 className="serif" style={{ fontSize: 20, fontWeight: 500, margin: '0 0 12px' }}>
              henvisning
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: c.textPrimary, margin: 0 }}>
              klinikken tager både privatbetalende og patienter med henvisning via sygesikringens overenskomst. med henvisning fra egen læge dækker regionen typisk udredningen - uden henvisning booker du som privat, og du betaler da selv det beløb der står ovenfor.
            </p>
          </section>

          {clinic.phone && (
            <section>
              <h2 className="serif" style={{ fontSize: 20, fontWeight: 500, margin: '0 0 12px' }}>
                kontakt
              </h2>
              <div
                style={{
                  fontSize: 15,
                  color: c.textPrimary,
                  lineHeight: 1.7,
                }}
              >
                <div>
                  <span style={{ color: c.textTertiary, marginRight: 10 }}>telefon</span>
                  <a href={`tel:${clinic.phone.replace(/\s/g, '')}`} style={{ color: c.textPrimary, textDecoration: 'none', fontWeight: 500 }}>
                    {clinic.phone}
                  </a>
                </div>
                {clinic.website && (
                  <div>
                    <span style={{ color: c.textTertiary, marginRight: 10 }}>hjemmeside</span>
                    <a
                      href={`https://${clinic.website}`}
                      target="_blank"
                      rel="noreferrer"
                      style={{ color: c.accent, textDecoration: 'none', fontWeight: 500 }}
                    >
                      {clinic.website}
                    </a>
                  </div>
                )}
              </div>
            </section>
          )}
        </section>

        {/* booking (privat) ELLER kontakt-info (offentlig) */}
        <aside>
          <div
            className="booking-sticky"
            style={{
              background: c.surface,
              border: `1px solid ${c.border}`,
              borderRadius: 16,
              padding: 20,
              position: 'sticky',
              top: 80,
            }}
          >
            {clinic.public ? (
              <>
                <div
                  style={{
                    fontSize: 11,
                    letterSpacing: '0.09em',
                    textTransform: 'uppercase',
                    color: c.textTertiary,
                    marginBottom: 8,
                  }}
                >
                  Kontakt
                </div>
                <h3
                  className="serif"
                  style={{
                    fontSize: 18,
                    fontWeight: 500,
                    margin: '0 0 16px',
                  }}
                >
                  Kontakt klinikken
                </h3>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {clinic.phone && (
                    <div>
                      <div
                        style={{
                          fontSize: 11,
                          letterSpacing: '0.08em',
                          textTransform: 'uppercase',
                          color: c.textTertiary,
                          marginBottom: 4,
                        }}
                      >
                        Telefon
                      </div>
                      <a
                        href={`tel:${clinic.phone.replace(/\s/g, '')}`}
                        style={{
                          color: c.textPrimary,
                          fontSize: 16,
                          fontWeight: 500,
                          textDecoration: 'none',
                        }}
                      >
                        {clinic.phone}
                      </a>
                    </div>
                  )}
                  {clinic.address && (
                    <div>
                      <div
                        style={{
                          fontSize: 11,
                          letterSpacing: '0.08em',
                          textTransform: 'uppercase',
                          color: c.textTertiary,
                          marginBottom: 4,
                        }}
                      >
                        Adresse
                      </div>
                      <div style={{ fontSize: 15, color: c.textPrimary, lineHeight: 1.4 }}>
                        {clinic.address}
                      </div>
                    </div>
                  )}
                  {clinic.website && (
                    <div>
                      <div
                        style={{
                          fontSize: 11,
                          letterSpacing: '0.08em',
                          textTransform: 'uppercase',
                          color: c.textTertiary,
                          marginBottom: 4,
                        }}
                      >
                        Hjemmeside
                      </div>
                      <a
                        href={`https://${clinic.website}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        style={{
                          color: c.accent,
                          fontSize: 15,
                          textDecoration: 'none',
                          fontWeight: 500,
                        }}
                      >
                        {clinic.website}
                      </a>
                    </div>
                  )}
                </div>

                <p
                  className="serif"
                  style={{
                    fontStyle: 'italic',
                    fontSize: 12,
                    color: c.textTertiary,
                    margin: '18px 0 0',
                    lineHeight: 1.5,
                  }}
                >
                  For tidsbestilling kontakt klinikken direkte. Du skal have en henvisning fra egen læge.
                </p>
              </>
            ) : (
              <>
                <div
                  style={{
                    fontSize: 11,
                    letterSpacing: '0.09em',
                    textTransform: 'uppercase',
                    color: c.textTertiary,
                    marginBottom: 8,
                  }}
                >
                  Ledige tider
                </div>
                <h3
                  className="serif"
                  style={{
                    fontSize: 18,
                    fontWeight: 500,
                    margin: '0 0 16px',
                  }}
                >
                  Book direkte her
                </h3>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 16 }}>
                  {slots.map((s, i) => {
                    const active = selectedSlot === i;
                    return (
                      <button
                        key={i}
                        onClick={() => setSelectedSlot(i)}
                        className="focus-ring booking-slot-btn"
                        style={{
                          background: active ? c.accent : c.bg,
                          color: active ? c.surface : c.textPrimary,
                          border: `1px solid ${active ? c.accent : c.border}`,
                          borderRadius: 8,
                          padding: '10px 12px',
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                          fontSize: 14,
                          textAlign: 'left',
                          transition: 'all 140ms ease',
                          minHeight: 44,
                          whiteSpace: 'nowrap',
                        }}
                      >
                        <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.day}</span>
                        <span className="tab-num" style={{ fontWeight: 500, whiteSpace: 'nowrap', marginLeft: 12 }}>{s.time}</span>
                      </button>
                    );
                  })}
                </div>
                <button
                  disabled={selectedSlot === null}
                  style={{
                    width: '100%',
                    background: selectedSlot === null ? c.surfaceMuted : c.accent,
                    color: selectedSlot === null ? c.textTertiary : c.surface,
                    border: 0,
                    borderRadius: 10,
                    padding: '12px 16px',
                    fontSize: 15,
                    fontWeight: 500,
                    transition: 'all 160ms ease',
                  }}
                >
                  Gå videre til booking
                </button>
                <p
                  className="serif"
                  style={{
                    fontStyle: 'italic',
                    fontSize: 12,
                    color: c.textTertiary,
                    margin: '12px 0 0',
                    lineHeight: 1.5,
                    textAlign: 'center',
                  }}
                >
                  Booking sker via klinikkens egen kalender. Du bliver sendt videre efter bekræftelse.
                </p>
              </>
            )}
          </div>
        </aside>
      </div>
    </main>
  );
};

const StatCell = ({ label, value, unit, warn = false, border = true }) => (
  <div
    className={`clinic-stats-cell${border ? '' : ' clinic-stats-cell-last'}`}
    style={{
      padding: '16px 18px',
      borderRight: border ? `1px solid ${c.border}` : 0,
    }}
  >
    <div
      style={{
        fontSize: 11,
        letterSpacing: '0.08em',
        textTransform: 'uppercase',
        color: c.textTertiary,
        marginBottom: 6,
      }}
    >
      {label}
    </div>
    <div className="flex items-baseline tab-num" style={{ gap: 5 }}>
      <span
        className="serif"
        style={{
          fontSize: 26,
          fontWeight: 500,
          color: warn ? c.warmAlert : c.textPrimary,
          lineHeight: 1,
          letterSpacing: '-0.01em',
        }}
      >
        {value}
      </span>
      <span style={{ fontSize: 13, color: warn ? c.warmAlert : c.textSecondary }}>{unit}</span>
    </div>
  </div>
);

// - MitID login mock - authentisk layout -
const MitIDView = ({ onBack }) => {
  const [step, setStep] = useState('connecting'); // connecting | id | waiting
  const [userId, setUserId] = useState('');
  const [showUserId, setShowUserId] = useState(false);
  const [remember, setRemember] = useState(false);

  // initial connecting screen: 2 sekunder
  useEffect(() => {
    if (step !== 'connecting') return;
    const t = setTimeout(() => setStep('id'), 2000);
    return () => clearTimeout(t);
  }, [step]);

  const submitId = (e) => {
    e.preventDefault();
    if (!userId.trim()) return;
    setStep('waiting');
    setTimeout(() => setStep('waiting'), 1);
  };

  const mitidBlue = '#0060E6';
  const mitidBg = '#FFFFFF';
  const mitidBorder = '#D0D5DD';
  const mitidText = '#101828';
  const mitidMuted = '#475467';

  return (
    <main
      style={{
        background: mitidBg,
        minHeight: 'calc(100vh - 64px)',
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'center',
        padding: '48px 16px 100px',
        fontFamily: "'IBM Plex Sans', 'Inter', system-ui, sans-serif",
      }}
    >
      <div
        style={{
          width: '100%',
          maxWidth: 460,
          minHeight: 620,
          background: '#fff',
          border: `1px solid ${mitidBorder}`,
          borderRadius: 10,
          overflow: 'hidden',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        {step === 'connecting' && (
          <div
            style={{
              flex: 1,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              padding: '48px 28px',
              textAlign: 'center',
              gap: 24,
            }}
          >
            <MitIDLogo size={36} />
            <MitIDShield />
            <div>
              <h1 style={{ margin: '0 0 6px', fontSize: 22, fontWeight: 700, color: mitidText }}>
                Forbinder sikkert til MitID
              </h1>
              <p style={{ margin: 0, fontSize: 16, color: mitidMuted }}>Vent et øjeblik …</p>
            </div>
          </div>
        )}

        {step === 'id' && (
          <>
            {/* header */}
            <div
              style={{
                padding: '22px 28px 18px',
                borderBottom: `1px solid ${mitidBorder}`,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                gap: 12,
              }}
            >
              <h1 style={{ margin: 0, fontSize: 17, fontWeight: 700, color: mitidText }}>
                Log på hos MitID.dk
              </h1>
              <MitIDLogo size={22} />
            </div>

            <form
              onSubmit={submitId}
              style={{
                padding: '24px 28px 20px',
                display: 'flex',
                flexDirection: 'column',
                flex: 1,
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <label
                  htmlFor="mitid-userid"
                  style={{ fontSize: 15, fontWeight: 700, color: mitidText, letterSpacing: '0.02em' }}
                >
                  BRUGER-ID
                </label>
                <button
                  type="button"
                  onClick={(e) => e.preventDefault()}
                  aria-label="Hjælp til bruger-ID"
                  style={{
                    background: 'transparent',
                    border: `1.5px solid ${mitidBlue}`,
                    borderRadius: '50%',
                    width: 22,
                    height: 22,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: mitidBlue,
                    cursor: 'pointer',
                    padding: 0,
                  }}
                >
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                    <circle cx="12" cy="17" r="0.6" fill="currentColor" />
                  </svg>
                </button>
              </div>
              <div
                style={{
                  display: 'flex',
                  alignItems: 'stretch',
                  border: `2px solid ${mitidBlue}`,
                  borderRadius: 4,
                  background: '#F5F7FA',
                  overflow: 'hidden',
                }}
              >
                <input
                  id="mitid-userid"
                  type={showUserId ? 'text' : 'password'}
                  autoFocus
                  value={userId}
                  onChange={(e) => setUserId(e.target.value)}
                  style={{
                    flex: 1,
                    padding: '12px 14px',
                    fontSize: 16,
                    border: 0,
                    outline: 'none',
                    fontFamily: 'inherit',
                    background: 'transparent',
                    color: mitidText,
                  }}
                />
                <button
                  type="button"
                  onClick={() => setShowUserId((v) => !v)}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 6,
                    padding: '0 12px',
                    background: 'transparent',
                    border: 0,
                    borderLeft: `1px solid ${mitidBorder}`,
                    color: mitidText,
                    fontSize: 14,
                    fontWeight: 500,
                    cursor: 'pointer',
                  }}
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="9" cy="12" r="3" />
                    <path d="M12 12h9l-2 2m2-2-2-2" />
                  </svg>
                  <span style={{ fontSize: 13 }}>{showUserId ? 'Skjul' : 'Vis'}</span>
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M6 9l6 6 6-6" />
                  </svg>
                </button>
              </div>

              <button
                type="submit"
                disabled={!userId.trim()}
                style={{
                  marginTop: 18,
                  width: '100%',
                  padding: '14px 18px',
                  background: userId.trim() ? mitidBlue : '#C4CBD3',
                  color: '#fff',
                  border: 0,
                  borderRadius: 4,
                  fontSize: 16,
                  fontWeight: 700,
                  letterSpacing: '0.04em',
                  cursor: userId.trim() ? 'pointer' : 'not-allowed',
                  transition: 'background 160ms ease',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  fontFamily: 'inherit',
                }}
              >
                <span>FORTSÆT</span>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12h14M13 6l6 6-6 6" />
                </svg>
              </button>

              <a
                href="#"
                onClick={(e) => e.preventDefault()}
                style={{
                  marginTop: 20,
                  color: mitidBlue,
                  fontSize: 15,
                  fontWeight: 600,
                  textDecoration: 'none',
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 8,
                }}
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="9" />
                  <path d="M12 8v.01M12 11v5" />
                </svg>
                Glemt bruger-ID?
              </a>

              <div style={{ flex: 1 }} />

              {/* husk mig + afbryd/hjælp */}
              <label
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 12,
                  cursor: 'pointer',
                  padding: '14px 0',
                  fontSize: 15,
                  color: mitidText,
                  fontWeight: 600,
                }}
              >
                <span
                  onClick={() => setRemember((v) => !v)}
                  style={{
                    width: 22,
                    height: 22,
                    borderRadius: 3,
                    border: `2px solid ${mitidBlue}`,
                    background: remember ? mitidBlue : 'transparent',
                    display: 'inline-flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexShrink: 0,
                  }}
                >
                  {remember && (
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M5 12l5 5L20 7" />
                    </svg>
                  )}
                </span>
                <input
                  type="checkbox"
                  checked={remember}
                  onChange={(e) => setRemember(e.target.checked)}
                  style={{ position: 'absolute', opacity: 0, width: 0, height: 0 }}
                />
                Husk mig hos MitID.dk
              </label>
            </form>

            <div
              style={{
                borderTop: `1px solid ${mitidBorder}`,
                padding: '16px 28px',
                display: 'flex',
                gap: 32,
              }}
            >
              <button
                onClick={onBack}
                style={{
                  background: 'transparent',
                  border: 0,
                  color: mitidText,
                  fontSize: 15,
                  fontWeight: 700,
                  cursor: 'pointer',
                  padding: 0,
                  fontFamily: 'inherit',
                }}
              >
                Afbryd
              </button>
              <button
                onClick={(e) => e.preventDefault()}
                style={{
                  background: 'transparent',
                  border: 0,
                  color: mitidText,
                  fontSize: 15,
                  fontWeight: 700,
                  cursor: 'pointer',
                  padding: 0,
                  fontFamily: 'inherit',
                }}
              >
                Hjælp
              </button>
            </div>
          </>
        )}

        {step === 'waiting' && (
          <div
            style={{
              flex: 1,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              padding: '48px 28px',
              textAlign: 'center',
              gap: 24,
            }}
          >
            <MitIDLogo size={30} />
            <MitIDShield />
            <div>
              <h1 style={{ margin: '0 0 6px', fontSize: 20, fontWeight: 700, color: mitidText }}>
                Åbn MitID på din telefon
              </h1>
              <p style={{ margin: 0, fontSize: 14, color: mitidMuted, maxWidth: 320 }}>
                Bekræft login til Læge.dk med dit ansigt eller fingeraftryk.
              </p>
            </div>
            <button
              onClick={onBack}
              style={{
                background: 'transparent',
                color: mitidBlue,
                border: 0,
                fontSize: 14,
                fontWeight: 600,
                cursor: 'pointer',
              }}
            >
              Annullér
            </button>
          </div>
        )}
      </div>

      <style>{`
        @keyframes mitidSpin { to { transform: rotate(360deg); } }
        @keyframes mitidSonar {
          0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
          70%  { opacity: 0.08; }
          100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
        }
      `}</style>
    </main>
  );
};

// MitID brand logo: "Mit" + person-silhouette inside D-shape
const MitIDLogo = ({ size = 22 }) => {
  const blue = '#0060E6';
  const h = size * 1.1;
  return (
    <span
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: size * 0.18,
        fontFamily: "'IBM Plex Sans', 'Inter', system-ui, sans-serif",
        fontWeight: 700,
        fontSize: size,
        color: blue,
        letterSpacing: '-0.02em',
        lineHeight: 1,
      }}
      aria-label="MitID"
    >
      <span style={{ lineHeight: 1 }}>Mit</span>
      <svg width={h * 1.55} height={h} viewBox="0 0 34 22" xmlns="http://www.w3.org/2000/svg" aria-hidden>
        {/* person silhouette - solid */}
        <circle cx="6.5" cy="6.5" r="3.8" fill={blue} />
        <path d="M0.6 21.5 C0.6 14.8, 12.4 14.8, 12.4 21.5 Z" fill={blue} />
        {/* D-shape - solid */}
        <path
          d="M16 1.5 L20.5 1.5 A9.25 9.25 0 0 1 20.5 20.5 L16 20.5 Z"
          fill={blue}
        />
      </svg>
    </span>
  );
};

// Custom sonar-ring loader: center mærke + 3 ringe der pulserer udad
const MitIDShield = () => {
  const blue = '#0060E6';
  const size = 120;
  const center = 40;
  return (
    <div
      style={{
        position: 'relative',
        width: size,
        height: size,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
      aria-hidden
    >
      {[0, 1, 2].map((i) => (
        <span
          key={i}
          style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            width: center,
            height: center,
            transform: 'translate(-50%, -50%)',
            borderRadius: '50%',
            border: `2px solid ${blue}`,
            animation: `mitidSonar 1.8s ${i * 0.6}s cubic-bezier(0.2, 0.8, 0.3, 1) infinite`,
            opacity: 0,
          }}
        />
      ))}
      <span
        style={{
          position: 'relative',
          width: center,
          height: center,
          borderRadius: '50%',
          background: blue,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          boxShadow: `0 0 0 6px rgba(0, 96, 230, 0.08)`,
        }}
      >
        <svg width="22" height="22" viewBox="0 0 24 24" fill="#fff" aria-hidden>
          <circle cx="12" cy="9" r="3.6" />
          <path d="M5 21 C5 14.5, 19 14.5, 19 21 Z" />
        </svg>
      </span>
    </div>
  );
};

const Dot3 = ({ color, delay }) => (
  <span
    style={{
      width: 8,
      height: 8,
      borderRadius: '50%',
      background: color,
      display: 'inline-block',
      animation: `mitidDot 1.4s ${delay}s infinite ease-in-out`,
    }}
  />
);

// - SEO artikler til footer + underside -
const ARTICLES = [
  {
    slug: 'ventetid-bornepsykolog-kobenhavn',
    category: 'Ventetider',
    title: 'Ventetid for børnepsykolog i København - sådan finder du den korteste',
    excerpt: 'Ventetiden på en børnepsykolog i København kan variere fra få uger til et halvt år. Her er hvad du kan forvente - og hvad du kan gøre for at komme hurtigere til.',
    readMinutes: 4,
    sections: [
      {
        heading: 'Hvor lang er ventetiden typisk?',
        body: [
          'I 2026 er ventetiden på en børnepsykolog med ydernummer i København typisk 8-24 uger afhængigt af bydel og specifik problemstilling. Indre København og Frederiksberg har ofte længere ventelister end omegnskommunerne.',
          'Hos en privat børnepsykolog uden sygesikringsaftale er ventetiden markant kortere, ofte 1-3 uger, men du betaler hele prisen selv - typisk 900-1.400 kr. per session.',
        ],
      },
      {
        heading: 'Sådan får du tilskud fra sygesikringen',
        body: [
          'Børn og unge under 18 år kan få tilskud til psykologhjælp ved henvisning fra egen læge, hvis de falder inden for en af de 11 kategorier (fx mobning, alvorlig sygdom i familien, eller depression og angst).',
          'Tilskuddet dækker ca. 60 % af prisen, og du kan få op til 12 konsultationer per henvisning. Henvisningen skal udstedes af barnets egen læge inden første samtale.',
        ],
      },
      {
        heading: 'Hurtigere alternativer',
        body: [
          'Hvis du ikke kan vente på en psykolog med ydernummer, så overvej: privat børnepsykolog uden tilskud, online-terapi via videokonsultation, eller skolepsykologen hvis barnet går i folkeskole.',
          'Nogle private psykologer arbejder også på aften- og weekendtider, hvilket kan gøre det nemmere at finde en ledig tid inden for få dage.',
        ],
      },
    ],
  },
  {
    slug: 'ventetid-hjertelaege',
    category: 'Ventetider',
    title: 'Ventetid hos hjertelæge 2026 - hvad kan du forvente?',
    excerpt: 'Ventetiden på en hjertelæge i Danmark varierer mellem regionerne. Se den aktuelle ventetid og sådan kommer du hurtigere til undersøgelse.',
    readMinutes: 3,
    sections: [
      {
        heading: 'Ventetid i de fem regioner',
        body: [
          'Ifølge venteinfo.dk i april 2026 er ventetiden hos en praktiserende hjertelæge med ydernummer typisk 4-12 uger i Region Hovedstaden, 3-8 uger i Region Sjælland, og 2-6 uger i Region Midtjylland og Syddanmark. På offentlige hjertemedicinske klinikker er ventetiden ofte 10-14 uger ved ikke-akut udredning.',
        ],
      },
      {
        heading: 'Privat hjertelæge - hurtigere vej frem',
        body: [
          'Hos en privat hjertelæge uden overenskomst er ventetiden ofte 1-2 uger, og du får typisk svar på EKG og ekkokardiografi samme dag. Prisen starter ved omkring 2.200 kr. for en grundig udredning uden henvisning.',
          'Mange private sundhedsforsikringer dækker en udredning hos en privat hjertelæge - tjek din police eller kontakt dit forsikringsselskab.',
        ],
      },
      {
        heading: 'Hvornår skal du reagere akut?',
        body: [
          'Ring 112 ved voldsomme brystsmerter der stråler ud i armen, åndenød i hvile, koldsved eller besvimelse. Er det mindre akut, men vedvarende, så ring 1813 eller din lokale akuttelefon - de kan henvise dig til en hjertemedicinsk afdeling samme dag hvis nødvendigt.',
        ],
      },
    ],
  },
  {
    slug: 'ventetid-hudlaege',
    category: 'Ventetider',
    title: 'Ventetid hos hudlæge - sådan reducerer du den',
    excerpt: 'Ventetider på 3-9 måneder er ikke usædvanlige hos danske hudlæger. Her er dine muligheder for at komme hurtigere til.',
    readMinutes: 3,
    sections: [
      {
        heading: 'Hvorfor er ventetiden så lang?',
        body: [
          'Antallet af hudlæger med ydernummer er begrænset, og efterspørgslen er stor - særligt efter kontrol af modermærker, akne og eksem. Det giver ventetider på typisk 3-6 måneder hos offentlige speciallæger med overenskomst.',
        ],
      },
      {
        heading: 'Få en hurtigere vurdering',
        body: [
          'Privat hudlæge: ventetid 1-3 uger, pris fra 1.100 kr. per besøg uden henvisning. Mistænker du hudkræft, kan du ofte komme til samme uge.',
          'Online hudkonsultation: nogle private klinikker tilbyder videokonsultation, hvor du indsender billeder af fx modermærker og får en vurdering inden for 24-48 timer til omkring 400-600 kr.',
        ],
      },
      {
        heading: 'Hvornår er det akut?',
        body: [
          'Kontakt din egen læge hurtigt hvis et modermærke har ændret form, farve eller størrelse, eller hvis det bløder eller klør. Egen læge kan henvise direkte til udredning i pakkeforløb for mistænkt hudkræft, hvor udredningen skal ske inden for 7-14 dage.',
        ],
      },
    ],
  },
  {
    slug: 'henvisning-egen-laege',
    category: 'Guides',
    title: 'Henvisning fra egen læge - sådan får du den',
    excerpt: 'En henvisning fra din praktiserende læge giver adgang til speciallæger i det offentlige system og kan udløse tilskud fra sygesikringen.',
    readMinutes: 4,
    sections: [
      {
        heading: 'Hvad er en henvisning?',
        body: [
          'En henvisning er en formel anmodning fra din praktiserende læge (egen læge) til en speciallæge, sygehusafdeling eller anden specialist om at vurdere dine symptomer eller fortsætte din behandling. Den er din adgangsbillet til det offentlige sundhedssystem og til tilskud fra sygesikringen.',
        ],
      },
      {
        heading: 'Sådan får du en henvisning',
        body: [
          'Book en tid hos din egen læge (evt. videokonsultation) og forklar dine symptomer. Lægen vurderer om der er fagligt grundlag for at henvise til en specialist. Hvis ja, udstedes henvisningen elektronisk samme dag, og du kan booke tid hos specialisten med det samme.',
          'Har du ikke egen læge fordi du fx er flyttet, så skift læge via borger.dk eller ring 1813. Du kan også bruge en online almen praktiserende læge, der kan udstede henvisninger.',
        ],
      },
      {
        heading: 'Hvor længe gælder en henvisning?',
        body: [
          'En henvisning gælder typisk 6 måneder fra udstedelsen. Bruger du den ikke inden for den periode, skal du have en ny. Du kan frit vælge hvilken speciallæge med ydernummer du vil bruge - du er ikke bundet til den klinik lægen foreslår.',
        ],
      },
    ],
  },
  {
    slug: 'privat-vs-offentlig-speciallaege',
    category: 'Guides',
    title: 'Privat eller offentlig speciallæge - hvad skal du vælge?',
    excerpt: 'Forskellen på en privat og offentlig speciallæge er pris, ventetid og valgfrihed. Her er hvad du får i hver kategori.',
    readMinutes: 4,
    sections: [
      {
        heading: 'Offentlig speciallæge (med overenskomst)',
        body: [
          'Speciallæger med ydernummer og overenskomst med regionen er gratis eller næsten gratis for patienten, når du har en henvisning fra din egen læge. Sygesikringen dækker langt størstedelen af regningen.',
          'Ulempen er ventetid: typisk 4-16 uger afhængigt af speciale og region. Valget af klinik er begrænset til klinikker med ydernummer i din region.',
        ],
      },
      {
        heading: 'Privat speciallæge (uden overenskomst)',
        body: [
          'En privat speciallæge uden overenskomst modtager dig uden henvisning. Ventetiden er typisk 1-3 uger. Prisen betaler du selv - fra 900-2.500 kr. per besøg afhængigt af speciale - medmindre din sundhedsforsikring dækker.',
          'Fordelen er fleksibilitet, kort ventetid, og at du frit kan vælge klinik i hele landet. Du får ofte mere tid med lægen end hos en speciallæge med overenskomst.',
        ],
      },
      {
        heading: 'Hvad skal du vælge?',
        body: [
          'Offentligt: vælg det hvis du kan vente og har henvisning - du sparer penge. Privat: vælg det hvis ventetiden er afgørende, du ikke har henvisning, eller hvis din sundhedsforsikring dækker.',
          'Et tredje alternativ: en online almen praktiserende læge kan vurdere dig hurtigt og enten skrive en recept, oprette henvisning til det offentlige, eller anbefale en privat specialist.',
        ],
      },
    ],
  },
  {
    slug: 'sundhedsforsikring-speciallaege',
    category: 'Guides',
    title: 'Sundhedsforsikring og speciallæge - hvad dækker din forsikring?',
    excerpt: 'De fleste private sundhedsforsikringer dækker speciallæger - men hvad er omfattet, og hvordan bruger du den uden overraskelser på fakturaen?',
    readMinutes: 4,
    sections: [
      {
        heading: 'Hvad dækker en typisk sundhedsforsikring?',
        body: [
          'De fleste danske sundhedsforsikringer (fx Tryg, Topdanmark, Codan, PFA Sundhedsforsikring) dækker: privat speciallægeudredning, scanning og røntgen, operationer, fysioterapi, kiropraktor og psykolog - ofte uden henvisning fra egen læge.',
          'Dækningen varierer betydeligt mellem selskaber og mellem basis- og udvidede policer. Antallet af psykolog- og fysioterapi-sessioner er ofte loftbegrænset per år.',
        ],
      },
      {
        heading: 'Sådan bruger du forsikringen',
        body: [
          'De fleste selskaber kræver at du ringer eller udfylder en anmeldelse inden behandling - du får så et forhåndstilsagn om dækning. Nogle selskaber har aftaler med bestemte klinikker, hvor regningen sendes direkte til forsikringen.',
          'Uden forhåndsgodkendelse risikerer du at skulle betale selv og søge refusion bagefter - med risiko for afslag hvis forsikringen mener, at behandlingen ikke var nødvendig eller omfattet.',
        ],
      },
      {
        heading: 'Hvad er typisk IKKE dækket?',
        body: [
          'Kosmetiske behandlinger, forebyggende helbredsundersøgelser, kroniske lidelser der eksisterede før forsikringens tegning, samt alternativ behandling som ikke er registreret. Medicin dækkes sjældent.',
          'Tandlæge er næsten aldrig omfattet - det kræver en særskilt tandforsikring.',
        ],
      },
    ],
  },
  {
    slug: 'psykolog-med-tilskud',
    category: 'Guides',
    title: 'Psykolog med tilskud - sådan får du ret til det',
    excerpt: 'Sygesikringen dækker op til 60 % af regningen hos en psykolog hvis du falder inden for en af 11 henvisningsgrupper. Sådan får du adgang.',
    readMinutes: 4,
    sections: [
      {
        heading: 'De 11 henvisningsgrupper',
        body: [
          'Sygesikringen giver tilskud til psykologhjælp ved blandt andet: røveri eller voldsovergreb, trafikulykke, alvorlig sygdom i familien, incest/seksuelt overgreb, abort efter 12. uge, dødsfald hos nærmeste pårørende, og - for personer 18-38 år - let til moderat depression og angst.',
          'Den fulde liste findes på sundhed.dk. Din egen læge afgør om du falder inden for en af grupperne og udsteder henvisningen.',
        ],
      },
      {
        heading: 'Antal sessioner og egenbetaling',
        body: [
          'Du kan få op til 12 konsultationer per henvisning (24 ved depression og angst hos 18-38-årige). Sygesikringen dækker ca. 60 % af taksten. Din egenbetaling er typisk 380-420 kr. per session.',
          'Første samtale koster typisk lidt mere end de efterfølgende. Vær opmærksom på, at ikke alle psykologer har ydernummer - kun dem med aftale med sygesikringen kan give tilskud.',
        ],
      },
      {
        heading: 'Hvis du ikke har ret til tilskud',
        body: [
          'Er din problemstilling ikke på listen, kan du stadig gå til psykolog - du betaler bare selv. Typisk pris: 900-1.400 kr. per session. Nogle arbejdspladser og fagforeninger tilbyder psykologordninger. En sundhedsforsikring dækker ofte 10-12 sessioner per år.',
        ],
      },
    ],
  },
  {
    slug: 'video-konsultation-praktiserende-laege',
    category: 'Guides',
    title: 'Video-konsultation med praktiserende læge - hvornår giver det mening?',
    excerpt: 'En online video-konsultation med en almen praktiserende læge er ofte hurtigere end at vente på tid hos egen læge. Her er hvad du kan - og ikke kan - få.',
    readMinutes: 3,
    sections: [
      {
        heading: 'Hvad kan en video-læge?',
        body: [
          'En almen praktiserende læge på video kan stille diagnose, udskrive recept (inkl. antibiotika når det er fagligt indiceret), oprette henvisning til speciallæge eller hospital, sygemelde dig og svare på generelle sundhedsspørgsmål.',
          'Ydelserne er faglig de samme som hos din egen læge - bare uden fysisk undersøgelse. Lægen vurderer om video er tilstrækkeligt, eller om du skal ses fysisk.',
        ],
      },
      {
        heading: 'Hvornår egner video sig?',
        body: [
          'Typiske egnede problemstillinger: urinvejsinfektioner, hududslæt (med gode billeder), luftvejsinfektioner, ørepine hos voksne, recept-fornyelser, psykiske udfordringer, og generel rådgivning om symptomer.',
          'Mindre egnet: akutte skader, voldsomme smerter, symptomer der kræver fysisk undersøgelse som fx svimmelhed, brystsmerter eller akut åndenød. Der skal du ringe 1813 eller tage på skadestue.',
        ],
      },
      {
        heading: 'Hvad koster det?',
        body: [
          'En privat video-konsultation koster typisk 395-595 kr. og er ikke omfattet af sygesikringen, da den ikke har overenskomst. Nogle sundhedsforsikringer dækker dog. Til gengæld er ventetiden ofte få minutter til få timer, også i weekenden.',
        ],
      },
    ],
  },
  {
    slug: 'wegovy-ozempic-mounjaro-vaegttab',
    category: 'Guides',
    title: 'Wegovy, Ozempic og Mounjaro - nye lægemidler mod overvægt og deres resultater',
    excerpt: 'De nye GLP-1 og GIP-baserede lægemidler giver markant vægttab hos personer med svær overvægt. Her er virkning, forskelle og forventede resultater.',
    readMinutes: 5,
    sections: [
      {
        heading: 'Sådan virker de nye vægttabsmidler',
        body: [
          'Wegovy (semaglutid) og Ozempic (semaglutid) er begge GLP-1 agonister - de efterligner et naturligt hormon i tarmen, der giver mæthedsfølelse, forsinker mavens tømning og sænker blodsukkeret. Forskellen er doseringen: Ozempic er godkendt til type 2-diabetes, mens Wegovy er godkendt som vægttabsbehandling.',
          'Mounjaro (tirzepatid) er nyere og virker både på GLP-1 og GIP-receptorer samtidig. Den dobbelte virkningsmekanisme giver typisk større vægttab end semaglutid alene. Alle tre lægemidler tages som ugentlig injektion.',
        ],
      },
      {
        heading: 'Hvilke resultater kan du forvente?',
        body: [
          'I de store kliniske studier har personer med BMI over 30 tabt i gennemsnit 15 % af deres kropsvægt med Wegovy over 68 uger, 12 % med Ozempic-doser, og 20-22 % med Mounjaro over 72 uger. En person på 100 kg kan altså forvente et vægttab på 12-22 kg afhængigt af præparat.',
          'Resultaterne afhænger dog kraftigt af kost og motion samtidig. Uden livsstilsændringer genvinder mange 2/3 af vægttabet inden for et år efter behandlingens ophør - behandlingen er derfor ofte langvarig eller livslang.',
        ],
      },
      {
        heading: 'Bivirkninger og hvem kan få det?',
        body: [
          'De hyppigste bivirkninger er kvalme, opkastning, forstoppelse og diarré, særligt de første uger. Sjældnere ses galdesten, inflammation i bugspytkirtlen og forbigående hjertebanken. Du skal ikke bruge dem hvis du har haft medullær skjoldbruskkirtelkræft eller type 1-diabetes.',
          'Behandling kræver recept fra læge, typisk en almen praktiserende læge, endokrinolog eller speciallæge i fedmemedicin. Man skal typisk have BMI over 30, eller over 27 med følgesygdomme som type 2-diabetes eller forhøjet blodtryk.',
        ],
      },
      {
        heading: 'Er det fremtidens løsning?',
        body: [
          'De nye GLP-1 lægemidler har revolutioneret behandlingen af svær overvægt. De giver vægttab der tidligere kun kunne opnås ved fedmekirurgi. Endnu nyere præparater som Retatrutide (tredobbelt hormonvirkning) er i klinisk afprøvning og lover vægttab op mod 24 %.',
        ],
      },
    ],
  },
  {
    slug: 'wegovy-tilskud-danmark',
    category: 'Guides',
    title: 'Wegovy i Danmark - pris, tilskud og hvem kan få det?',
    excerpt: 'Wegovy kan give markant vægttab - men månedsprisen er høj hvis du betaler selv. Her er reglerne for tilskud og hvordan du får recept.',
    readMinutes: 4,
    sections: [
      {
        heading: 'Hvad koster Wegovy i 2026?',
        body: [
          'Fuld dosis Wegovy koster cirka 2.400-2.800 kr. per måned hvis du betaler selv. Det svarer til ca. 30.000 kr. for et års behandling. De lavere opstarts-doser er billigere, men de fleste trappes op til fuld dosis over 16 uger.',
          'Lægemiddelstyrelsen har fastsat en maksimalpris på apoteket, men priserne kan variere lidt mellem apoteker. Nogle gange er det billigere hos nethandelsapoteker med EU-godkendelse.',
        ],
      },
      {
        heading: 'Kan jeg få tilskud?',
        body: [
          'Fra 2024 er der mulighed for klausuleret tilskud til Wegovy i Danmark, men kun hvis du opfylder bestemte kriterier: BMI over 35 kombineret med type 2-diabetes, eller BMI over 40. Derudover kræves at du har forsøgt livsstilsændringer uden tilstrækkelig effekt.',
          'Tilskuddet dækker cirka 40-50 % af prisen og kræver ansøgning fra din læge til Lægemiddelstyrelsen. Godkendelsen er ikke automatisk - mange ansøgninger afvises. Din læge kan også vurdere, om en billigere GLP-1 off-label-behandling er et alternativ.',
        ],
      },
      {
        heading: 'Sådan får du recept',
        body: [
          'Start med din egen læge eller en almen praktiserende læge på video. Lægen vurderer om du opfylder kriterierne (BMI, helbredstilstand, tidligere vægttabsforsøg) og udskriver recept, hvis det er fagligt forsvarligt.',
          'Alternativt kan du søge en speciallæge i fedmemedicin eller endokrinologi, som har mere erfaring med opstart og monitorering. Behandlingen kræver løbende kontrol af vægt, blodtryk og eventuelle bivirkninger - typisk hver 4.-8. uge i starten.',
        ],
      },
      {
        heading: 'Hvad med sundhedsforsikring?',
        body: [
          'Sundhedsforsikringer dækker typisk IKKE vægttabsmedicin som Wegovy, selv ikke hos personer med svær overvægt. Dækningen angår oftest operationer, specialistbesøg og behandling af konkrete sygdomme, ikke langvarig vægttabsmedicin. Tjek din police, da der er undtagelser.',
        ],
      },
    ],
  },
  {
    slug: 'glp1-medicin-vaegttab-forventninger',
    category: 'Guides',
    title: 'Vægttab med GLP-1 medicin - hvad kan du realistisk forvente?',
    excerpt: 'GLP-1 vægttabsmedicin virker for de fleste, men resultater og oplevelse varierer. Her er hvad der typisk sker måned for måned.',
    readMinutes: 4,
    sections: [
      {
        heading: 'Måned 1-3: Opstart og bivirkninger',
        body: [
          'De første uger mærker mange kvalme, udmattelse og ændringer i appetit. Det er fordi lægen starter med en lav dosis og trapper op for at give kroppen tid til at vænne sig til medicinen. Vægttab i denne periode er typisk 2-4 kg.',
          'Appetitten falder gradvist, og du mærker hurtigere mæthed. Mange rapporterer et markant fald i "food noise" - de konstante tanker om mad forsvinder for mange brugere.',
        ],
      },
      {
        heading: 'Måned 3-6: Vægttabs-fasen',
        body: [
          'Når du er på fuld dosis, accelererer vægttabet. Typisk taber man 1-2 kg per uge i denne fase, hvis man samtidig spiser mere protein og bevæger sig regelmæssigt. Kropssammensætningen ændrer sig - også muskelmasse kan gå tabt, særligt uden styrketræning.',
          'Bivirkningerne aftager for de fleste. Nogle oplever stadig forstoppelse eller perioder med kvalme, som oftest lader sig håndtere med kostjusteringer.',
        ],
      },
      {
        heading: 'Måned 6-12: Plateau og vedligeholdelse',
        body: [
          'Vægttabet flader typisk ud efter 6-12 måneder. For de fleste stabiliseres vægten omkring 15-22 % under udgangsvægten, afhængigt af medicin og individ. Her begynder den svære del: at fastholde vægttabet på længere sigt.',
          'Studier viser, at personer der stopper behandlingen, typisk genvinder 50-70 % af vægttabet inden for et år. Derfor anbefales ofte langvarig behandling, evt. med nedsat dosis som vedligeholdelse.',
        ],
      },
      {
        heading: 'Hvad hvis du ikke taber dig?',
        body: [
          'Cirka 10-15 % af brugere er "non-responders" - de taber under 5 % af deres vægt på medicinen. Det kan skyldes genetiske faktorer, samtidig brug af andre medicintyper eller livsstilsfaktorer. Tal med din læge om at skifte præparat eller kombinere med andre tilgange.',
        ],
      },
    ],
  },
];

const ARTICLES_BY_SLUG = Object.fromEntries(ARTICLES.map((a) => [a.slug, a]));

// - Sådan virker det view -
const HowItWorksView = ({ onStart }) => (
  <main
    style={{
      maxWidth: 760,
      margin: '0 auto',
      padding: '48px 24px 80px',
    }}
  >
    <div style={{ textAlign: 'center', marginBottom: 48 }}>
      <h1
        className="serif"
        style={{
          fontSize: 44,
          lineHeight: 1.1,
          letterSpacing: '-0.015em',
          fontWeight: 400,
          color: c.textPrimary,
          margin: '0 0 14px',
        }}
      >
        Sådan virker Læge<span style={{ color: c.accent }}>.</span>
      </h1>
      <p
        style={{
          fontSize: 17,
          lineHeight: 1.55,
          color: c.textSecondary,
          maxWidth: 560,
          margin: '0 auto',
        }}
      >
        Vi hjælper dig hurtigere frem til den rette læge - offentlig eller privat - uden at du behøver at forstå sundhedssystemet på forhånd.
      </p>
    </div>

    <ol
      style={{
        listStyle: 'none',
        padding: 0,
        margin: 0,
        display: 'flex',
        flexDirection: 'column',
        gap: 24,
      }}
    >
      {[
        {
          n: '1',
          title: 'Beskriv hvad der er galt',
          body: 'Du fortæller sekretæren om dine symptomer med dine egne ord. Sekretæren stiller et par opfølgende spørgsmål, præcis som hvis du ringede til en klinik.',
        },
        {
          n: '2',
          title: 'Vi matcher dig med den rette løsning',
          body: 'AI-sekretæren analyserer dine symptomer og finder den rette speciallæge eller en almen praktiserende læge der kan hjælpe dig. Du får både offentlige og private muligheder sorteret efter ventetid og afstand.',
        },
        {
          n: '3',
          title: 'Vælg offentlig, privat eller video',
          body: 'Du ser pris, ventetid og placering for hver mulighed. Du kan booke direkte hos en privat speciallæge, få kontaktinfo til en offentlig klinik, eller tale med en almen praktiserende læge på video inden for få minutter.',
        },
        {
          n: '4',
          title: 'Få behandling - uden unødig ventetid',
          body: 'En video-læge kan vurdere din situation, udskrive recept, eller oprette en henvisning til det offentlige, hvis du har brug for en specialist. Du beslutter selv hvilken vej der passer dig bedst.',
        },
      ].map((s) => (
        <li
          key={s.n}
          style={{
            display: 'flex',
            gap: 20,
            padding: 20,
            background: c.surface,
            border: `1px solid ${c.border}`,
            borderRadius: 14,
            alignItems: 'flex-start',
          }}
        >
          <span
            className="serif"
            style={{
              flexShrink: 0,
              width: 44,
              height: 44,
              borderRadius: '50%',
              background: c.accentSoft,
              color: c.accent,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 22,
              fontWeight: 500,
              lineHeight: 1,
              fontStyle: 'italic',
            }}
            aria-hidden
          >
            {s.n}
          </span>
          <div style={{ flex: 1 }}>
            <h2
              className="serif"
              style={{
                margin: '0 0 6px',
                fontSize: 19,
                fontWeight: 500,
                color: c.textPrimary,
                letterSpacing: '-0.005em',
              }}
            >
              {s.title}
            </h2>
            <p
              style={{
                margin: 0,
                fontSize: 15,
                lineHeight: 1.55,
                color: c.textSecondary,
              }}
            >
              {s.body}
            </p>
          </div>
        </li>
      ))}
    </ol>

    <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center' }}>
      <button
        onClick={onStart}
        style={{
          background: c.accent,
          color: '#fff',
          border: 0,
          padding: '14px 28px',
          borderRadius: 999,
          fontSize: 15,
          fontWeight: 500,
          cursor: 'pointer',
          transition: 'background 160ms ease',
        }}
        onMouseEnter={(e) => (e.currentTarget.style.background = c.accentHover)}
        onMouseLeave={(e) => (e.currentTarget.style.background = c.accent)}
      >
        Start din samtale nu
      </button>
    </div>
  </main>
);

// - Artikel-visning -
const ArticleView = ({ article, onBack, onOpenArticle }) => {
  if (!article) return null;
  const related = ARTICLES.filter((a) => a.slug !== article.slug && a.category === article.category).slice(0, 3);
  return (
    <main
      style={{
        maxWidth: 720,
        margin: '0 auto',
        padding: '32px 24px 80px',
      }}
    >
      <button
        onClick={onBack}
        className="focus-ring"
        style={{
          background: 'none',
          border: 0,
          color: c.textSecondary,
          fontSize: 14,
          padding: 4,
          margin: '0 0 20px -4px',
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
          cursor: 'pointer',
        }}
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M19 12H5M11 18l-6-6 6-6" />
        </svg>
        Alle artikler
      </button>

      <div
        style={{
          fontSize: 11,
          letterSpacing: '0.12em',
          textTransform: 'uppercase',
          color: c.accent,
          fontWeight: 500,
          marginBottom: 12,
        }}
      >
        {article.category} · {article.readMinutes} min læsning
      </div>
      <h1
        className="serif"
        style={{
          fontSize: 34,
          lineHeight: 1.15,
          letterSpacing: '-0.01em',
          fontWeight: 400,
          color: c.textPrimary,
          margin: '0 0 16px',
        }}
      >
        {article.title}
      </h1>
      <p
        style={{
          fontSize: 18,
          lineHeight: 1.55,
          color: c.textSecondary,
          margin: '0 0 32px',
          fontWeight: 450,
        }}
      >
        {article.excerpt}
      </p>

      {article.sections.map((section) => (
        <section key={section.heading} style={{ marginBottom: 28 }}>
          <h2
            className="serif"
            style={{
              fontSize: 22,
              fontWeight: 500,
              margin: '0 0 12px',
              color: c.textPrimary,
              letterSpacing: '-0.005em',
            }}
          >
            {section.heading}
          </h2>
          {section.body.map((para, i) => (
            <p
              key={i}
              style={{
                margin: '0 0 12px',
                fontSize: 16,
                lineHeight: 1.65,
                color: c.textPrimary,
              }}
            >
              {para}
            </p>
          ))}
        </section>
      ))}

      <div
        style={{
          marginTop: 32,
          padding: 20,
          background: c.accentSoft,
          borderRadius: 14,
          textAlign: 'center',
        }}
      >
        <p style={{ margin: '0 0 14px', fontSize: 15, color: c.textPrimary }}>
          Har du brug for at finde en læge? Beskriv dine symptomer, så finder vores AI-sekretær den rette.
        </p>
        <button
          onClick={onBack}
          style={{
            background: c.accent,
            color: '#fff',
            border: 0,
            padding: '10px 20px',
            borderRadius: 999,
            fontSize: 14,
            fontWeight: 500,
            cursor: 'pointer',
          }}
        >
          Start på Læge.dk
        </button>
      </div>

      {related.length > 0 && (
        <div style={{ marginTop: 48 }}>
          <h3
            style={{
              fontSize: 11,
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
              color: c.textTertiary,
              fontWeight: 500,
              margin: '0 0 16px',
            }}
          >
            Relaterede artikler
          </h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {related.map((a) => (
              <button
                key={a.slug}
                onClick={() => onOpenArticle(a.slug)}
                className="focus-ring"
                style={{
                  textAlign: 'left',
                  background: c.surface,
                  border: `1px solid ${c.border}`,
                  borderRadius: 12,
                  padding: 16,
                  cursor: 'pointer',
                  fontFamily: 'inherit',
                }}
              >
                <div
                  className="serif"
                  style={{
                    fontSize: 17,
                    fontWeight: 500,
                    color: c.textPrimary,
                    marginBottom: 4,
                  }}
                >
                  {a.title}
                </div>
                <div style={{ fontSize: 14, color: c.textSecondary, lineHeight: 1.4 }}>
                  {a.excerpt}
                </div>
              </button>
            ))}
          </div>
        </div>
      )}
    </main>
  );
};

// Footeren leveres server-side af app/layout.tsx (components/SiteFooter.tsx).

// - prototype view switcher -
const ViewSwitcher = ({ view, setView }) => {
  const views = [
    { id: 'landing', label: 'start' },
    { id: 'conversation', label: 'samtale' },
    { id: 'escalation', label: 'eskalering' },
    { id: 'clinic', label: 'klinik' },
    { id: 'how', label: 'how' },
    { id: 'mitid', label: 'mitid' },
  ];
  return (
    <div
      style={{
        position: 'fixed',
        bottom: 16,
        left: '50%',
        transform: 'translateX(-50%)',
        background: c.textPrimary,
        borderRadius: 999,
        padding: 4,
        display: 'flex',
        gap: 2,
        zIndex: 50,
        boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
      }}
    >
      <span
        className="view-switcher-prefix"
        style={{
          fontSize: 10,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          color: c.textTertiary,
          padding: '7px 10px 7px 14px',
          alignSelf: 'center',
        }}
      >
        prototype
      </span>
      {views.map((v) => (
        <button
          key={v.id}
          onClick={() => setView(v.id)}
          className="view-switcher-btn"
          style={{
            background: view === v.id ? c.bg : 'transparent',
            color: view === v.id ? c.textPrimary : c.bg,
            border: 0,
            borderRadius: 999,
            padding: '6px 14px',
            fontSize: 12,
            fontWeight: 500,
            transition: 'all 140ms ease',
          }}
        >
          {v.label}
        </button>
      ))}
    </div>
  );
};

// - app -
function LaegeDK() {
  const initialSeed = (() => {
    if (typeof window === 'undefined') return 'jeg har brug for en hjertelæge i københavn';
    const params = new URLSearchParams(window.location.search);
    const q = params.get('q');
    return q && q.trim() ? q.trim() : 'jeg har brug for en hjertelæge i københavn';
  })();
  const initialView = (typeof window !== 'undefined'
    && new URLSearchParams(window.location.search).get('q'))
    ? 'conversation'
    : 'landing';

  const [view, setView] = useState(initialView);
  const [conversationSeed, setConversationSeed] = useState(initialSeed);
  const [selectedClinic, setSelectedClinic] = useState(sampleBehandlere[0]);
  const [currentArticleSlug, setCurrentArticleSlug] = useState(ARTICLES[0].slug);

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [view, currentArticleSlug]);

  const handleSend = (text) => {
    setConversationSeed(text);
    setView('conversation');
  };

  const handleSelectBehandler = (b) => {
    setSelectedClinic(b);
    setView('clinic');
  };

  const handleOpenArticle = (slug) => {
    setCurrentArticleSlug(slug);
    setView('article');
  };

  const goHome = () => setView('landing');
  const goHow = () => setView('how');

  return (
    <div style={{ minHeight: '100vh', background: c.bg, fontFamily: sans, color: c.textPrimary, display: 'flex', flexDirection: 'column' }}>
      <GlobalStyles />
      <TopBar onHome={goHome} onMitID={() => setView('mitid')} onHow={goHow} />

      <div style={{ flex: 1 }}>
        {view === 'landing' && (
          <LandingView
            onSend={handleSend}
            onChip={() => {}}
          />
        )}
        {view === 'how' && (
          <HowItWorksView onStart={goHome} />
        )}
        {view === 'article' && (
          <ArticleView
            article={ARTICLES_BY_SLUG[currentArticleSlug]}
            onBack={goHome}
            onOpenArticle={handleOpenArticle}
          />
        )}
        {view === 'mitid' && (
          <MitIDView onBack={goHome} />
        )}
        {view === 'conversation' && (
          <ConversationView
            key={conversationSeed + 'normal'}
            initialMessage={conversationSeed}
            onBack={goHome}
            onSelectBehandler={handleSelectBehandler}
          />
        )}
        {view === 'escalation' && (
          <ConversationView
            key="escalation"
            initialMessage="jeg har voldsomme smerter i brystet der stråler ud i venstre arm"
            onBack={goHome}
            onSelectBehandler={handleSelectBehandler}
            escalation
          />
        )}
        {view === 'clinic' && (
          <ClinicDetailView
            clinic={selectedClinic}
            onBack={() => setView('conversation')}
          />
        )}
      </div>

      <ViewSwitcher view={view} setView={setView} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<LaegeDK />);