// generate-static.js — Generates About, Contact, Services, Service Areas, Privacy, Terms pages
//
// This is called by generate.js; not run standalone.

const fs = require("fs");
const path = require("path");

// Extract CSS, footer, top-bar, nav from main template so static pages share them.
function buildStaticPageRenderer(mainTemplate, data) {
  // Extract <style>...</style> block
  const styleMatch = mainTemplate.match(/<style>[\s\S]*?<\/style>/);
  const cssBlock = styleMatch ? styleMatch[0] : "";

  // Helper: HTML escape
  const escapeHtml = (s) =>
    String(s)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#39;");

  // Footer service-areas links
  const footerAreasHtml = data.states
    .map((s) => `<li><a href="/${s.slug}/">${escapeHtml(s.name)}</a></li>`)
    .join("\n");

  const phone = data.site.phone;
  const phoneLink = data.site.phoneLink;
  const year = String(new Date().getFullYear());

  // Build the static page HTML wrapper
  const buildPage = ({ slug, title, subtitle, metaTitle, metaDescription, bodyHtml }) => `<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>${escapeHtml(metaTitle)}</title>
<meta name="description" content="${escapeHtml(metaDescription)}" />
<meta name="robots" content="index, follow" />
<meta name="theme-color" content="#0D1B37" />
<link rel="canonical" href="${data.site.domain}/${slug}/" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
${cssBlock}
<style>
/* Static page-specific styles */
.page-banner { background: var(--navy); background-image: radial-gradient(circle at 80% 30%, rgba(227,6,19,0.18), transparent 55%), radial-gradient(circle at 15% 80%, rgba(30,58,138,0.30), transparent 55%); color: #fff; padding: 64px 0 56px; text-align: center; position: relative; }
.page-banner::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--red); }
.page-banner h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(36px, 5vw, 56px); letter-spacing: 2px; text-transform: uppercase; line-height: 1; margin-bottom: 14px; }
.page-banner .subtitle { font-size: 16px; max-width: 620px; margin: 0 auto; color: #cbd5e1; line-height: 1.55; }
.page-banner .breadcrumb { font-size: 12px; color: #9ca3af; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 18px; }
.page-banner .breadcrumb a { color: #cbd5e1; }
.page-banner .breadcrumb a:hover { color: #fff; }
.page-content { padding: 64px 0; }
.page-content .container { max-width: 920px; }
.page-content .container.wide { max-width: 1240px; }
.prose h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy); margin: 38px 0 16px; line-height: 1.2; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 700; color: var(--navy); margin: 24px 0 10px; }
.prose p { font-size: 15px; color: var(--text-soft); line-height: 1.75; margin-bottom: 14px; }
.prose ul, .prose ol { margin: 12px 0 18px 24px; }
.prose li { font-size: 15px; color: var(--text-soft); line-height: 1.7; margin-bottom: 6px; }
.prose strong { color: var(--navy); font-weight: 700; }
.prose a { color: var(--red); text-decoration: underline; }
.prose .legal-note { background: #fef3c7; border-left: 4px solid var(--amber); padding: 16px 20px; margin: 24px 0; border-radius: 4px; font-size: 14px; color: var(--text-soft); line-height: 1.6; }
.prose .legal-note strong { color: var(--navy); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 48px; }
.contact-card { background: #fff; border: 1.5px solid var(--border); border-radius: 8px; padding: 32px 24px; text-align: center; transition: all .2s; }
.contact-card:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(13,27,55,0.08); }
.contact-card .ic { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: rgba(227,6,19,0.1); color: var(--red); display: grid; place-items: center; }
.contact-card .ic svg { width: 24px; height: 24px; }
.contact-card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy); margin-bottom: 8px; }
.contact-card .value { font-size: 18px; font-weight: 700; color: var(--red); display: block; margin-bottom: 6px; }
.contact-card .value.email { font-size: 16px; word-break: break-all; }
.contact-card p { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 6px; }

.expectations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 32px 0; }
.expectation-card { text-align: center; padding: 18px 12px; }
.expectation-num { width: 36px; height: 36px; margin: 0 auto 14px; background: var(--navy); color: #fff; border-radius: 50%; display: grid; place-items: center; font-family: 'Bebas Neue', sans-serif; font-size: 17px; }
.expectation-card h4 { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); margin-bottom: 8px; }
.expectation-card p { font-size: 13px; color: var(--muted); line-height: 1.55; }

.services-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 32px 0; }
.service-detail-card { background: #fff; border: 1.5px solid var(--border); border-radius: 8px; padding: 32px 28px; transition: all .2s; }
.service-detail-card:hover { border-color: var(--navy); box-shadow: 0 10px 28px rgba(13,27,55,0.06); }
.service-detail-card .ic { width: 64px; height: 64px; color: var(--blue); margin-bottom: 18px; }
.service-detail-card .ic.red { color: var(--red); }
.service-detail-card .ic svg { width: 56px; height: 56px; }
.service-detail-card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy); margin-bottom: 10px; }
.service-detail-card p { font-size: 14px; color: var(--text-soft); line-height: 1.65; margin-bottom: 12px; }
.service-detail-card ul { margin: 0 0 0 22px; }
.service-detail-card li { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 4px; }
.service-detail-card.service-detail-card--photo { padding: 0; overflow: hidden; }
.service-detail-card.service-detail-card--photo .service-photo { aspect-ratio: 16/9; overflow: hidden; background: var(--off); margin: -1px -1px 0 -1px; }
.service-detail-card.service-detail-card--photo .service-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.service-detail-card.service-detail-card--photo:hover .service-photo img { transform: scale(1.04); }
.service-detail-card.service-detail-card--photo h3 { padding: 24px 28px 0; margin-bottom: 10px; }
.service-detail-card.service-detail-card--photo p { padding: 0 28px; }
.service-detail-card.service-detail-card--photo ul { padding: 0 28px 28px; margin-left: 0; padding-left: 50px; }

/* About page — Crews in Action gallery */
.about-gallery { background: var(--off); padding: 72px 0; margin: 64px 0 0; }
.about-gallery .container { max-width: 1240px; }
.about-gallery h2 { text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: clamp(26px, 3vw, 34px); letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; }
.about-gallery .lede { text-align: center; font-size: 14.5px; color: var(--text-soft); max-width: 580px; margin: 0 auto 40px; line-height: 1.55; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 18px; }
.gallery-item { border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: var(--off); border: 1px solid var(--border); transition: transform .25s ease, box-shadow .25s ease; }
.gallery-item:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(13,27,55,0.10); }
.gallery-item.wide { aspect-ratio: 16/10; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item.wide { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item, .gallery-item.wide { aspect-ratio: 4/3; }
}

.areas-coverage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 32px 0; }
.area-state-card { background: #fff; border: 1.5px solid var(--border); border-radius: 8px; padding: 22px 20px; text-decoration: none; transition: all .2s; display: block; }
.area-state-card:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 8px 22px rgba(13,27,55,0.08); }
.area-state-card .state-name { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1.5px; color: var(--navy); display: block; margin-bottom: 6px; }
.area-state-card .city-count { font-size: 12px; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; }
.area-state-card .cities-preview { font-size: 13px; color: var(--text-soft); margin-top: 10px; line-height: 1.5; }
.area-state-card .cta { color: var(--red); font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 10px; display: block; }

.cta-banner { background: var(--navy); background-image: radial-gradient(circle at 80% 50%, rgba(227,6,19,0.22), transparent 55%); color: #fff; padding: 56px 32px; border-radius: 10px; text-align: center; margin: 48px auto; max-width: 920px; }
.cta-banner h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(26px, 3vw, 32px); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; }
.cta-banner p { font-size: 15px; color: #cbd5e1; max-width: 540px; margin: 0 auto 24px; line-height: 1.6; }
.cta-banner .btn { display: inline-flex; align-items: center; gap: 12px; background: var(--red); color: #fff; padding: 16px 32px; border-radius: 6px; font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; transition: all .2s; box-shadow: 0 6px 20px rgba(227,6,19,0.45); }
.cta-banner .btn:hover { background: var(--red-bright); transform: translateY(-2px); }
.cta-banner .btn svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .expectations-grid { grid-template-columns: 1fr 1fr; }
  .services-detail { grid-template-columns: 1fr; }
  .areas-coverage-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .expectations-grid, .areas-coverage-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>

<!-- TOP BAR -->
<div class="top-bar">
  <div class="container">
    <span>24/7 Emergency Water Damage Restoration Services</span>
    <span>Serving All Across the USA</span>
  </div>
</div>

<!-- MAIN NAV -->
<nav class="main-nav" aria-label="Main navigation">
  <div class="container">
    <a href="/" class="logo" aria-label="Rapid Water Recovery — home">
      <img src="/logo-full.png" alt="Rapid Water Recovery — Water Damage Restoration Experts" class="logo-img" width="1212" height="417" />
    </a>
    <ul class="nav-links">
      <li><a href="/"${slug === "" ? ' class="active"' : ""}>Home</a></li>
      <li><a href="/about/"${slug === "about" ? ' class="active"' : ""}>About Us</a></li>
      <li><a href="/services/"${slug === "services" ? ' class="active"' : ""}>Services</a></li>
      <li><a href="/service-areas/"${slug === "service-areas" ? ' class="active"' : ""}>Service Areas</a></li>
      <li><a href="/reviews/">Reviews</a></li>
      <li><a href="/blog/">Blog</a></li>
      <li><a href="/contact/"${slug === "contact" ? ' class="active"' : ""}>Contact</a></li>
    </ul>
    <a href="tel:${phoneLink}" class="nav-phone">
      <div class="nav-phone-text">
        <span class="label">24/7 Emergency Service</span>
        <span class="number">${phone}</span>
      </div>
      <span class="nav-phone-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.6 10.8a15 15 0 006.6 6.6l2.2-2.2a1 1 0 011-.25 11.5 11.5 0 003.6.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.5 11.5 0 00.57 3.6 1 1 0 01-.25 1L6.6 10.8z"/></svg>
      </span>
    </a>
  </div>
</nav>

<!-- PAGE BANNER -->
<section class="page-banner">
  <div class="container">
    <div class="breadcrumb"><a href="/">Home</a> &nbsp;›&nbsp; ${escapeHtml(title)}</div>
    <h1>${escapeHtml(title)}</h1>
    <p class="subtitle">${escapeHtml(subtitle)}</p>
  </div>
</section>

<!-- PAGE CONTENT -->
<main class="page-content">
${bodyHtml}
</main>

<!-- FOOTER -->
<footer>
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <div class="foot-logo">
          <img src="/logo-dark.png" alt="Rapid Water Recovery" class="foot-logo-img" />
        </div>
        <p>Providing fast, reliable and professional restoration services across the USA.</p>
        <div class="foot-social">
          <a href="#" class="fb" aria-label="Facebook"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 13h3l1-4h-4V7c0-1 .5-2 2-2h2V1.5c-1-.1-2-.2-3-.2-3 0-5 2-5 5v3H7v4h3v9h4v-9z"/></svg></a>
          <a href="#" class="gg" aria-label="Google"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 11v3h7c-.3 1.7-2.2 5-7 5-4.2 0-7.6-3.5-7.6-7.8S7.8 3.4 12 3.4c2.4 0 4 1 4.9 1.9l3.4-3.3C18.1.9 15.3 0 12 0 5.4 0 0 5.4 0 12s5.4 12 12 12c6.9 0 11.5-4.9 11.5-11.7 0-.8-.1-1.4-.2-2H12z"/></svg></a>
          <a href="#" class="tw" aria-label="Twitter"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M23 3a11 11 0 01-3.1.9A5.4 5.4 0 0022.3 1a10.9 10.9 0 01-3.4 1.3 5.4 5.4 0 00-9.2 4.9A15.3 15.3 0 011 2.1a5.4 5.4 0 001.7 7.2 5.3 5.3 0 01-2.4-.7v.1a5.4 5.4 0 004.3 5.3 5.4 5.4 0 01-2.4.1 5.4 5.4 0 005 3.8A10.9 10.9 0 010 19.5 15.3 15.3 0 008.3 22c10 0 15.4-8.3 15.4-15.4v-.7A11 11 0 0023 3z"/></svg></a>
        </div>
      </div>
      <div>
        <h5>Quick Links</h5>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about/">About Us</a></li>
          <li><a href="/services/">Services</a></li>
          <li><a href="/service-areas/">Service Areas</a></li>
          <li><a href="/blog/">Blog</a></li>
          <li><a href="/contact/">Contact</a></li>
        </ul>
      </div>
      <div>
        <h5>Our Services</h5>
        <ul>
          <li><a href="/services/">Water Damage Restoration</a></li>
          <li><a href="/services/">Flood Damage Cleanup</a></li>
          <li><a href="/services/">Fire &amp; Smoke Damage</a></li>
          <li><a href="/services/">Mold Remediation</a></li>
          <li><a href="/services/">Structural Drying</a></li>
          <li><a href="/services/">Insurance Claim Assistance</a></li>
        </ul>
      </div>
      <div>
        <h5>Service Areas</h5>
        <ul>${footerAreasHtml}</ul>
      </div>
      <div class="foot-contact">
        <div class="label">24/7 Emergency Service</div>
        <a href="tel:${phoneLink}" class="foot-phone">${phone}</a>
        <div class="line"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="2"/><polyline points="3,7 12,13 21,7"/></svg> info@rapidwaterrecovery.com</div>
        <div class="line"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20"/></svg> www.rapidwaterrecovery.com</div>
        <div class="hours">Available 24 Hours, 7 Days a Week</div>
      </div>
    </div>
  </div>
  <div class="foot-bottom">
    <div class="container">
      <div>© ${year} Rapid Water Recovery. All Rights Reserved.</div>
      <div class="foot-bottom-right">
        <a href="/privacy/">Privacy Policy</a>
        <a href="/terms/">Terms of Service</a>
        <a href="/sitemap.xml">Sitemap</a>
      </div>
    </div>
  </div>
</footer>

<!-- DISCLAIMER -->
<div class="disclaimer-bar">
  <div class="container">
    <p><strong>Important:</strong> Rapid Water Recovery is a private restoration referral service. We connect property owners with independent, licensed local restoration contractors who perform all on-site work; we are not the contractor and do not provide restoration services directly. For life-threatening emergencies, always dial 911.</p>
  </div>
</div>

<!-- STICKY MOBILE CALL -->
<a href="tel:${phoneLink}" class="sticky-call">
  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.6 10.8a15 15 0 006.6 6.6l2.2-2.2a1 1 0 011-.25 11.5 11.5 0 003.6.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.5 11.5 0 00.57 3.6 1 1 0 01-.25 1L6.6 10.8z"/></svg>
  Call ${phone}
</a>

</body>
</html>`;

  return { buildPage, escapeHtml, footerAreasHtml };
}

module.exports = { buildStaticPageRenderer };
