/* ===== Bridge Resources — shared components & icons ===== */

const FEATURED = {
  id: 'cheatsheet',
  badge: 'Start here · Cheat sheet',
  title: 'The 7-Part Prompt Formula',
  desc: 'The core recipe for great prompts — plus a finished example and a fill-in-the-blank template. The foundation everything else builds on.',
  meta: '2 pages · PDF',
  file: 'assets/Bridge-AI-Prompt-Cheat-Sheet.pdf',
  pages: ['assets/cheatsheet-p1.png', 'assets/cheatsheet-p2.png'],
};

const LIBRARY = [
  { id:'frontdesk', n:'01', title:'Front Desk',            desc:'Scheduling, phones, reminders, and first impressions.',      file:'assets/Bridge-Front-Desk-Prompts.pdf',            cover:'assets/cover-Bridge-Front-Desk-Prompts.png' },
  { id:'hygiene',   n:'02', title:'Hygiene',               desc:'Patient education and home-care that actually sticks.',       file:'assets/Bridge-Hygiene-Prompts.pdf',               cover:'assets/cover-Bridge-Hygiene-Prompts.png' },
  { id:'tc',        n:'03', title:'Treatment Coordinator', desc:'Case presentation, financing, and gentle follow-up.',        file:'assets/Bridge-Treatment-Coordinator-Prompts.pdf', cover:'assets/cover-Bridge-Treatment-Coordinator-Prompts.png' },
  { id:'om',        n:'04', title:'Office Manager',        desc:'Team comms, scheduling, and the hard conversations.',        file:'assets/Bridge-Office-Manager-Prompts.pdf',        cover:'assets/cover-Bridge-Office-Manager-Prompts.png' },
  { id:'marketing', n:'05', title:'Marketing',             desc:'Social, reviews, and patient communication that converts.',  file:'assets/Bridge-Marketing-Prompts.pdf',             cover:'assets/cover-Bridge-Marketing-Prompts.png' },
  { id:'doctor',    n:'06', title:'Doctor',                desc:'Translate clinical reality into clarity and confidence.',     file:'assets/Bridge-Doctor-Prompts.pdf',                cover:'assets/cover-Bridge-Doctor-Prompts.png' },
].map(r => ({ ...r, badge:'Role '+r.n, meta:'5 prompts · PDF' }));

/* ---------- icons (simple line glyphs) ---------- */
const Ic = {
  lock: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="4" y="10.5" width="16" height="10" rx="2.5"/><path d="M8 10.5V7a4 4 0 0 1 8 0v3.5"/></svg>),
  check: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12.5l4.5 4.5L19 7"/></svg>),
  download: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3v12"/><path d="M7 11l5 5 5-5"/><path d="M5 20h14"/></svg>),
  eye: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z"/><circle cx="12" cy="12" r="3"/></svg>),
  arrow: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg>),
  close: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M6 6l12 12M18 6L6 18"/></svg>),
  mail: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M4 7l8 6 8-6"/></svg>),
  chevL: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M15 5l-7 7 7 7"/></svg>),
  chevR: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M9 5l7 7-7 7"/></svg>),
  spark: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M18 6l-2.5 2.5M8.5 15.5L6 18"/></svg>),
};

/* ---------- logo ---------- */
function Logo({ white = false, height = 34 }) {
  return (
    <img
      src={white ? 'assets/BD-logo-white.png' : 'assets/BD-logo.png'}
      alt="Bridge Dental"
      style={{ height, width: 'auto', display: 'block' }}
    />
  );
}

/* ---------- small chip ---------- */
function Chip({ children, tone = 'grad', style }) {
  const tones = {
    grad: { background: 'linear-gradient(118deg,rgba(19,145,204,.12),rgba(106,44,143,.12))', color: 'var(--blue-deep)' },
    plain:{ background: 'var(--bg-soft)', color: 'var(--muted)' },
    teal: { background: 'rgba(30,77,67,.10)', color: 'var(--teal)' },
  };
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:7,
      fontSize:12, fontWeight:700, letterSpacing:'.10em', textTransform:'uppercase',
      padding:'6px 12px', borderRadius:999, ...tones[tone], ...style,
    }}>{children}</span>
  );
}

/* ---------- gradient button ---------- */
function GButton({ children, onClick, type='button', full, disabled, loading, kind='solid', style, ...rest }) {
  const [hover, setHover] = React.useState(false);
  const base = {
    display:'inline-flex', alignItems:'center', justifyContent:'center', gap:9,
    fontFamily:'inherit', fontSize:16, fontWeight:700, cursor: disabled?'default':'pointer',
    padding:'14px 24px', borderRadius:13, border:'none', width: full?'100%':'auto',
    transition:'transform .15s ease, box-shadow .2s ease, opacity .2s ease',
    opacity: disabled?.55:1, transform: hover && !disabled ? 'translateY(-1px)':'none',
  };
  const kinds = {
    solid: { background:'var(--grad)', color:'#fff', boxShadow: hover && !disabled ? '0 14px 30px rgba(50,70,150,.32)' : '0 8px 20px rgba(50,70,150,.22)' },
    ghost: { background:'#fff', color:'var(--ink)', border:'1.5px solid var(--line)', boxShadow: hover?'var(--shadow-sm)':'none' },
  };
  return (
    <button type={type} onClick={onClick} disabled={disabled}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      className="focus-ring" style={{ ...base, ...kinds[kind], ...style }} {...rest}>
      {loading && <span className="spin" style={{ width:16, height:16, border:'2.5px solid rgba(255,255,255,.5)', borderTopColor:'#fff', borderRadius:'50%' }} />}
      {children}
    </button>
  );
}

Object.assign(window, { FEATURED, LIBRARY, Ic, Logo, Chip, GButton });