import type { Metadata } from "next";
import { notFound } from "next/navigation";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { getMenu, getHomeContent, getPageContent, getAllPageUris, getBreadcrumbsFromUri } from "@/lib/wordpress";
import type { HomeContent, PageContent, MenuItem, BreadcrumbItem } from "@/lib/content";
import Breadcrumb from "@/components/Breadcrumb";
import { getProduct, type WcProduct } from "@/lib/woocommerce";
import { ProductJsonLd, ServiceJsonLd, ItemListJsonLd } from "@/components/JsonLd";
import AddToCartButton from "@/components/AddToCartButton";
import { ViewItemTracker } from "@/components/Tracking";
import DemoLeadForm from "@/components/DemoLeadForm";
import ContactForm from "@/components/ContactForm";
import Image from "@/components/Image";
import { getCachedMediaSizes } from "@/lib/mediaSizes";

type S = Record<string, unknown>;

const PRODUCT_SLUGS = new Set(["sigma-1040-dr", "sigma-1040-sr", "sigma-1040-tw"]);
const SERVICE_URIS = new Set([
  "/revenue-boosters/audit-assistance-program/",
  "/creative-services/",
  "/revenue-boosters/resellers-program/",
  "/managed-services-plans/",
]);
const COMPARISON_URI = "/professional-tax-software-comparison-chart/";
const MANAGED_SERVICES_URI = "/managed-services-plans/";
const DOWNLOAD_DEMOS_URI = "/download-demos/";


const SYSTEM_PAGES = /^\/(cart|checkout|my-account|thank-you)/;

/* URIs that exist in WordPress but should NOT be built as pages.
   The canonical page at /bank-products/what-is-a-bank-product/ serves
   all traffic; the old /what-is-a-bank-product/ redirects via .htaccess. */
const NON_CANONICAL: ReadonlySet<string> = new Set([
  "/what-is-a-bank-product/",
]);

export async function generateStaticParams() {
  const uris = await getAllPageUris();
  const params: Array<{ slug: string[] }> = [];
  for (const uri of uris) {
    if (SYSTEM_PAGES.test(uri) || NON_CANONICAL.has(uri)) continue;
    const segments = uri.split("/").filter(Boolean);
    if (segments.length > 0) {
      params.push({ slug: segments });
    }
  }
  return params;
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string[] }> }): Promise<Metadata> {
  const segments = (await params).slug;
  const uri = "/" + segments.join("/") + "/";
  const [content, page] = await Promise.all([getHomeContent(), getPageContent(uri)]);
  if (!page) return {};
  return {
    title: page.seo.title || `${page.title} — ${content.siteTitle}`,
    description: page.seo.description || content.siteDescription,
    icons: content.siteIcon ? [{ rel: "icon", url: content.siteIcon }] : undefined,
    robots: page.seo.title ? "index, follow" : "noindex",
    keywords: page.seo.keywords || undefined,
    alternates: { canonical: page.seo.canonical || undefined },
    openGraph: {
      title: page.seo.ogTitle || page.seo.title || undefined,
      description: page.seo.ogDescription || page.seo.description || undefined,
      type: (page.seo.ogType || "website") as "website" | "article",
      url: page.seo.ogUrl || undefined,
      siteName: page.seo.ogSiteName || content.siteTitle || undefined,
    },
    twitter: {
      card: (page.seo.twitterCard || "summary_large_image") as "summary" | "summary_large_image" | "app" | "player",
      title: page.seo.twitterTitle || page.seo.title || undefined,
      description: page.seo.twitterDescription || page.seo.description || undefined,
    },
  };
}

export default async function Page({ params }: { params: Promise<{ slug: string[] }> }) {
  const segments = (await params).slug;
  const uri = "/" + segments.join("/") + "/";
  const leaf = segments[segments.length - 1];

  const isProduct = PRODUCT_SLUGS.has(leaf);
  const isService = SERVICE_URIS.has(uri);
  const isComparison = uri === COMPARISON_URI;
  const isManagedServices = uri === MANAGED_SERVICES_URI;
  const isDownloadDemos = uri === DOWNLOAD_DEMOS_URI;

  const [content, page, menu, breadcrumbs] = await Promise.all([
    getHomeContent(),
    getPageContent(uri),
    getMenu(),
    getBreadcrumbsFromUri(uri),
  ]);
  if (!page) notFound();

  const product = isProduct ? await getProduct(leaf) : null;

  const comparisonProducts = isComparison
    ? await Promise.all(["sigma-1040-tw", "sigma-1040-sr", "sigma-1040-dr"].map((s) => getProduct(s)))
    : [];

  const demoProducts = isDownloadDemos
    ? await Promise.all(["sigma-1040-tw", "sigma-1040-sr", "sigma-1040-dr"].map((s) => getProduct(s)))
    : [];

  return (
    <div style={{display:'contents'}}>
      {isProduct && product
        ? renderProductPage(content, page, menu, product)
        : isComparison
        ? renderComparisonChartPage(content, page, menu, breadcrumbs, comparisonProducts)
        : isManagedServices
        ? renderManagedServicesPage(content, page, menu, breadcrumbs)
        : isDownloadDemos
        ? renderDownloadDemosPage(content, menu, demoProducts)
        : renderPage(content, page, menu, breadcrumbs)}

      {isProduct && product && <ProductLd product={product} slug={leaf} />}
      {isService && (
        <ServiceJsonLd name={page.title} description={stripHtml(page.bodyHtml).slice(0, 200)} url={`https://sigmataxpro.com${uri}`} />
      )}
      {isComparison && <ComparisonItemList />}
    </div>
  );
}

async function ComparisonItemList() {
  const slugs = ["sigma-1040-sr", "sigma-1040-tw", "sigma-1040-dr"];
  const products = await Promise.all(slugs.map((s) => getProduct(s)));
  const items = slugs.map((slug, i) => {
    const p = products[i];
    return {
      name: p?.name || slug.toUpperCase().replace(/-/g, " "),
      url: `https://sigmataxpro.com/services/${slug}/`,
      price: p ? p.sale_price || p.regular_price || p.price : undefined,
      sku: p?.sku || undefined,
    };
  });
  return (
    <ItemListJsonLd
      name="Professional Tax Software Comparison Chart"
      description="Compare Sigma Tax Pro service packages side by side"
      url="https://sigmataxpro.com/professional-tax-software-comparison-chart/"
      itemList={items}
    />
  );
}

async function ProductLd({ product, slug }: { product: WcProduct; slug: string }) {
  if (!product) return null;
  return (
    <>
      <ProductJsonLd
        name={product.name}
        description={product.short_description.replace(/<[^>]+>/g, "").slice(0, 300)}
        sku={product.sku || String(product.id)}
        price={product.sale_price || product.regular_price || product.price}
        image={product.images?.[0]?.src || undefined}
        url={`https://sigmataxpro.com/services/${slug}/`}
      />
      <ViewItemTracker
        id={product.id}
        sku={product.sku}
        name={product.name}
        price={product.sale_price || product.regular_price || product.price}
        category={product.categories?.[0]?.name || "Tax Software"}
      />
    </>
  );
}

function stripHtml(html: string): string {
  return html ? html.replace(/<[^>]*>/g, "").trim() : "";
}

function renderPage(content: HomeContent, page: PageContent, menu: MenuItem[], breadcrumbs?: BreadcrumbItem[]) {
  return (
    <div className="v4-bg">
      <Header content={content} menuItems={menu} />
      <main>
        {page.sections && page.sections.length > 0 ? (
          <PageSectionsRenderer sections={page.sections} breadcrumbs={breadcrumbs} />
        ) : page.bodyHtml ? (
          <div
            className="page-content page-content--elementor"
            dangerouslySetInnerHTML={{ __html: page.bodyHtml }}
          />
        ) : (
          <section className="container" style={{ padding: "80px 0" }}>
            <h1 style={{ fontWeight: 900, fontSize: 42, color: "#182233" }}>{page.title}</h1>
          </section>
        )}
      </main>
      <Footer content={content} />
    </div>
  );
}

