// ====== Hero variants ======

// Direction A: dark fiber hero with particles, organic + paid variants
function HeroDark({ variant = "organic" }) {
  // variants: organic | paid_software | paid_hipaa
  let eyebrow = "Birmingham, Alabama · Dental IT", h1, sub, cta = "Get your free practice assessment";
  if (variant === "organic") {
    h1 = <>Your practice deserves IT <em>that knows dental.</em></>;
    sub = <>Most IT companies learn Dentrix on your dime. We already know it — along with Eaglesoft, Open Dental, Dexis, and every imaging system your team uses. When something breaks at 8 AM, we don't need a tutorial.</>;
  } else if (variant === "paid_software") {
    eyebrow = "Paid Landing · Software-pain";
    h1 = <>Dental IT that already <em>knows your software.</em></>;
    sub = <>We know Dentrix, Eaglesoft, and Open Dental before we walk in the door. Birmingham-based. No long-term contracts. We drive to your office.</>;
  } else {
    eyebrow = "Paid Landing · HIPAA";
    h1 = <><em>HIPAA-aware IT</em> for dental practices.</>;
    sub = <>We handle the IT requirements that keep your practice compliant — and the day-to-day support that keeps it running.</>;
    cta = "Download our free HIPAA checklist";
  }
  return (
    <section id="top" className="hw-hero">
      <div className="hw-hero-bg">
        <img src="assets/hero-fiber.jpg" alt="" className="hw-hero-img" />
        <div className="hw-hero-overlay" />
      </div>
      <ParticleNetwork />
      <div className="hw-container hw-hero-content">
        <span className="eyebrow">{eyebrow}</span>
        <h1 className="hw-hero-h1">{h1}</h1>
        <p className="hw-hero-lead">{sub}</p>
        <HeroTrustLine />
        <div className="hw-hero-ctas">
          <a href={variant === "paid_hipaa" ? "#leadmagnet" : "#contact"} className="hw-btn hw-btn-primary hw-btn-lg">
            {cta} <span className="hw-btn-arrow">→</span>
          </a>
          <a href="tel:+12055828660" className="hw-btn hw-btn-secondary hw-btn-lg">Or call (205) 582-8660</a>
        </div>
      </div>
    </section>
  );
}

