// Cover.jsx — light medical-blue landing. The "link you share each morning."
// Motif: scattered fragments at the base resolve into alignment along a clinical
// axis, ending at a single node — what an orthopaedic surgeon restores.
const { useState: useStateCover, useEffect: useEffectCover } = React;

function Cover({ onStart, onStaffLogin }) {
  const T = window.TOK, B = window.BRAND, UI = window.UI;
  const [drawn, setDrawn] = useStateCover(false);
  useEffectCover(() => { const t = setTimeout(() => setDrawn(true), 100); return () => clearTimeout(t); }, []);

  const N = 11, topY = 96, botY = 460, cx = 152, barW = 74;
  const bars = Array.from({ length: N }, (_, i) => {
    const p = i / (N - 1);
    const amp = Math.pow(1 - p, 1.25);
    return {
      x: cx + Math.sin(i * 1.9 + 0.6) * 54 * amp,
      y: botY - i * ((botY - topY) / (N - 1)),
      rot: Math.sin(i * 1.9 + 1.3) * 18 * amp,
      p,
    };
  });

  return (
    <div style={{ height: '100%', position: 'relative', overflow: 'hidden', fontFamily: "'Hanken Grotesk', sans-serif",
      background: 'linear-gradient(176deg, #FFFFFF 0%, #EFF6FD 46%, #E3EEFB 100%)' }}>
      {/* soft clinical glows */}
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(80% 50% at 78% 12%, rgba(255,255,255,0.9), transparent 60%), radial-gradient(90% 60% at 18% 96%, rgba(28,119,206,0.10), transparent 60%)' }} />

      {/* faint concentric range-of-motion rings */}
      <svg viewBox="0 0 402 874" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {[170, 250, 340, 440].map((r, i) => (
          <circle key={i} cx="201" cy="300" r={r} fill="none" stroke={T.accent} strokeWidth="1" opacity={0.08 - i * 0.014} />
        ))}
      </svg>

      {/* the alignment motif */}
      <svg viewBox="0 0 304 520" style={{ position: 'absolute', top: '10%', left: '50%', transform: 'translateX(-50%)', height: '57%', width: 'auto', overflow: 'visible' }}>
        {/* clinical axis */}
        <line x1={cx} y1="58" x2={cx} y2="468" stroke={T.accent} strokeWidth="1.5" strokeDasharray="1 8" strokeLinecap="round"
          opacity={drawn ? 0.22 : 0} style={{ transition: 'opacity .8s ease .3s' }} />
        {/* fragments */}
        {bars.map((b, i) => {
          const isTop = b.p > 0.74;
          return (
            <rect key={i} x={b.x - barW / 2} y={b.y - 3} width={barW} height="6" rx="3"
              fill={isTop ? T.accent : T.inkSoft}
              transform={`rotate(${drawn ? b.rot : b.rot * 1.6} ${b.x} ${b.y})`}
              style={{
                opacity: drawn ? (0.26 + 0.74 * b.p) : 0,
                transform: drawn ? 'translateY(0)' : 'translateY(16px)',
                transition: `opacity .7s ease ${i * 70}ms, transform .7s cubic-bezier(.5,.02,.2,1) ${i * 70}ms`,
              }} />
          );
        })}
        {/* apex node */}
        <circle cx={cx} cy="58" r="7" fill={T.accent}
          style={{ opacity: drawn ? 1 : 0, transform: drawn ? 'scale(1)' : 'scale(0)', transformOrigin: `${cx}px 58px`, transition: 'all .5s ease 1s' }} />
        <circle cx={cx} cy="58" r="15" fill="none" stroke={T.accent} strokeWidth="1.5"
          style={{ opacity: drawn ? 0.4 : 0, transition: 'opacity .6s ease 1.2s' }} />
      </svg>

      {/* top headline (centered) + staff login button (pinned right) */}
      <div style={{ position: 'absolute', top: 58, left: 24, right: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 42 }}>
        <span style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: 2, color: T.muted, textTransform: 'uppercase', textAlign: 'center', whiteSpace: 'nowrap' }}>{B.caption}</span>
        <button onClick={onStaffLogin} title="Staff login" style={{ position: 'absolute', right: 0, top: 0, width: 42, height: 42, borderRadius: '50%', border: `1.5px solid ${T.line}`, background: 'rgba(255,255,255,0.7)', backdropFilter: 'blur(6px)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: T.accent, flexShrink: 0 }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="4" y="10" width="16" height="11" rx="2.4" stroke="currentColor" strokeWidth="1.9"/><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="currentColor" strokeWidth="1.9"/></svg>
        </button>
      </div>

      {/* lower content */}
      <div style={{ position: 'absolute', left: 32, right: 32, bottom: 'calc(env(safe-area-inset-bottom) + 44px)' }}>
        <div style={{ height: 1, background: T.line, marginBottom: 24 }} />
        <div style={{ fontSize: 13, color: T.muted, marginBottom: 8, letterSpacing: 0.2 }}>{B.doctor}</div>
        <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 54, lineHeight: 0.96, color: T.ink, letterSpacing: -0.5 }}>
          Tawfiq's<br />Ortho Care
        </div>
        <div style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontSize: 21, color: T.accentDeep, marginTop: 12, letterSpacing: 0.1 }}>
          {UI.tagline}
        </div>

        <button onClick={onStart} style={{
          marginTop: 26, width: '100%', height: 64, cursor: 'pointer', border: 'none', borderRadius: 18,
          background: T.accent, color: '#fff', fontFamily: 'inherit', fontSize: 17, fontWeight: 600, letterSpacing: 0.2,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 10px 0 26px',
          boxShadow: '0 16px 34px rgba(28,119,206,0.34)',
        }}>
          <span>{UI.begin}</span>
          <span style={{ width: 44, height: 44, borderRadius: 14, background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </span>
        </button>
      </div>
    </div>
  );
}

window.Cover = Cover;