// cs/shared.jsx — shared bits for the MedHelix coming-soon variations
// Brand lockup, launch eyebrow, email signup, trust chips, social + contact row.

function Brand({ light = false, height = 30 }) {
  const src = light ? window.MEDHELIX_LOGO_LIGHT : window.MEDHELIX_LOGO;
  return <img src={src} alt="MedHelix" style={{ height, width: 'auto', display: 'block' }} />;
}

function Mark({ size = 40 }) {
  return <img src={window.MEDHELIX_MARK} alt="" aria-hidden="true"
    style={{ width: size, height: 'auto', display: 'block' }} />;
}

// "Launching soon" eyebrow with a live pulsing dot
function LaunchEyebrow({ light = false, label = 'Launching soon' }) {
  return <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 9,
    padding: '7px 14px 7px 12px', borderRadius: 999,
    background: light ? 'rgba(255,255,255,0.06)' : 'var(--surface)',
    border: `1px solid ${light ? 'rgba(255,255,255,0.14)' : 'var(--line)'}`,
    boxShadow: light ? 'none' : '0 1px 2px rgba(14,22,34,0.04)',
  }}>
    <span style={{ position: 'relative', display: 'inline-flex', width: 8, height: 8 }}>
      <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--accent)', animation: 'pulse-ring 1.8s var(--ease) infinite' }} />
      <span style={{ position: 'relative', width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)' }} />
    </span>
    <span className="mono" style={{
      fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase',
      color: light ? 'rgba(250,250,247,0.82)' : 'var(--ink-soft)',
    }}>{label}</span>
  </div>;
}

// Email capture. variant: 'light' (on paper) | 'dark' (on ink) | 'accent'
function SignupForm({ variant = 'light', cta = 'Notify me', placeholder = 'you@practice.com', maxWidth = 440 }) {
  const [email, setEmail] = React.useState('');
  const [state, setState] = React.useState('idle'); // idle | error | done
  const dark = variant === 'dark';

  const submit = (e) => {
    e.preventDefault();
    const addr = email.trim();
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(addr);
    if (!ok) { setState('error'); return; }
    const subject = encodeURIComponent('Interested in MedHelix');
    const body = encodeURIComponent(
      `Hi MedHelix team,\n\nI'd like to be notified when MedHelix launches. Please keep me posted.\n\nMy email: ${addr}\n\nThanks!`
    );
    window.location.href = `mailto:info@medhelix.ai?subject=${subject}&body=${body}`;
    setState('done');
  };

  if (state === 'done') {
    return <div style={{ maxWidth, width: '100%' }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12, padding: '14px 18px', borderRadius: 14,
        background: dark ? 'rgba(78,138,92,0.16)' : 'var(--sage-tint)',
        border: `1px solid ${dark ? 'rgba(120,190,135,0.35)' : 'rgba(78,138,92,0.25)'}`,
      }}>
        <span style={{ width: 26, height: 26, borderRadius: '50%', background: 'var(--sage)', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M2.5 6.5 L 5.5 9.5 L 10.5 3.5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </span>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600, color: dark ? '#fff' : 'var(--ink)' }}>You're on the list.</div>
          <div className="body-xs" style={{ color: dark ? 'rgba(250,250,247,0.6)' : 'var(--muted)' }}>We'll reach out at {email.trim()} when we go live.</div>
        </div>
      </div>
    </div>;
  }

  return <form onSubmit={submit} noValidate style={{ maxWidth, width: '100%' }}>
    <div style={{
      display: 'flex', gap: 8, padding: 6, borderRadius: 999,
      background: dark ? 'rgba(255,255,255,0.06)' : 'var(--surface)',
      border: `1px solid ${state === 'error' ? 'var(--warm)' : dark ? 'rgba(255,255,255,0.16)' : 'var(--line-strong)'}`,
      boxShadow: dark ? 'none' : '0 1px 2px rgba(14,22,34,0.04)',
      transition: 'border-color .2s var(--ease)',
    }}>
      <input
        type="email" value={email} placeholder={placeholder}
        onChange={(e) => { setEmail(e.target.value); if (state === 'error') setState('idle'); }}
        style={{
          flex: 1, minWidth: 0, border: 'none', outline: 'none', background: 'transparent',
          padding: '10px 14px', fontSize: 15, fontFamily: 'var(--font-sans)',
          color: dark ? '#fff' : 'var(--ink)',
        }} />
      <button type="submit" className="btn btn--accent" style={{ flexShrink: 0 }}>
        {cta}<span className="btn-arrow">→</span>
      </button>
    </div>
    <div style={{ minHeight: 20, marginTop: 8, paddingLeft: 16 }}>
      {state === 'error'
        ? <span className="body-xs" style={{ color: 'var(--warm)' }}>Please enter a valid email address.</span>
        : <span className="body-xs" style={{ color: dark ? 'rgba(250,250,247,0.45)' : 'var(--faint)' }}>Be first to know when MedHelix goes live. No spam.</span>}
    </div>
  </form>;
}

