/* HudCo Construction — Trust band, CTA, Footer */
const { Avatar: WT_Avatar, Rating: WT_Rating, Button: WT_Button } = window.HudCoDesignSystem_e27b9b;

const WT_STATS = [
  { n: "1,200+", l: "Jobs done right" },
  { n: "96%",    l: "On-time arrivals" },
  { n: "4.9",    l: "Average rating" },
  { n: "1 in 3", l: "Customers rebook" },
];

const WT_REVIEWS = [
  { q: "Saw the price online, booked for Tuesday, and Marcus showed up at 9 on the dot. Paid exactly what it said. This is how it should work.", name: "Dana R.", area: "Riverside" },
  { q: "No 'we'll call you back with a quote.' I knew the number before I booked. Mounted my TV and was gone in an hour.", name: "Theo K.", area: "Eastgate" },
  { q: "Texted me when he was on the way, cleaned up after, didn't try to upsell me. I've already booked them again.", name: "Priya M.", area: "Oakhill" },
];

function WebTrust() {
  return (
    <section className="mk-section mk-trust" id="reviews">
      <div className="mk-wrap">
        <div className="mk-stats">
          {WT_STATS.map((s) => (
            <div className="mk-stat" key={s.l}>
              <div className="mk-stat__n">{s.n}</div>
              <div className="mk-stat__l">{s.l}</div>
            </div>
          ))}
        </div>
        <div className="mk-section__head" style={{ marginBottom: "2.2rem" }}>
          <h2>Neighbors who stopped dreading repairs</h2>
        </div>
        <div className="mk-reviews">
          {WT_REVIEWS.map((r) => (
            <div className="mk-review" key={r.name}>
              <WT_Rating value={5} size="sm" />
              <p className="mk-review__q">"{r.q}"</p>
              <div className="mk-review__by">
                <WT_Avatar name={r.name} size="md" />
                <div><b>{r.name}</b><span>{r.area}</span></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WebTrust = WebTrust;

function WebCta({ onBook }) {
  return (
    <section className="mk-cta">
      <div className="mk-wrap mk-cta__inner">
        <h2>Ready for the no-surprises way?</h2>
        <p>See your price in 60 seconds. No account required to start.</p>
        <WT_Button
          variant="secondary"
          size="lg"
          iconRight={<i data-lucide="arrow-right"></i>}
          style={{ background: "#fff", color: "var(--slate-600)" }}
          onClick={() => onBook(null)}>
          See my price
        </WT_Button>
      </div>
    </section>
  );
}
window.WebCta = WebCta;

function WebFooter() {
  return (
    <footer className="mk-footer">
      <div className="mk-wrap">
        <div className="mk-footer__grid">
          <div className="mk-footer__brand">
            <img src="assets/logo/hudco-mark-white.png" alt="HudCo" />
            <p>HudCo Construction — the one-stop shop for home work, done right and priced up front. Proudly local, fully insured.</p>
          </div>
          <div>
            <h4>Services</h4>
            <ul>
              <li><a href="#services">TV &amp; wall mounting</a></li>
              <li><a href="#services">Furniture assembly</a></li>
              <li><a href="#services">Plumbing fixes</a></li>
              <li><a href="#services">Painting &amp; patching</a></li>
              <li><a href="#services">Odd jobs</a></li>
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#reviews">Reviews</a></li>
              <li><a href="#top">Careers</a></li>
              <li><a href="#top">Contact</a></li>
              <li><a href="admin.html">Admin</a></li>
            </ul>
          </div>
          <div>
            <h4>The HudCo family</h4>
            <ul className="mk-footer__fam">
              <li><a href="#top"><span><i data-lucide="building-2" style={{ width: 14, height: 14 }}></i> HudCo Realty</span></a></li>
              <li><a href="#top"><span><i data-lucide="key-round" style={{ width: 14, height: 14 }}></i> HudCo Stay</span></a></li>
              <li><a href="#top"><span><i data-lucide="home" style={{ width: 14, height: 14 }}></i> HudCo Properties</span></a></li>
              <li><a href="#top"><span><i data-lucide="sparkles" style={{ width: 14, height: 14 }}></i> HudCo.ai</span></a></li>
            </ul>
          </div>
        </div>
        <div className="mk-footer__bottom">
          <span>© 2026 HudCo Ventures. All rights reserved.</span>
          <span>Licensed · Bonded · Insured</span>
        </div>
      </div>
    </footer>
  );
}
window.WebFooter = WebFooter;