// components.jsx — Shared components for MCR Group MD website
// Exports via window: SiteNav, SiteFooter, SERVICES, SPECIALTIES, DashboardMockup, AccentRule

const { useState, useEffect, useRef } = React;

const SERVICES = [
  {
    slug: 'service-rcm.html',
    title: 'End-to-End RCM',
    icon: 'workflow',
    color: 'navy',
    tagline: 'Full-cycle revenue infrastructure.',
    desc: 'Complete management of your revenue cycle from eligibility verification through zero-balance reconciliation.',
  },
  {
    slug: 'service-coding.html',
    title: 'Medical Coding',
    icon: 'clipboard-list',
    color: 'green',
    tagline: 'Specialty-certified coding review.',
    desc: 'Specialty-specific coding with quarterly drift correction — eliminating silent downcoding losses.',
  },
  {
    slug: 'service-credentialing.html',
    title: 'Credentialing',
    icon: 'shield-check',
    color: 'teal',
    tagline: 'Payer enrollment, managed continuously.',
    desc: 'Payer enrollment, re-credentialing, and CAQH maintenance managed as an ongoing system.',
  },
  {
    slug: 'service-ar-recovery.html',
    title: 'AR Recovery',
    icon: 'trending-up',
    color: 'gold',
    tagline: 'Aged-bucket receivables reclaimed.',
    desc: 'Systematic aged-bucket workflows that recover receivables past 90 days before they expire.',
  },
  {
    slug: 'service-denials.html',
    title: 'Denial Management',
    icon: 'file-x',
    color: 'navy',
    tagline: 'Root-cause denial prevention.',
    desc: 'Root-cause analysis and compounding prevention loops that eliminate recurring denial patterns.',
  },
  {
    slug: 'service-patient-billing.html',
    title: 'Patient Billing',
    icon: 'receipt',
    color: 'green',
    tagline: 'Patient-facing billing, simplified.',
    desc: 'Clear, compliant patient statements and payment workflows that protect both revenue and relationships.',
  },
  {
    slug: 'service-eligibility.html',
    title: 'Eligibility & Pre-Auth',
    icon: 'activity',
    color: 'teal',
    tagline: 'Real-time verification at intake.',
    desc: 'Real-time eligibility verification and prior authorization woven into every patient encounter.',
  },
];

const SPECIALTIES = [
  {
    slug: 'orthopedics',
    name: 'Orthopedics',
    icon: 'bone',
    desc: 'High-volume surgical coding, implant billing, and modifier management for orthopedic groups.',
    challenges: ['Complex surgical modifiers', 'Implant cost tracking', 'Post-op global periods'],
  },
  {
    slug: 'cardiology',
    name: 'Cardiology',
    icon: 'heart-pulse',
    desc: 'Interventional and diagnostic cardiology billing across hospital and office settings.',
    challenges: ['Incident-to billing', 'Multiple procedure rules', 'Bundling requirements'],
  },
  {
    slug: 'primary-care',
    name: 'Primary Care',
    icon: 'stethoscope',
    desc: 'High-volume E/M coding, chronic care management, and value-based care optimization.',
    challenges: ['E/M level optimization', 'CCM & PCM billing', 'Preventive vs. diagnostic'],
  },
  {
    slug: 'oncology',
    name: 'Oncology',
    icon: 'microscope',
    desc: 'Drug administration coding, infusion billing, and prior authorization management for oncology practices.',
    challenges: ['Drug administration codes', 'Infusion hierarchies', 'Prior auth for biologics'],
  },
  {
    slug: 'neurology',
    name: 'Neurology',
    icon: 'brain',
    desc: 'Neuro diagnostic billing, EMG/EEG coding, and sleep medicine revenue optimization.',
    challenges: ['Diagnostic testing codes', 'Technical vs. professional', 'Telehealth billing'],
  },
  {
    slug: 'gastroenterology',
    name: 'Gastroenterology',
    icon: 'activity',
    desc: 'Procedural GI billing including colonoscopy, endoscopy, and infusion center management.',
    challenges: ['Modifier -53 / -52', 'Polyp removal coding', 'Anesthesia coordination'],
  },
  {
    slug: 'radiology',
    name: 'Radiology',
    icon: 'scan',
    desc: 'Imaging center and teleradiology billing with global / split billing expertise.',
    challenges: ['TC vs. PC splits', 'Order-to-bill workflow', 'Prior auth management'],
  },
  {
    slug: 'behavioral-health',
    name: 'Behavioral Health',
    icon: 'brain-circuit',
    desc: 'Psychiatric and therapy billing with parity law compliance and telehealth optimization.',
    challenges: ['Mental health parity', 'Telehealth documentation', 'Dual-diagnosis billing'],
  },
  {
    slug: 'physical-therapy',
    name: 'Physical Therapy',
    icon: 'dumbbell',
    desc: 'Therapy cap management, KX modifier compliance, and functional reporting for PT/OT/ST.',
    challenges: ['Therapy cap tracking', 'KX modifier compliance', 'Functional limitation codes'],
  },
  {
    slug: 'dermatology',
    name: 'Dermatology',
    icon: 'layers',
    desc: 'Surgical dermatology coding, destruction procedures, and cosmetic vs. medical distinction.',
    challenges: ['Destruction codes', 'Cosmetic exclusions', 'Pathology coordination'],
  },
  {
    slug: 'urology',
    name: 'Urology',
    icon: 'circle-dot',
    desc: 'Urological surgical billing, prostate care coding, and robotic procedure management.',
    challenges: ['Robotic-assisted codes', 'Global surgical packages', 'In-office lab billing'],
  },
  {
    slug: 'emergency-medicine',
    name: 'Emergency Medicine',
    icon: 'zap',
    desc: 'High-volume ED facility and physician billing with critical care and observation management.',
    challenges: ['Critical care thresholds', 'Observation vs. inpatient', 'Split/shared billing'],
  },
];

