// v2 page shared components. // (pmc-v2, owner-operator-v2, tax-recapture-v2). // // Re-uses the brand atoms from components.jsx (Wordmark, Eyebrow, Rule, // TrustBadge, Section, SectionHead, FeatureStack) and adds: // • PageNav — top nav with real links between v2 pages // • SegmentSwitch — slim navy bar offering the other audience path // • Hero — extended to accept an `eyebrow` slot above the headline // • SummaryCard — multi-item white card to the right of the hero // • ServiceBlock — image + content + companion visual, alt/reverse variants // • FlowVisual — numbered card with steps + outcome footer // • FooterCTA — clean-slate CTA strip with two buttons (primary + spark) // • PageFooter — three-link footer with brand wordmark + privacy // Overwrite the components.jsx Hero with a version that supports eyebrow. function HeroV2({ eyebrow, headline, sub, badge, card, image, imageAlt }) { return (
{eyebrow && ( {eyebrow} )}

{headline}

{sub}

{badge && }
{image ? (
{imageAlt
) : card}
); } // Make `Hero` resolve to the V2 version inside this script's scope. // (components.jsx's Hero stays available as window.Hero for index.html.) const Hero = HeroV2; // ──────────────────────────────────────────────────────────── // PageNav — top nav for standalone v2 pages // ──────────────────────────────────────────────────────────── function PageNav({ current }) { const items = [ { id: "home", label: "Home", href: "/" }, { id: "pmc", label: "Property Managers", href: "/pmc" }, { id: "owner", label: "Property Owners", href: "/owner-operator" }, { id: "tax", label: "Tax Recapture", href: "/tax-recapture" }, { id: "energy", label: "Energy Revenue", href: "/energy-revenue.html" }, ]; return ( ); } // ──────────────────────────────────────────────────────────── // SegmentSwitch — slim navy bar above hero // ──────────────────────────────────────────────────────────── function SegmentSwitch({ href, label, cta }) { return (
{label} {cta} →
); } // ──────────────────────────────────────────────────────────── // SummaryCard — multi-item white card placed in hero // ──────────────────────────────────────────────────────────── function SummaryCard({ eyebrow, title, items, footer }) { return (
{eyebrow}

{title}

{items.map((it, i) => (
{it.label}
{it.body}
))} {footer && (
{footer}
)}
); } // ──────────────────────────────────────────────────────────── // ServiceBlock — full alternating section // Layout: optional image strip, then 2-col [content | visual] // ──────────────────────────────────────────────────────────── function ServiceBlock({ alt = false, reverse = false, image, imageAlt, tag, eyebrow, title, intro, features, cta, visual, }) { const bg = alt ? "var(--clean-slate)" : "#fff"; const left = (
{tag && (
{tag}
)} {eyebrow}

{title}

{intro && (

{intro}

)} {cta && (() => { const renderCta = (c, idx) => ( c.video ? ( {c.label} ) : ( {c.label} ) ); const ctas = Array.isArray(cta) ? cta : [cta]; return (
{ctas.map(renderCta)}
); })()}
); return (
{image && (
{imageAlt
)}
{reverse ? (<>
{visual}
{left} ) : (<> {left}
{visual}
) }
); } // ──────────────────────────────────────────────────────────── // FlowVisual — numbered card next to a ServiceBlock // ──────────────────────────────────────────────────────────── function FlowVisual({ title, steps, result }) { return (
How it works
{title}
{steps.map((s, i) => (
{i + 1}
{s.label}
{s.body}
))}
{result && (
{result.label}
{result.body}
)}
); } // ──────────────────────────────────────────────────────────── // RevenueFlow — vertical linear flow graphic (numbered nodes strung along an amber wire) // ──────────────────────────────────────────────────────────── const _flowIcons = { doc: , bolt: , coin: , exit: , search: , sign: , gear: , }; function RevenueFlow({ title, eyebrow = "How it works", steps, result, iconKeys = ["doc","bolt","coin","exit"], chromeless = false }) { const RAIL_X = 28; // px — center of the vertical "wire" const NODE = 56; // px — node diameter return (
{eyebrow && (
{eyebrow}
)} {title && (
{title}
)}
{steps.map((s, i) => { const isLast = i === steps.length - 1; return (
{/* Step row */}
{/* Icon node */}
{_flowIcons[iconKeys[i]] || null}
{/* Step-number chip */} {i + 1}
{/* Text */}
{s.label}
{s.body && (
{s.body}
)}
{/* Connector wire to next node (sits underneath the next icon) */} {!isLast && (
)}
); })}
{result && (
{result.label}
{result.body}
)}
); } // ──────────────────────────────────────────────────────────── // FooterCTA — page footer CTA strip (clean-slate) // ──────────────────────────────────────────────────────────── function FooterCTA({ eyebrow, headline, sub, ctaPrimary, ctaSecondary, bg = "#fff" }) { return (
{eyebrow && {eyebrow}}

{headline}

{sub}

{ctaPrimary && ( { e.preventDefault(); ctaPrimary.onClick(); } : undefined} className="btn btn--spark" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}> {ctaPrimary.label} )} {ctaSecondary && ( { e.preventDefault(); ctaSecondary.onClick(); } : undefined} className="btn btn--spark" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}> {ctaSecondary.label} )}
); } // ──────────────────────────────────────────────────────────── // PageFooter — multi-link bottom footer // ──────────────────────────────────────────────────────────── function PageFooter() { return ( ); } const fLink = { color: "rgba(255,255,255,0.7)", fontSize: 13, textDecoration: "none" }; // Expose so individual page scripts can use them. // NOTE: each Babel