// home.jsx — JEWELthePAINT home page sections // Hero · What is jeweling (definition) · Before/After 5-stage slider // Two pillars (correction + headlights) · Mobile callout // ───────────────────────────────────────────────────────────── const { useState: useStateH, useEffect: useEffectH, useRef: useRefH, useMemo: useMemoH } = React; // ────────────────────────────────────────────── HERO ────────── function Hero() { return (
A BAY AREA MOBILE PAINT-CORRECTION STUDIO · EST. 2019

Jewel the Paint

The Bay Area's most meticulous detailer — brought to your driveway. Multi-stage paint correction taken to its optical limit, measured in gloss units, not adjectives.

Start a consultation → What is jeweling? ↓
{/* hero panel — real photo */}
{/* spec strip */}
); } // ─────────────────────────────────────── WHAT IS JEWELING ───── function WhatIsJeweling() { return (
§ 02 · DEFINITION

What is jeweling
the paint?

jew·el·ing verb. {" "}The final stage of paint correction. After contamination is removed and defects are leveled, an ultra-fine polish is worked into the clear coat with refined pressure and slow, deliberate passes.

The micro-scratches that scatter light disappear. Reflections sharpen. Depth returns. The panel begins to behave like a faceted gemstone — light enters cleanly, and what comes back is the colour the factory intended, only deeper.

We verify each pass under three light temperatures — 4500 K halogen, 6500 K daylight, and raked-angle LED — and record gloss-unit readings before and after. The math is the point.

GLOSS GAIN
+18 GU
typical, post-jewel
DOI
97–99
distinctness of image
REMOVAL DEPTH
< 1.5 µm
per refinement pass
); } // ─────── light-behavior diagram (kept; champagne accent instead of sapphire) function RefractionDiagram() { return (
FIG. 02 · BEHAVIOUR OF LIGHT ACROSS A CLEAR COAT
{/* PANEL 01 — contaminated */} 01 · BEFORE — CONTAMINATED CLEAR COAT {/* incoming sun rays */} {[80, 160, 240, 320, 400, 480].map((x, i) => ( ))} SUN ↓ CLEAR COAT BASE COAT Light scatters. Reflection blurs. Colour reads shallow. {/* PANEL 02 — jeweled */} 02 · AFTER — JEWELED CLEAR COAT {[80, 160, 240, 320, 400, 480].map((x, i) => ( ))} SUN ↓ CLEAR COAT · LEVELED BASE COAT {[80, 160, 240, 320, 400, 480].map((x, i) => ( ))} Light returns whole. Reflection sharpens. Colour reads deep.
); } // ─────────────────────────────────────── BEFORE / AFTER ─────── const STAGES = [ { at: 0, key: "contaminated", label: "Contaminated", note: "Iron, tar, & embedded fallout" }, { at: 22, key: "decon", label: "Decon", note: "Chemical & clay decontamination" }, { at: 44, key: "compound", label: "Compound", note: "Defect leveling, heavy cut" }, { at: 68, key: "polish", label: "Polish", note: "Refinement, removing haze" }, { at: 100, key: "jewel", label: "Jewel", note: "Final finishing pass" }, ]; function BeforeAfter({ sectionNum = "02", eyebrow = "DRAG TO REVEAL" }) { const [pct, setPct] = useStateH(50); const wrapRef = useRefH(null); const draggingRef = useRefH(false); const stageIdx = useMemoH(() => { let s = 0; for (let i = 0; i < STAGES.length; i++) if (pct >= STAGES[i].at) s = i; return s; }, [pct]); function setFromX(clientX) { const r = wrapRef.current?.getBoundingClientRect(); if (!r) return; const x = (clientX - r.left) / r.width; setPct(Math.max(0, Math.min(100, x * 100))); } useEffectH(() => { function move(e) { if (!draggingRef.current) return; const cx = e.touches ? e.touches[0].clientX : e.clientX; setFromX(cx); } function up() { draggingRef.current = false; } window.addEventListener("mousemove", move); window.addEventListener("mouseup", up); window.addEventListener("touchmove", move, { passive: true }); window.addEventListener("touchend", up); return () => { window.removeEventListener("mousemove", move); window.removeEventListener("mouseup", up); window.removeEventListener("touchmove", move); window.removeEventListener("touchend", up); }; }, []); const stage = STAGES[stageIdx]; return (
§ {sectionNum} · {eyebrow}

From contaminated to jeweled.

Drag across the panel — the divider doubles as a process scrubber. Each tick is a stage of multi-stage paint correction.

