/* global React, Icons, Button, Badge, cn, useState, useEffect, useRef, Reveal, Eyebrow, SectionHead, useLandingT, window, document */ /* ============================================================ LANDING — sections & overlays added for the 10/10 pass: BrandMarquee · SocialProofBar · VideoModal · PricingSection · FAQSection · CookieBanner · LegalModal. All bilingual via the copy dictionary (t = useLandingT(lang)). ============================================================ */ /* ---------- Monochrome brand SVGs (currentColor, theme-aware) ---------- */ const BrandMarks = { google: ( ), outlook: ( ), apple: ( ), todoist: ( ), slack: ( ), notion: ( ), zoom: ( ), }; function BrandMarquee({ t }) { const brands = [ { id: "google", name: "Google Calendar" }, { id: "outlook", name: "Outlook" }, { id: "apple", name: "Apple Calendar" }, { id: "todoist", name: "Todoist" }, { id: "slack", name: "Slack" }, { id: "notion", name: "Notion" }, { id: "zoom", name: "Zoom" }, ]; const row = [...brands, ...brands]; return (
{row.map((b, i) => ( {BrandMarks[b.id]} {b.name} ))}
); } /* ---------- Social proof bar: rating · users · Product Hunt ---------- */ function SocialProofBar({ t }) { const sp = t.socialProof; return (
{[0,1,2,3,4].map(s => )}
{sp.rating}
{sp.users}
P
Product Hunt
{sp.ph}
 ); } /* ---------- Video demo modal (placeholder player) ---------- */ function VideoModal({ open, onClose, t }) { const d = t.demo; const [playing, setPlaying] = useState(false); useEffect(() => { if (!open) { setPlaying(false); return; } const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open) return null; return (
{d.title}
{d.sub}
{/* placeholder stage */}
{d.caption}
{/* faux controls */}
{d.duration}
); } /* ---------- Pricing ---------- */ function PricingSection({ t, onSignup }) { const p = t.pricing; const [yearly, setYearly] = useState(true); const ctaFor = (id) => id === "free" ? p.cta : id === "pro" ? p.ctaPro : p.ctaTeam; return (
{/* billing toggle */} {p.monthly} {p.yearly} {p.save}
{p.plans.map((plan, i) => { const popular = plan.id === "pro"; const price = yearly ? plan.priceY : plan.priceM; return (
{popular && (
{p.popular}
)}
{plan.name}
{plan.tagline}
CA${price} {price === 0 ? p.forever : p.perMonth}
{price > 0 ? (yearly ? `${p.billedYearly} · ${plan.id === "team" ? p.perSeat : ""}` : (plan.id === "team" ? p.perSeat : "")) : ""}
    {plan.features.map((f, j) => (
  • {f}
    • ))}
); })}
); } /* ---------- FAQ accordion ---------- */ function FaqItem({ q, a, open, onToggle, id }) { return (

{a}

); } function FaqSection({ t }) { const f = t.faq; const [open, setOpen] = useState(0); return (
{f.items.map((it, i) => ( setOpen(open === i ? -1 : i)} /> ))}
); } /* ---------- Cookie consent banner (persisted) ---------- */ const COOKIE_LS_KEY = "dpm-cookie-consent"; function CookieBanner({ t, onLegal }) { const c = t.cookie; const [visible, setVisible] = useState(false); useEffect(() => { let seen = "1"; try { seen = localStorage.getItem(COOKIE_LS_KEY); } catch (e) {} if (!seen) setVisible(true); }, []); const decide = (val) => { try { localStorage.setItem(COOKIE_LS_KEY, val); } catch (e) {} setVisible(false); }; if (!visible) return null; return (
{c.title}

{c.body}

); } /* ---------- Legal modal (Terms / Privacy / Cookies / GDPR) ---------- */ function LegalModal({ open, tab = "terms", onClose, onTab, t: tProp }) { const t = tProp || (typeof useLandingT === "function" ? useLandingT(window.__dpmLang || "en") : null); useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open || !t || !t.legal) return null; const lg = t.legal; const active = tab && lg[tab] ? tab : "terms"; const tabIds = ["terms", "privacy", "cookies", "gdpr"]; const sec = lg[active]; return (
{sec.title}
{tabIds.map(id => ( ))}
{lg.updated}
{sec.body.map((para, i) => (

{para}

))}
); } Object.assign(window, { BrandMarquee, SocialProofBar, VideoModal, PricingSection, FaqSection, CookieBanner, LegalModal, });