/* eslint-disable */

function Nav({ onContact }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={"nav-wrap " + (scrolled ? "scrolled" : "")}>
      <div className="container nav">
        <a href="#top" className="brand">
          <span className="brand-mark" aria-hidden="true"></span>
          <span className="brand-name">Albert<em>Med</em></span>
        </a>
        <nav className="nav-links">
          <a href="#services">Services</a>
          <a href="#specialties">Specialties</a>
          <a href="#process">Process</a>
          <a href="#results">Results</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="nav-cta">
          <a href="#contact" className="btn btn-ghost" onClick={onContact}>
            Free audit
          </a>
          <a href="#contact" className="btn btn-primary">
            Book a call <span className="arrow"><Ico.arrow /></span>
          </a>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="container hero-grid">
        <div className="hero-left">
          <div className="eyebrow"><span className="dot"></span> Revenue cycle management · HIPAA compliant</div>
          <h1 className="h-display">
            Clean claims,<br/>
            paid <em>faster</em>—<br/>
            <span className="accent">without the chase.</span>
          </h1>
          <p className="lede">
            AlbertMed Billing is a full-service medical billing partner for independent practices, clinics and specialty groups. We submit, scrub and follow up on every claim so your team can focus on patients—not paperwork.
          </p>
          <div className="hero-cta-row">
            <a href="#contact" className="btn btn-accent">
              Get a free revenue audit <span className="arrow"><Ico.arrow /></span>
            </a>
            <a href="#services" className="btn btn-ghost">See what we handle</a>
          </div>
        </div>

        <div className="hero-right hero-stack">
          <div className="kpi-card dark">
            <div className="eyebrow" style={{color:'rgba(251,248,241,.6)'}}><span className="dot"></span> Live this quarter</div>
            <div className="kpi-grid" style={{marginTop:6}}>
              <div>
                <div className="kpi-num">98.6<span className="unit">%</span></div>
                <div className="kpi-label">First-pass clean-claim rate across active clients.</div>
              </div>
              <div>
                <div className="kpi-num">22<span className="unit">d</span></div>
                <div className="kpi-label">Average days in A/R—industry sits at 38–45.</div>
              </div>
            </div>
          </div>
          <div className="hero-claim-card">
            <div className="claim-num">+27%</div>
            <div className="claim-text">
              Average lift in net collections in the first 90&nbsp;days with a new AlbertMed engagement.
            </div>
          </div>
          <div className="kpi-card">
            <div style={{display:'flex',alignItems:'center',gap:12}}>
              <div style={{width:36,height:36,borderRadius:8,background:'var(--cream-2)',display:'grid',placeItems:'center',color:'var(--teal)'}}>
                <Ico.shield />
              </div>
              <div>
                <div style={{fontSize:13,color:'var(--ink-soft)'}}>Certified & compliant</div>
                <div style={{fontFamily:'var(--serif)',fontSize:22,letterSpacing:'-0.01em'}}>HIPAA · SOC 2 · AAPC</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustBar() {
  // Faux clinic logos rendered as wordmarks — placeholder for real client logos.
  const logos = [
    { name: 'Northbay Family Health', glyph: '◐' },
    { name: 'Cedar Pediatrics', glyph: '✚' },
    { name: 'Lakeshore Cardiology', glyph: '❖' },
    { name: 'Summit Orthopedics', glyph: '▲' },
    { name: 'Harbor Mental Health', glyph: '◇' },
  ];
  return (
    <div className="trustbar">
      <div className="container trustbar-inner">
        <div className="trust-label">Trusted by 140+ practices across 32 states</div>
        <div className="trust-logos">
          {logos.map((l) => (
            <span className="trust-logo" key={l.name}>
              <span className="ico">{l.glyph}</span> {l.name}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, TrustBar });