/* EZV Studio – Easy Driver page (main) */
/* eslint-disable */
const { useState: useS, useEffect: useE } = React;
const EASY_DRIVER_DOWNLOAD_URL = 'easy-driver-download.html';
/* ── language handling (URL + localStorage) ──────────── */
function getInitialLang() {
try {
const u = new URL(window.location.href);
const fromUrl = u.searchParams.get('lang');
if (fromUrl && EDP[fromUrl]) return fromUrl;
const fromLs = localStorage.getItem('ezLang');
if (fromLs && EDP[fromLs]) return fromLs;
} catch {}
return 'pt';
}
/* ── Top Nav ──────────────────────────────────────────── */
function TopNav({ lang, setLang, T }) {
return (
);
}
function EDPLangSwitch({ lang, setLang }) {
const langs = [
{ code: 'pt', Flag: FlagBR },
{ code: 'en', Flag: FlagUS },
{ code: 'es', Flag: FlagES },
];
return (
{langs.map(({ code, Flag }) => {
const active = code === lang;
return (
);
})}
);
}
/* ── Hero ─────────────────────────────────────────────── */
function HeroSection({ T, lang }) {
return (
{T.hero.eyebrow}
{T.hero.titleA}
{T.hero.titleB}
{T.hero.subtitle}
{T.hero.desc}
{T.downloadApp}
{T.hero.ctaPrimary}
{T.hero.ctaSecondary}
);
}
function PhoneLabel({ tag }) {
return (
{tag}
);
}
/* ── Hero icon cluster (replaces phone mockups) ───────── */
function HeroIconCluster({ T }) {
return (
{/* Abstract route SVG backdrop */}
{/* Glow halo — passenger (blue/cyan) */}
{/* Glow halo — partner (purple + green mix) */}
{/* Center halo blend */}
{/* Partner icon — back, bottom-right */}
{/* Passenger icon — front, top-left */}
{/* Small floating tag — connection */}
{T.hero.passenger} · {T.hero.partner}
{e.titleA} {e.titleB}
{e.sub}
{e.sync}
);
}
function EcoCard({ tag, name, desc, icon, screen, loginImg, mirror, storeUrl, storeLabel }) {
return (
);
}
/* ── Safety ───────────────────────────────────────────── */
const SafetyIconPaths = [
,
,
,
,
,
,
,
,
,
,
];
function SafetyIcon({ idx }) {
return (
);
}
function SafetySection({ T }) {
const s = T.safety;
return (
{s.label}
{s.titleA}
{s.titleB}
{s.intro}
{s.intro2}
{s.features.map((f, i) => (
{ e.currentTarget.style.background = EDPC.bg3; }}
onMouseLeave={(e) => { e.currentTarget.style.background = EDPC.bg; }}
>
{f.t}
{f.d}
))}
{e.tagline}
{e.titleA}
{e.titleB}
{e.body.map((p, i) => (
{p}
))}
{/* Metric cards */}
{e.metrics.map((m, i) => (
{ ev.currentTarget.style.borderColor = 'rgba(34,211,107,0.32)'; ev.currentTarget.style.transform = 'translateY(-2px)'; }}
onMouseLeave={(ev) => { ev.currentTarget.style.borderColor = EDPC.border; ev.currentTarget.style.transform = 'translateY(0)'; }}
>
{m.v}
{m.lbl}
{m.sub}
))}
{/* Tag chips */}
{e.tags.map((tag) => (
{tag}
))}
{/* Right: real Bike E. ride photo */}
{/* Floating CO2 badge */}
{/* Floating Bike E. badge */}
Bike E.
smart · eco · low cost
{/* Subtle dark gradient overlay for legibility of badges */}
);
}
/* ── UX ───────────────────────────────────────────────── */
function UXSection({ T }) {
const u = T.ux;
return (
{u.label}
{u.titleA} {u.titleB}
{u.sub}
{u.tags.map((tag, i) => (
))}
{/* Passenger phone — top-left, tilted */}
{/* Payment phone — center, front */}
{/* Partner phone — bottom-right, tilted */}
);
}
/* ── Tech ─────────────────────────────────────────────── */
function TechSection({ T }) {
const tk = T.tech;
return (
{tk.label}
{tk.titleA} {tk.titleB}
{tk.sub}
{tk.items.map(([name, desc], i) => (
{ e.currentTarget.style.borderColor = EDPC.purpleDim; e.currentTarget.style.transform = 'translateY(-2px)'; }}
onMouseLeave={(e) => { e.currentTarget.style.borderColor = EDPC.border; e.currentTarget.style.transform = 'translateY(0)'; }}
>
{name}
{desc}
))}
{v.label}
{v.bodyA}
{v.bodyB}
);
}
/* ── Final CTA ────────────────────────────────────────── */
function FinalCTA({ T, lang }) {
const c = T.cta;
return (
{c.eyebrow}
{c.titleA}
{c.titleB}
{T.downloadApp}
{c.buttonBack}
);
}
function EDPFooter({ lang }) {
return (
);
}
const headlineXL = {
fontFamily: 'Inter, sans-serif',
fontSize: 'clamp(36px, 5.4vw, 72px)',
fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.0,
margin: 0, color: EDPC.fg,
};
function EDPApp() {
const [lang, setLang] = useS(getInitialLang());
useE(() => {
try {
localStorage.setItem('ezLang', lang);
const u = new URL(window.location.href);
u.searchParams.set('lang', lang);
window.history.replaceState({}, '', u);
} catch {}
}, [lang]);
const T = EDP[lang] || EDP.pt;
return (
);
}
const edpRoot = ReactDOM.createRoot(document.getElementById('root'));
edpRoot.render();
