// ====== Shared Service Sub-Page ======
// Each service HTML page sets window.__serviceData before loading this file.

function ServiceSubPage() {
  const d = window.__serviceData || {};

  return (
    <PageLayout activeSection="services">

      {/* Breadcrumb */}
      <div className="breadcrumb-bar">
        <div className="container">
          <nav aria-label="Breadcrumb">
            <a href="/">Home</a>
            <span aria-hidden="true"> › </span>
            <a href="/services">Services</a>
            <span aria-hidden="true"> › </span>
            <span>{d.name}</span>
          </nav>
        </div>
      </div>

      {/* Hero */}
      <section className="page-hero">
        <div className="container">
          <span className="eyebrow">{d.eyebrow || "Our Services"}</span>
          <h1>{d.headline}</h1>
          <p className="lede">{d.lede}</p>
          <div className="hero-cta">
            <button
              className="btn btn-primary"
              onClick={() => window.__openQuote && window.__openQuote(d.id)}
            >
              Get a Free Quote <span className="arr"><I.Arrow size={14} /></span>
            </button>
            <a className="btn btn-ghost" href="tel:9403264695">(940) 326-4695</a>
          </div>
        </div>
      </section>

      {/* What We Offer */}
      <section className="page-section">
        <div className="container">
          <div className="content-grid">
            <div>
              <span className="eyebrow">What's Included</span>
              <h2>{d.offerTitle || "What We Offer"}</h2>
              <p>{d.offerIntro}</p>
              <ul className="feature-list">
                {(d.features || []).map((f, i) => (
                  <li key={i}>
                    <span className="ico"><I.Check size={18} /></span>
                    <div>
                      <strong>{f.title}</strong>
                      <p>{f.desc}</p>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <img
                src={d.img}
                alt={d.imgAlt}
                style={{ borderRadius: "12px", width: "100%" }}
              />
            </div>
          </div>
        </div>
      </section>

      {/* Process */}
      <section className="page-section alt">
        <div className="container">
          <div className="section-head" style={{ textAlign: "center" }}>
            <span className="eyebrow">Our Process</span>
            <h2>How It Works</h2>
            <p style={{ color: "var(--muted)", maxWidth: 520, margin: "12px auto 0" }}>
              A simple, transparent process from first call to final walkthrough.
            </p>
          </div>
          <div className="process-steps">
            {(d.process || []).map((step, i) => (
              <div className="process-step" key={i}>
                <div className="step-num">{i + 1}</div>
                <h4>{step.title}</h4>
                <p>{step.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      {d.faqs && d.faqs.length > 0 && (
        <section className="page-section">
          <div className="container">
            <div className="section-head" style={{ textAlign: "center" }}>
              <span className="eyebrow">Common Questions</span>
              <h2>Frequently Asked Questions</h2>
            </div>
            <div className="faq-list" style={{ maxWidth: 760, margin: "0 auto" }}>
              {d.faqs.map((faq, i) => (
                <details className="faq-item" key={i}>
                  <summary>{faq.q}</summary>
                  <p>{faq.a}</p>
                </details>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Related Services */}
      <section className="page-section alt">
        <div className="container">
          <div className="section-head" style={{ textAlign: "center" }}>
            <span className="eyebrow">Explore More</span>
            <h2>Other Services We Offer</h2>
          </div>
          <div className="services" style={{ marginTop: 32 }}>
            {SERVICES.filter(s => s.id !== d.id).map(s => {
              const Icon = I[s.icon];
              const slug = s.id === "home" ? "home-improvement" : s.id;
              return (
                <a key={s.id} className="service-card-link" href={`/services/${slug}`}>
                  <div className="svc-icon"><Icon size={26} /></div>
                  <h3>{s.name}</h3>
                  <p>{s.desc}</p>
                  <span className="more">Learn More <I.Arrow size={13} /></span>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA */}
      <div className="cta-band">
        <div className="container">
          <h2>Ready to Get Started?</h2>
          <p>Free estimates, honest pricing, and quality you can see — all across DFW.</p>
          <button
            className="btn-white"
            onClick={() => window.__openQuote && window.__openQuote(d.id)}
          >
            Get a Free Quote <I.Arrow size={14} />
          </button>
        </div>
      </div>

    </PageLayout>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ServiceSubPage />);