/* Panterra Health — website chrome: NavBar, Footer, Figure placeholder, icons */

/* Resolve an asset to a bundler blob URL (standalone export) or its real path (live). */
window.__asset = (id, fallback) => (window.__resources && window.__resources[id]) || fallback;

const PAGES = [
  { id: 'about',   label: 'About Us' },
  { id: 'products', label: 'Products' },
  { id: 'kalos',   label: 'Kalos Health' },
  { id: 'hygeia',  label: 'Hygeia Rx' },
  { id: 'mission', label: 'Our Mission' },
  { id: 'contact', label: 'Contact Us' },
];

/* --- Imagery placeholder. Pass `src` to drop in a real photo later. --- */
function Figure({ label = 'Image', src, ratio = '4 / 3', radius = 'var(--radius-lg)', style }) {
  return (
    <div style={{
      aspectRatio: ratio,
      borderRadius: radius,
      overflow: 'hidden',
      border: '1px solid var(--line)',
      background: 'linear-gradient(135deg, var(--surface-blue) 0%, var(--surface-2) 70%)',
      display: 'flex', alignItems: 'flex-end', position: 'relative',
      ...style,
    }}>
      {src
        ? <img src={src} alt={label} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        : <>
            <FlaskMark />
            <span style={{
              position: 'absolute', left: 16, bottom: 14,
              fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 600,
              letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--blue-700)',
            }}>{label}</span>
          </>
      }
    </div>
  );
}

function FlaskMark() {
  return (
    <svg viewBox="0 0 48 48" width="44" height="44" fill="none"
         style={{ position: 'absolute', top: 16, left: 16, opacity: .5 }}
         stroke="var(--blue-700)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19 6h10M21 6v12L13 34a4 4 0 0 0 3.6 6h14.8A4 4 0 0 0 35 34l-8-16V6" />
      <path d="M17 30h14" />
    </svg>
  );
}

/* --- simple inline icons (consistent 1.5 stroke) --- */
function Icon({ d, size = 20, fill = false }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill={fill ? 'currentColor' : 'none'}
         stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      {Array.isArray(d) ? d.map((p, i) => <path key={i} d={p} />) : <path d={d} />}
    </svg>
  );
}
const ICONS = {
  arrow: 'M5 12h14M13 6l6 6-6 6',
  menu: ['M4 7h16', 'M4 12h16', 'M4 17h16'],
  close: ['M6 6l12 12', 'M18 6L6 18'],
  flask: ['M9 3h6', 'M10 3v6l-4 8a2.5 2.5 0 0 0 2.3 3.5h7.4A2.5 2.5 0 0 0 18 17l-4-8V3', 'M7.5 15h9'],
  pill: ['M10.5 13.5l3-3', 'M8 16a4 4 0 0 1 0-5.7l2.3-2.3a4 4 0 1 1 5.7 5.7L13.7 16A4 4 0 0 1 8 16Z'],
  pulse: 'M3 12h4l2 6 4-14 2 8h6',
  shield: ['M12 3l8 3v5c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3Z'],
  dollar: ['M12 3v18', 'M16 7.5C16 5.5 14.2 4 12 4S8 5.5 8 7.5 9.8 11 12 11s4 1.5 4 3.5S14.2 18 12 18s-4-1.5-4-3.5'],
  lab: ['M6 3h12', 'M9 3v6L5 18a2 2 0 0 0 1.8 3h10.4A2 2 0 0 0 19 18l-4-9V3'],
  mail: ['M3 6h18v12H3z', 'M3 7l9 6 9-6'],
  check: 'M5 12.5l4 4 10-10',
};

function NavBar({ current, onNavigate, scrolled }) {
  const [open, setOpen] = React.useState(false);
  const go = (id) => { onNavigate(id); setOpen(false); window.scrollTo({ top: 0 }); };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.86)', backdropFilter: 'saturate(180%) blur(12px)',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'border-color var(--dur) var(--ease)',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 132 }}>
        <button onClick={() => go('home')} aria-label="Panterra Health home" style={{
          display: 'flex', alignItems: 'center', gap: 10, background: 'none', border: 'none', cursor: 'pointer', padding: 0,
        }}>
          <img src={window.__asset('panterraLogo', 'assets/panterra-logo.png')} alt="Panterra Health" style={{ height: 100, width: 'auto' }} />
        </button>

        <nav style={{ display: 'flex', alignItems: 'center', gap: 4 }} className="ph-desktop-nav">
          {PAGES.map(p => (
            <button key={p.id} onClick={() => go(p.id)} style={{
              fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)',
              fontWeight: current === p.id ? 600 : 500,
              color: current === p.id ? 'var(--ink-900)' : 'var(--ink-700)',
              background: 'none', border: 'none', cursor: 'pointer',
              padding: '8px 14px', borderRadius: 'var(--radius-pill)',
              transition: 'background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease)',
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-2)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
              {p.label}
            </button>
          ))}
        </nav>

        <button className="ph-mobile-toggle" onClick={() => setOpen(o => !o)} aria-label="Menu" style={{
          display: 'none', background: 'none', border: '1px solid var(--line-strong)',
          borderRadius: 'var(--radius-sm)', width: 42, height: 42, alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer', color: 'var(--ink-900)',
        }}>
          <Icon d={open ? ICONS.close : ICONS.menu} />
        </button>
      </div>

      {open && (
        <div className="ph-mobile-menu" style={{ borderTop: '1px solid var(--line)', background: '#fff' }}>
          <div className="container" style={{ display: 'flex', flexDirection: 'column', padding: '12px 0 20px' }}>
            {PAGES.map(p => (
              <button key={p.id} onClick={() => go(p.id)} style={{
                textAlign: 'left', fontFamily: 'var(--font-body)', fontSize: 'var(--text-xl)',
                fontWeight: 500, color: current === p.id ? 'var(--accent)' : 'var(--ink-900)',
                background: 'none', border: 'none', borderBottom: '1px solid var(--line)',
                padding: '16px 4px', cursor: 'pointer',
              }}>{p.label}</button>
            ))}
          </div>
        </div>
      )}
    </header>
  );
}

