// KineSuite landing — phone mockup (aligned with app UI: index.tsx + EvaluationCard).

// Matches assets/logo-mark.svg and app LogoMark (AnimatedMark assembly @ t=1).
function LandingMark({ size = 28, fg = '#fff' }) {
  return (
    <svg viewBox="0 0 432 432" width={size} height={size} style={{ display: 'block' }} aria-hidden="true">
      <g transform="translate(20 10)" fill="none" stroke={fg} strokeLinecap="round" strokeLinejoin="round">
        <line x1="100" y1="332" x2="100" y2="80" strokeWidth="32" />
        <line x1="100" y1="332" x2="293.04" y2="170.02" strokeWidth="32" />
        <path d="M 100 194 A 138 138 0 0 1 205.71 243.30" strokeWidth="16" />
        <line x1="100" y1="206" x2="100" y2="182" strokeWidth="14.4" />
        <line x1="127.27" y1="208.99" x2="132.47" y2="185.56" strokeWidth="14.4" />
        <line x1="153.25" y1="217.81" x2="163.39" y2="196.05" strokeWidth="14.4" />
        <line x1="176.70" y1="232.04" x2="191.31" y2="213.00" strokeWidth="14.4" />
        <line x1="196.52" y1="251.01" x2="214.91" y2="235.58" strokeWidth="14.4" />
        <circle cx="100" cy="332" r="23.04" fill={fg} stroke="none" />
      </g>
    </svg>
  );
}

/** App icon (favicon.svg) — nav, footer, anywhere the full tile is shown. */
function LandingBrandIcon({ size = 32 }) {
  return (
    <img
      src="assets/favicon.svg"
      alt=""
      width={size}
      height={size}
      className="brand-icon"
      decoding="async"
    />
  );
}

function LandingWordmark({ size = 22, light = false }) {
  return (
    <span style={{
      fontFamily: 'var(--font-sans)',
      fontSize: size,
      letterSpacing: '-0.025em',
      display: 'inline-flex',
      alignItems: 'baseline',
      lineHeight: 1,
    }}>
      <span style={{ fontWeight: 800, color: light ? '#FFFFFF' : 'var(--ink)' }}>Kine</span>
      <span style={{ fontWeight: 500, color: light ? 'var(--primary-100)' : 'var(--primary)' }}>Suite</span>
    </span>
  );
}

function LandingPhone({ width = 360, children }) {
  const height = Math.round(width * (852 / 392));
  const radius = Math.round(width * 0.115);
  const innerRadius = radius - 8;
  return (
    <div style={{
      width, height,
      background: '#0B0D11',
      borderRadius: radius,
      padding: 8,
      position: 'relative',
      boxShadow:
        '0 1px 0 rgba(255,255,255,0.04) inset, ' +
        '0 0 0 1px rgba(0,0,0,0.5), ' +
        '0 40px 80px -20px rgba(15, 25, 50, 0.35), ' +
        '0 18px 32px -12px rgba(15, 25, 50, 0.25)',
    }}>
      <div style={{
        width: '100%', height: '100%',
        background: 'var(--paper)',
        borderRadius: innerRadius,
        overflow: 'hidden',
        position: 'relative',
      }}>
        <div style={{
          position: 'absolute',
          top: 10, left: '50%', transform: 'translateX(-50%)',
          width: Math.round(width * 0.32),
          height: Math.round(width * 0.085),
          background: '#0B0D11',
          borderRadius: 999,
          zIndex: 3,
        }} />
        <div style={{
          position: 'absolute',
          top: 0, left: 0, right: 0,
          height: 44,
          paddingTop: 18,
          paddingLeft: 28, paddingRight: 28,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          fontFamily: 'var(--font-sans)',
          fontSize: 13,
          fontWeight: 600,
          color: 'var(--ink)',
          zIndex: 2,
          pointerEvents: 'none',
        }}>
          <span>9:41</span>
          <span style={{ width: 16, height: 9, border: '1px solid currentColor', borderRadius: 2, opacity: 0.85 }} />
        </div>
        {children}
      </div>
    </div>
  );
}

