// Shared components for Il Punto Media site // Loaded after React/Babel; exposes globals at end. const { useState, useEffect, useRef } = React; /* ============ Icons ============ */ function ArrowRight({ size = 16 }) { return ( ); } function ArrowUpRight({ size = 16 }) { return ( ); } function PlayIcon({ color = "#fff", size = 28 }) { return ( ); } function MenuIcon() { return ( ); } function CloseIcon() { return ( ); } function InstagramGlyph({ size = 24, color = "#6B3FFE" }) { return ( ); } function LinkedInGlyph({ size = 24, color = "#0A66C2" }) { return ( ); } function TikTokGlyph({ size = 24, color = "#0A0A0A" }) { return ( ); } function YouTubeGlyph({ size = 24 }) { return ( ); } /* ============ Nav ============ */ function Nav({ route, navigate }) { const [open, setOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(null); // "media" | "agency" | null const [mobileSub, setMobileSub] = useState(null); // accordion mobile: "media" | "agency" | null const closeTimer = useRef(null); const ORANGE = "#E94B2C"; const links = [ { id: "media", label: "Media", hasMenu: true }, { id: "agency", label: "Agency", hasMenu: true }, { id: "casi", label: "Casi studio" }, { id: "chi", label: "Chi siamo" }]; const mediaItems = [ { id: "media-economico", logo: "assets/media/logo-economico.webp", name: "Il Punto Economico", desc: "La community per chi vuole davvero capirne di più di economia e attualità." }, { id: "media-techy", logo: "assets/media/logo-techy.webp", name: "Techy", desc: "La community per chi vuole capirne di più di innovazione, tecnologia e AI." }]; const agencyItems = [ { id: "agency-yt", name: "YouTube Long-Form", desc: "Canali in white label per posizionarti come autorità nella tua nicchia." }, { id: "agency-shortform", name: "Short Form & UGC", desc: "Reels, TikTok e Shorts che fermano il pollice e convertono in adv." }, { id: "agency-social", name: "Social Media & Content", desc: "Presenza social end-to-end su IG, LinkedIn e TikTok." }]; const openMenu = (id) => { if (closeTimer.current) {clearTimeout(closeTimer.current);closeTimer.current = null;} setMenuOpen(id); }; const scheduleClose = () => { if (closeTimer.current) clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setMenuOpen(null), 140); }; const go = (id) => {navigate(id);setOpen(false);setMenuOpen(null);setMobileSub(null);}; const isActiveMedia = route === "media" || route.startsWith("media-"); const isActiveAgency = route === "agency" || route.startsWith("agency-"); return ( <>
{e.preventDefault();go("home");}} style={{ display: "inline-flex", alignItems: "center" }}> ilpunto {e.preventDefault();go("contatti");}} style={{ borderRadius: "999px 999px 999px 0px" }}> Contattaci
{open &&
setOpen(false)} style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(10,10,10,0.45)", zIndex: 60, display: "flex", flexDirection: "column" }}> {/* Pannello bianco a tendina: alto solo quanto il suo contenuto (fino a Contattaci) */}
e.stopPropagation()} style={{ background: "#fff", padding: "20px var(--gutter) 32px", display: "flex", flexDirection: "column", borderRadius: "0 0 22px 22px", boxShadow: "0 18px 40px -16px rgba(0,0,0,0.35)" }}>
ilpunto
{links.map((l) => { if (!l.hasMenu) { return ( {e.preventDefault();go(l.id);}} style={{ fontSize: 26, fontWeight: 800, padding: "10px 0", letterSpacing: "-0.02em" }}> {l.label} ); } const items = l.id === "media" ? mediaItems : agencyItems; const expanded = mobileSub === l.id; return (
{e.preventDefault();go(l.id);}} style={{ fontSize: 26, fontWeight: 800, padding: "10px 0", letterSpacing: "-0.02em" }}> {l.label}
{expanded &&
{items.map((it) => {e.preventDefault();go(it.id);}} style={{ fontSize: 17, fontWeight: 600, padding: "8px 0", color: "#0A0A0A" }}> {it.name} )}
}
); })} {e.preventDefault();go("contatti");}}> Contattaci
} ); } function NavDropdown({ items, accent, navigate }) { const [hover, setHover] = useState(null); return (
{items.map((it, i) => {e.preventDefault();navigate(it.id);}} onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)} style={{ display: "flex", alignItems: "flex-start", gap: 14, padding: "14px 14px", borderRadius: 14, background: hover === i ? "#F1EFEC" : "transparent", transition: "background 160ms", textDecoration: "none", color: "#0A0A0A" }}> {it.logo ? :
}
{it.name}
{it.desc}
 )}
); } /* ============ Browser-style window ============ */ function BWindow({ children, shadowColor, shadowOffset = 14, style, className = "" }) { return (
×
{children}
{shadowColor &&
}
); } // Wrapper that adds the colored shadow correctly via a relative parent function BWindowFramed({ children, shadowColor = "var(--c-violet)", offset = 14, ...rest }) { return (
{children}
); } /* ============ Footer (cream card with curved notch design on orange field) ============ */ function Footer({ navigate }) { const ORANGE = "#EE5135"; const CREAM = "#F7EFE7"; const PAGE_BG = "#FFFFFF"; // page background showing through top notches return (
{/* Top tagline (centered) */}

Vogliamo risolvere il problema della conoscenza attraverso la divulgazione.

{/* Cream card */}
{/* Brand col — centered horizontally within its column */}
ilpunto

Creiamo contenuti che la gente sceglie di guardare. Anche per il tuo brand.

{/* Media */} navigate && navigate("media-economico") }, { label: "Techy", onClick: () => navigate && navigate("media-techy") }] } /> {/* Agency */} navigate && navigate("agency-yt") }, { label: "Short Form & UGC", onClick: () => navigate && navigate("agency-shortform") }, { label: "Social Media & Content", onClick: () => navigate && navigate("agency-social") }] } /> {/* Misc — title hidden so items align with first row of Media/Agency */}
{/* Bottom legal — single centered line */}
© {new Date().getFullYear()} Il Punto Media S.r.l. - P.IVA 04709330163 - Bolgare (BG), Italia
); } function FooterColV2({ title, items, color }) { // Reserve title space even when there's no title, so items align horizontally with titled cols. return (
{title || "."}
); } /* ============ Logo marquee ============ */ function LogoMarquee({ logos }) { const set = [...logos, ...logos]; return (
{set.map((l, i) => { if (l && typeof l === "object" && l.text) { return ( {l.text}); } return ( {l}); })}
); } /* ============ Stat card ============ */ function StatBig({ value, label, color = "var(--c-violet)" }) { return (
{value}
{label}
); } Object.assign(window, { Nav, Footer, BWindow, BWindowFramed, LogoMarquee, StatBig, ArrowRight, ArrowUpRight, PlayIcon, InstagramGlyph, LinkedInGlyph, TikTokGlyph, YouTubeGlyph });