function renderProductPage(content: HomeContent, page: PageContent, menu: MenuItem[], product: WcProduct) {
  const sections = page.sections || [];
  const nonHeroSections = sections.slice(1);
  const hero = sections[0] || {};
  const SM = { fontFamily: "'Space Mono',monospace" };
  const F = { fontFamily: "Lato,sans-serif" };
  const s_ = (v: unknown) => (v as string) ?? "";
  const arr = (v: unknown) => (Array.isArray(v) ? v : []);
  const checklist = arr(hero.checklistItems) as Array<{ text?: string }>;
  const productSku = product.sku || "";
  const productCode = productSku.replace("sigma-", "").toUpperCase();
  const boxImg = product.images?.[0]?.src || "";
  const priceVal = product.sale_price || product.regular_price || product.price || "";
  const accentColor =
    productCode === "1040-SR" ? "#d33a36" :
    productCode === "1040-DR" ? "#e07a28" : "#6d2f8f";

  return (
    <div className="v4-bg">
      <Header content={content} menuItems={menu} />
      <main>
        <section style={{ maxWidth: 1280, margin: "0 auto", padding: "64px 56px 0" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.02fr 1fr", gap: 56, alignItems: "center" }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 8, ...SM, fontSize: 12, color: "#63686d" }}>Home<span>/</span>Tax software<span>/</span><span>{product.name}</span></div>
              <h1 style={{ ...F, fontWeight: 900, fontSize: 54, lineHeight: 1.06, letterSpacing: "-.025em", color: "#182233", margin: "22px 0 0" }}>
                {s_(hero.heading)}<span style={{ color: "#006568" }}>{s_(hero.heading_highlight)}</span>
              </h1>
              {!!s_(hero.description) && (
                <p style={{ ...F, fontSize: 18, lineHeight: 1.7, color: "#515a63", margin: "20px 0 0", maxWidth: 560 }}>{s_(hero.description)}</p>
              )}
              <div style={{ display: "flex", gap: 18, alignItems: "center", marginTop: 32, flexWrap: "wrap" }}>
                {(s_(hero.button1Text) || s_(hero.button1Url)) && (
                  <a href={s_(hero.button1Url) || "#"} className="hv1" style={{ background: "linear-gradient(135deg,#13a3a6,#006568)", color: "#fff", ...F, fontWeight: 700, fontSize: 16, padding: "17px 32px", borderRadius: 999, cursor: "pointer", boxShadow: "0 16px 34px rgba(0,101,104,.32)", display: "inline-block", transition: "filter .12s, transform .14s" }}>
                    {s_(hero.button1Text)}
                  </a>
                )}
                {(s_(hero.button2Text) || s_(hero.button2Url)) && (
                  <a href={s_(hero.button2Url) || "#"} style={{ ...F, fontSize: 15, fontWeight: 700, color: "#006568", borderBottom: "2px solid #c9a62f", paddingBottom: 3 }}>
                    {s_(hero.button2Text)}
                  </a>
                )}
                <AddToCartButton productId={product.id} productName={product.name} />
              </div>
            </div>
            <div data-stp-reveal="" style={{ position: "relative", background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 26, padding: "34px 36px", boxShadow: "0 20px 50px rgba(2,47,49,.10)" }}>
              <div style={{ position: "absolute", top: -70, right: -50, width: 220, height: 220, background: "radial-gradient(circle, rgba(234,213,145,.4), transparent 64%)", pointerEvents: "none" }} />
              <div style={{ display: "flex", alignItems: "center", gap: 26 }}>
                {boxImg && <Image src={boxImg} alt={`Sigma ${productCode} software box`} mediaSizes={getCachedMediaSizes()} style={{ height: 170, width: "auto", filter: "drop-shadow(0 16px 26px rgba(2,47,49,.18))" }} />}
                <div>
                  <div style={{ ...SM, fontSize: 13, color: accentColor }}>{productCode}</div>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 5, marginTop: 8 }}>
                    <span style={{ ...F, fontWeight: 900, fontSize: 44, letterSpacing: "-.02em", color: "#182233" }}>${priceVal}</span>
                    <span style={{ ...F, fontSize: 14, color: "#63686d" }}>/season</span>
                  </div>
                  {!!s_(hero.card_tagline) && <div style={{ ...F, fontSize: 14, color: "#515a63", marginTop: 4 }}>{s_(hero.card_tagline)}</div>}
                </div>
              </div>
              {checklist.length > 0 && (
                <ul style={{ listStyle: "none", padding: "18px 0 0", margin: "16px 0 0", borderTop: "1px solid rgba(2,47,49,.10)", display: "flex", flexDirection: "column", gap: 11 }}>
                  {checklist.map((item, i) => (
                    <li key={i} style={{ display: "flex", gap: 10, ...F, fontSize: 14, lineHeight: 1.45, color: "#31353a" }}>
                      <span style={{ color: "#006568", flex: "0 0 auto", marginTop: 1 }}><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg></span>
                      <span>{item.text || ""}</span>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          </div>
        </section>
        {nonHeroSections.length > 0 && <PageSectionsRenderer sections={nonHeroSections} />}
      </main>
      <Footer content={content} />
    </div>
  );
}

function renderComparisonChartPage(content: HomeContent, page: PageContent, menu: MenuItem[], breadcrumbs?: BreadcrumbItem[], products?: (WcProduct | null)[]) {
  const sections = page.sections || [];
  const s_ = (v: unknown) => (v as string) ?? "";
  const arr = (v: unknown) => (Array.isArray(v) ? v : []);

  const hero = sections[0] || {};
  const pricing = sections[1] || {};
  const comparison = sections.find((sec: S) => sec.type === "comparison_table") || {};
  const featuresSec = sections.find((sec: S) => sec.type === "features") || {};
  const ctaSec = sections.find((sec: S) => sec.type === "cta_banner") || {};

  const productsData = arr(pricing.products) as Array<{ code?: string; price?: string; tagline?: string; cadence?: string }>;
  const rows = arr(comparison.rows) as Array<{ featureName?: string; tw?: string; sr?: string; dr?: string }>;
  const features = arr(featuresSec.features) as Array<{ heading?: string; description?: string }>;

  const F = { fontFamily: "Lato,sans-serif" };
  const SM = { fontFamily: "'Space Mono',monospace" };

  const PRODUCT_STYLE: Record<string, { color: string; border: string }> = {
    "1040-TW": { color: "#6d2f8f", border: "#6d2f8f" },
    "1040-SR": { color: "#d33a36", border: "#d33a36" },
    "1040-DR": { color: "#e07a28", border: "#e07a28" },
  };

  function cellValue(val: string | undefined) {
    if (!val || val === "-" || val === "") return <span style={{ color: "#b7bcc1" }}>{'\u2014'}</span>;
    if (val === "true" || val === "Check") return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#006568" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" style={{ display: "inline-block", verticalAlign: "middle" }}><polyline points="20 6 9 17 4 12" /></svg>;
    return <span style={{ ...F, fontSize: 13, color: "#4a4f54" }}>{val}</span>;
  }

  function cellValueSmall(val: string | undefined) {
    if (!val || val === "-" || val === "") return <span style={{ color: "#b7bcc1" }}>{'\u2014'}</span>;
    if (val === "true" || val === "Check") return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#006568" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>;
    return <span style={{ ...F, fontSize: 13, color: "#4a4f54" }}>{val}</span>;
  }

  function CompCard(p: { code: string; idx: number }) {
    const ps = PRODUCT_STYLE[p.code] || { color: "#006568", border: "#006568" };
    const prod = productsData[p.idx] || {};
    const wcProd = products?.[p.idx];
    const imgSrc = wcProd?.images?.[0]?.src;
    return (
      <article style={{ background: "rgba(255,255,255,.62)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.8)", borderTop: `4px solid ${ps.border}`, borderRadius: 22, padding: "24px 24px 18px", boxShadow: "0 20px 50px rgba(2,47,49,.10)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingBottom: 16 }}>
          <span style={{ display: "inline-flex", flexDirection: "column", gap: 5 }}>
            <span style={{ ...F, fontWeight: 900, fontSize: 19, color: "#182233" }}>Sigma {p.code}</span>
            <span style={{ alignSelf: "flex-start", ...SM, fontSize: 13, fontWeight: 700, color: "#fff", background: ps.color, borderRadius: 999, padding: "4px 12px" }}>{p.code}</span>
          </span>
          <span style={{ ...F, fontWeight: 900, fontSize: 26, color: "#182233" }}>{prod.price || ""}<span style={{ fontWeight: 400, fontSize: 12, color: "#63686d" }}>{prod.cadence || ""}</span></span>
        </div>
        {rows.map((row, ri) => {
          const vals = [row.tw, row.sr, row.dr];
          return (
            <div key={ri} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 14, padding: "11px 0", borderTop: "1px solid rgba(2,47,49,.08)", ...F, fontSize: 14, color: "#31353a" }}>
              <span>{row.featureName}</span>
              <span style={{ flex: "0 0 auto" }}>{cellValueSmall(vals[p.idx])}</span>
            </div>
          );
        })}
        <a href={`/services/sigma-${p.code.toLowerCase()}/`} style={{ display: "block", textAlign: "center", marginTop: 16, background: "linear-gradient(135deg,#13a3a6,#006568)", color: "#fff", ...F, fontWeight: 700, fontSize: 14, padding: 13, borderRadius: 999, cursor: "pointer", boxShadow: "0 10px 22px rgba(0,101,104,.26)" }}>Explore the {p.code}</a>
      </article>
    );
  }

  return (
    <div className="v4-bg">
      <Header content={content} menuItems={menu} />
      <main>
        {/* HERO */}
        <section style={{ maxWidth: 1280, margin: "0 auto", padding: "64px 56px 0" }}>
          <Breadcrumb items={breadcrumbs || []} />
          <h1 style={{ ...F, fontWeight: 900, fontSize: 54, lineHeight: 1.06, letterSpacing: "-.025em", color: "#182233", margin: "22px 0 0", maxWidth: 820 }}>
            {s_(hero.heading)}<span style={{ color: "#006568" }}>{s_(hero.heading_highlight)}</span>
          </h1>
          {!!s_(hero.description) && (
            <p style={{ ...F, fontSize: 18, lineHeight: 1.7, color: "#515a63", margin: "20px 0 0", maxWidth: 640 }}>{s_(hero.description)}</p>
          )}
        </section>

        {/* PRICE CARDS */}
        <section style={{ padding: "56px 0 0" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 24 }}>
              {productsData.map((p, i) => {
                const ps = PRODUCT_STYLE[p.code || ""] || { color: "#006568", border: "#006568" };
                const wcProd = products?.[i];
                const imgSrc = wcProd?.images?.[0]?.src;
                return (
                  <article key={i} data-stp-reveal="" style={{ minWidth: 0, background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderTop: `4px solid ${ps.border}`, borderRadius: 26, padding: 30, boxShadow: "0 20px 50px rgba(2,47,49,.10)", display: "flex", flexDirection: "column", transition: "transform .18s, box-shadow .18s" }} className="hv1">
                    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 18 }}>
                      {imgSrc && <Image src={imgSrc} alt={`Sigma ${p.code} software box`} mediaSizes={getCachedMediaSizes()} style={{ height: 92, width: "auto", filter: "drop-shadow(0 12px 20px rgba(2,47,49,.16))" }} />}
                      <div>
                        <div style={{ ...SM, fontSize: 13, color: ps.color }}>{p.code}</div>
                        <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 6 }}>
                          <span style={{ ...F, fontWeight: 900, fontSize: 34, letterSpacing: "-.02em", color: "#182233" }}>{s_(p.price)}</span>
                          {!!p.cadence && <span style={{ ...F, fontSize: 13, color: "#63686d" }}>{p.cadence}</span>}
                        </div>
                      </div>
                    </div>
                    {!!p.tagline && <div style={{ ...F, fontSize: 14, lineHeight: 1.55, color: "#4a4f54", marginTop: 14, flex: 1 }}>{p.tagline}</div>}
                    <a href={`/services/sigma-${(p.code || "").toLowerCase()}/`} className="hv0" style={{ display: "block", textAlign: "center", marginTop: 20, background: "linear-gradient(135deg,#13a3a6,#006568)", color: "#fff", ...F, fontWeight: 700, fontSize: 14, padding: 13, borderRadius: 999, cursor: "pointer", boxShadow: "0 10px 22px rgba(0,101,104,.26)", transition: "filter .12s, transform .14s" }}>
                      Explore the {p.code}
                    </a>
                  </article>
                );
              })}
            </div>
          </div>
        </section>

        {/* COMPARISON TABLE */}
        <section style={{ padding: "70px 0 0" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
            {/* Desktop table */}
            <div className="comp-table" style={{ background: "rgba(255,255,255,.62)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.8)", borderRadius: 26, boxShadow: "0 20px 50px rgba(2,47,49,.10)", overflow: "hidden" }}>
              <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 720 }}>
                <thead>
                  <tr>
                    <th style={{ padding: 22, textAlign: "left", ...F, fontSize: 12, fontWeight: 700, letterSpacing: ".14em", textTransform: "uppercase", color: "#63686d" }}>Feature</th>
                    {["1040-TW", "1040-SR", "1040-DR"].map((code, i) => {
                      const ps = PRODUCT_STYLE[code] || { color: "#006568", border: "#006568" };
                      const prod = productsData[i] || {};
                      return (
                        <th key={i} style={{ padding: "24px 18px", textAlign: "center" }}>
                          <a href={`/services/sigma-${code.toLowerCase()}/`} style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
                            <span style={{ display: "inline-block", ...SM, fontSize: 15, fontWeight: 700, color: "#fff", background: ps.color, borderRadius: 999, padding: "6px 16px" }}>{code}</span>
                            <span style={{ ...F, fontWeight: 900, fontSize: 24, color: "#182233" }}>{s_(prod.price)}<span style={{ fontWeight: 400, fontSize: 12, color: "#63686d" }}>{prod.cadence || ""}</span></span>
                          </a>
                        </th>
                      );
                    })}
                  </tr>
                </thead>
                <tbody>
                  {rows.map((row, i) => (
                    <tr key={i}>
                      <td style={{ padding: "15px 22px", textAlign: "left", ...F, fontSize: 15, color: "#31353a", borderTop: "1px solid rgba(2,47,49,.08)" }}>{row.featureName}</td>
                      <td style={{ padding: "15px 18px", textAlign: "center", ...F, fontSize: 15, color: "#31353a", borderTop: "1px solid rgba(2,47,49,.08)" }}>{cellValue(row.tw)}</td>
                      <td style={{ padding: "15px 18px", textAlign: "center", ...F, fontSize: 15, color: "#31353a", borderTop: "1px solid rgba(2,47,49,.08)" }}>{cellValue(row.sr)}</td>
                      <td style={{ padding: "15px 18px", textAlign: "center", ...F, fontSize: 15, color: "#31353a", borderTop: "1px solid rgba(2,47,49,.08)" }}>{cellValue(row.dr)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            {/* Mobile cards */}
            <div className="comp-cards">
              {["1040-TW", "1040-SR", "1040-DR"].map((code, i) => <CompCard key={i} code={code} idx={i} />)}
            </div>
            <p style={{ ...F, fontSize: 13, color: "#63686d", margin: "16px 4px 0" }}>Business returns (Forms 1120, 1120S, 1065) require the desktop edition of the 1040-DR.</p>
          </div>
        </section>

        {/* INCLUDED FEATURES */}
        <section style={{ padding: "100px 0 0" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
            <div style={{ background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 28, padding: "46px 40px", boxShadow: "0 20px 50px rgba(2,47,49,.10)" }}>
              <div style={{ textAlign: "center", ...F, fontSize: 12, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color: "#7e6516" }}>{s_(featuresSec.eyebrow)}</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4,minmax(0,1fr))", marginTop: 34 }}>
                {features.map((f, i) => (
                  <div key={i} style={{ padding: "6px 30px", borderLeft: i > 0 ? "1px solid rgba(2,47,49,.10)" : "none" }}>
                    {!!f.heading && <div style={{ ...F, fontWeight: 900, fontSize: 19, color: "#006568" }}>{f.heading}</div>}
                    {!!f.description && <div style={{ ...F, fontSize: 14, lineHeight: 1.55, color: "#515a63", marginTop: 8 }}>{f.description}</div>}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* CTA */}
        <section style={{ padding: "100px 0 120px" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
            <div style={{ position: "relative", overflow: "hidden", background: "rgba(255,255,255,.55)", backdropFilter: "blur(18px)", WebkitBackdropFilter: "blur(18px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 32, padding: "74px 64px", textAlign: "center", boxShadow: "0 30px 70px rgba(2,47,49,.12)" }}>
              <div style={{ position: "absolute", top: -120, left: -60, width: 360, height: 360, background: "radial-gradient(circle, rgba(19,163,166,.22), transparent 64%)", pointerEvents: "none" }} />
              <div style={{ position: "absolute", bottom: -140, right: -50, width: 340, height: 340, background: "radial-gradient(circle, rgba(234,213,145,.4), transparent 64%)", pointerEvents: "none" }} />
              <div style={{ position: "relative" }}>
                {(s_(ctaSec.heading) || s_(ctaSec.heading_highlight) || s_(ctaSec.title_tail)) && (
                  <h2 style={{ ...F, fontWeight: 900, fontSize: 42, letterSpacing: "-.03em", margin: 0, color: "#182233" }}>
                    {s_(ctaSec.heading)}<span style={{ color: "#006568" }}>{s_(ctaSec.heading_highlight) || ""}</span>
                    {s_(ctaSec.title_tail)}
                  </h2>
                )}
                {!!s_(ctaSec.description) && <p style={{ ...F, fontSize: 18, color: "#515a63", margin: "16px auto 0", maxWidth: 520 }}>{s_(ctaSec.description)}</p>}
                {(s_(ctaSec.buttonText) || s_(ctaSec.buttonUrl)) && (
                  <a href={s_(ctaSec.buttonUrl) || "#"} className="hv2" style={{ display: "inline-block", marginTop: 30, background: "linear-gradient(135deg,#13a3a6,#006568)", color: "#fff", ...F, fontWeight: 700, fontSize: 16, padding: "17px 34px", borderRadius: 999, cursor: "pointer", boxShadow: "0 16px 34px rgba(0,101,104,.32)", transition: "filter .12s, transform .14s" }}>
                    {s_(ctaSec.buttonText)}
                  </a>
                )}
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer content={content} />
    </div>
  );
}

function renderDownloadDemosPage(content: HomeContent, menu: MenuItem[], products: (WcProduct | null)[]) {
  const F = { fontFamily: "Lato,sans-serif" };
  const productData = [
    { slug: "sigma-1040-tw", code: "1040-TW", tagline: "Cloud-based. Ideal for new and growing EROs." },
    { slug: "sigma-1040-sr", code: "1040-SR", tagline: "High-volume offices that need speed." },
    { slug: "sigma-1040-dr", code: "1040-DR", tagline: "Full business suite. Complex returns and high volume.", price: "$895" },
  ];
  return (
    <div className="v4-bg">
      <Header content={content} menuItems={menu} />
      <main>
        <section style={{ maxWidth: 1280, margin: "0 auto", padding: "64px 56px 0" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "'Space Mono',monospace", fontSize: 12, color: "#63686d" }}>Home<span>/</span><a href="/comparison-chart/" style={{ color: "#006568" }}>Tax software</a><span>/</span><span>Download demos</span></div>
          <h1 style={{ ...F, fontWeight: 900, fontSize: 54, lineHeight: 1.06, letterSpacing: "-.025em", color: "#182233", margin: "22px 0 0", maxWidth: 800 }}>Every package, <span style={{ color: "#006568" }}>free to try.</span></h1>
          <p style={{ ...F, fontSize: 18, lineHeight: 1.7, color: "#515a63", margin: "20px 0 0", maxWidth: 640 }}>Each demo is the full working software with sample client data — not a video tour. Pick a package, pick web or desktop, and prepare a return end to end.</p>
        </section>
        <section style={{ padding: "56px 0 0" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 24 }}>
              {productData.map((p, i) => {
                const wc = products[i];
                const price = wc?.sale_price || wc?.regular_price || wc?.price || p.price || "$495";
                const imgSrc = wc?.images?.[0]?.src;
                return (
                  <article key={i} data-stp-reveal="" style={{ minWidth: 0, background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 26, padding: "34px 30px", boxShadow: "0 20px 50px rgba(2,47,49,.10)", transition: "transform .18s, box-shadow .18s", display: "flex", flexDirection: "column" }} className="hv1">
                    <div style={{ display: "flex", justifyContent: "center", alignItems: "flex-start", height: 190 }}>
                      {imgSrc && <Image src={imgSrc} alt={`Sigma ${p.code} software box`} mediaSizes={getCachedMediaSizes()} style={{ height: 170, width: "auto", filter: "drop-shadow(0 16px 26px rgba(2,47,49,.18))" }} />}
                    </div>
                    <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginTop: 18 }}>
                      <a href={`/services/${p.slug}/`} style={{ ...F, fontSize: 18, fontWeight: 900, color: "#182233" }}>Sigma <span style={{ color: "#006568" }}>{p.code}</span></a>
                      <span style={{ ...F, fontSize: 14, color: "#63686d" }}><span style={{ fontWeight: 900, fontSize: 19, color: "#182233" }}>{price}</span>/season</span>
                    </div>
                    <div style={{ ...F, fontSize: 14, lineHeight: 1.55, color: "#4a4f54", marginTop: 7, flex: 1 }}>{p.tagline}</div>
                    <a href={`/services/${p.slug}-web-demo/`} className="hv0" style={{ display: "block", textAlign: "center", marginTop: 22, background: "linear-gradient(135deg,#13a3a6,#006568)", color: "#fff", ...F, fontWeight: 700, fontSize: 14, padding: 14, borderRadius: 999, cursor: "pointer", boxShadow: "0 10px 22px rgba(0,101,104,.26)", transition: "filter .12s, transform .14s" }}>Try the web demo</a>
                    <a href={`/services/${p.slug}-desktop-demo/`} style={{ display: "block", textAlign: "center", marginTop: 10, ...F, fontWeight: 700, fontSize: 14, color: "#006568", padding: 6 }}>or download the desktop demo</a>
                  </article>
                );
              })}
            </div>
          </div>
        </section>
        <section style={{ padding: "90px 0 0" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
            <div style={{ background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 28, padding: "42px 48px", boxShadow: "0 20px 50px rgba(2,47,49,.10)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32, flexWrap: "wrap" }}>
              <div style={{ maxWidth: 560 }}>
                <h2 style={{ ...F, fontWeight: 900, fontSize: 26, letterSpacing: "-.02em", margin: 0, color: "#182233" }}>Not sure which package fits?</h2>
                <p style={{ ...F, fontSize: 15, lineHeight: 1.65, color: "#515a63", margin: "10px 0 0" }}>Compare all three side by side — pricing, forms coverage, input methods, and what's included — or call and describe your office. We'll tell you straight which one you need.</p>
              </div>
              <a href="/comparison-chart/" className="hv2" style={{ background: "linear-gradient(135deg,#e3c14a,#c9a62f)", color: "#022f31", ...F, fontWeight: 900, fontSize: 14, letterSpacing: ".08em", textTransform: "uppercase", padding: "16px 30px", borderRadius: 999, cursor: "pointer", boxShadow: "0 14px 30px rgba(201,166,47,.35)", transition: "filter .12s, transform .14s", display: "inline-block", whiteSpace: "nowrap" }}>Compare packages</a>
            </div>
          </div>
        </section>
        <section style={{ padding: "100px 0 120px" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
            <div style={{ position: "relative", overflow: "hidden", background: "rgba(255,255,255,.55)", backdropFilter: "blur(18px)", WebkitBackdropFilter: "blur(18px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 32, padding: "74px 64px", textAlign: "center", boxShadow: "0 30px 70px rgba(2,47,49,.12)" }}>
              <div style={{ position: "absolute", top: -120, left: -60, width: 360, height: 360, background: "radial-gradient(circle, rgba(19,163,166,.22), transparent 64%)", pointerEvents: "none" }} />
              <div style={{ position: "absolute", bottom: -140, right: -50, width: 340, height: 340, background: "radial-gradient(circle, rgba(234,213,145,.4), transparent 64%)", pointerEvents: "none" }} />
              <div style={{ position: "relative" }}>
                <h2 style={{ ...F, fontWeight: 900, fontSize: 42, letterSpacing: "-.03em", margin: 0, color: "#182233" }}>Questions before <span style={{ color: "#006568" }}>you download?</span></h2>
                <p style={{ ...F, fontSize: 18, color: "#515a63", margin: "16px auto 0", maxWidth: 520 }}>Call and a product specialist will point you to the right demo in five minutes.</p>
                <a href="tel:+18663864769" className="hv3" style={{ display: "inline-block", marginTop: 30, background: "linear-gradient(135deg,#13a3a6,#006568)", color: "#fff", ...F, fontWeight: 700, fontSize: 16, padding: "17px 34px", borderRadius: 999, cursor: "pointer", boxShadow: "0 16px 34px rgba(0,101,104,.32)", transition: "filter .12s, transform .14s" }}>Call (866) 386-4769</a>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer content={content} />
    </div>
  );
}

function renderManagedServicesPage(content: HomeContent, page: PageContent, menu: MenuItem[], breadcrumbs?: BreadcrumbItem[]) {
  const sections = page.sections || [];
  const s_ = (v: unknown) => (v as string) ?? "";
  const arr = (v: unknown) => (Array.isArray(v) ? v : []);

  const hero = sections[0] || {};
  const statBand = sections[1] || {};
  const pricingSecs = sections.filter((sec: S) => sec.type === "pricing");
  const annualPricing = pricingSecs[0] || {};
  const monthlyPricing = pricingSecs[1] || {};
  const featuresSec = sections.find((sec: S) => sec.type === "features") || {};
  const faqSec = sections.find((sec: S) => sec.type === "faq") || {};
  const ctaSec = sections.find((sec: S) => sec.type === "cta_banner") || {};

  const stats = arr(statBand.statItems) as Array<{ heading?: string; text?: string }>;
  const annualProducts = arr(annualPricing.products) as Array<{ code?: string; price?: string; tagline?: string; cadence?: string; features?: string[] }>;
  const monthlyProducts = arr(monthlyPricing.products) as Array<{ code?: string; price?: string; tagline?: string; cadence?: string; features?: string[] }>;
  const features = arr(featuresSec.features) as Array<{ heading?: string; description?: string }>;
  const faqs = arr(faqSec.faqs) as Array<{ question?: string; answer?: string }>;

  const F = { fontFamily: "Lato,sans-serif" };

  function PricingCard(p: { code?: string; price?: string; tagline?: string; cadence?: string; features?: string[] }) {
    const isPlatinum = p.code === "Platinum";
    const computerFeature = p.features && p.features.length > 0 ? p.features[0] : "";
    const isSmallPrice = !p.price || p.price.startsWith("Included");
    return (
      <article data-stp-reveal="" style={{ minWidth: 0, display: "flex", flexDirection: "column", background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderTop: `4px solid ${isPlatinum ? "#c9a62f" : "#006568"}`, borderRadius: 24, padding: "28px 26px", boxShadow: "0 20px 50px rgba(2,47,49,.10)", transition: "transform .18s, box-shadow .18s" }} className="hv2">
        <div style={{ ...F, fontWeight: 900, fontSize: 20, color: "#182233" }}>{p.code}</div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 10, flexWrap: "wrap" }}>
          {isSmallPrice ? (
            <span style={{ ...F, fontWeight: 900, fontSize: 17, letterSpacing: "-.02em", color: "#182233", lineHeight: 1.15 }}>{p.price}</span>
          ) : (
            <>
              <span style={{ ...F, fontWeight: 900, fontSize: 36, letterSpacing: "-.02em", color: "#182233", lineHeight: 1.15 }}>{p.price}</span>
              {p.cadence && <span style={{ ...F, fontSize: 13, color: "#63686d" }}>{p.cadence}</span>}
            </>
          )}
        </div>
        {computerFeature && (
          <div style={{ display: "inline-flex", alignSelf: "flex-start", alignItems: "center", gap: 7, marginTop: 16, background: "rgba(0,101,104,.08)", borderRadius: 999, padding: "7px 14px", ...F, fontSize: 13, fontWeight: 700, color: "#006568" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
            {computerFeature}
          </div>
        )}
        {p.tagline && <div style={{ ...F, fontSize: 13, lineHeight: 1.55, color: "#515a63", marginTop: 12, flex: 1 }}>{p.tagline}</div>}
        <a href="/contact-us/" style={{ display: "block", textAlign: "center", marginTop: 18, background: "linear-gradient(135deg,#13a3a6,#006568)", color: "#fff", ...F, fontWeight: 700, fontSize: 14, padding: "12px", borderRadius: 999, cursor: "pointer", boxShadow: "0 10px 22px rgba(0,101,104,.26)", transition: "filter .12s" }} className="hv3">Talk through this plan</a>
      </article>
    );
  }

  return (
    <div className="v4-bg">
      <Header content={content} menuItems={menu} />
      <main>
        {/* HERO */}
        <section style={{ maxWidth: 1280, margin: "0 auto", padding: "64px 56px 0" }}>
          <Breadcrumb items={breadcrumbs || []} />
          <h1 style={{ ...F, fontWeight: 900, fontSize: 52, lineHeight: 1.06, letterSpacing: "-.025em", color: "#182233", margin: "22px 0 0", maxWidth: 880 }}>
            {s_(hero.heading)}<span style={{ color: "#006568" }}>{s_(hero.heading_highlight)}</span>
          </h1>
          {!!s_(hero.description) && (
            <p style={{ ...F, fontSize: 18, lineHeight: 1.7, color: "#515a63", margin: "20px 0 0", maxWidth: 680 }}>{s_(hero.description)}</p>
          )}
          <div style={{ display: "flex", gap: 18, alignItems: "center", marginTop: 32, flexWrap: "wrap" }}>
            {(s_(hero.button1Text) || s_(hero.button1Url)) && (
              <a href={s_(hero.button1Url) || "#"} className="hv1" style={{ background: "linear-gradient(135deg,#13a3a6,#006568)", color: "#fff", ...F, fontWeight: 700, fontSize: 16, padding: "17px 32px", borderRadius: 999, cursor: "pointer", boxShadow: "0 16px 34px rgba(0,101,104,.32)", display: "inline-block" }}>
                {s_(hero.button1Text)}
              </a>
            )}
            {(s_(hero.button2Text) || s_(hero.button2Url)) && (
              <a href={s_(hero.button2Url) || "#"} style={{ ...F, fontSize: 15, fontWeight: 700, color: "#006568", borderBottom: "2px solid #c9a62f", paddingBottom: 3 }}>
                {s_(hero.button2Text)}
              </a>
            )}
          </div>
        </section>

        {/* STAT BAND — Anywhere */}
        <section style={{ padding: "90px 0 0" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
            <div style={{ background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 28, padding: "46px 48px", boxShadow: "0 20px 50px rgba(2,47,49,.10)", display: "grid", gridTemplateColumns: "1.02fr 1fr", gap: 48, alignItems: "center" }}>
              <div>
                {!!s_(statBand.eyebrow) && <div style={{ ...F, fontSize: 12, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color: "#7e6516" }}>{s_(statBand.eyebrow)}</div>}
                {(s_(statBand.heading) || s_(statBand.heading_highlight)) && (
                  <h2 style={{ ...F, fontWeight: 900, fontSize: 32, lineHeight: 1.08, letterSpacing: "-.025em", margin: "16px 0 0", color: "#182233" }}>
                    {s_(statBand.heading)}<span style={{ color: "#006568" }}>{s_(statBand.heading_highlight) || ""}</span>
                  </h2>
                )}
                {!!s_(statBand.description) && (
                  <div style={{ ...F, fontSize: 16, lineHeight: 1.7, color: "#515a63", marginTop: 16 }} dangerouslySetInnerHTML={{ __html: s_(statBand.description) }} />
                )}
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                {stats.map((stat, i) => {
                  const isFullWidth = stats.length > 2 && i === stats.length - 1;
                  return (
                    <div key={i} style={{ minWidth: 0, gridColumn: isFullWidth ? "1 / -1" : undefined, background: "rgba(255,255,255,.7)", border: "1px solid rgba(255,255,255,.85)", borderRadius: 18, padding: 22 }}>
                      <div style={{ ...F, fontWeight: 900, fontSize: isFullWidth ? 17 : 34, color: isFullWidth ? "#182233" : "#006568" }}>{stat.heading}</div>
                      {!!stat.text && <div style={{ ...F, fontSize: 13, lineHeight: isFullWidth ? 1.6 : undefined, color: "#515a63", marginTop: 6 }}>{stat.text}</div>}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </section>

        {/* ANNUAL PRICING */}
        <section id="AnnualTBL" style={{ padding: "100px 0 0" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
            <div style={{ maxWidth: 760 }}>
              {!!s_(annualPricing.eyebrow) && <div style={{ ...F, fontSize: 12, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color: "#7e6516" }}>{s_(annualPricing.eyebrow)}</div>}
              {(s_(annualPricing.heading) || s_(annualPricing.heading_highlight)) && (
                <h2 style={{ ...F, fontWeight: 900, fontSize: 34, lineHeight: 1.08, letterSpacing: "-.025em", margin: "16px 0 0", color: "#182233" }}>
                  {s_(annualPricing.heading)}<span style={{ color: "#006568" }}>{s_(annualPricing.heading_highlight) || ""}</span>
                </h2>
              )}
              {!!s_(annualPricing.description) && <p style={{ ...F, fontSize: 16, lineHeight: 1.7, color: "#515a63", margin: "16px 0 0" }}>{s_(annualPricing.description)}</p>}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4,minmax(0,1fr))", gap: 20, marginTop: 44 }}>
              {annualProducts.map((p, i) => <PricingCard key={i} {...p} />)}
            </div>
          </div>
        </section>

        {/* MONTHLY PRICING */}
        <section id="Monthly-Table" style={{ padding: "100px 0 0" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
            <div style={{ maxWidth: 760 }}>
              {!!s_(monthlyPricing.eyebrow) && <div style={{ ...F, fontSize: 12, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color: "#7e6516" }}>{s_(monthlyPricing.eyebrow)}</div>}
              {(s_(monthlyPricing.heading) || s_(monthlyPricing.heading_highlight)) && (
                <h2 style={{ ...F, fontWeight: 900, fontSize: 34, lineHeight: 1.08, letterSpacing: "-.025em", margin: "16px 0 0", color: "#182233" }}>
                  {s_(monthlyPricing.heading)}<span style={{ color: "#006568" }}>{s_(monthlyPricing.heading_highlight) || ""}</span>
                </h2>
              )}
              {!!s_(monthlyPricing.description) && <p style={{ ...F, fontSize: 16, lineHeight: 1.7, color: "#515a63", margin: "16px 0 0" }}>{s_(monthlyPricing.description)}</p>}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4,minmax(0,1fr))", gap: 20, marginTop: 44 }}>
              {monthlyProducts.map((p, i) => <PricingCard key={i} {...p} />)}
            </div>
          </div>
        </section>

        {/* FEATURES */}
        <section style={{ padding: "100px 0 0" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
            <div style={{ maxWidth: 680 }}>
              {!!s_(featuresSec.eyebrow) && <div style={{ ...F, fontSize: 12, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color: "#7e6516" }}>{s_(featuresSec.eyebrow)}</div>}
              {(s_(featuresSec.heading) || s_(featuresSec.heading_highlight)) && (
                <h2 style={{ ...F, fontWeight: 900, fontSize: 34, lineHeight: 1.08, letterSpacing: "-.025em", margin: "16px 0 0", color: "#182233" }}>
                  {s_(featuresSec.heading)}<span style={{ color: "#006568" }}>{s_(featuresSec.heading_highlight) || ""}</span>
                </h2>
              )}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 18, marginTop: 44 }}>
              {features.map((f, i) => (
                <div key={i} style={{ minWidth: 0, background: "rgba(255,255,255,.55)", backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 20, padding: "24px 26px", boxShadow: "0 14px 34px rgba(2,47,49,.08)" }}>
                  {!!f.heading && <div style={{ ...F, fontWeight: 900, fontSize: 16, color: "#006568" }}>{f.heading}</div>}
                  {!!f.description && <div style={{ ...F, fontSize: 14, lineHeight: 1.6, color: "#515a63", marginTop: 7 }}>{f.description}</div>}
                </div>
              ))}
            </div>
            <p style={{ ...F, fontSize: 13, color: "#63686d", margin: "18px 4px 0" }}>*Software license inclusions vary by plan {'\u2014'} see each plan card above.</p>
          </div>
        </section>

        {/* FAQ */}
        <section style={{ padding: "100px 0 0" }}>
          <div style={{ maxWidth: 880, margin: "0 auto", padding: "0 56px" }}>
            <div style={{ textAlign: "center" }}>
              {!!s_(faqSec.eyebrow) && <div style={{ ...F, fontSize: 12, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color: "#7e6516" }}>{s_(faqSec.eyebrow)}</div>}
              {(s_(faqSec.heading) || s_(faqSec.heading_highlight)) && (
                <h2 style={{ ...F, fontWeight: 900, fontSize: 38, letterSpacing: "-.025em", margin: "14px 0 0", color: "#182233" }}>
                  {s_(faqSec.heading)}<span style={{ color: "#006568" }}>{s_(faqSec.heading_highlight) || ""}</span>
                </h2>
              )}
            </div>
            <div style={{ marginTop: 40, background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 24, overflow: "hidden", boxShadow: "0 20px 50px rgba(2,47,49,.10)" }}>
              {faqs.map((f, i) => (
                <details key={i} style={{ borderBottom: i < faqs.length - 1 ? "1px solid rgba(2,47,49,.10)" : "none" }}>
                  <summary style={{ padding: "24px 28px", display: "flex", justifyContent: "space-between", gap: 16, alignItems: "center", cursor: "pointer", ...F, fontWeight: 700, fontSize: 17, color: "#1b2023" }}>
                    <span>{f.question}</span>
                    <span className="faq-x" style={{ color: "#006568", fontSize: 24, flex: "0 0 auto", lineHeight: 1 }}>+</span>
                  </summary>
                  <div style={{ padding: "0 28px 26px", ...F, fontSize: 15, lineHeight: 1.65, color: "#4a4f54" }}>{f.answer}</div>
                </details>
              ))}
            </div>
          </div>
        </section>

        {/* CTA */}
        <section style={{ padding: "100px 0 120px" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
            <div style={{ position: "relative", overflow: "hidden", background: "rgba(255,255,255,.55)", backdropFilter: "blur(18px)", WebkitBackdropFilter: "blur(18px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 32, padding: "74px 64px", textAlign: "center", boxShadow: "0 30px 70px rgba(2,47,49,.12)" }}>
              <div style={{ position: "absolute", top: -120, left: -60, width: 360, height: 360, background: "radial-gradient(circle, rgba(19,163,166,.22), transparent 64%)", pointerEvents: "none" }} />
              <div style={{ position: "absolute", bottom: -140, right: -50, width: 340, height: 340, background: "radial-gradient(circle, rgba(234,213,145,.4), transparent 64%)", pointerEvents: "none" }} />
              <div style={{ position: "relative" }}>
                {(s_(ctaSec.heading) || s_(ctaSec.heading_highlight) || s_(ctaSec.title_tail)) && (
                  <h2 style={{ ...F, fontWeight: 900, fontSize: 42, letterSpacing: "-.03em", margin: 0, color: "#182233" }}>
                    {s_(ctaSec.heading)}<span style={{ color: "#006568" }}>{s_(ctaSec.heading_highlight) || ""}</span>
                    {s_(ctaSec.title_tail)}
                  </h2>
                )}
                {!!s_(ctaSec.description) && <p style={{ ...F, fontSize: 18, color: "#515a63", margin: "16px auto 0", maxWidth: 520 }}>{s_(ctaSec.description)}</p>}
                {(s_(ctaSec.buttonText) || s_(ctaSec.buttonUrl)) && (
                  <a href={s_(ctaSec.buttonUrl) || "#"} className="hv1" style={{ display: "inline-block", marginTop: 30, background: "linear-gradient(135deg,#13a3a6,#006568)", color: "#fff", ...F, fontWeight: 700, fontSize: 16, padding: "17px 34px", borderRadius: 999, cursor: "pointer", boxShadow: "0 16px 34px rgba(0,101,104,.32)" }}>
                    {s_(ctaSec.buttonText)}
                  </a>
                )}
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer content={content} />
    </div>
  );
}

function PageSectionsRenderer({ sections, breadcrumbs }: { sections: S[]; breadcrumbs?: BreadcrumbItem[] }) {
  if (!sections || sections.length === 0) return null;

  return (
    <div className="flexible-sections">
      {sections.map((sec, i) => {
        const type = sec.type as string;
        if (type === "hero") return <HeroSection key={i} section={sec} />;
        if (type === "hero_card") return <HeroCardSection key={i} section={sec} breadcrumbs={breadcrumbs} />;
        if (type === "features") return <FeaturesSection key={i} section={sec} />;
        if (type === "personas") return <PersonasSection key={i} section={sec} />;
        if (type === "faq") return <FaqSection key={i} section={sec} />;
        if (type === "cta_banner") return <CtaSection key={i} section={sec} />;
        if (type === "pricing") return <PricingSection key={i} section={sec} />;
        if (type === "stats_bar") return <StatsSection key={i} section={sec} />;
        if (type === "testimonials") return <TestimonialsSection key={i} section={sec} />;
        if (type === "partners") return <PartnersSection key={i} section={sec} />;
        if (type === "lead") return <LeadSection key={i} section={sec} />;
        if (type === "demo_lead") return <DemoLeadSection key={i} section={sec} />;
        if (type === "comparison_table") return <ComparisonTableSection key={i} section={sec} />;
        if (type === "block_item") return <BlockItemSection key={i} section={sec} />;
        if (type === "image_box") return <ImageBoxSection key={i} section={sec} />;
        if (type === "promo_banner") return <PromoSection key={i} section={sec} />;
        if (type === "hero_text") return <HeroTextSection key={i} section={sec} breadcrumbs={breadcrumbs} />;
        if (type === "hero_phone") return <HeroPhoneSection key={i} section={sec} breadcrumbs={breadcrumbs} />;
        if (type === "article") return <ArticleSection key={i} section={sec} />;
        if (type === "next_section") return <NextSection key={i} section={sec} />;
        if (type === "steps") return <StepsSection key={i} section={sec} />;
        if (type === "stat_band") return <StatBandSection key={i} section={sec} />;
        if (type === "partner_grid") return <PartnerGridSection key={i} section={sec} />;
        if (type === "team_members") return <TeamMembersSection key={i} section={sec} />;
        if (type === "contact_info") return <ContactInfoSection key={i} section={sec} />;
        if (type === "google_map") return <GoogleMapSection key={i} section={sec} />;
        if (type === "culture_cards") return <CultureCardsSection key={i} section={sec} />;
        if (type === "image_gallery") return <ImageGallerySection key={i} section={sec} />;
        if (type === "header") return null;
        if (type === "footer") return null;
        return <DefaultSection key={i} section={sec} />;
      })}
    </div>
  );
}

function s(v: unknown): string { return v as string ?? ""; }

function HeroSection({ section }: { section: S }) {
  return (
    <section className="section-hero" style={{ padding: "80px 0", background: "#f8fafb" }}>
      <div className="container">
        <div className="hero-content" style={{ maxWidth: 720 }}>
          {!!s(section.eyebrow) && <div className="eyebrow">{s(section.eyebrow)}</div>}
          {!!s(section.heading) && <h1 className="section-title">{s(section.heading)}</h1>}
          {!!s(section.content) && <p className="section-body">{s(section.content)}</p>}
          {(s(section.buttonText) || s(section.buttonUrl)) && (
            <a href={s(section.buttonUrl) || "#"} className="btn-teal">
              {s(section.buttonText)}
            </a>
          )}
        </div>
      </div>
    </section>
  );
}

function FeaturesSection({ section }: { section: S }) {
  const features = section.features as Array<{ heading?: string; description?: string; iconSvg?: string }> | undefined;
  if (!features || features.length === 0) return null;
  return (
    <section className="section-features" style={{ padding: "80px 0" }}>
      <div className="container">
        {!!s(section.eyebrow) && <div className="eyebrow">{s(section.eyebrow)}</div>}
        {(s(section.heading) || s(section.heading_highlight)) && (
          <h2 className="section-title">
            {s(section.heading)}<span className="accent">{s(section.heading_highlight) || ""}</span>
          </h2>
        )}
        <div className="grid-3" style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
          {features.map((f, i) => (
            <div key={i} className="glass-card" style={{ padding: "34px 30px", backdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 26, boxShadow: "0 20px 50px rgba(2,47,49,.10)" }}>
              {f.iconSvg && (
                <div style={{ width: 54, height: 54, borderRadius: "50%", background: "linear-gradient(150deg,#e6f3f1,#d3ebe8)", display: "flex", alignItems: "center", justifyContent: "center", color: "#006568" }} dangerouslySetInnerHTML={{ __html: f.iconSvg }} />
              )}
              <h3 style={{ fontWeight: 900, fontSize: 20, letterSpacing: "-.01em", marginTop: 20, color: "#182233" }}>{f.heading}</h3>
              {f.description && <p style={{ marginTop: 9, fontSize: 15, lineHeight: 1.65, color: "#515a63" }}>{f.description}</p>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StepsSection({ section }: { section: S }) {
  const steps = section.steps as Array<{ index?: string; heading?: string; description?: string }> | undefined;
  if (!steps || steps.length === 0) return null;
  const F = { fontFamily: "Lato,sans-serif" };
  return (
    <section style={{ padding: "100px 0 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
        <div style={{ maxWidth: 680 }}>
          {!!s(section.eyebrow) && <div style={{ ...F, fontSize: 12, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color: "#7e6516" }}>{s(section.eyebrow)}</div>}
          {(s(section.heading) || s(section.heading_highlight)) && (
            <h2 style={{ ...F, fontWeight: 900, fontSize: 34, lineHeight: 1.08, letterSpacing: "-.025em", margin: "16px 0 0", color: "#182233" }}>
              {s(section.heading)}<span style={{ color: "#006568" }}>{s(section.heading_highlight) || ""}</span>
            </h2>
          )}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 24, marginTop: 44 }}>
          {steps.map((step, i) => (
            <div key={i} className="hv2" data-stp-reveal="" style={{ background: "rgba(255,255,255,.55)", backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 20, padding: "26px 28px", boxShadow: "0 14px 34px rgba(2,47,49,.08)", transition: "transform .18s, box-shadow .18s" }}>
              <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 13, color: "#7e6516" }}>{step.index}</span>
              {!!step.heading && <div style={{ ...F, fontWeight: 900, fontSize: 17, color: "#182233", marginTop: 10 }}>{step.heading}</div>}
              {!!step.description && <div style={{ ...F, fontSize: 14, lineHeight: 1.6, color: "#515a63", marginTop: 6 }}>{step.description}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PersonasSection({ section }: { section: S }) {
  const personas = section.personas as Array<{ index?: string; heading?: string; description?: string }> | undefined;
  if (!personas || personas.length === 0) return null;
  return (
    <section className="section-personas" style={{ padding: "100px 0 0" }}>
      <div className="container">
        {!!s(section.eyebrow) && <div className="eyebrow">{s(section.eyebrow)}</div>}
        {(s(section.heading) || s(section.heading_highlight)) && (
          <h2 className="section-title" style={{ fontSize: 34 }}>
            {s(section.heading)}<span className="accent">{s(section.heading_highlight) || ""}</span>
          </h2>
        )}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24, marginTop: 44 }}>
          {personas.map((p, i) => (
            <div key={i} className="glass-card" style={{ padding: "26px 28px", backdropFilter: "blur(14px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 20, boxShadow: "0 14px 34px rgba(2,47,49,.08)" }}>
              {p.index && <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 13, color: "#7e6516" }}>{p.index}</span>}
              {p.heading && <div style={{ fontWeight: 900, fontSize: 17, color: "#182233", marginTop: 10 }}>{p.heading}</div>}
              {p.description && <div style={{ fontSize: 14, lineHeight: 1.6, color: "#515a63", marginTop: 6 }}>{p.description}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FaqSection({ section }: { section: S }) {
  const faqs = section.faqs as Array<{ question?: string; answer?: string }> | undefined;
  if (!faqs || faqs.length === 0) return null;
  return (
    <section className="section-faq" style={{ padding: "80px 0", background: "#f8fafb" }}>
      <div className="container" style={{ maxWidth: 800 }}>
        {!!s(section.eyebrow) && <div className="eyebrow">{s(section.eyebrow)}</div>}
        {(s(section.heading) || s(section.heading_highlight)) && (
          <h2 className="section-title">
            {s(section.heading)}<span className="accent">{s(section.heading_highlight) || ""}</span>
          </h2>
        )}
        <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 12 }}>
          {faqs.map((f, i) => (
            <details key={i} className="glass-card" style={{ padding: "20px 24px", cursor: "pointer" }}>
              <summary style={{ fontWeight: 700, fontSize: 16, color: "#182233" }}>{f.question}</summary>
              {f.answer && <p style={{ marginTop: 12, fontSize: 15, lineHeight: 1.7, color: "#515a63" }}>{f.answer}</p>}
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function CtaSection({ section }: { section: S }) {
  return (
    <section style={{ padding: "100px 0 120px" }}>
      <div className="container">
        <div style={{ position: "relative", overflow: "hidden", background: "rgba(255,255,255,.55)", backdropFilter: "blur(18px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 32, padding: "74px 64px", textAlign: "center", boxShadow: "0 30px 70px rgba(2,47,49,.12)" }}>
          <div style={{ position: "absolute", top: -120, left: -60, width: 360, height: 360, background: "radial-gradient(circle, rgba(19,163,166,.22), transparent 64%)", pointerEvents: "none" }} />
          <div style={{ position: "absolute", bottom: -140, right: -50, width: 340, height: 340, background: "radial-gradient(circle, rgba(234,213,145,.4), transparent 64%)", pointerEvents: "none" }} />
          <div style={{ position: "relative" }}>
            {(s(section.heading) || s(section.heading_highlight) || s(section.title_tail)) && (
              <h2 style={{ fontWeight: 900, fontSize: 42, letterSpacing: "-.03em", margin: 0, color: "#182233" }}>
                {s(section.heading)}<span style={{ color: "#006568" }}>{s(section.heading_highlight) || ""}</span>
                {s(section.title_tail)}
              </h2>
            )}
            {!!s(section.description) && <p style={{ fontSize: 18, color: "#515a63", margin: "16px auto 0", maxWidth: 520 }}>{s(section.description)}</p>}
            {(s(section.buttonText) || s(section.buttonUrl)) && (
              <a href={s(section.buttonUrl) || "#"} className="hv1" style={{ display: "inline-block", marginTop: 30, background: "linear-gradient(135deg,#13a3a6,#006568)", color: "#fff", fontWeight: 700, fontSize: 16, padding: "17px 34px", borderRadius: 999, cursor: "pointer", boxShadow: "0 16px 34px rgba(0,101,104,.32)" }}>
                {s(section.buttonText)}
              </a>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroCardSection({ section, breadcrumbs }: { section: S; breadcrumbs?: BreadcrumbItem[] }) {
  const checklist = section.checklistItems as Array<{ text?: string }> | undefined;
  return (
    <section style={{ maxWidth: 1280, margin: "0 auto", padding: "64px 56px 0" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.02fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <Breadcrumb items={breadcrumbs || []} />
          <h1 style={{ fontWeight: 900, fontSize: 54, lineHeight: 1.06, letterSpacing: "-.025em", color: "#182233", margin: "22px 0 0" }}>
            {s(section.heading)}<span style={{ color: "#006568" }}>{s(section.heading_highlight)}</span>
          </h1>
          {!!s(section.description) && (
            <p style={{ fontSize: 18, lineHeight: 1.7, color: "#515a63", margin: "20px 0 0", maxWidth: 560 }}>{s(section.description)}</p>
          )}
          <div style={{ display: "flex", gap: 18, alignItems: "center", marginTop: 32, flexWrap: "wrap" }}>
            {(s(section.button1Text) || s(section.button1Url)) && (
              <a href={s(section.button1Url) || "#"} className="hv1" style={{ background: "linear-gradient(135deg,#13a3a6,#006568)", color: "#fff", fontWeight: 700, fontSize: 16, padding: "17px 32px", borderRadius: 999, cursor: "pointer", boxShadow: "0 16px 34px rgba(0,101,104,.32)", display: "inline-block" }}>
                {s(section.button1Text)}
              </a>
            )}
            {(s(section.button2Text) || s(section.button2Url)) && (
              <a href={s(section.button2Url) || "#"} style={{ fontWeight: 700, fontSize: 15, color: "#006568", borderBottom: "2px solid #c9a62f", paddingBottom: 3 }}>
                {s(section.button2Text)}
              </a>
            )}
          </div>
        </div>
        <div data-stp-reveal="" style={{ position: "relative", background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 26, padding: "38px 36px", boxShadow: "0 20px 50px rgba(2,47,49,.10)" }}>
          <div style={{ position: "absolute", top: -70, right: -50, width: 220, height: 220, background: "radial-gradient(circle, rgba(234,213,145,.4), transparent 64%)", pointerEvents: "none" }} />
          {!!s(section.cardLogo) && (
            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: 96, background: "rgba(255,255,255,.75)", border: "1px solid rgba(255,255,255,.9)", borderRadius: 18 }}>
              <Image src={s(section.cardLogo)} alt="" mediaSizes={getCachedMediaSizes()} style={{ maxHeight: 44, maxWidth: 220, width: "auto", objectFit: "contain" }} />
            </div>
          )}
          {checklist && checklist.length > 0 && (
            <ul style={{ listStyle: "none", padding: "20px 0 0", margin: "18px 0 0", borderTop: "1px solid rgba(2,47,49,.10)", display: "flex", flexDirection: "column", gap: 11 }}>
              {checklist.map((item, i) => (
                <li key={i} style={{ display: "flex", gap: 10, fontSize: 14, lineHeight: 1.45, color: "#31353a" }}>
                  <span style={{ color: "#006568", flex: "0 0 auto", marginTop: 1 }}>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
                  </span>
                  <span>{item.text || ""}</span>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </section>
  );
}

function PricingSection({ section }: { section: S }) {
  const products = section.products as Array<{ code?: string; tagline?: string; price?: string; cadence?: string; features?: string[] }> | undefined;
  if (!products || products.length === 0) return null;
  return (
    <section className="section-pricing" style={{ padding: "80px 0" }}>
      <div className="container">
        {!!s(section.eyebrow) && <div className="eyebrow">{s(section.eyebrow)}</div>}
        {(s(section.heading) || s(section.heading_highlight)) && (
          <h2 className="section-title">
            {s(section.heading)}<span className="accent">{s(section.heading_highlight) || ""}</span>
          </h2>
        )}
        {!!s(section.description) && <p className="section-body">{s(section.description)}</p>}
        <div className="grid-3" style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 32 }}>
          {products.map((p, i) => (
            <div key={i} className="glass-card pricing-card" style={{ padding: "32px 28px", textAlign: "center" }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: "#7e6516", letterSpacing: ".14em", textTransform: "uppercase" }}>{p.code}</div>
              {p.tagline && <p style={{ fontSize: 14, color: "#515a63", marginTop: 8 }}>{p.tagline}</p>}
              <div style={{ marginTop: 16 }}>
                <span style={{ fontWeight: 900, fontSize: 42, color: "#182233" }}>{p.price}</span>
                {p.cadence && <span style={{ fontSize: 15, color: "#515a63" }}>{p.cadence}</span>}
              </div>
              {p.features && (
                <ul style={{ marginTop: 20, listStyle: "none", padding: 0, textAlign: "left", fontSize: 14, color: "#3a4044", display: "flex", flexDirection: "column", gap: 8 }}>
                  {p.features.map((f, j) => <li key={j} style={{ paddingLeft: 20, position: "relative" }}>✓ {f}</li>)}
                </ul>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StatsSection({ section }: { section: S }) {
  const stats = section.stats as Array<{ number?: string; label?: string }> | undefined;
  if (!stats || stats.length === 0) return null;
  return (
    <section className="section-stats" style={{ padding: "60px 0", background: "#f8fafb" }}>
      <div className="container">
        <div className="stats-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(200px,1fr))", gap: 32, textAlign: "center" }}>
          {stats.map((s, i) => (
            <div key={i}>
              <div style={{ fontWeight: 900, fontSize: 40, color: "#006568" }}>{s.number}</div>
              {s.label && <div style={{ fontSize: 14, color: "#515a63", marginTop: 4 }}>{s.label}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection({ section }: { section: S }) {
  const testimonials = section.testimonials as Array<{ quote?: string; initials?: string; name?: string; role?: string }> | undefined;
  if (!testimonials || testimonials.length === 0) return null;
  return (
    <section className="section-testimonials" style={{ padding: "80px 0" }}>
      <div className="container">
        {!!s(section.eyebrow) && <div className="eyebrow">{s(section.eyebrow)}</div>}
        {(s(section.heading) || s(section.heading_highlight)) && (
          <h2 className="section-title">
            {s(section.heading)}<span className="accent">{s(section.heading_highlight) || ""}</span>
          </h2>
        )}
        <div className="grid-3" style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 32 }}>
          {testimonials.map((t, i) => (
            <div key={i} className="glass-card" style={{ padding: "32px 28px" }}>
              <div style={{ fontSize: 15, lineHeight: 1.8, color: "#3a4044", fontStyle: "italic" }}>"{t.quote}"</div>
              <div style={{ marginTop: 16, display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: "50%", background: "#006568", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontWeight: 700, fontSize: 14 }}>{t.initials}</div>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14, color: "#182233" }}>{t.name}</div>
                  {t.role && <div style={{ fontSize: 13, color: "#515a63" }}>{t.role}</div>}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PartnersSection({ section }: { section: S }) {
  const partners = section.partners as Array<{ name?: string; url?: string; logo?: string }> | undefined;
  if (!partners || partners.length === 0) return null;
  return (
    <section className="section-partners" style={{ padding: "60px 0", background: "#f8fafb" }}>
      <div className="container">
        {!!s(section.eyebrow) && <div className="eyebrow">{s(section.eyebrow)}</div>}
        {(s(section.heading) || s(section.heading_highlight)) && (
          <h2 className="section-title">
            {s(section.heading)}<span className="accent">{s(section.heading_highlight) || ""}</span>
          </h2>
        )}
        <div className="partners-grid" style={{ marginTop: 32, display: "flex", flexWrap: "wrap", gap: 32, justifyContent: "center", alignItems: "center" }}>
          {partners.map((p, i) => (
            <div key={i} style={{ textAlign: "center" }}>
              {p.logo && <Image src={p.logo} alt={p.name || ""} mediaSizes={getCachedMediaSizes()} style={{ height: 40, maxWidth: 140, objectFit: "contain" }} />}
              {p.name && !p.logo && <span style={{ fontWeight: 700, fontSize: 16, color: "#515a63" }}>{p.name}</span>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LeadSection({ section }: { section: S }) {
  return (
    <section className="section-lead" style={{ padding: "80px 0", background: "linear-gradient(135deg,#006568,#004446)", color: "#fff" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
        <div>
          {!!s(section.badge) && <div className="badge-gold">{s(section.badge)}</div>}
          {(s(section.heading) || s(section.heading_highlight)) && (
            <h2 style={{ fontWeight: 900, fontSize: 38, lineHeight: 1.1, letterSpacing: "-.025em", marginTop: 16 }}>
              {s(section.heading)}<span className="accent">{s(section.heading_highlight) || ""}</span>
            </h2>
          )}
          {!!s(section.description) && <p style={{ marginTop: 16, fontSize: 17, lineHeight: 1.7, opacity: 0.9 }}>{s(section.description)}</p>}
          {Array.isArray(section.benefits) && (
            <ul style={{ marginTop: 24, listStyle: "none", padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {(section.benefits as Array<{ text?: string }>).map((b, i) => (
                <li key={i} style={{ paddingLeft: 24, position: "relative", fontSize: 15 }}>✓ {b.text || ""}</li>
              ))}
            </ul>
          )}
        </div>
        <div className="glass-card" style={{ padding: 32, background: "rgba(255,255,255,.1)", backdropFilter: "blur(10px)" }}>
          {!!s(section.form_title) && <h3 style={{ fontWeight: 700, fontSize: 22 }}>{s(section.form_title)}</h3>}
          {!!s(section.sms_consent) && <p style={{ marginTop: 16, fontSize: 12, opacity: 0.7, lineHeight: 1.5 }}>{s(section.sms_consent)}</p>}
        </div>
      </div>
    </section>
  );
}

function DemoLeadSection({ section }: { section: S }) {
  const checklist = section.checklistItems as Array<{ text?: string }> | undefined;
  const F = { fontFamily: "Lato,sans-serif" };
  return (
    <section style={{ padding: "70px 0 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
        <div data-stp-reveal="" style={{ display: "grid", gridTemplateColumns: "1.04fr .96fr", gap: 44, background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 28, padding: "40px 44px", boxShadow: "0 20px 50px rgba(2,47,49,.10)" }}>
          <div>
            {!!s(section.badge) && <span style={{ display: "inline-block", ...F, fontFamily: "'Space Mono',monospace", fontSize: 12, fontWeight: 700, color: "#fff", background: "linear-gradient(135deg,#13a3a6,#006568)", borderRadius: 999, padding: "6px 14px" }}>{s(section.badge)}</span>}
            {!!s(section.heading) && <h2 style={{ ...F, fontWeight: 900, fontSize: 28, letterSpacing: "-.02em", margin: "18px 0 0", color: "#182233" }}>{s(section.heading)}</h2>}
            {checklist && checklist.length > 0 && (
              <ul style={{ listStyle: "none", padding: "16px 0 0", margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {checklist.map((item, i) => (
                  <li key={i} style={{ display: "flex", gap: 10, ...F, fontSize: 14, lineHeight: 1.45, color: "#31353a" }}>
                    <span style={{ color: "#006568", flex: "0 0 auto", marginTop: 1 }}>
                      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
                    </span>
                    <span>{item.text || ""}</span>
                  </li>
                ))}
              </ul>
            )}
            {(s(section.infoBoxHeading) || s(section.infoBoxContent)) && (
              <div style={{ marginTop: 22, background: "rgba(0,101,104,.06)", border: "1px solid rgba(0,101,104,.12)", borderRadius: 14, padding: "14px 18px" }}>
                {!!s(section.infoBoxHeading) && <div style={{ ...F, fontWeight: 700, fontSize: 13, color: "#006568" }}>{s(section.infoBoxHeading)}</div>}
                {!!s(section.infoBoxContent) && <div style={{ ...F, fontSize: 13, lineHeight: 1.5, color: "#4a4f54", marginTop: 4 }}>{s(section.infoBoxContent)}</div>}
              </div>
            )}
            {(s(section.crossLinkText) || s(section.crossLinkUrl)) && (
              <div style={{ marginTop: 20 }}>
                <a href={s(section.crossLinkUrl) || "#"} style={{ ...F, fontSize: 14, fontWeight: 700, color: "#006568", borderBottom: "2px solid #c9a62f", paddingBottom: 2 }}>{s(section.crossLinkText)}</a>
              </div>
            )}
          </div>
          <div style={{ background: "rgba(255,255,255,.45)", borderRadius: 18, padding: "28px 26px" }}>
            {!!s(section.form_title) && <div style={{ ...F, fontWeight: 900, fontSize: 20, color: "#182233" }}>{s(section.form_title)}</div>}
            {!!s(section.form_subtitle) && <div style={{ ...F, fontSize: 14, color: "#63686d", marginTop: 4 }}>{s(section.form_subtitle)}</div>}
            <DemoLeadForm submitLabel={s(section.submit_label) || "Submit"} />
            {!!s(section.sms_consent) && (
              <label style={{ display: "flex", gap: 8, marginTop: 12, ...F, fontSize: 12, lineHeight: 1.4, color: "#63686d", cursor: "pointer" }}>
                <input type="checkbox" style={{ marginTop: 2, flex: "0 0 auto" }} />
                <span>{s(section.sms_consent)}</span>
              </label>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function PromoSection({ section }: { section: S }) {
  return (
    <section className="section-promo" style={{ padding: "40px 0", background: "linear-gradient(135deg,#182233,#2a3a52)", color: "#fff" }}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32, flexWrap: "wrap" }}>
        <div>
          {!!s(section.eyebrow) && <div className="eyebrow-gold">{s(section.eyebrow)}</div>}
          {!!s(section.heading) && <div style={{ fontWeight: 700, fontSize: 24, marginTop: 4 }}>{s(section.heading)}</div>}
          {!!s(section.description) && <p style={{ fontSize: 14, opacity: 0.8, marginTop: 4 }}>{s(section.description)}</p>}
        </div>
        <div style={{ textAlign: "right" }}>
          {!!s(section.promoCode) && <div style={{ fontWeight: 900, fontSize: 28, color: "#a38425" }}>{s(section.promoCode)}</div>}
        </div>
      </div>
    </section>
  );
}

function ComparisonTableSection({ section }: { section: S }) {
  const rows = section.rows as Array<{ featureName?: string; tw?: string; sr?: string; dr?: string }> | undefined;
  return (
    <section className="section-comparison-table" style={{ padding: "80px 0", background: "#f8fafb" }}>
      <div className="container">
        {!!s(section.heading) && <h2 className="section-title" style={{ marginBottom: 40 }}>{s(section.heading)}</h2>}
        {rows && rows.length > 0 && (
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 15, background: "#fff", borderRadius: 16, boxShadow: "0 4px 20px rgba(0,0,0,.06)" }}>
              <thead>
                <tr style={{ background: "#182233", color: "#fff" }}>
                  <th style={{ padding: "16px 20px", textAlign: "left", fontWeight: 700, borderRadius: "16px 0 0 0" }}>Feature</th>
                  <th style={{ padding: "16px 20px", textAlign: "center", fontWeight: 700 }}>1040-TW</th>
                  <th style={{ padding: "16px 20px", textAlign: "center", fontWeight: 700 }}>1040-SR</th>
                  <th style={{ padding: "16px 20px", textAlign: "center", fontWeight: 700, borderRadius: "0 16px 0 0" }}>1040-DR</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((row, i) => (
                  <tr key={i} style={{ borderBottom: "1px solid #eef0f2", background: i % 2 === 0 ? "#fff" : "#f9fafb" }}>
                    <td style={{ padding: "14px 20px", fontWeight: 600, color: "#182233" }}>{row.featureName || ""}</td>
                    <td style={{ padding: "14px 20px", textAlign: "center", color: row.tw === "true" ? "#006568" : "#d0d3d6" }}>{row.tw === "true" ? "✓" : "—"}</td>
                    <td style={{ padding: "14px 20px", textAlign: "center", color: row.sr === "true" ? "#006568" : "#d0d3d6" }}>{row.sr === "true" ? "✓" : "—"}</td>
                    <td style={{ padding: "14px 20px", textAlign: "center", color: row.dr === "true" ? "#006568" : "#d0d3d6" }}>{row.dr === "true" ? "✓" : "—"}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </section>
  );
}

function BlockItemSection({ section }: { section: S }) {
  return (
    <section className="section-block-item" style={{ padding: "80px 0" }}>
      <div className="container" style={{ maxWidth: 800 }}>
        {!!s(section.text) && <h2 className="section-title" style={{ marginBottom: 16 }}>{s(section.text)}</h2>}
        {!!s(section.textarea) && <div className="section-body" style={{ fontSize: 16, lineHeight: 1.8, color: "#3a4044" }} dangerouslySetInnerHTML={{ __html: s(section.textarea) }} />}
      </div>
    </section>
  );
}

function ImageBoxSection({ section }: { section: S }) {
  return (
    <section className="section-image-box" style={{ padding: "80px 0", background: "#f8fafb" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
        {!!s(section.image) && (
          <div>
            <Image src={s(section.image)} alt={s(section.title)} mediaSizes={getCachedMediaSizes()} style={{ width: "100%", maxWidth: 500, borderRadius: 16, boxShadow: "0 12px 40px rgba(0,0,0,.08)" }} />
          </div>
        )}
        <div>
          {!!s(section.title) && <h2 className="section-title" style={{ marginBottom: 16 }}>{s(section.title)}</h2>}
          {!!s(section.textarea) && <div className="section-body" style={{ fontSize: 16, lineHeight: 1.8, color: "#3a4044" }} dangerouslySetInnerHTML={{ __html: s(section.textarea) }} />}
        </div>
      </div>
    </section>
  );
}

function HeroTextSection({ section, breadcrumbs }: { section: S; breadcrumbs?: BreadcrumbItem[] }) {
  return (
    <section style={{ maxWidth: 1280, margin: "0 auto", padding: "64px 56px 0" }}>
      <Breadcrumb items={breadcrumbs || []} />
      <h1 style={{ fontWeight: 900, fontSize: 54, lineHeight: 1.06, letterSpacing: "-.025em", color: "#182233", margin: "22px 0 0", maxWidth: 860 }}>
        {s(section.heading)}<span style={{ color: "#006568" }}>{s(section.heading_highlight)}</span>
      </h1>
      {!!s(section.description) && (
        <p style={{ fontSize: 18, lineHeight: 1.7, color: "#515a63", margin: "20px 0 0", maxWidth: 660 }}>{s(section.description)}</p>
      )}
      <div style={{ display: "flex", gap: 18, alignItems: "center", marginTop: 32, flexWrap: "wrap" }}>
        {(s(section.button1Text) || s(section.button1Url)) && (
          <a href={s(section.button1Url) || "#"} className="hv1" style={{ background: "linear-gradient(135deg,#13a3a6,#006568)", color: "#fff", fontWeight: 700, fontSize: 16, padding: "17px 32px", borderRadius: 999, cursor: "pointer", boxShadow: "0 16px 34px rgba(0,101,104,.32)", display: "inline-block" }}>
            {s(section.button1Text)}
          </a>
        )}
        {(s(section.button2Text) || s(section.button2Url)) && (
          <a href={s(section.button2Url) || "#"} style={{ fontWeight: 700, fontSize: 15, color: "#006568", borderBottom: "2px solid #c9a62f", paddingBottom: 3 }}>
            {s(section.button2Text)}
          </a>
        )}
      </div>
    </section>
  );
}

function HeroPhoneSection({ section, breadcrumbs }: { section: S; breadcrumbs?: BreadcrumbItem[] }) {
  const F = { fontFamily: "Lato,sans-serif" };
  const phoneImg = s(section.phoneImage);
  return (
    <section style={{ maxWidth: 1280, margin: "0 auto", padding: "64px 56px 0" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.02fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <Breadcrumb items={breadcrumbs || []} />
          <h1 style={{ ...F, fontWeight: 900, fontSize: 54, lineHeight: 1.06, letterSpacing: "-.025em", color: "#182233", margin: "22px 0 0" }}>
            {s(section.heading)}<span style={{ color: "#006568" }}>{s(section.heading_highlight)}</span>
          </h1>
          {!!s(section.description) && (
            <p style={{ ...F, fontSize: 18, lineHeight: 1.7, color: "#515a63", margin: "20px 0 0", maxWidth: 560 }}>{s(section.description)}</p>
          )}
          <div style={{ display: "flex", gap: 18, alignItems: "center", marginTop: 32, flexWrap: "wrap" }}>
            {(s(section.button1Text) || s(section.button1Url)) && (
              <a href={s(section.button1Url) || "#"} className="hv1" style={{ background: "linear-gradient(135deg,#13a3a6,#006568)", color: "#fff", ...F, fontWeight: 700, fontSize: 16, padding: "17px 32px", borderRadius: 999, cursor: "pointer", boxShadow: "0 16px 34px rgba(0,101,104,.32)", display: "inline-block" }}>
                {s(section.button1Text)}
              </a>
            )}
            {(s(section.button2Text) || s(section.button2Url)) && (
              <a href={s(section.button2Url) || "#"} style={{ ...F, fontSize: 15, fontWeight: 700, color: "#006568", borderBottom: "2px solid #c9a62f", paddingBottom: 3 }}>
                {s(section.button2Text)}
              </a>
            )}
          </div>
        </div>
        <div style={{ position: "relative", display: "flex", justifyContent: "center", minWidth: 0 }}>
          <div style={{ position: "absolute", top: -30, right: "6%", width: 280, height: 280, background: "radial-gradient(circle, rgba(234,213,145,.55), transparent 64%)", pointerEvents: "none" }} />
          <div style={{ position: "absolute", bottom: -24, left: "4%", width: 250, height: 250, background: "radial-gradient(circle, rgba(19,163,166,.28), transparent 64%)", pointerEvents: "none" }} />
          <div style={{ position: "absolute", top: "14%", left: "2%", width: 56, height: 56, border: "1.5px dashed rgba(0,101,104,.35)", borderRadius: "50%", pointerEvents: "none" }} />
          <div style={{ position: "relative", width: 360, maxWidth: "100%", height: 600, borderRadius: 32, overflow: "hidden", boxShadow: "0 44px 90px rgba(2,47,49,.26)", background: phoneImg ? "none" : "linear-gradient(150deg,#d9ede8,#bcd9d1)", display: "flex", alignItems: "center", justifyContent: "center", ...F, fontSize: 20, color: "#006568", fontWeight: 700 }}>
            {phoneImg ? (
              <Image src={phoneImg} alt="Mobile app screenshot" mediaSizes={getCachedMediaSizes()} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            ) : (
              "Phone mockup"
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function ArticleSection({ section }: { section: S }) {
  if (!s(section.content)) return null;
  return (
    <section style={{ padding: "56px 0 0" }}>
      <div style={{ maxWidth: 820, margin: "0 auto", padding: "0 56px" }}>
        <div style={{ fontSize: 16, lineHeight: 1.75, color: "#3d454d" }} dangerouslySetInnerHTML={{ __html: s(section.content) }} />
      </div>
    </section>
  );
}

function NextSection({ section }: { section: S }) {
  if (!s(section.heading)) return null;
  return (
    <section style={{ padding: "90px 0 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
        <div style={{ background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 28, padding: "42px 48px", boxShadow: "0 20px 50px rgba(2,47,49,.10)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 600 }}>
            <h2 style={{ fontWeight: 900, fontSize: 26, letterSpacing: "-.02em", margin: 0, color: "#182233" }}>{s(section.heading)}</h2>
            {!!s(section.description) && <p style={{ fontSize: 15, lineHeight: 1.65, color: "#515a63", margin: "10px 0 0" }}>{s(section.description)}</p>}
          </div>
          {(s(section.buttonText) || s(section.buttonUrl)) && (
            <a href={s(section.buttonUrl) || "#"} className="hv1" style={{ background: "linear-gradient(135deg,#e3c14a,#c9a62f)", color: "#022f31", fontWeight: 900, fontSize: 14, letterSpacing: ".08em", textTransform: "uppercase", padding: "16px 30px", borderRadius: 999, cursor: "pointer", boxShadow: "0 14px 30px rgba(201,166,47,.35)", display: "inline-block", whiteSpace: "nowrap" }}>
              {s(section.buttonText)}
            </a>
          )}
        </div>
      </div>
    </section>
  );
}

function StatBandSection({ section }: { section: S }) {
  const stats = section.statItems as Array<{ heading?: string; text?: string }> | undefined;
  return (
    <section style={{ padding: "56px 0 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
        {!!s(section.eyebrow) && <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color: "#7e6516" }}>{s(section.eyebrow)}</div>}
        {(s(section.heading) || s(section.heading_highlight)) && (
          <h2 style={{ fontWeight: 900, fontSize: 42, lineHeight: 1.08, letterSpacing: "-.025em", margin: "16px 0 0", color: "#182233", maxWidth: 680 }}>
            {s(section.heading)}<span style={{ color: "#006568" }}>{s(section.heading_highlight) || ""}</span>
          </h2>
        )}
        {!!s(section.description) && <p style={{ fontSize: 16, color: "#63686d", marginTop: 12, maxWidth: 720 }}>{s(section.description)}</p>}
        {stats && stats.length > 0 && (
          <div style={{ marginTop: 32, background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 28, padding: "46px 40px", boxShadow: "0 20px 50px rgba(2,47,49,.10)", display: "grid", gridTemplateColumns: "repeat(" + stats.length + ",minmax(0,1fr))" }}>
            {stats.map((stat, i) => (
              <div key={i} style={{ padding: "6px 30px", borderLeft: i > 0 ? "1px solid rgba(2,47,49,.10)" : "none" }}>
                <div style={{ fontWeight: 900, fontSize: 19, color: "#006568" }}>{stat.heading}</div>
                {!!stat.text && <div style={{ fontSize: 14, lineHeight: 1.55, color: "#515a63", marginTop: 8 }}>{stat.text}</div>}
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

function PartnerGridSection({ section }: { section: S }) {
  const partners = section.partnerItems as Array<{ name?: string; description?: string; logo?: string; url?: string }> | undefined;
  return (
    <section style={{ padding: "100px 0 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
        {!!s(section.eyebrow) && <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color: "#7e6516" }}>{s(section.eyebrow)}</div>}
        {(s(section.heading) || s(section.heading_highlight)) && (
          <h2 style={{ fontWeight: 900, fontSize: 42, lineHeight: 1.08, letterSpacing: "-.025em", margin: "16px 0 0", color: "#182233", maxWidth: 680 }}>
            {s(section.heading)}<span style={{ color: "#006568" }}>{s(section.heading_highlight)}</span>
          </h2>
        )}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 24, marginTop: 52 }}>
          {partners && partners.map((p, i) => (
            <a key={i} href={s(p.url) || "#"} data-stp-reveal="" className="hv2" style={{ display: "flex", flexDirection: "column", background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 26, padding: 30, boxShadow: "0 20px 50px rgba(2,47,49,.10)", transition: "transform .18s, box-shadow .18s", cursor: "pointer" }}>
              {!!s(p.logo) && <span style={{ display: "flex", alignItems: "center", justifyContent: "flex-start", height: 52 }}><Image src={s(p.logo)} alt={s(p.name)} mediaSizes={getCachedMediaSizes()} style={{ maxHeight: 36, maxWidth: 150, width: "auto", objectFit: "contain" }} /></span>}
              {!!s(p.name) && <span style={{ fontWeight: 900, fontSize: 19, color: "#182233", marginTop: 16 }}>{s(p.name)}</span>}
              {!!s(p.description) && <span style={{ fontSize: 14, lineHeight: 1.6, color: "#515a63", marginTop: 8, flex: 1 }}>{s(p.description)}</span>}
              <span style={{ fontSize: 14, fontWeight: 700, color: "#006568", marginTop: 18 }}>Learn more &rarr;</span>
            </a>
          ))}
          {(s(section.cta_heading) || s(section.cta_description)) && (
            <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", background: "linear-gradient(135deg,#0b7376 0%,#02494c 52%,#022f31 100%)", border: "1px solid rgba(255,255,255,.55)", borderRadius: 26, padding: 30, boxShadow: "0 24px 54px rgba(2,47,49,.22)" }}>
              {!!s(section.cta_heading) && <span style={{ fontFamily: "'IBM Plex Serif',serif", fontStyle: "italic", fontSize: 20, color: "#ead591" }}>{s(section.cta_heading)}</span>}
              {!!s(section.cta_description) && <span style={{ fontWeight: 900, fontSize: 22, lineHeight: 1.25, color: "#fff", marginTop: 10 }}>{s(section.cta_description)}</span>}
              {(s(section.cta_phone) || s(section.cta_phone_url)) && (
                <a href={s(section.cta_phone_url) || "#"} className="hv3" style={{ display: "inline-block", alignSelf: "flex-start", marginTop: 20, background: "linear-gradient(135deg,#e3c14a,#c9a62f)", color: "#022f31", fontWeight: 900, fontSize: 13, letterSpacing: ".08em", textTransform: "uppercase", padding: "13px 24px", borderRadius: 999, cursor: "pointer", boxShadow: "0 14px 30px rgba(2,28,30,.35)" }}>
                  {s(section.cta_phone)}
                </a>
              )}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function TeamMembersSection({ section }: { section: S }) {
  const members = section.members as Array<{ name?: string; role?: string; description?: string; image?: string; url?: string }> | undefined;
  return (
    <section style={{ padding: "100px 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
        {!!s(section.eyebrow) && <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color: "#7e6516" }}>{s(section.eyebrow)}</div>}
        {(s(section.heading) || s(section.heading_highlight)) && (
          <h2 style={{ fontWeight: 900, fontSize: 42, lineHeight: 1.08, letterSpacing: "-.025em", margin: "16px 0 0", color: "#182233", maxWidth: 680 }}>
            {s(section.heading)}<span style={{ color: "#006568" }}>{s(section.heading_highlight)}</span>
          </h2>
        )}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(280px,1fr))", gap: 32, marginTop: 52 }}>
          {members && members.map((m, i) => (
            <a key={i} href={s(m.url) || "#"} data-stp-reveal="" className="hv2" style={{ display: "flex", flexDirection: "column", background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 26, padding: 30, boxShadow: "0 20px 50px rgba(2,47,49,.10)", transition: "transform .18s, box-shadow .18s", cursor: "pointer", textDecoration: "none" }}>
              {!!s(m.image) && <Image src={s(m.image)} alt={s(m.name)} mediaSizes={getCachedMediaSizes()} style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover", borderRadius: 16, marginBottom: 20 }} />}
              {!!s(m.name) && <span style={{ fontWeight: 900, fontSize: 19, color: "#182233" }}>{s(m.name)}</span>}
              {!!s(m.role) && <span style={{ fontSize: 13, fontWeight: 600, color: "#7e6516", textTransform: "uppercase", letterSpacing: ".08em", marginTop: 4 }}>{s(m.role)}</span>}
              {!!s(m.description) && <span style={{ fontSize: 14, lineHeight: 1.6, color: "#515a63", marginTop: 8, flex: 1 }}>{s(m.description)}</span>}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactInfoSection({ section }: { section: S }) {
  return (
    <section style={{ padding: "56px 0 0" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "0 56px" }}>
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", borderRadius: 30, overflow: "hidden", boxShadow: "0 30px 70px rgba(2,47,49,.14)", border: "1px solid rgba(255,255,255,.7)" }}>
          <div style={{ position: "relative", overflow: "hidden", background: "linear-gradient(160deg, rgba(19,163,166,.18), rgba(0,101,104,.10))", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", padding: "56px 52px" }}>
            <div style={{ position: "absolute", top: -90, right: -70, width: 300, height: 300, background: "radial-gradient(circle, rgba(234,213,145,.4), transparent 64%)", pointerEvents: "none" }}></div>
            <div style={{ position: "relative" }}>
              {!!(s(section.heading) || s(section.heading_highlight)) && (
                <h2 style={{ fontWeight: 900, fontSize: 30, lineHeight: 1.1, letterSpacing: "-.025em", margin: 0, color: "#182233" }}>
                  {s(section.heading)}<span style={{ color: "#006568" }}>{s(section.heading_highlight) || ""}</span>
                </h2>
              )}
              <div style={{ marginTop: 26 }}>
                {!!s(section.toll_free) && (
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 16, alignItems: "baseline", padding: "14px 0", borderTop: "1px solid rgba(2,47,49,.10)" }}>
                    <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".14em", textTransform: "uppercase", color: "#63686d", flex: "0 0 auto" }}>Toll free</span>
                    <a href={"tel:" + s(section.toll_free).replace(/[^0-9]/g,"")} style={{ fontSize: 15, fontWeight: 700, color: "#006568", textAlign: "right" }}>{s(section.toll_free)}</a>
                  </div>
                )}
                {!!s(section.phone) && (
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 16, alignItems: "baseline", padding: "14px 0", borderTop: "1px solid rgba(2,47,49,.10)" }}>
                    <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".14em", textTransform: "uppercase", color: "#63686d", flex: "0 0 auto" }}>Phone</span>
                    <a href={"tel:" + s(section.phone).replace(/[^0-9]/g,"")} style={{ fontSize: 15, fontWeight: 700, color: "#006568", textAlign: "right" }}>{s(section.phone)}</a>
                  </div>
                )}
                {!!s(section.fax) && (
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 16, alignItems: "baseline", padding: "14px 0", borderTop: "1px solid rgba(2,47,49,.10)" }}>
                    <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".14em", textTransform: "uppercase", color: "#63686d", flex: "0 0 auto" }}>Fax</span>
                    <span style={{ fontSize: 15, fontWeight: 700, color: "#182233", textAlign: "right" }}>{s(section.fax)}</span>
                  </div>
                )}
                {!!s(section.support_email) && (
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 16, alignItems: "baseline", padding: "14px 0", borderTop: "1px solid rgba(2,47,49,.10)" }}>
                    <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".14em", textTransform: "uppercase", color: "#63686d", flex: "0 0 auto" }}>Support</span>
                    <a href={"mailto:" + s(section.support_email)} style={{ fontSize: 15, fontWeight: 700, color: "#006568", textAlign: "right" }}>{s(section.support_email)}</a>
                  </div>
                )}
                {!!s(section.sales_email) && (
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 16, alignItems: "baseline", padding: "14px 0", borderTop: "1px solid rgba(2,47,49,.10)" }}>
                    <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".14em", textTransform: "uppercase", color: "#63686d", flex: "0 0 auto" }}>Sales</span>
                    <a href={"mailto:" + s(section.sales_email)} style={{ fontSize: 15, fontWeight: 700, color: "#006568", textAlign: "right" }}>{s(section.sales_email)}</a>
                  </div>
                )}
                {!!s(section.address) && (
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 16, alignItems: "baseline", padding: "14px 0", borderTop: "1px solid rgba(2,47,49,.10)" }}>
                    <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".14em", textTransform: "uppercase", color: "#63686d", flex: "0 0 auto" }}>Office</span>
                    <a href={"https://www.google.com/maps?q=" + [s(section.address)]} target="_blank" style={{ fontSize: 15, fontWeight: 700, color: "#006568", textAlign: "right" }}>{s(section.address)}</a>
                  </div>
                )}
              </div>
              {!!s(section.season_hours) && (
                <div style={{ marginTop: 26, background: "rgba(255,255,255,.55)", border: "1px solid rgba(255,255,255,.8)", borderRadius: 18, padding: "20px 22px" }}>
                  <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: ".16em", textTransform: "uppercase", color: "#7e6516" }}>Season hours</div>
                  <p style={{ fontSize: 14, lineHeight: 1.65, color: "#4a545c", margin: "8px 0 0" }}>{s(section.season_hours)}</p>
                </div>
              )}
            </div>
          </div>
          <div style={{ background: "rgba(255,255,255,.72)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", padding: "56px 52px" }}>
            {!!s(section.form_title) && <h3 style={{ fontWeight: 900, fontSize: 24, margin: "0 0 6px", color: "#182233" }}>{s(section.form_title)}</h3>}
            {!!s(section.form_subtitle) && <p style={{ fontSize: 14, color: "#63686d", margin: "0 0 24px" }}>{s(section.form_subtitle)}</p>}
            <ContactForm submitLabel={s(section.submit_label) || "Send message"} smsConsentText={s(section.sms_consent)} />
          </div>
        </div>
      </div>
    </section>
  );
}

function CultureCardsSection({ section }: { section: S }) {
  const cards = section.cards as Array<{ eyebrow?: string; description?: string; checkItems?: string[] }> | undefined;
  if (!cards || cards.length === 0) return null;
  const F = { fontFamily: "Lato,sans-serif" };
  return (
    <section style={{ padding: "56px 0 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 24 }}>
          {cards.map((card, i) => (
            <div key={i} data-stp-reveal="" style={{ background: "rgba(255,255,255,.55)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,.75)", borderRadius: 26, padding: "34px 30px", boxShadow: "0 20px 50px rgba(2,47,49,.10)" }}>
              {!!card.eyebrow && <div style={{ ...F, fontSize: 12, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color: "#7e6516" }}>{card.eyebrow}</div>}
              {!!card.description && <p style={{ ...F, fontSize: 16, lineHeight: 1.7, color: "#3d454d", margin: "16px 0 0" }}>{card.description}</p>}
              {card.checkItems && card.checkItems.length > 0 && (
                <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0", display: "flex", flexDirection: "column", gap: 9 }}>
                  {card.checkItems.map((text, j) => (
                    <li key={j} style={{ display: "flex", gap: 10, ...F, fontSize: 15, lineHeight: 1.5, color: "#31353a" }}>
                      <span style={{ color: "#006568", flex: "0 0 auto", marginTop: 2 }}>
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
                      </span>
                      <span>{text}</span>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ImageGallerySection({ section }: { section: S }) {
  const gallery = section.gallery as Array<{ image?: string }> | undefined;
  const prefix = "glb-" + Math.random().toString(36).slice(2, 6);
  return (
    <>
      <style>{`
        .gal-thumb { display:block; border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(2,47,49,.10); transition:transform .18s, box-shadow .18s; cursor:pointer; }
        .gal-thumb:hover { transform:scale(1.03); box-shadow:0 16px 40px rgba(2,47,49,.18); }
        .gal-thumb img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
        .glb-overlay { position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(2,47,49,.88); backdrop-filter:blur(8px); }
        .glb-overlay:target { display:flex; }
        .glb-overlay .glb-close { position:absolute; top:20px; right:24px; font-size:32px; color:#fff; text-decoration:none; font-weight:300; line-height:1; z-index:2; }
        .glb-overlay .glb-img { max-width:90vw; max-height:85vh; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
        .glb-overlay .glb-nav { position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:40px; font-weight:300; text-decoration:none; padding:20px; line-height:1; opacity:.7; transition:opacity .12s; z-index:2; }
        .glb-overlay .glb-nav:hover { opacity:1; }
        .glb-overlay .glb-prev { left:12px; }
        .glb-overlay .glb-next { right:12px; }
      `}</style>
      <section style={{ padding: "90px 0 0" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>
          <div style={{ maxWidth: 680 }}>
            {!!s(section.eyebrow) && <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color: "#7e6516" }}>{s(section.eyebrow)}</div>}
            {(s(section.heading) || s(section.heading_highlight)) && (
              <h2 style={{ fontWeight: 900, fontSize: 42, lineHeight: 1.08, letterSpacing: "-.025em", margin: "16px 0 0", color: "#182233" }}>
                {s(section.heading)}<span style={{ color: "#006568" }}>{s(section.heading_highlight) || ""}</span>
              </h2>
            )}
            {!!s(section.description) && <p style={{ fontSize: 16, color: "#63686d", marginTop: 12 }}>{s(section.description)}</p>}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,minmax(0,1fr))", gap: 16, marginTop: 40 }}>
            {gallery && gallery.map((img, i) => {
              const id = prefix + "-" + i;
              const prevId = i > 0 ? prefix + "-" + (i - 1) : prefix + "-" + (gallery.length - 1);
              const nextId = i < gallery.length - 1 ? prefix + "-" + (i + 1) : prefix + "-0";
              return (
                <span key={i}>
                  <a href={"#" + id} className="gal-thumb"><Image src={s(img.image)} alt={"Gallery image " + (i + 1)} mediaSizes={getCachedMediaSizes()} loading="lazy" /></a>
                  <div className="glb-overlay" id={id}>
                    <a href="#" className="glb-close">&times;</a>
                    <a href={"#" + prevId} className="glb-nav glb-prev">&lsaquo;</a>
                    <Image src={s(img.image)} alt={"Gallery image " + (i + 1)} mediaSizes={getCachedMediaSizes()} className="glb-img" />
                    <a href={"#" + nextId} className="glb-nav glb-next">&rsaquo;</a>
                  </div>
                </span>
              );
            })}
          </div>
        </div>
      </section>
    </>
  );
}

function GoogleMapSection({ section }: { section: S }) {
  return (
    <section style={{ padding: "0" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "0 56px" }}>
        <div style={{ position: "relative", borderRadius: 30, overflow: "hidden", border: "1px solid rgba(255,255,255,.75)", boxShadow: "0 30px 70px rgba(2,47,49,.14)" }}>
          {!!s(section.embed_url) && (
            <iframe src={s(section.embed_url)} width="100%" height="440" style={{ border: 0, display: "block", filter: "saturate(.85)" }} loading="lazy" referrerPolicy="no-referrer-when-downgrade" title="Office location" />
          )}
          <div style={{ position: "absolute", bottom: 30, right: 30, background: "rgba(255,255,255,.9)", backdropFilter: "blur(16px)", borderRadius: 20, padding: "24px 30px", boxShadow: "0 10px 40px rgba(2,47,49,.18)", maxWidth: 260 }}>
            {!!s(section.map_label) && <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: ".16em", textTransform: "uppercase", color: "#7e6516" }}>{s(section.map_label)}</div>}
            <p style={{ fontSize: 14, lineHeight: 1.5, color: "#182233", margin: "6px 0 0" }}>
              {s(section.address_line1)}<br />{s(section.address_line2)}
            </p>
            {!!s(section.directions_url) && (
              <a href={s(section.directions_url)} target="_blank" style={{ display: "inline-block", marginTop: 12, fontSize: 13, fontWeight: 700, color: "#006568", borderBottom: "2px solid #c9a62f", paddingBottom: 2, textDecoration: "none" }}>
                Get directions &rarr;
              </a>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function DefaultSection({ section }: { section: S }) {
  return (
    <section className="section-default" style={{ padding: "80px 0" }}>
      <div className="container">
        {!!s(section.heading) && <h2 className="section-title">{s(section.heading)}</h2>}
        {!!s(section.content) && <div className="section-body" dangerouslySetInnerHTML={{ __html: s(section.content) }} />}
      </div>
    </section>
  );
}