/* ============================================================
Kermit Webcraft — SiteMock: a miniature, realistic landing-page
"screenshot" rendered per client. Pure CSS, scales with the card
via container-query units (cqw). Used in the portfolio grid in
place of flat gradient placeholders.
============================================================ */
/* Per-client themes. photo = a faux hero-image gradient evoking the
industry; light controls text-on-bg defaults. */
const SITE_THEMES = {
"Angel’s Home Improvement": {
short: "Angel’s", layout: "split", light: true,
img: "assets/work/angels-home-improvement.png",
headline: "Built to last.", sub: "Remodels, repairs, and renovations done right the first time.",
pal: { bg: "#faf7f2", ink: "#211d18", sub: "#7c7368", accent: "#c2410c",
photo: "linear-gradient(150deg,#e6c098,#a9703c 55%,#5f3c20)" } },
"P&E Remodeling Solutions": {
short: "P&E", layout: "imageHero",
headline: "Remodels done right.", sub: "Kitchens, baths, and whole-home builds across the tri-state.",
pal: { bg: "#10161d", ink: "#fff", sub: "rgba(255,255,255,.78)", accent: "#e0a82e",
photo: "linear-gradient(155deg,#6a7c8c,#33454f 55%,#161f27)" } },
"United Automotive Consultants": {
short: "United", layout: "editorial",
img: "assets/work/united-automotive-consultants.png",
headline: "Drive smarter decisions.", sub: "Fleet strategy and acquisition advisory for dealer groups.",
pal: { bg: "#0f1622", ink: "#fff", sub: "rgba(255,255,255,.74)", accent: "#3d83d6",
photo: "linear-gradient(150deg,#43577a,#1f2d44 55%,#0c1220)" } },
"Casa Bueno": {
short: "Casa Bueno", layout: "centered", light: true,
headline: "Roasted fresh daily.", sub: "Small-batch beans, shipped the morning they’re roasted.",
pal: { bg: "#f6efe6", ink: "#2a1d12", sub: "#857461", accent: "#8a5a2b",
photo: "linear-gradient(150deg,#cba47a,#8a5a2b 55%,#4f3018)" } },
"Buckle Up": {
short: "Buckle Up", layout: "split", light: true,
headline: "Plumbing you can trust.", sub: "24/7 service from a team that shows up when it says it will.",
pal: { bg: "#f1f6fa", ink: "#10222e", sub: "#5d7686", accent: "#1f7fb0",
photo: "linear-gradient(150deg,#8fc9e8,#2f86b6 55%,#154f6e)" } },
"Heron & Co.": {
short: "Heron & Co.", layout: "imageHero",
headline: "Home, well made.", sub: "Considered objects for everyday living.",
pal: { bg: "#16130f", ink: "#fff", sub: "rgba(255,255,255,.8)", accent: "#b08968",
photo: "linear-gradient(150deg,#ddd3c6,#ab9a85 55%,#6f6050)" } },
"Cedar Clinic": {
short: "Cedar", layout: "centered", light: true,
headline: "Care that listens.", sub: "Family medicine with same-week appointments.",
pal: { bg: "#eef7f4", ink: "#0f2a23", sub: "#5a8276", accent: "#2f9b86",
photo: "linear-gradient(150deg,#a6dccf,#3f9b86 55%,#236554)" } },
"The Green Fork": {
short: "Green Fork", layout: "imageHero",
headline: "Eat well, locally.", sub: "Seasonal plates from a kitchen that knows its farmers.",
pal: { bg: "#13160d", ink: "#fff", sub: "rgba(255,255,255,.82)", accent: "#7faf3a",
photo: "linear-gradient(150deg,#c2d488,#6f9a32 55%,#3a5a1d)" } },
"Lily & Reed": {
short: "Lily & Reed", layout: "editorial", light: true,
headline: "Design with intent.", sub: "A boutique studio for brands that sweat the details.",
pal: { bg: "#f7f1f2", ink: "#241a1d", sub: "#8a727a", accent: "#b06b7c",
photo: "linear-gradient(150deg,#e6c9cf,#bb8392 55%,#7c5360)" } },
"Andelina Beauty": {
short: "Andelina", layout: "imageHero",
img: "assets/work/andelina-beauty.png",
headline: "Elevate your beauty.", sub: "Three NJ locations, one elegant home for products, nails, and booking.",
pal: { bg: "#3a0f22", ink: "#fff", sub: "rgba(255,255,255,.82)", accent: "#e8408a",
photo: "linear-gradient(150deg,#f6c1d4,#d8528d 55%,#7c1f4a)" } },
};
const FALLBACK = SITE_THEMES["Atlas Plumbing"];
/* ---- shared mini-pieces ---- */
function MNav({ t, p, dark }) {
const c = dark ? "rgba(255,255,255,.92)" : p.ink;
const lk = dark ? "rgba(255,255,255,.5)" : p.sub;
return (
{t.short}
{[0, 1, 2].map((i) => )}
);
}
function MBtn({ bg, w = "23cqw" }) {
return ;
}
function MEyebrow({ color }) {
return ;
}
function MPhoto({ p, style }) {
return (
);
}
function SiteMock({ title }) {
const t = SITE_THEMES[title] || FALLBACK;
const p = t.pal;
const fill = { position: "absolute", inset: 0, display: "flex", flexDirection: "column", overflow: "hidden" };
/* Real screenshot provided → show full page width, top-aligned. A
blurred copy fills the area below so the wide shot reads as a
framed thumbnail rather than leaving a hard gap. */
if (t.img) {
return (
);
}
if (t.layout === "imageHero") {
return (
);
}
if (t.layout === "centered") {
return (
{[0, 1, 2].map((i) => (
))}
);
}
if (t.layout === "editorial") {
const dark = !t.light;
return (
);
}
/* split (default) */
return (
);
}
Object.assign(window, { SiteMock });