// ====== Shared dental-it components ======

// ---------- NAV variants ----------
function NavFull({ light = false, phone = "(205) 582-8660" }) {
  return (
    <nav className={"hw-nav " + (light ? "hw-nav-light" : "")}>
      <div className="hw-container hw-nav-inner">
        <a href="#top" className="hw-brand">
          <img src="assets/logo-emblem.svg" alt="" className="hw-brand-emblem" />
          <span className="hw-brand-name">HOPEWELL</span>
          <span className="hw-brand-msp">MSP</span>
        </a>
        <div className="hw-nav-links">
          <a href="#services">Services</a>
          <a href="#industries">Industries</a>
          <a href="#about">About</a>
          <a href="#insight">Insight</a>
          <a href={"tel:" + phone.replace(/[^0-9+]/g, "")} className="hw-nav-phone">
            <DIcon name="phone" className="hw-chev" />{phone}
          </a>
          <a href="#contact" className="hw-btn hw-btn-primary hw-btn-sm">Book a call <span className="hw-btn-arrow">→</span></a>
        </div>
      </div>
    </nav>
  );
}

function NavStripped({ light = false, phone = "(205) 582-8660" }) {
  return (
    <nav className={"hw-nav " + (light ? "hw-nav-light" : "")}>
      <div className="hw-container hw-nav-inner">
        <a href="#top" className="hw-brand">
          <img src="assets/logo-emblem.svg" alt="" className="hw-brand-emblem" />
          <span className="hw-brand-name">HOPEWELL</span>
          <span className="hw-brand-msp">MSP</span>
        </a>
        <div className="hw-nav-links">
          <a href={"tel:" + phone.replace(/[^0-9+]/g, "")} className="hw-nav-phone">
            <DIcon name="phone" className="hw-chev" />{phone}
          </a>
          <a href="#contact" className="hw-btn hw-btn-primary hw-btn-sm">Book a call <span className="hw-btn-arrow">→</span></a>
        </div>
      </div>
    </nav>
  );
}

// ---------- Trust line (under hero subhead) ----------
function HeroTrustLine({ light = false }) {
  return (
    <div className={"hw-hero-trustline " + (light ? "hw-hero-trustline-light" : "")}>
      <span className="hw-trust-item"><DIcon name="shield" /> <span>HIPAA-aware IT for dental & medical practices</span></span>
      <span className="hw-trust-item"><DIcon name="pin" /> <span>Birmingham-based — <strong>we drive to your office</strong></span></span>
      <span className="hw-trust-item"><DIcon name="check" /> <span>No long-term contracts</span></span>
    </div>
  );
}