// Direction B: clinical/light hero with split layout, glass panel mock
function HeroClinical({ variant = "organic" }) {
  let eyebrow = "Birmingham, AL · Dental & Medical IT", h1, sub, cta = "Get your free practice assessment";
  if (variant === "organic") {
    h1 = <>Your practice deserves IT <em>that knows dental.</em></>;
    sub = <>Most IT companies learn Dentrix on your dime. We already know it — along with Eaglesoft, Open Dental, Dexis, and every imaging system your team uses.</>;
  } else if (variant === "paid_software") {
    eyebrow = "Paid Landing · Software-pain";
    h1 = <>Dental IT that already <em>knows your software.</em></>;
    sub = <>We know Dentrix, Eaglesoft, and Open Dental before we walk in the door. Birmingham-based. No long-term contracts.</>;
  } else {
    eyebrow = "Paid Landing · HIPAA";
    h1 = <><em>HIPAA-aware IT</em> for dental practices.</>;
    sub = <>We handle the IT requirements that keep your practice compliant — and the day-to-day support that keeps it running.</>;
    cta = "Download our free HIPAA checklist";
  }
  return (
    <section id="top" className="hw-hero-split">
      <div className="hw-container">
        <div className="hw-hero-split-grid">
          <div>
            <span className="hw-hero-split-eyebrow">{eyebrow}</span>
            <h1>{h1}</h1>
            <p className="lead">{sub}</p>
            <div className="hw-hero-split-pills">
              <span className="hw-pill"><DIcon name="shield" /> HIPAA-aware</span>
              <span className="hw-pill"><DIcon name="pin" /> Birmingham-based · we drive to you</span>
              <span className="hw-pill"><DIcon name="check" /> No long-term contracts</span>
            </div>
            <div className="hw-hero-split-ctas">
              <a href={variant === "paid_hipaa" ? "#leadmagnet" : "#contact"} className="hw-btn hw-btn-on-light hw-btn-lg">
                {cta} <span className="hw-btn-arrow">→</span>
              </a>
              <a href="tel:+12055828660" className="hw-btn hw-btn-on-light-secondary hw-btn-lg">Or call (205) 582-8660</a>
            </div>
            <div className="hw-hero-split-aside">No pressure, no pitch deck. Just a conversation about your IT.</div>
          </div>
          <div className="hw-hero-split-art">
            <div className="panel" />
            <div className="grid-lines" />
            <svg className="hw-tooth-watermark" viewBox="0 0 24 24" fill="currentColor"><path d="M7.5 3.5C5.5 3.5 4 5 4 7.2c0 1.6.4 2.6.7 3.6.4 1.2.6 2.4.7 4 .1 2 .3 4.7 1.6 4.7 1.1 0 1.4-1.4 1.6-2.7.2-1.4.5-2.7 1.4-2.7s1.2 1.3 1.4 2.7c.2 1.3.5 2.7 1.6 2.7 1.3 0 1.5-2.7 1.6-4.7.1-1.6.3-2.8.7-4 .3-1 .7-2 .7-3.6 0-2.2-1.5-3.7-3.5-3.7-1.4 0-1.9.6-3 .6s-1.6-.6-3-.6Z"/></svg>
            <div className="floating-card hw-fc-pm">
              <div className="hw-fc-title"><DIcon name="server" /> Practice systems · live</div>
              <div className="hw-fc-row"><span className="hw-fc-dot" /><div style={{flex:1}}><div className="hw-fc-label">Dentrix</div><div className="hw-fc-meta">Server 02 · 14ms</div></div></div>
              <div className="hw-fc-row"><span className="hw-fc-dot" /><div style={{flex:1}}><div className="hw-fc-label">DEXIS imaging</div><div className="hw-fc-meta">Op 1 · ready</div></div></div>
              <div className="hw-fc-row"><span className="hw-fc-dot" /><div style={{flex:1}}><div className="hw-fc-label">Backups</div><div className="hw-fc-meta">Last run 03:14</div></div></div>
            </div>
            <div className="floating-card hw-fc-monitor">
              <div className="hw-fc-title"><DIcon name="clock" /> Last response time</div>
              <div style={{ fontSize: "1.875rem", fontWeight: 800, color: "var(--teal-dark)", letterSpacing: "-0.02em", lineHeight: 1 }}>11 min</div>
              <div className="hw-fc-meta" style={{ marginTop: 4 }}>From ticket open to fix · this month avg.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =========================== PAGE: Direction A ===========================
function DirectionA() {
  const variant = window.__heroVariantA || "organic";
  const isPaid = variant.startsWith("paid");
  const Nav = isPaid ? NavStripped : NavFull;
  return (
    <div data-screen-label="Direction A — Dark Editorial">
      <Nav />
      <HeroDark variant={variant} />
      <ProofBar items={[
        { stat: <><span className="stars">★★★★★</span> 5.0</>, label: "Google reviews from local practices" },
        { stat: "30+", label: "Practices across the Southeast" },
        { stat: "25+", label: "Years serving dental & medical" },
        { stat: "<30 min", label: "Avg. response on critical issues" },
      ]} />
      <PMSoftwareSection />
      <PainList />
      <PillarsWithBuild />
      <CaseStudyStory />
      <Testimonial />
      <PricingAnchor />
      <AssessmentForm />
      <LeadMagnetFull />
      <Footer paid={isPaid} />
    </div>
  );
}

// =========================== PAGE: Direction B ===========================
function DirectionB() {
  const variant = window.__heroVariantB || "organic";
  const isPaid = variant.startsWith("paid");
  const Nav = isPaid ? NavStripped : NavFull;
  return (
    <div data-screen-label="Direction B — Clinical Light">
      <Nav light />
      <HeroClinical variant={variant} />
      <ProofBar light items={[
        { stat: <><span className="stars" style={{color:"var(--gold-dark)"}}>★★★★★</span> 5.0</>, label: "Google reviews from local practices" },
        { stat: "30+", label: "Practices across the Southeast" },
        { stat: "25+", label: "Years serving dental & medical" },
        { stat: "<30 min", label: "Avg. response on critical issues" },
      ]} />
      <LeadMagnetStrip />
      <PMSoftwareSection light />
      <PainQuotes />
      <PillarsOnly light />
      <BuildSection />
      <CaseStudyStory />
      <Testimonial light />
      <PricingBands />
      <AssessmentForm light />
      <Footer light paid={isPaid} />
    </div>
  );
}

window.DirectionA = DirectionA;
window.DirectionB = DirectionB;