// ====== Ace Home Solutions — single-page interactive prototype ======
const { useState, useEffect, useRef } = React;

// Resource resolver — uses inlined blob URLs in standalone bundle, falls back to paths in dev.
const RES = (id, fallback) =>
  (typeof window !== "undefined" && window.__resources && window.__resources[id]) || fallback;

const SERVICES = [
{ id: "flooring", name: "Flooring", desc: "Hardwood, laminate, vinyl, tile and more.", icon: "Floor" },
{ id: "painting", name: "Painting", desc: "Interior & exterior painting with flawless finishes.", icon: "Brush" },
{ id: "cabinets", name: "Cabinets", desc: "Custom cabinets to elevate style & functionality.", icon: "Cabinet" },
{ id: "windows", name: "Windows", desc: "Energy-efficient windows built to last.", icon: "Window" },
{ id: "doors", name: "Doors", desc: "Exterior & interior doors for every style.", icon: "Door" },
{ id: "home", name: "Home Improvement", desc: "Kitchens, baths, trim, repairs & more.", icon: "HomeWrench" }];


const HERO_TILES = [
{ tone: "floor", label: "Flooring", icon: "Floor", img: RES("flooringImg", "images/flooring.jpg") },
{ tone: "paint", label: "Painting", icon: "Brush", img: RES("paintingImg", "images/painting.jpg") },
{ tone: "kitchen", label: "Cabinets", icon: "Cabinet", img: RES("cabinetsImg", "images/cabinets.jpg") },
{ tone: "window", label: "Windows", icon: "Window", img: RES("windowsImg", "images/windows.jpg") },
{ tone: "door", label: "Doors", icon: "Door", img: RES("doorsImg", "images/doors.jpg") }];


const PROJECTS = [
{ label: "Hardwood Living Room", img: RES("projHardwood", "images/proj-living-hardwood.jpg") },
{ label: "Modern Kitchen Remodel", img: RES("projKitchenLuxe", "images/proj-kitchen-luxe.jpg") },
{ label: "Master Bath Remodel", img: RES("projBath", "images/proj-bath.jpg") },
{ label: "Classic Kitchen Refresh", img: RES("projKitchenClassic", "images/proj-kitchen-classic.jpg") },
{ label: "Vinyl Plank Living Room", img: RES("projVinyl", "images/proj-living-vinyl.jpg") }];


const TESTIMONIALS = [
{ quote: "Ace Home Solutions transformed our home from top to bottom. Their team was professional, detail-oriented, and the results exceeded our expectations.", who: "Sarah M., Homeowner" },
{ quote: "From the first estimate to the final walkthrough, every step was smooth. Honest pricing, clean job site, and beautiful craftsmanship.", who: "David T., Anytown" },
{ quote: "We had our kitchen cabinets, flooring, and painting done in one project. Could not be happier with the outcome and the value.", who: "Priya R., Repeat Client" }];


const WHY = [
{ icon: "Shield", t: "Quality Craftsmanship", d: "We use premium materials and proven techniques to ensure beautiful, lasting results." },
{ icon: "Handshake", t: "Reliable Service", d: "On time, on budget, and committed to clear communication." },
{ icon: "Team", t: "Skilled Installers", d: "Our experienced team treats your home with care and respect." },
{ icon: "Tag", t: "Free Estimates", d: "Ready to go with no pressure—just the right solutions for your home." }];