function Footer({ onNavigate }) {
  const go = (id) => { onNavigate(id); window.scrollTo({ top: 0 }); };
  return (
    <footer style={{ background: 'var(--ink-band)', color: 'var(--text-on-dark)', paddingTop: 'var(--space-10)' }}>
      <div className="container">
        <div className="ph-footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 'var(--space-8)', paddingBottom: 'var(--space-9)', alignItems: 'start' }}>
          <div>
            <img src={window.__asset('panterraLogoWhiteTrim', 'assets/panterra-logo-white-trim.png')} alt="Panterra Health" style={{ height: 46, width: 'auto', display: 'block', marginBottom: 'var(--space-5)' }} />
            <p style={{ color: 'rgba(246,244,239,0.66)', maxWidth: '34ch', fontSize: 'var(--text-md)', lineHeight: 1.6, margin: 0 }}>
              Health <em style={{ fontStyle: 'italic' }}>first</em>. We help Americans take control of their own care with: transparent labs, fair pricing, and providers who work <em style={{ fontStyle: 'italic' }}>for</em> you.
            </p>
          </div>
          <div>
            <div className="eyebrow" style={{ color: 'rgba(246,244,239,0.5)', marginBottom: 14 }}>Company</div>
            <FootCol items={[['About Us','about'],['Our Mission','mission'],['Contact Us','contact']]} go={go} />
          </div>
          <div>
            <div className="eyebrow" style={{ color: 'rgba(246,244,239,0.5)', marginBottom: 14 }}>Our Brands</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <BrandFootLink logo={window.__asset('kalosLogoWhiteTrim', 'assets/kalos-logo-white-trim.png')} label="Kalos Health" id="kalos" go={go} />
              <BrandFootLink logo={window.__asset('hygeiaLogoWhiteTrim', 'assets/hygeia-logo-white-trim.png')} label="Hygeia Rx" id="hygeia" go={go} />
            </div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(246,244,239,0.14)', padding: '24px 0 40px', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ color: 'rgba(246,244,239,0.5)', fontSize: 'var(--text-sm)' }}>© 2026 Panterra Health, Inc. All rights reserved.</span>
          <span style={{ color: 'rgba(246,244,239,0.5)', fontSize: 'var(--text-sm)' }}>This site is informational and not medical advice.</span>
        </div>
      </div>
    </footer>
  );
}
function BrandFootLink({ logo, label, id, go }) {
  return (
    <button onClick={() => go(id)} style={{
      display: 'flex', alignItems: 'center', gap: 16, background: 'none', border: 'none', cursor: 'pointer', padding: 0,
      fontFamily: 'var(--font-body)', fontSize: 'var(--text-md)', color: 'rgba(246,244,239,0.78)',
      transition: 'color var(--dur-fast) var(--ease)',
    }}
    onMouseEnter={e => e.currentTarget.style.color = '#fff'}
    onMouseLeave={e => e.currentTarget.style.color = 'rgba(246,244,239,0.78)'}>
      <span style={{ width: 72, display: 'flex', alignItems: 'center', justifyContent: 'flex-start', flexShrink: 0 }}>
        <img src={logo} alt="" style={{ height: 68, width: 'auto', maxWidth: '100%', objectFit: 'contain' }} />
      </span>
      <span>{label}</span>
    </button>
  );
}
function FootCol({ items, go }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {items.map(([label, id]) => (
        <button key={id} onClick={() => go(id)} style={{
          textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', padding: 0,
          fontFamily: 'var(--font-body)', fontSize: 'var(--text-md)', color: 'rgba(246,244,239,0.78)',
        }}
        onMouseEnter={e => e.currentTarget.style.color = '#fff'}
        onMouseLeave={e => e.currentTarget.style.color = 'rgba(246,244,239,0.78)'}>{label}</button>
      ))}
    </div>
  );
}

Object.assign(window, { PAGES, Figure, FlaskMark, Icon, ICONS, NavBar, Footer, FootCol, BrandFootLink });