// ---------- Proof Bar ----------
function ProofBar({ light = false, items }) {
  return (
    <section className={"hw-proofbar " + (light ? "hw-proofbar-light" : "")}>
      <div className="hw-container">
        <div className="hw-proofbar-grid">
          {items.map((it, i) => (
            <div key={i} className="hw-proofbar-cell">
              <div className="hw-proofbar-stat">{it.stat}</div>
              <div className="hw-proofbar-label">{it.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- PM Software Logos ----------
const PM_SOFTWARE = [
  { name: "Denticon", vendor: "Planet DDS", color: "#0066b3" },
  { name: "Eaglesoft", vendor: "Patterson", color: "#003c71" },
  { name: "Open Dental", vendor: "Open-source", color: "#1a7f5a" },
  { name: "Dentrix", vendor: "Henry Schein One", color: "#d62128" },
  { name: "DEXIS", vendor: "Imaging", color: "#f29400" },
  { name: "Carestream", vendor: "CS Imaging", color: "#0086b3" },
];

function PMSoftwareLogo({ name, vendor, color, light }) {
  // Stylized wordmark in vendor color tile
  const initials = name.split(" ").map(w => w[0]).join("").slice(0, 2);
  return (
    <div className="hw-pm-card">
      <div className="hw-pm-mark" style={{ background: color, color: "white", borderRadius: 8, fontSize: 14, fontWeight: 800, letterSpacing: "-0.03em" }}>
        {initials}
      </div>
      <div className="hw-pm-logo">{name}</div>
      <div className="hw-pm-vendor">{vendor}</div>
    </div>
  );
}

function PMSoftwareSection({ light = false }) {
  return (
    <section className={"hw-pmsoftware " + (light ? "hw-pmsoftware-light hw-pm-light" : "")}>
      <div className="hw-container">
        <div className="hw-pmsoftware-head">
          <span className="eyebrow">What we manage</span>
          <h2 className="h2">Systems we support daily.</h2>
          <p className="lead">If your practice runs any of these, we already know where they break — and how to fix it before your first patient of the day.</p>
        </div>
        <div className="hw-pm-grid">
          {PM_SOFTWARE.map((pm, i) => <PMSoftwareLogo key={i} {...pm} light={light} />)}
        </div>
      </div>
    </section>
  );
}

// ---------- Pain Section (Direction A: list) ----------
const PAIN_ITEMS = [
  "Your current IT company takes hours to respond. When they do, they're Googling what Eaglesoft is.",
  "You're not confident your practice is actually HIPAA compliant — you just haven't been audited yet.",
  "Your imaging software or server goes down and it takes half a day to recover. Appointments get moved. Patients notice.",
  "You're paying for IT support but you don't really know what they're doing for you month to month.",
  "You've been told \u201cwe support dental software\u201d by a general IT company. You found out what that really meant the hard way.",
];

function PainList() {
  return (
    <section className="hw-pain">
      <div className="hw-container hw-pain-inner">
        <span className="eyebrow">Sound familiar?</span>
        <h2>If any of this describes your day, we should talk.</h2>
        <ul className="hw-pain-list">
          {PAIN_ITEMS.map((p, i) => <li key={i}>{p}</li>)}
        </ul>
        <div className="hw-pain-close">If any of that describes your situation, you're in the right place.</div>
      </div>
    </section>
  );
}

// ---------- Pain Section (Direction B: quotes) ----------
function PainQuotes() {
  const quotes = [
    { q: "It takes hours to get our IT company on the phone. When they finally show up, they're Googling what Eaglesoft is.", role: "What we hear most often" },
    { q: "We're paying for IT support, but we couldn't tell you what they actually do for us month to month.", role: "What we hear most often" },
    { q: "Our imaging server went down before lunch. We rescheduled half a day of patients before it came back.", role: "What we hear most often" },
    { q: "Our last 'dental-friendly' IT vendor was a general MSP that learned Dentrix on our dime.", role: "What we hear most often" },
  ];
  return (
    <section className="hw-pain-quotes">
      <div className="hw-container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
          <span className="eyebrow" style={{ color: "var(--gold-dark)", justifyContent: "center" }}>Sound familiar?</span>
          <h2 style={{ marginTop: 16, fontSize: "2.25rem", fontWeight: 800, letterSpacing: "-0.02em" }}>What practice managers tell us in the first ten minutes.</h2>
        </div>
        <div className="hw-pain-quotes-grid">
          {quotes.map((q, i) => (
            <div key={i} className="hw-pain-quote">
              {q.q}
              <span className="hw-pain-quote-attr">— {q.role}</span>
            </div>
          ))}
        </div>
        <div className="hw-pain-quotes-close">If any of this is your week, <em>you're in the right place.</em></div>
      </div>
    </section>
  );
}

// ---------- 5 Pillars + Build callout (Direction A) ----------
const PILLARS = [
  { icon: "shield", title: "Protect.", body: "Endpoint protection, encrypted backups, and HIPAA-compliant security. Your patient data stays yours." },
  { icon: "headset", title: "Support.", body: "We're your 7 AM call when systems are down. Most issues resolved remotely in under 30 minutes — no waiting for a ticket queue." },
  { icon: "server", title: "Deliver.", body: "Hardware, networking, and phone systems spec'd for a dental environment — not a generic office." },
  { icon: "chart", title: "Direct.", body: "Quarterly reviews, technology roadmaps, and honest advice on what your practice actually needs to grow." },
];

function PillarsWithBuild({ light = false }) {
  return (
    <section id="services" className={"hw-pillars " + (light ? "hw-pillars-light" : "")}>
      <div className="hw-container">
        <div className="hw-pillars-head">
          <span className="eyebrow">Everything your practice needs</span>
          <h2 className="h2" style={{ margin: "16px 0 12px" }}>Nothing you don't.</h2>
          <p className="lead">Five capabilities. Built around how a dental practice actually runs.</p>
        </div>
        <div className="hw-pillars-grid">
          {PILLARS.map((p, i) => (
            <div key={i} className="hw-pillar">
              <div className="icon-tile"><DIcon name={p.icon} /></div>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
        <div className="hw-build-feature">
          <div>
            <span className="hw-build-feature-tag">Build · The capability nobody else offers</span>
            <h3>We build <em>custom software</em> for dental practices.</h3>
            <p>No other dental MSP does this. We replace manual workflows with applications built for how your practice actually works — for a fraction of what an off-the-shelf platform costs.</p>
            <a href="#case-study" className="build-link">See the case study below <span>→</span></a>
          </div>
          <div className="hw-build-stats">
            <div className="hw-build-stat">
              <div className="hw-build-stat-num">3 wks</div>
              <div className="hw-build-stat-label">Avg. build & deploy</div>
            </div>
            <div className="hw-build-stat">
              <div className="hw-build-stat-num">~$20</div>
              <div className="hw-build-stat-label">Per month to run</div>
            </div>
            <div className="hw-build-stat">
              <div className="hw-build-stat-num">2,276</div>
              <div className="hw-build-stat-label">Records migrated</div>
            </div>
            <div className="hw-build-stat">
              <div className="hw-build-stat-num">&lt;$5K</div>
              <div className="hw-build-stat-label">vs. $40K off-the-shelf</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Pillars only (Direction B uses Build as own section) ----------
function PillarsOnly({ light = false }) {
  return (
    <section id="services" className={"hw-pillars " + (light ? "hw-pillars-light" : "")}>
      <div className="hw-container">
        <div className="hw-pillars-head" style={{ textAlign: "center", margin: "0 auto 48px" }}>
          <span className="eyebrow" style={{ justifyContent: "center" }}>What's included</span>
          <h2 className="h2" style={{ margin: "16px 0 12px" }}>Everything your practice needs. Nothing you don't.</h2>
          <p className="lead" style={{ maxWidth: 600, margin: "0 auto" }}>Four core capabilities, plus the one nobody else offers — covered separately below.</p>
        </div>
        <div className="hw-pillars-grid">
          {PILLARS.map((p, i) => (
            <div key={i} className="hw-pillar">
              <div className="icon-tile"><DIcon name={p.icon} /></div>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- BUILD as its own section (Direction B) ----------
function BuildSection() {
  return (
    <section className="hw-buildsection">
      <div className="hw-container">
        <div className="hw-buildsection-grid">
          <div>
            <span className="hw-buildsection-eyebrow">Custom software · The differentiator</span>
            <h2>We build the software <em>nobody else will build for you.</em></h2>
            <p className="lead">No other dental IT MSP offers this. When your practice has a workflow living in spreadsheets, sticky notes, or a patchwork of three different tools — we replace it with an app built specifically for how you work.</p>
            <ul className="hw-buildsection-bullets">
              <li>Cross-location workflows your PM software can't see</li>
              <li>Custom reports your software won't generate</li>
              <li>Internal tools that replace manual entry and reduce staff errors</li>
              <li>Integrations between PMS, imaging, and the systems they don't talk to</li>
            </ul>
            <a href="#case-study" className="hw-btn hw-btn-primary">See it in action <span className="hw-btn-arrow">→</span></a>
          </div>
          <div className="hw-buildsection-card">
            <div className="hw-buildsection-card-title">Recent build</div>
            <div className="row"><span>Project</span><span>Multi-location workflow app</span></div>
            <div className="row"><span>Replaced</span><span>5+ years of spreadsheets</span></div>
            <div className="row"><span>Build time</span><span>3 weeks</span></div>
            <div className="row"><span>Records migrated</span><span>2,276</span></div>
            <div className="row"><span>Off-the-shelf quote</span><span>$40,000+</span></div>
            <div className="num">~$20<span style={{ fontSize: "1rem", color: "var(--slate)", fontWeight: 500 }}>/mo</span></div>
            <div className="num-label">to run · indefinitely</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Case Study (expanded story) ----------
function CaseStudyStory() {
  return (
    <section id="case-study" className="hw-casestudy">
      <div className="hw-container">
        <span className="hw-casestudy-eyebrow">Case study</span>
        <h2>A multi-location group replaced five years of spreadsheets with a $20-a-month app.</h2>
        <div className="hw-casestudy-stats-row">
          <div>
            <div className="hw-casestudy-stat-num">3 wks</div>
            <div className="hw-casestudy-stat-label">Build & deploy</div>
          </div>
          <div>
            <div className="hw-casestudy-stat-num">~$20</div>
            <div className="hw-casestudy-stat-label">Per month to run</div>
          </div>
          <div>
            <div className="hw-casestudy-stat-num">2,276</div>
            <div className="hw-casestudy-stat-label">Records migrated</div>
          </div>
          <div>
            <div className="hw-casestudy-stat-num">5+ yrs</div>
            <div className="hw-casestudy-stat-label">of data preserved</div>
          </div>
        </div>
        <div className="hw-casestudy-story">
          <div className="hw-casestudy-step">
            <h4>The situation</h4>
            <p>A multi-location dental group in Alabama was running a critical cross-location workflow entirely in spreadsheets. The process was <strong>error-prone, invisible to management across sites</strong>, and consumed hours of staff time every week. They'd been told it would cost tens of thousands to fix with an off-the-shelf platform.</p>
          </div>
          <div className="hw-casestudy-step">
            <h4>What we built</h4>
            <p>A custom web application built specifically for how their practice actually works — <strong>not a generic solution forced to fit</strong>. Deployed in three weeks. Existing data migrated in place.</p>
          </div>
          <div className="hw-casestudy-step">
            <h4>What changed</h4>
            <p>The workflow runs automatically. Errors dropped. Management now sees everything across all locations in <strong>real time</strong>. Monthly cost: about $20.</p>
          </div>
        </div>
        <a href="#contact" className="hw-casestudy-link">
          Want to know if there's a workflow in your practice we could do this for? <strong>That's exactly what we talk about in the assessment →</strong>
        </a>
      </div>
    </section>
  );
}

// ---------- Testimonial ----------
function Testimonial({ light = false }) {
  return (
    <section className={"hw-testimonial " + (light ? "hw-testimonial-light" : "")}>
      <div className="hw-container">
        <div className="hw-testimonial-card">
          <p className="hw-testimonial-quote">Before Hopewell, we were waiting two days to get someone on the phone when Dentrix went down. Now it's handled before I finish my coffee. They know our setup better than we do.</p>
          <div className="hw-testimonial-attr">
            <div className="hw-testimonial-avatar">SM</div>
            <div>
              <div className="hw-testimonial-name">Sarah M., Practice Manager</div>
              <div className="hw-testimonial-role">Multi-location dental group · Birmingham, AL</div>
            </div>
          </div>
          <div className="hw-testimonial-placeholder">Placeholder · awaiting client permission</div>
        </div>
      </div>
    </section>
  );
}

// ---------- Pricing — Direction A: 3-step + range anchor ----------
function PricingAnchor({ light = false }) {
  return (
    <section id="pricing" className={"hw-pricing " + (light ? "hw-pricing-light" : "")}>
      <div className="hw-container">
        <div className="hw-pricing-head">
          <span className="eyebrow">Pricing</span>
          <h2>Transparent pricing. No surprises.</h2>
          <p className="lead">Fixed monthly or hourly rates. No long-term contracts. No one-size-fits-all packages.</p>
        </div>
        <div className="hw-pricing-steps">
          <div className="hw-pricing-step">
            <div className="hw-pricing-step-num">1</div>
            <h3>Count your workstations</h3>
            <p>Tell us how many computers, servers, and locations you have.</p>
          </div>
          <div className="hw-pricing-step">
            <div className="hw-pricing-step-num">2</div>
            <h3>Assess your setup</h3>
            <p>We look at what you have, what's working, and what's at risk.</p>
          </div>
          <div className="hw-pricing-step">
            <div className="hw-pricing-step-num">3</div>
            <h3>Get your number</h3>
            <p>A real, fixed monthly figure. With everything that's included.</p>
          </div>
        </div>
        <div className="hw-pricing-anchor">
          <div className="hw-pricing-anchor-cap">Most practices fall here</div>
          <div className="hw-pricing-anchor-range" style={{ marginTop: 10 }}>
            <span>$</span>800<span> – $</span>2,000<span style={{ fontSize: "1rem", color: "var(--slate)", fontWeight: 500, letterSpacing: 0 }}> / month</span>
          </div>
          <p>Most dental practices with 8–20 workstations pay between <strong style={{ color: "white" }}>$800 and $2,000 per month</strong> for full managed IT support. That includes monitoring, security, backups, help desk, and on-site visits. We'll tell you exactly where your practice falls — and why — in 30 minutes.</p>
        </div>
      </div>
    </section>
  );
}

// ---------- Pricing — Direction B: tier bands ----------
function PricingBands() {
  return (
    <section id="pricing" className="hw-pricing hw-pricing-light">
      <div className="hw-container">
        <div className="hw-pricing-head">
          <span className="eyebrow" style={{ color: "var(--gold-dark)", justifyContent: "center" }}>Pricing</span>
          <h2>Transparent pricing. No surprises.</h2>
          <p className="lead">Fixed monthly rates. No long-term contracts. Here's roughly where your practice falls.</p>
        </div>
        <div className="hw-pricing-bands">
          <div className="hw-pricing-band">
            <h4>Single-location practice</h4>
            <div className="hw-pricing-band-size">5–10 workstations</div>
            <div className="hw-pricing-band-range">$500 <small>– $1,200/mo</small></div>
            <div className="hw-pricing-band-meta">Monitoring · security · backups · helpdesk</div>
          </div>
          <div className="hw-pricing-band featured">
            <span className="hw-pricing-band-tag">Most common</span>
            <h4>Established practice</h4>
            <div className="hw-pricing-band-size">8–20 workstations</div>
            <div className="hw-pricing-band-range">$800 <small>– $2,000/mo</small></div>
            <div className="hw-pricing-band-meta">Everything above + on-site visits + roadmap</div>
          </div>
          <div className="hw-pricing-band">
            <h4>Multi-location group</h4>
            <div className="hw-pricing-band-size">20+ workstations</div>
            <div className="hw-pricing-band-range">$1,800 <small>– $4,000+/mo</small></div>
            <div className="hw-pricing-band-meta">Everything above + multi-site + custom apps</div>
          </div>
        </div>
        <div className="hw-pricing-bands-note">Ranges based on industry benchmarks. We'll give you a fixed number for your exact setup in 30 minutes — no hand-waving.</div>
      </div>
    </section>
  );
}

// ---------- Form ----------
function AssessmentForm({ light = false, headline = "See what IT support would actually cost your practice.", sub = "Tell us about your setup. We'll come back with a real number and what's included — usually within one business day." }) {
  return (
    <section id="contact" className={"hw-form-section " + (light ? "hw-form-section-light" : "")}>
      <div className="hw-container">
        <div className="hw-form-grid">
          <div className="hw-form-pitch">
            <span className="eyebrow" style={ light ? { color: "var(--gold-dark)" } : {}}>Get your assessment</span>
            <h2>{headline}</h2>
            <p className="lead">{sub}</p>
            <div className="hw-form-trustline">
              <div className="hw-form-trustline-row"><DIcon name="pin" /> <span>Birmingham-based team — we drive to your office.</span></div>
              <div className="hw-form-trustline-row"><DIcon name="shield" /> <span>HIPAA-aware support tuned for dental practices.</span></div>
              <div className="hw-form-trustline-row"><DIcon name="check" /> <span>No long-term contracts. Ever.</span></div>
            </div>
            <div className="hw-form-phone">
              <div className="hw-form-phone-label">Rather just talk?</div>
              <div className="hw-form-phone-num">(205) 582-8660</div>
            </div>
          </div>
          <div className="hw-form-card">
            <div className="hw-form-row">
              <label>Practice name</label>
              <input type="text" placeholder="e.g., Smith Family Dental" />
            </div>
            <div className="hw-form-row">
              <label>Your name</label>
              <input type="text" placeholder="First and last" />
            </div>
            <div className="hw-form-row">
              <label>Phone or email</label>
              <input type="text" placeholder="Either is fine" />
            </div>
            <div className="hw-form-row">
              <label>Roughly how many computers? <span className="opt">(optional)</span></label>
              <input type="text" placeholder="e.g., 12 workstations + 1 server" />
            </div>
            <button className="hw-btn hw-btn-primary hw-form-submit hw-btn-lg" type="button">
              Get my free assessment <span className="hw-btn-arrow">→</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Lead Magnet — Direction A: full section ----------
function LeadMagnetFull() {
  return (
    <section className="hw-leadmagnet">
      <div className="hw-container">
        <div className="hw-leadmagnet-card">
          <div className="hw-leadmagnet-cover">
            <span className="hw-leadmagnet-cover-tag">FREE · PDF</span>
            <div>
              <div className="hw-leadmagnet-cover-title">HIPAA IT Checklist for Dental Practices</div>
              <ul className="hw-leadmagnet-cover-checks">
                <li>Backup standards</li>
                <li>Device encryption</li>
                <li>Access controls</li>
                <li>BAA requirements</li>
                <li>+ 8 more</li>
              </ul>
            </div>
            <div className="hw-leadmagnet-cover-meta">Hopewell MSP · 1 page · 12 items</div>
          </div>
          <div>
            <span className="hw-leadmagnet-tag">Not ready for a full assessment?</span>
            <h3>Download our HIPAA IT Checklist for Dental Practices.</h3>
            <p>Covers the 12 IT-related HIPAA requirements that dental practices most commonly fail — including backup standards, device encryption, access controls, and what a Business Associate Agreement actually requires from your IT vendor.</p>
            <div className="hw-leadmagnet-form">
              <input type="email" placeholder="Your email" />
              <button className="hw-btn hw-btn-primary" type="button">Send me the checklist <span className="hw-btn-arrow">→</span></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Lead Magnet — Direction B: gold strip ----------
function LeadMagnetStrip() {
  return (
    <section className="hw-leadmagnet-strip">
      <div className="hw-container hw-leadmagnet-strip-inner">
        <div className="hw-leadmagnet-strip-text">
          <div className="hw-leadmagnet-strip-icon"><DIcon name="download" /></div>
          <div>
            <div className="hw-leadmagnet-strip-title">Not ready yet? Grab the HIPAA IT Checklist.</div>
            <div className="hw-leadmagnet-strip-sub">12 IT requirements dental practices most commonly miss. Free PDF, no call required.</div>
          </div>
        </div>
        <form className="hw-leadmagnet-strip-form" onSubmit={(e) => e.preventDefault()}>
          <input type="email" placeholder="Your email" />
          <button className="hw-btn hw-btn-on-light" type="button">Send checklist <span className="hw-btn-arrow">→</span></button>
        </form>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer({ light = false, paid = false }) {
  return (
    <footer className={"hw-footer " + (light ? "hw-footer-light" : "")}>
      <div className="hw-container hw-footer-inner">
        <div className="hw-footer-brand">
          <img src="assets/logo-emblem.svg" alt="" className="hw-brand-emblem" />
          <span className="hw-brand-name">HOPEWELL</span>
          <span className="hw-brand-msp">MSP</span>
        </div>
        <div className="hw-footer-links">
          {paid ? (
            <>
              <a href="#contact">Assessment</a>
              <a href="tel:+12055828660">(205) 582-8660</a>
              <a href="#privacy">Privacy</a>
            </>
          ) : (
            <>
              <a href="#services">Services</a>
              <a href="#industries">Industries</a>
              <a href="#about">About</a>
              <a href="#contact">Contact</a>
            </>
          )}
        </div>
        <div className="hw-footer-meta">© 2026 Hopewell MSP · Birmingham, AL</div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  NavFull, NavStripped, HeroTrustLine, ProofBar,
  PMSoftwareSection, PainList, PainQuotes,
  PillarsWithBuild, PillarsOnly, BuildSection,
  CaseStudyStory, Testimonial,
  PricingAnchor, PricingBands,
  AssessmentForm, LeadMagnetFull, LeadMagnetStrip,
  Footer,
});