// ——— Accent Rule ———
const AccentRule = ({ dark = false }) => (
  <span style={{
    display: 'block',
    width: 48,
    height: 3,
    background: dark
      ? 'linear-gradient(90deg, #5ac6f1, #D49B28)'
      : 'linear-gradient(90deg, #1A204F, #5ac6f1)',
    margin: '8px 0 24px',
    border: 0,
  }} />
);

// ——— Dashboard Mockup ———
const DashboardMockup = () => {
  const card = {
    background: 'rgba(255,255,255,0.04)',
    border: '1px solid rgba(255,255,255,0.08)',
    borderRadius: 14,
    padding: 20,
    backdropFilter: 'blur(10px)',
  };
  const lbl = { fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 9, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#5ac6f1' };
  const met = { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 38, color: '#D49B28', lineHeight: 1, letterSpacing: '-0.02em', marginTop: 8 };
  const sub = { fontSize: 11, color: 'rgba(255,255,255,0.5)', marginTop: 6, fontWeight: 300 };
  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: 460 }}>
      <div style={{ position: 'absolute', inset: '-40px', background: 'radial-gradient(circle at 50% 50%, rgba(90,198,241,0.15) 0%, transparent 60%)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <div style={card}><div style={lbl}>AR Days</div><div style={met}>28</div><div style={sub}>↓ 46% vs baseline</div></div>
        <div style={card}><div style={lbl}>Clean Claims</div><div style={met}>98<span style={{ fontSize: 22, color: 'rgba(255,255,255,0.5)' }}>%</span></div><div style={sub}>first-pass</div></div>
        <div style={{ ...card, gridColumn: '1 / 3' }}>
          <div style={lbl}>Monthly Collections</div>
          <svg viewBox="0 0 380 80" style={{ width: '100%', marginTop: 14, display: 'block' }}>
            <defs>
              <linearGradient id="chartFill" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#5ac6f1" stopOpacity="0.35" />
                <stop offset="100%" stopColor="#5ac6f1" stopOpacity="0" />
              </linearGradient>
            </defs>
            <path d="M0,62 L40,55 L80,58 L120,48 L160,44 L200,38 L240,30 L280,28 L320,18 L380,10 L380,80 L0,80 Z" fill="url(#chartFill)" />
            <path d="M0,62 L40,55 L80,58 L120,48 L160,44 L200,38 L240,30 L280,28 L320,18 L380,10" fill="none" stroke="#5ac6f1" strokeWidth="1.5" />
            <circle cx="380" cy="10" r="3" fill="#D49B28" />
            <circle cx="380" cy="10" r="6" fill="#D49B28" fillOpacity="0.2" />
          </svg>
        </div>
        <div style={{ ...card, gridColumn: '1 / 3', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 20px' }}>
          {['Eligibility', 'Submit', 'Adjudicate', 'Post'].map((s, i, a) => (
            <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 1 }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: i === 3 ? '#D49B28' : '#5ac6f1', boxShadow: i === 3 ? '0 0 10px rgba(212,155,40,0.6)' : 'none' }} />
              <span style={{ fontSize: 10, fontWeight: 600, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.5px' }}>{s}</span>
              {i < a.length - 1 && <div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.08)', marginLeft: 4 }} />}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ——— Site Navigation ———
const SiteNav = ({ dark = true, current = '', basePath = '' }) => {
  const [scrolled, setScrolled] = useState(false);
  const [servicesOpen, setServicesOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const dropRef = useRef(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    const handler = (e) => {
      if (dropRef.current && !dropRef.current.contains(e.target)) setServicesOpen(false);
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const solidNav = !dark || scrolled;

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    padding: '16px 0',
    background: solidNav ? 'rgba(13,16,41,0.96)' : 'transparent',
    backdropFilter: solidNav ? 'blur(14px)' : 'none',
    transition: 'background 0.3s, backdrop-filter 0.3s',
    borderBottom: solidNav ? '1px solid rgba(255,255,255,0.06)' : 'none',
  };

  const linkStyle = {
    fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 14,
    letterSpacing: '0.3px', color: 'rgba(255,255,255,0.65)',
    textDecoration: 'none', transition: 'color 0.2s',
    background: 'none', border: 'none', cursor: 'pointer', padding: 0,
  };
  const activeLink = { ...linkStyle, color: '#fff' };

  const p = basePath;

  return (
    <nav style={navStyle}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40 }}>
        <a href={`${p}index.html`} style={{ textDecoration: 'none' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: '#fff', letterSpacing: '-0.3px', lineHeight: 1, whiteSpace: 'nowrap' }}>Medcore <span style={{ color: '#5ac6f1' }}>Revenue</span> Group</span>
        </a>
        <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
          {/* Services Dropdown */}
          <div ref={dropRef} style={{ position: 'relative' }}>
            <button
              style={current === 'services' ? activeLink : linkStyle}
              onClick={() => setServicesOpen(o => !o)}
              onMouseEnter={e => e.currentTarget.style.color = '#fff'}
              onMouseLeave={e => { if (!servicesOpen) e.currentTarget.style.color = 'rgba(255,255,255,0.65)'; }}
            >
              Services
              <svg style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: 'middle', transition: 'transform 0.2s', transform: servicesOpen ? 'rotate(180deg)' : 'none', display: 'inline-block' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6" /></svg>
            </button>
            {servicesOpen && (
              <div style={{
                position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)',
                marginTop: 12, width: 560, background: '#141939',
                border: '1px solid rgba(255,255,255,0.08)', borderRadius: 14,
                boxShadow: '0 24px 60px rgba(0,0,0,0.4)', padding: '8px 0',
                display: 'grid', gridTemplateColumns: '1fr 1fr',
              }}>
                <div style={{ padding: '12px 8px 4px 16px', gridColumn: '1 / 3' }}>
                  <span style={{ fontSize: 10, letterSpacing: '1.8px', textTransform: 'uppercase', fontWeight: 700, color: '#5ac6f1' }}>Our Services</span>
                </div>
                {SERVICES.map(s => (
                  <a key={s.slug} href={`${p}${s.slug}`}
                    style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '12px 16px', textDecoration: 'none', borderRadius: 8, margin: '2px 8px', transition: 'background 0.15s' }}
                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.05)'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
                  >
                    <div style={{ width: 32, height: 32, borderRadius: 8, background: 'rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                      <i data-lucide={s.icon} style={{ width: 16, height: 16, color: '#5ac6f1' }}></i>
                    </div>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 600, color: '#fff', marginBottom: 2 }}>{s.title}</div>
                      <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)', lineHeight: 1.4 }}>{s.tagline}</div>
                    </div>
                  </a>
                ))}
                <div style={{ gridColumn: '1 / 3', borderTop: '1px solid rgba(255,255,255,0.06)', margin: '8px 0 0', padding: '12px 16px' }}>
                  <a href={`${p}services.html`} style={{ fontSize: 12, fontWeight: 600, color: '#5ac6f1', textDecoration: 'none', letterSpacing: '0.4px' }}>View all services →</a>
                </div>
              </div>
            )}
          </div>
          <a href={`${p}specialties.html`} style={current === 'specialties' ? activeLink : linkStyle}
            onMouseEnter={e => e.currentTarget.style.color = '#fff'}
            onMouseLeave={e => e.currentTarget.style.color = current === 'specialties' ? '#fff' : 'rgba(255,255,255,0.65)'}>
            Specialties
          </a>
          <a href={`${p}contact.html`} style={current === 'contact' ? activeLink : linkStyle}
            onMouseEnter={e => e.currentTarget.style.color = '#fff'}
            onMouseLeave={e => e.currentTarget.style.color = current === 'contact' ? '#fff' : 'rgba(255,255,255,0.65)'}>
            Contact
          </a>
          <a href={`${p}meeting.html`} className="btn btn--primary" style={{ padding: '10px 22px', fontSize: 13, textDecoration: 'none' }}>
            Request Meeting
          </a>
        </div>
      </div>
    </nav>
  );
};

// ——— Site Footer ———
const SiteFooter = ({ basePath = '' }) => {
  const p = basePath;
  const cols = [
    {
      title: 'Services',
      links: SERVICES.slice(0, 4).map(s => ({ label: s.title, href: `${p}${s.slug}` })),
    },
    {
      title: 'More Services',
      links: SERVICES.slice(4).map(s => ({ label: s.title, href: `${p}${s.slug}` })),
    },
    {
      title: 'Company',
      links: [
        { label: 'Specialties', href: `${p}specialties.html` },
        { label: 'Contact Us', href: `${p}contact.html` },
        { label: 'Request Meeting', href: `${p}meeting.html` },
      ],
    },
  ];

  return (
    <footer style={{ background: '#0D1029', color: 'rgba(255,255,255,0.55)', padding: '72px 0 40px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 48 }}>
          <div>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: '#fff', letterSpacing: '-0.3px', lineHeight: 1, display: 'block' }}>Medcore <span style={{ color: '#5ac6f1' }}>Revenue</span> Group</span>
            <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', marginTop: 20, lineHeight: 1.65, maxWidth: 320 }}>
              Revenue infrastructure for modern healthcare practices. Starting at 2.49% of collections.
            </p>
            <div style={{ marginTop: 24, fontSize: 12, color: 'rgba(255,255,255,0.3)', letterSpacing: '1.5px', textTransform: 'uppercase' }}>
              HIPAA Compliant · SOC 2 Type II
            </div>
          </div>
          {cols.map(col => (
            <div key={col.title}>
              <div style={{ fontSize: 10, letterSpacing: '1.8px', textTransform: 'uppercase', fontWeight: 700, color: '#5ac6f1', marginBottom: 20 }}>{col.title}</div>
              {col.links.map(l => (
                <div key={l.label} style={{ marginBottom: 10 }}>
                  <a href={l.href} style={{ color: 'rgba(255,255,255,0.55)', fontSize: 13, textDecoration: 'none', transition: 'color 0.2s' }}
                    onMouseEnter={e => e.currentTarget.style.color = '#fff'}
                    onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.55)'}>
                    {l.label}
                  </a>
                </div>
              ))}
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', marginTop: 56, paddingTop: 24, fontSize: 11, color: 'rgba(255,255,255,0.35)', letterSpacing: '0.3px', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <span>© 2026 MCR Group MD · medbillingrcm.com</span>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="#" style={{ color: 'rgba(255,255,255,0.35)', textDecoration: 'none', fontSize: 11 }}>Privacy Policy</a>
            <a href="#" style={{ color: 'rgba(255,255,255,0.35)', textDecoration: 'none', fontSize: 11 }}>Terms of Service</a>
            <a href="#" style={{ color: 'rgba(255,255,255,0.35)', textDecoration: 'none', fontSize: 11 }}>BAA Agreement</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { SERVICES, SPECIALTIES, AccentRule, DashboardMockup, SiteNav, SiteFooter });
