// Shared chrome — Ofman Pediatrics, Direction A
function Nav({ active }){
  const links = [
    ['The Practice', 'home.html'],
    ['Dr. Ofman', 'about.html'],
    ['The Team', 'team.html'],
    ['What\u2019s Included', 'services.html'],
    ['Research', 'research.html'],
  ];
  return (
    <div className="nav">
      <a href="home.html" className="brand">
        <span className="word">Ofman</span>
        <span className="meta mono">Pediatrics · Miami</span>
      </a>
      <div className="nav-links mono">
        {links.map(([label, href]) => (
          <a key={label} href={href} style={{
            color: active === label ? 'var(--brass)' : 'var(--ink)',
          }}>{label}</a>
        ))}
      </div>
      <a className="cta-pill mono" href="home.html#apply">Apply for Membership →</a>
    </div>
  );
}

function Footer(){
  return (
    <div className="foot">
      <div style={{
        display:'grid', gridTemplateColumns:'1.6fr 1fr 1fr',
        gap: 48, maxWidth: 1320, margin:'0 auto',
      }}>
        <div>
          <div className="serif italic" style={{ fontSize: 44, lineHeight: 1, color:'var(--brass-2)' }}>
            Ofman
          </div>
          <div className="mono" style={{ marginTop: 10, opacity:.75 }}>
            Pediatrics · A Concierge Practice · Miami, FL
          </div>
        </div>
        <div>
          <div className="mono" style={{ opacity:.6, marginBottom: 14 }}>The Practice</div>
          <div style={{ display:'flex', flexDirection:'column', gap:8, fontSize:14, opacity:.92 }}>
            <a href="about.html">About Dr. Ofman</a>
            <a href="team.html">The Team</a>
            <a href="services.html">What&rsquo;s Included</a>
            <a href="research.html">Research</a>
            <a href="home.html#apply">Contact</a>
          </div>
        </div>
        <div>
          <div className="mono" style={{ opacity:.6, marginBottom: 14 }}>Visit</div>
          <div style={{ fontSize: 14, lineHeight: 1.7, opacity:.92 }}>
            By appointment only<br/>
            Coral Gables · Miami Beach<br/>
            House calls across<br/>South Florida
          </div>
        </div>
      </div>
      <div style={{
        borderTop:'1px solid rgba(244,241,234,.18)', marginTop: 56, paddingTop: 22,
        display:'flex', justifyContent:'space-between', maxWidth:1320, margin:'56px auto 0',
        alignItems:'center',
      }}>
        <div className="mono" style={{ opacity:.55 }}>© 2026 Ofman Pediatrics, P.A.</div>
        <div className="mono" style={{ opacity:.55, display:'flex', gap:24 }}>
          <span>Privacy</span><span>Accessibility</span>
        </div>
      </div>
    </div>
  );
}

function Kicker({ children, style }){
  return <div className="kicker" style={style}>{children}</div>;
}

function SectionLabel({ num, title }){
  return (
    <div style={{
      display:'flex', alignItems:'baseline', gap:14,
      borderBottom:'1px solid var(--rule)', paddingBottom: 14, marginBottom: 32,
    }}>
      <span className="serif italic" style={{ fontSize: 30, color:'var(--brass)' }}>§ {num}</span>
      <span className="mono" style={{ color:'var(--mute)' }}>{title}</span>
    </div>
  );
}

// Photo with editorial frame + label
function Photo({ src, label, ratio = '4/3', style, objectPosition, labelPosition = 'bottom-left' }){
  return (
    <div className="ph" style={{ aspectRatio: ratio, ...style }}>
      <img src={src} alt={label} style={{ objectPosition: objectPosition || 'center' }} />
      <div className="ph-frame" />
      {label ? <div className={`ph-meta ph-meta--${labelPosition}`}>{label}</div> : null}
    </div>
  );
}

Object.assign(window, { Nav, Footer, Kicker, SectionLabel, Photo });