// PowerCord Energy — Marketing Site UI Kit components.
// All components share the brand's tokens via colors_and_type.css.
const { useState } = React;
// Shared "Schedule a call" mailto link — used by every "Schedule a call"
// CTA across the entire marketing site (home + all v2 pages).
const SCHEDULE_CALL_MAILTO = "mailto:Sales@powercordenergy.com?subject=I%27m%20interested%20in%20PowerCord%20Energy.&body=I%20have%20reviewed%20your%20website%20and%20am%20interested%20in%20discussing%20PowerCord%20Energy%27s%20services%20for%20Texas%20multifamily.%20Please%20reply%20back%20to%20schedule%20a%20time%20for%20a%20brief%20introductory%20chat.";
window.SCHEDULE_CALL_MAILTO = SCHEDULE_CALL_MAILTO;
// ────────────────────────────────────────────────────────────
// Hosted explainer video URLs.
//
// Replace each placeholder with the public Vercel URL once the MP4s
// are uploaded. All video CTAs across the site reference these three
// constants — this is the only place they need to be updated.
//
// VIDEO_INTRO_3MIN → "PowerCord Energy Services Explainer.mp4"
// (used by every nav "Three-minute introduction"
// pill and the home-page footer CTA)
// VIDEO_ELECTRICITY → "PowerCord Electricity Revenue Explainer.mp4"
// (used by the "Three-minute explainer video"
// buttons in the Electricity Revenue sections)
// VIDEO_TAX_RECAPTURE → "PowerCord Energy Tax Recapture Explainer.mp4"
// (used by the "Three-minute explainer video"
// buttons in the Tax Recapture sections)
// ────────────────────────────────────────────────────────────
const VIDEO_INTRO_3MIN = "/explainer.mp4";
const VIDEO_ELECTRICITY = "/explainer-energy.mp4";
const VIDEO_TAX_RECAPTURE = "/explainer-tax.mp4";
window.VIDEO_INTRO_3MIN = VIDEO_INTRO_3MIN;
window.VIDEO_ELECTRICITY = VIDEO_ELECTRICITY;
window.VIDEO_TAX_RECAPTURE = VIDEO_TAX_RECAPTURE;
// ────────────────────────────────────────────────────────────
// Wordmark — live HTML rendering of Logo 2.0
// ────────────────────────────────────────────────────────────
function Wordmark({ onDark = false, size = 20 }) {
const pcColor = onDark ? "#fff" : "#25476c";
return (
PowerCordEnergy
);
}
// ────────────────────────────────────────────────────────────
// Nav
// ────────────────────────────────────────────────────────────
function Nav({ current }) {
const items = [
{ 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 (
);
}
// ────────────────────────────────────────────────────────────
// Eyebrow + 48px rule (the brand signature card head)
// ────────────────────────────────────────────────────────────
function Eyebrow({ children, sm = false }) {
return (
{children}
);
}
function Rule() {
return ;
}
// ────────────────────────────────────────────────────────────
// Trust badge — "X | Y | Z" three-token rhythm
// ────────────────────────────────────────────────────────────
function TrustBadge({ tokens, onDark = false }) {
return (
);
}
// ────────────────────────────────────────────────────────────
// Hero — two-column navy with white summary card
// ────────────────────────────────────────────────────────────
function Hero({ headline, sub, badge, card, image, imageAlt }) {
return (
{headline}
{sub}
{badge && }
{image ? (
) : card}
);
}
// ────────────────────────────────────────────────────────────
// HeroCard — white card to the right of the hero headline
// ────────────────────────────────────────────────────────────
function HeroCard({ eyebrow, title, body, ctaLabel, secondaryLabel, onCTA, ctas }) {
// ctas: optional array of { label, onClick, variant: "primary" | "spark" }
// Falls back to legacy ctaLabel/secondaryLabel/onCTA when ctas is not provided.
return (