/* components/sections.jsx — all landing sections, i18n-driven */ function MarkIcon() { return ( ); } const APP_URL = 'https://nspxmiguel.github.io/LootFlow/app/' const GITHUB_URL = 'https://github.com/NspxMiguel/LootFlow' const CHANGELOG_URL = 'https://github.com/NspxMiguel/LootFlow/releases' const SETTINGS_WA_URL = `${APP_URL}#settings` /* ---------- NAV ---------- */ function Nav() { const [scrolled, setScrolled] = React.useState(false); const { t } = useI18n(); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); } /* ---------- HERO ---------- */ function Hero() { const containerRef = React.useRef(null); const [scrollY, setScrollY] = React.useState(0); const [containerTop, setContainerTop] = React.useState(0); const magnetRef = useMagnet(0.18); const { t, lang } = useI18n(); React.useEffect(() => { const onScroll = () => setScrollY(window.scrollY); const onResize = () => { if (containerRef.current) { setContainerTop(containerRef.current.offsetTop); } }; window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onResize); onResize(); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onResize); }; }, []); // ContainerScroll math: progress 0→1 over first ~600px of scroll inside container const scrollInContainer = Math.max(0, scrollY - containerTop + window.innerHeight * 0.1); const p = Math.min(1, scrollInContainer / 600); const rotate = 20 * (1 - p); // 20deg → 0 const scale = 1.05 - 0.05 * p; // 1.05 → 1.0 const translateY = -80 * p; // lifts slightly as unfolds const fade = p * 0.5; // bottom gradient fade return (
{t("hero.tag")}

{t("hero.line1")}
{t("hero.line2.before")}{" "} {t("hero.line2.accent")}

{t("hero.lede")}
{t("hero.cta.primary")} {t("hero.cta.secondary")}
{t("hero.meta.1")} • {t("hero.meta.2")} • {t("hero.meta.3")}
{/* ContainerScroll: starts tilted 3D, unfolds on scroll */}
); } /* ---------- STATS BAR ---------- */ function Stats() { const { t } = useI18n(); return (
{t("stats.1.tag")}
{t("stats.1.label")}
{t("stats.2.tag")}
{t("stats.2.currency")} {t("stats.2.price")} {t("stats.2.unit")}
{t("stats.2.label")}
{t("stats.3.tag")}
%
{t("stats.3.label")}
); } /* ---------- FEATURES ---------- */ function Features() { const { t } = useI18n(); return (
{t("features.eyebrow")}

{t("features.title")}

{t("features.lede")}

 } title={t("features.1.title")} body={t("features.1.body")} visual={} /> } title={t("features.2.title")} body={t("features.2.body")} visual={} /> } title={t("features.3.title")} body={t("features.3.body")} visual={} />
); } function FeatureCard({ icon, title, body, visual }) { return (
{icon}

{title}

{body}

{visual}
); } function FeatureVisualChart() { const { t } = useI18n(); const bars = [10, 14, 22, 30, 28, 64, 88]; return (
{/* header row — fora da área de barras */}
{t("features.viz.chart.range")}
{t("features.viz.chart.delta")}
{/* barras */}
{bars.map((h, i) => (
))}
); } function FeatureVisualWA() { const { t } = useI18n(); return (
{t("features.viz.wa.bot")}
{t("features.viz.wa.me")}
{t("features.viz.wa.bot2")}
); } function FeatureVisualGoal() { const { t } = useI18n(); return (
{t("features.viz.goal.label")} {t("features.viz.goal.target")}
R$ 218 / R$ 320 68%
{[true, true, true, false].map((on, i) => (
))}
{t("features.viz.goal.week")}
); } /* ---------- HOW IT WORKS ---------- */ function HowItWorks() { const [ref, inView] = useInView({ margin: "-120px" }); const { t } = useI18n(); const steps = [ { n: "01", title: t("how.1.title"), body: t("how.1.body") }, { n: "02", title: t("how.2.title"), body: t("how.2.body") }, { n: "03", title: t("how.3.title"), body: t("how.3.body") }, ]; return (
{t("how.eyebrow")}

{t("how.title")}
{steps.map((s, i) => (
{ if (el && inView) el.classList.add("in"); }} >
{s.n}{t("how.passo")}

{s.title}

{s.body}

))}
); } /* ---------- WHATSAPP CALLOUT ---------- */ function WhatsAppSection() { const { t } = useI18n(); return (
{t("wa.tag")}

{t("wa.title")}

{t("wa.body")}
); } /* ---------- PRIVACY ---------- */ function Privacy() { const { t } = useI18n(); return (

{t("privacy.title")}

{t("privacy.body")}

{t("privacy.chip")}
); } /* ---------- FINAL CTA ---------- */ function FinalCTA() { const magnetRef = useMagnet(0.2); const { t } = useI18n(); return (

{t("final.title.1")}
{t("final.title.2")}

{t("final.subtitle")}

); } /* ---------- FOOTER ---------- */ function Footer() { const { t } = useI18n(); return ( ); } Object.assign(window, { Nav, Hero, Stats, Features, HowItWorks, WhatsAppSection, Privacy, FinalCTA, Footer, });