// Small trust chips (HIPAA / SOC 2)
function TrustChips({ light = false, items = ['HIPAA-compliant', 'SOC 2 Type II Controls', 'AI-native'] }) {
  return <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
    {items.map((t) => <span key={t} style={{
      display: 'inline-flex', alignItems: 'center', gap: 7,
      padding: '6px 12px', borderRadius: 999, fontSize: 12.5, fontWeight: 500,
      background: light ? 'rgba(255,255,255,0.05)' : 'var(--paper-tint)',
      border: `1px solid ${light ? 'rgba(255,255,255,0.12)' : 'var(--line)'}`,
      color: light ? 'rgba(250,250,247,0.8)' : 'var(--ink-muted)',
    }}>
      <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--sage)' }} />
      {t}
    </span>)}
  </div>;
}

// Contact email + LinkedIn
function ContactRow({ light = false, gap = 18 }) {
  const sub = light ? 'rgba(250,250,247,0.55)' : 'var(--muted)';
  const fg = light ? 'rgba(250,250,247,0.92)' : 'var(--ink-soft)';
  return <div style={{ display: 'flex', alignItems: 'center', gap, flexWrap: 'wrap' }}>
    <a href="mailto:info@medhelix.ai" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontSize: 14, fontWeight: 500, color: fg }}>
      <span style={{
        width: 30, height: 30, borderRadius: 8, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        background: light ? 'rgba(255,255,255,0.06)' : 'var(--surface)',
        border: `1px solid ${light ? 'rgba(255,255,255,0.14)' : 'var(--line)'}`,
      }}>
        <svg width="15" height="15" viewBox="0 0 16 16" fill="none" style={{ color: 'var(--accent)' }}>
          <rect x="2" y="3.5" width="12" height="9" rx="1.6" stroke="currentColor" strokeWidth="1.3" />
          <path d="M2.5 4.5 L 8 8.5 L 13.5 4.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </span>
      info@medhelix.ai
    </a>
    <span style={{ width: 1, height: 18, background: light ? 'rgba(255,255,255,0.14)' : 'var(--line-strong)' }} />
    <a href="https://www.linkedin.com/company/medhelix/" target="_blank" rel="noreferrer" aria-label="MedHelix on LinkedIn" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontSize: 14, fontWeight: 500, color: fg }}>
      <span style={{
        width: 30, height: 30, borderRadius: 8, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        background: light ? 'rgba(255,255,255,0.06)' : 'var(--surface)',
        border: `1px solid ${light ? 'rgba(255,255,255,0.14)' : 'var(--line)'}`,
      }}>
        <svg width="15" height="15" viewBox="0 0 16 16" fill="none" style={{ color: 'var(--accent)' }}>
          <rect x="1.5" y="1.5" width="13" height="13" rx="2.4" stroke="currentColor" strokeWidth="1.3" />
          <circle cx="4.6" cy="5" r="0.95" fill="currentColor" />
          <path d="M4.6 7 V 11.5 M 8 11.5 V 9 C 8 8 8.6 7.4 9.5 7.4 C 10.4 7.4 11 8 11 9 V 11.5 M 8 7.2 V 11.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
        </svg>
      </span>
      LinkedIn
    </a>
  </div>;
}

Object.assign(window, { Brand, Mark, LaunchEyebrow, SignupForm, TrustChips, ContactRow });