function LandingCatalogScreen({ lang }) {
  const visible = LANDING_SCALES.filter((s) =>
    ['berg', 'tug', 'womac', 'tm6m', 'moca'].includes(s.id)
  );
  const chips = lang === 'es'
    ? [
        { label: 'Todas', active: true },
        { label: 'Neurología', cat: 'neuro' },
        { label: 'MSK', cat: 'msk' },
        { label: 'Cardio', cat: 'cardio' },
      ]
    : [
        { label: 'All', active: true },
        { label: 'Neurology', cat: 'neuro' },
        { label: 'MSK', cat: 'msk' },
        { label: 'Cardio', cat: 'cardio' },
      ];

  return (
    <div style={{
      position: 'absolute', inset: 0,
      paddingTop: 56,
      display: 'flex', flexDirection: 'column',
      background: 'var(--paper)',
    }}>
      {/* Header — matches app/(tabs)/index.tsx */}
      <div style={{ padding: '12px 20px 10px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <LandingBrandIcon size={36} />
          <div>
            <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.4px', color: 'var(--ink)', lineHeight: 1.1 }}>
              {lang === 'es' ? 'Evaluaciones' : 'Assessments'}
            </div>
            <div style={{ fontSize: 11, color: 'var(--gray-500)', lineHeight: 1.35, marginTop: 2 }}>
              {LANDING_CATALOG_TOTAL} {lang === 'es' ? 'escalas validadas' : 'validated scales'}
            </div>
          </div>
        </div>
        <div style={{
          width: 36, height: 36, borderRadius: 18,
          background: 'var(--gray-100)', border: '1px solid var(--gray-300)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 13, fontWeight: 700, color: 'var(--gray-500)',
        }}>
          K
        </div>
      </div>

      {/* Search — height 42, radius 10 */}
      <div style={{ padding: '0 20px 8px' }}>
        <div style={{
          height: 42, borderRadius: 10,
          background: 'var(--gray-100)',
          border: '1px solid transparent',
          display: 'flex', alignItems: 'center',
          padding: '0 12px', gap: 8,
          fontSize: 14, color: 'var(--gray-500)',
        }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
            <circle cx="7" cy="7" r="5" />
            <path d="M11 11l3 3" strokeLinecap="round" />
          </svg>
          <span>{lang === 'es' ? 'Buscar escala, ítem, autor…' : 'Search scale, item, author…'}</span>
        </div>
      </div>

      {/* Category chips */}
      <div style={{ padding: '0 20px 10px', display: 'flex', gap: 8, overflow: 'hidden' }}>
        {chips.map((c, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 6,
            padding: '7px 12px', borderRadius: 999,
            border: `1px solid ${c.active ? 'var(--primary)' : 'var(--gray-300)'}`,
            background: c.active ? 'var(--primary-100)' : 'var(--paper)',
            whiteSpace: 'nowrap',
          }}>
            {c.cat && (
              <span style={{
                width: 7, height: 7, borderRadius: 4,
                background: `var(--cat-${c.cat})`,
              }} />
            )}
            <span style={{
              fontSize: 12, fontWeight: 600,
              color: c.active ? 'var(--primary)' : 'var(--gray-500)',
            }}>
              {c.label}
            </span>
          </div>
        ))}
      </div>

      {/* Scale list — EvaluationCard layout */}
      <div style={{
        padding: '0 20px 8px',
        display: 'flex', flexDirection: 'column', gap: 10,
        overflow: 'hidden', flex: 1,
      }}>
        {visible.map((scale) => (
          <LandingScaleCard key={scale.id} scale={scale} lang={lang} />
        ))}
      </div>

      {/* Tab bar — Evaluaciones · Pacientes · Historial · Ajustes */}
      <div style={{
        borderTop: '1px solid var(--gray-300)',
        background: 'var(--paper)',
        padding: '6px 0 22px',
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
      }}>
        {[
          { label: lang === 'es' ? 'Evaluaciones' : 'Assessments', icon: 'grid', active: true },
          { label: lang === 'es' ? 'Pacientes' : 'Patients', icon: 'people' },
          { label: lang === 'es' ? 'Historial' : 'History', icon: 'time' },
          { label: lang === 'es' ? 'Ajustes' : 'Settings', icon: 'settings' },
        ].map((tab, i) => (
          <div key={i} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
            color: tab.active ? 'var(--primary)' : 'var(--gray-500)',
          }}>
            <TabIcon kind={tab.icon} />
            <span style={{ fontSize: 10, fontWeight: 600 }}>{tab.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function TabIcon({ kind }) {
  const c = 'currentColor';
  const stroke = { fill: 'none', stroke: c, strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'grid') return (
    <svg width="22" height="22" viewBox="0 0 24 24" {...stroke}>
      <rect x="3" y="3" width="7" height="7" rx="1.5" />
      <rect x="14" y="3" width="7" height="7" rx="1.5" />
      <rect x="3" y="14" width="7" height="7" rx="1.5" />
      <rect x="14" y="14" width="7" height="7" rx="1.5" />
    </svg>
  );
  if (kind === 'people') return (
    <svg width="22" height="22" viewBox="0 0 24 24" {...stroke}>
      <circle cx="9" cy="8" r="3" />
      <path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6" />
      <path d="M16 11h5M18.5 8.5v5" />
    </svg>
  );
  if (kind === 'time') return (
    <svg width="22" height="22" viewBox="0 0 24 24" {...stroke}>
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7v5l3 2" />
    </svg>
  );
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" {...stroke}>
      <circle cx="12" cy="12" r="3" />
      <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
    </svg>
  );
}

function LandingScaleCard({ scale, lang }) {
  const catColor = `var(--cat-${scale.cat})`;
  const name = lang === 'es' ? scale.name_es : scale.name_en;
  const tags = (lang === 'es' ? scale.tags_es : scale.tags_en).slice(0, 3);
  const cat = LANDING_CAT_LABEL[scale.cat][lang];

  return (
    <div style={{
      background: 'var(--paper)',
      border: '1px solid var(--gray-300)',
      borderRadius: 10,
      padding: '14px 16px',
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 7, height: 7, borderRadius: 4, background: catColor }} />
          <span style={{
            fontSize: 9.5, fontWeight: 600, letterSpacing: '1.2px',
            color: 'var(--gray-500)', textTransform: 'uppercase',
          }}>
            {cat}
          </span>
        </div>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M6 4l4 4-4 4" stroke="var(--gray-500)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>
      <div>
        <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: '-0.25px', color: 'var(--ink)', lineHeight: 1.25 }}>
          {name}
        </div>
        <div style={{ fontSize: 12, color: 'var(--gray-500)', marginTop: 2 }}>
          {scale.items} {lang === 'es' ? 'ítems' : 'items'}
          {scale.timed ? ` · ${lang === 'es' ? 'Cronometrada' : 'Timed'}` : ''}
        </div>
      </div>
      {tags.length > 0 && (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {tags.map((tg) => (
            <span key={tg} style={{
              background: 'var(--primary-100)',
              borderRadius: 4,
              padding: '3px 8px',
              fontSize: 11, fontWeight: 600, color: 'var(--primary)',
            }}>
              #{tg}
            </span>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, {
  LandingMark, LandingBrandIcon, LandingWordmark, LandingPhone, LandingCatalogScreen,
});