// =============================================================
function Header({ tweaks, onQuote, onMenu, activeSection }) {
  const [scrolled, setScrolled] = useState(false);
  const [openSvc, setOpenSvc] = useState(false);
  const svcRef = useRef(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    const onClick = (e) => {
      if (svcRef.current && !svcRef.current.contains(e.target)) setOpenSvc(false);
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  const navItems = [
  { id: "home",          label: "Home",          href: "/" },
  { id: "services",      label: "Services",       href: "/services", hasMenu: true },
  { id: "about",         label: "About",          href: "/about" },
  { id: "gallery",       label: "Gallery",        href: "/gallery" },
  { id: "service-areas", label: "Service Areas",  href: "/service-areas" },
  { id: "contact",       label: "Contact",        href: "/contact" }];


  return (
    <header className={`hdr ${scrolled ? "scrolled" : ""}`} data-comment-anchor="8808274b07-header-72-5">
      <div className="container hdr-inner">
        <a href="/" className="brand" aria-label="Ace Home Solutions home">
          <img src={RES("logoHeader", "images/ace-logo-header.jpg")} alt="Ace Home Solutions" data-comment-anchor="d1dfe5e067-img-75-11" style={{ height: "68px", width: "auto" }} />
        </a>
        <nav className="nav" aria-label="Main">
          {navItems.map((item) => item.hasMenu ?
          <div className="dropdown-wrap" ref={svcRef} key={item.id}>
              <button
              className={`nav-link ${openSvc ? "open" : ""} ${activeSection === item.id ? "active" : ""}`}
              onClick={(e) => {e.stopPropagation();setOpenSvc((o) => !o);}}
              aria-expanded={openSvc}>
              
                {item.label}<span className="caret"><I.Caret /></span>
              </button>
              <div className={`dropdown ${openSvc ? "open" : ""}`} role="menu">
                {SERVICES.map((s) => {
                const Icon = I[s.icon];
                const slug = s.id === "home" ? "home-improvement" : s.id;
                return (
                  <a key={s.id} href={`/services/${slug}`} onClick={() => setOpenSvc(false)}>
                      <span className="ico"><Icon size={20} /></span>
                      {s.name}
                    </a>);

              })}
              </div>
            </div> :

          <a
            key={item.id}
            href={item.href}
            className={`nav-link ${activeSection === item.id ? "active" : ""}`}>

              {item.label}
            </a>
          )}
        </nav>
        <div className="header-cta">
          <button className="btn btn-primary" onClick={onQuote}>
            Get a Free Quote <span className="arr"><I.Arrow /></span>
          </button>
        </div>
        <button className="menu-toggle" onClick={onMenu} aria-label="Menu">
          <I.Menu />
        </button>
      </div>
    </header>);

}

// =============================================================
function Hero({ onQuote, onTileClick }) {
  return (
    <section id="home" className="hero" style={{ color: "rgb(201, 199, 194)", fontWeight: "400" }} data-comment-anchor="70ac411508-section-125-5">
      <div className="container hero-grid">
        <div>
          <span className="eyebrow">One Team. Complete Home Solutions.</span>
          <h1>
            Complete Home Solutions for Floors, Paint, Cabinets &amp; <span className="accent">More</span>
          </h1>
          <p className="lede">
            From small upgrades to full renovations, Ace Home Solutions delivers
            beautiful, lasting results with quality you can trust.
          </p>
          <div className="hero-cta">
            <button className="btn btn-primary" onClick={onQuote}>
              Get a Free Quote <span className="arr"><I.Arrow /></span>
            </button>
            <a className="btn btn-ghost" href="/services">View Our Services</a>
          </div>
          <div className="hero-trust">
            <div className="item"><span className="ico"><I.Shield size={22} /></span>Licensed &amp; Insured</div>
            <div className="item"><span className="ico"><I.Quality size={22} /></span>Quality Materials</div>
            <div className="item"><span className="ico"><I.Check size={22} /></span>Satisfaction Guaranteed</div>
          </div>
        </div>
        <div className="collage" role="list">
          {HERO_TILES.map((t, i) => {
            const Icon = I[t.icon];
            return (
              <div className="tile" key={i} onClick={() => onTileClick(i)} role="listitem">
                <div className="tile-frame">
                  {t.img ?
                  <img className="tile-img" src={t.img} alt={t.label} style={{ width: "160px", borderStyle: "solid", borderColor: "rgb(255, 255, 255)", borderWidth: "0px" }} /> :
                  <div className="ph" data-tone={t.tone}>
                      <span className="ph-label">[ {t.label.toLowerCase()} photo ]</span>
                    </div>
                  }
                  <div className="cap">{t.label}</div>
                </div>
                <div className="badge"><Icon size={18} /></div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

// =============================================================
function Services({ onLearn }) {
  return (
    <section id="services">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Our Services</span>
          <h2>Everything Your Home Needs</h2>
        </div>
        <div className="services">
          {SERVICES.map((s) => {
            const Icon = I[s.icon];
            return (
              <button className="svc-card" key={s.id} onClick={() => onLearn(s)}>
                <div className="svc-icon"><Icon /></div>
                <h3>{s.name}</h3>
                <p>{s.desc}</p>
                <span className="more">Learn More <span className="arr"><I.Arrow size={14} /></span></span>
              </button>);

          })}
        </div>
      </div>
    </section>);

}

// =============================================================
function Why() {
  return (
    <section id="about" className="why">
      <div className="container why-inner">
        <div>
          <span className="eyebrow">Why Choose Ace</span>
          <h2>Built on Trust.<br />Focused on You.</h2>
          <p className="lede">
            We combine expert craftsmanship, honest communication, and dependable
            service to deliver results you&apos;ll love.
          </p>
        </div>
        <div className="why-feats">
          {WHY.map((f, i) => {
            const Icon = I[f.icon];
            return (
              <div className="why-feat" key={i}>
                <div className="icon-pill"><Icon size={20} /></div>
                <h4>{f.t}</h4>
                <p>{f.d}</p>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

// =============================================================
function Gallery({ onImage }) {
  return (
    <section id="gallery" className="gallery">
      <div className="container">
        <div className="gallery-head">
          <span className="eyebrow">Our Work</span>
          <h2>Recent Projects</h2>
        </div>
        <div className="gal-grid">
          {PROJECTS.map((p, i) =>
          <div className="gal-item" key={i} onClick={() => onImage(i)}>
              {p.img ?
            <img src={p.img} alt={p.label} loading="lazy" /> :
            <div className="ph" data-tone={p.tone}>
                  <span className="ph-label">[ {p.label.toLowerCase()} photo ]</span>
                </div>
            }
              <div className="overlay">
                <span>{p.label}</span>
                <I.Arrow size={16} />
              </div>
            </div>
          )}
        </div>
        <div className="gallery-cta">
          <a href="/gallery" className="btn btn-ghost">View Full Gallery</a>
        </div>
      </div>
    </section>);

}

// =============================================================
function BottomBand() {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % TESTIMONIALS.length), 6500);
    return () => clearInterval(t);
  }, []);
  const cur = TESTIMONIALS[idx];
  return (
    <section id="contact" className="bottom-band">
      <div className="container bottom-grid">
        <div className="testimonial">
          <div className="stars">
            {[0, 1, 2, 3, 4].map((i) => <I.Star key={i} size={18} />)}
          </div>
          <p key={idx} style={{ animation: "fadeIn .4s ease" }}>{cur.quote}</p>
          <div className="who">– {cur.who}</div>
          <div className="dots">
            {TESTIMONIALS.map((_, i) =>
            <button key={i} className={i === idx ? "active" : ""} onClick={() => setIdx(i)} aria-label={`Testimonial ${i + 1}`} />
            )}
          </div>
        </div>
        <div id="service-areas" className="map-card">
          <div>
            <h3>Proudly Serving Our Local Communities</h3>
            <p>We provide expert home solutions across DFW, TX and surrounding areas.</p>
            <a className="btn btn-primary" href="/service-areas">View Service Areas <span className="arr"><I.Arrow size={14} /></span></a>
          </div>
          <div className="map-art">
            <svg viewBox="0 0 180 130" xmlns="http://www.w3.org/2000/svg">
              {/* dot map of USA-ish silhouette */}
              {Array.from({ length: 220 }).map((_, i) => {
                const cols = 22,rows = 10;
                const x = i % cols * 8 + 4;
                const y = Math.floor(i / cols) * 12 + 8;
                // mask shape — denser in middle
                const cx = 90,cy = 60;
                const d = Math.hypot(x - cx, y - cy);
                const wobble = Math.sin(x * 0.15) * 8 + Math.cos(y * 0.2) * 6;
                if (d > 70 + wobble) return null;
                return <circle key={i} cx={x} cy={y} r="1.4" fill="rgba(255,255,255,0.35)" />;
              })}
            </svg>
            <div className="pin" />
          </div>
        </div>
      </div>
    </section>);

}

// =============================================================
function Footer({ onQuote }) {
  return (
    <footer className="ftr">
      <div className="container">
        <div className="ftr-grid">
          <div>
            <a href="/" className="brand">
              <img src={RES("logoHeader", "/images/logo.png")} alt="Ace Home Solutions" className="ftr-logo-color" data-comment-anchor="1d3fbc7020-img-322-15" />
            </a>
            <p className="ftr-tagline">Complete home solutions with quality craftsmanship you can trust.</p>
            <div className="socials">
              <a href="#" aria-label="Facebook"><I.Facebook /></a>
              <a href="#" aria-label="Instagram"><I.Instagram /></a>
              <a href="#" aria-label="Google"><I.Google /></a>
            </div>
          </div>
          <div className="ftr-col">
            <h5>Quick Links</h5>
            <ul>
              <li><a href="/">Home</a></li>
              <li><a href="/services">Services</a></li>
              <li><a href="/about">About Us</a></li>
              <li><a href="/gallery">Gallery</a></li>
              <li><a href="/service-areas">Service Areas</a></li>
              <li><a href="/contact">Contact</a></li>
            </ul>
          </div>
          <div className="ftr-col">
            <h5>Our Services</h5>
            <ul>
              {SERVICES.map((s) => {
                const slug = s.id === "home" ? "home-improvement" : s.id;
                return <li key={s.id}><a href={`/services/${slug}`}>{s.name}</a></li>;
              })}
            </ul>
          </div>
          <div className="ftr-col ftr-contact">
            <h5>Contact Us</h5>
            <ul>
              <li><span className="ico"><I.Phone /></span><a href="tel:9403264695">(940) 326-4695</a></li>
              <li><span className="ico"><I.Mail /></span><a href="mailto:info@acehomesolutionstx.com">info@acehomesolutionstx.com</a></li>
              <li><span className="ico"><I.Pin /></span><span>200 N Kimball Ave Suite 221 #1112<br />Southlake, TX 76092</span></li>
            </ul>
          </div>
          <div className="ftr-col ftr-cta">
            <h5>Get a Free Quote</h5>
            <p>Ready to get started? We&apos;re here to help.</p>
            <button className="btn btn-primary" onClick={onQuote}>
              Get a Free Quote <span className="arr"><I.Arrow size={14} /></span>
            </button>
          </div>
        </div>
        <div className="ftr-bot">
          <div>© 2026 Ace Home Solutions. All rights reserved.</div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="/privacy-policy">Privacy Policy</a>
            <a href="/terms">Terms &amp; Conditions</a>
          </div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Header, Hero, Services, Why, Gallery, BottomBand, Footer, SERVICES, PROJECTS, HERO_TILES });