{ draggingRef.current = true; setFromX(e.clientX); }} onTouchStart={(e) => { draggingRef.current = true; setFromX(e.touches[0].clientX); }} style={{ position: "relative", width: "100%", aspectRatio: "21/10", background: "#0a0a0c", overflow: "hidden", cursor: "ew-resize", userSelect: "none", border: "1px solid var(--rule)", }} >
‹ ›
BEFORE · {stage.label.toUpperCase()}
AFTER · JEWELED
FIG. 03 · MACRO @ 4500K · 1:1 PANEL
{/* tick / stage scrubber */}
{STAGES.map((s, i) => ( ))}
CURRENT STAGE
{stage.label} — {stage.note.toLowerCase()}.
{String(Math.round(pct)).padStart(3, "0")} /100
); } function PaintLayer({ stage, stageIdx }) { const t = stageIdx / (STAGES.length - 1); return (
{Array.from({ length: 120 }).map((_, i) => { const cx = (i * 53) % 1000; const cy = ((i * 97) % 480); const r = 6 + ((i * 13) % 16); const a1 = (i * 37) % 360; const a2 = a1 + 50 + ((i * 7) % 80); const sa1 = (a1 * Math.PI) / 180, sa2 = (a2 * Math.PI) / 180; const x1 = cx + r * Math.cos(sa1), y1 = cy + r * Math.sin(sa1); const x2 = cx + r * Math.cos(sa2), y2 = cy + r * Math.sin(sa2); return ; })} {stageIdx <= 1 && ( {Array.from({ length: 30 }).map((_, i) => { const cx = (i * 87) % 1000, cy = (i * 53) % 480, r = 1 + ((i * 3) % 2); return ; })} )}
); } // ─────────────────────────────────────── TWO PILLARS ────────── function TwoPillars() { const pillars = [ { num: "I", title: "Paint correction", sub: "Brought to its optical limit.", body: "Multi-stage cut, polish, and jeweling — verified under three light temperatures, scored on a gloss meter. We don't guess; we measure.", stats: [["Stages", "3–5"], ["Gloss gain", "+12 to +22 GU"], ["Light temps", "4500 · 6500 K"]], href: "services.html#correction", }, { num: "II", title: "Headlight restoration", sub: "Optical-grade, sealed against UV.", body: "Yellowed, oxidized lenses re-clarified through the same cut/polish/jewel sequence used on paint. Resin reset, then sealed with a UV-stable coat.", stats: [["Clarity gain", "70 → 95%"], ["Sealed for", "2+ yrs"], ["Per pair", "~3 hrs"]], href: "services.html#headlights", }, ]; return (
§ 03 · TWO PILLARS

We do two things,
exceptionally.

Paint and headlights are both about one thing — letting light pass through cleanly. Everything else follows from that.

{pillars.map((p, i) => ( { e.currentTarget.style.background = "var(--bg-3)"; }} onMouseLeave={(e) => { e.currentTarget.style.background = "var(--bg-2)"; }}>
PILLAR · {p.num}
{p.num === "I" ? "FLAGSHIP" : "ADJACENT"}

{p.title}

{p.sub}

{p.body}

{p.stats.map((s, j) => (
0 ? 16 : 0, }}>
{s[0]}
{s[1]}
))}
READ THE BRIEF →
))}
); } // ─────────────────────────────────────── MOBILE CALLOUT ─────── function MobileCallout() { return (
§ 04 · WE COME TO YOU

A studio,
in your driveway.

We arrive with a covered mobile rig: filtered water, calibrated lighting in three temperatures, a sealed polish zone, and our own power. Set up in 25 minutes; gone the same evening or the next.

{[ ["WHAT WE NEED", "A flat 12×24 ft space — driveway, garage apron, or covered carport. We bring everything else."], ["WHAT WE BRING", "Inverter power, water deionizer, 4500/6500 K lighting, sealed polish enclosure, gloss meter."], ["WHAT YOU PROVIDE", "Coffee, optionally. The car keys, ideally."], ].map(([k, v]) => (
{k}
{v}
))}
{/* mobile-rig blueprint */}
FIG. 04 · MOBILE RIG · PLAN
{/* van outline */} VAN WATER PWR {/* canopy/tent dashed */} COVERED · 12 × 24 FT {/* car wireframe inside tent */} {/* lighting marks */} L1 L2 L3 {/* polish enclosure */} POLISH ROOM {/* tools / cart */} TOOLS · CHEMS PLAN — 1:50 JTP · MOBILE DIMENSIONS APPROX. · LEVEL SURFACE REQUIRED
[ mobile rig — to be replaced with photo ]
12×24 FT FOOTPRINT
SELF-POWERED
DUST-CONTROLLED
); } // ─────────────────────────────────────── CLOSER ─────────────── function Closer() { return (
§ 05 · CONSULTATION

A conversation about your paint.

Every car is different, so we begin with a consultation — not a calendar. Tell us about the vehicle; we reply within two business days.

); } Object.assign(window, { Hero, WhatIsJeweling, BeforeAfter, TwoPillars, MobileCallout, Closer, });