/* global React, ReactDOM */ const { useState, useEffect, useRef } = React; const C = window.FL_CONTENT; /* Router uses ISO 'el' for Greek; the legacy content map is keyed 'gr'. Bridge them at the boundary so internal lookups keep working. */ const routerLangToContent = (l) => (l === 'el' ? 'gr' : 'en'); const contentLangToRouter = (l) => (l === 'gr' ? 'el' : 'en'); /* ---------------- Brand mark (FL waves) ---------------- */ function BrandMark({ size = 32, color = 'currentColor' }) { return ( ); } /* ---------------- Splash ---------------- */ function Splash() { const [done, setDone] = useState(false); useEffect(() => { const t = setTimeout(() => { setDone(true); // Flags so CSS starts the hero entrance exactly as the splash // lifts; persists so hero remounts from client-side nav animate at once. document.documentElement.classList.add('fl-splash-done'); }, 1700); return () => clearTimeout(t); }, []); return (
FRONT LINE
FRONT LINE · LOADING OPERATIONS
); } /* ---------------- Nav ---------------- */ function Nav({ page, navigate, switchLang, lang }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const cl = routerLangToContent(lang); const t = C[cl].nav; const buildPath = window.FL_ROUTER.buildPath; useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', onScroll); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [menuOpen]); const dark = page === 'home' && !scrolled && !menuOpen; const items = [['home', t.home], ['about', t.about], ['services', t.services], ['network', t.network], ['newsroom', t.newsroom || 'Newsroom'], ['contact', t.contact]]; const go = (k) => { navigate(k); setMenuOpen(false); }; const homeLabel = lang === 'el' ? 'FRONT LINE — Αρχική' : 'FRONT LINE — Home'; const contactLabel = lang === 'el' ? 'Επικοινωνία με την FRONT LINE' : 'Contact FrontLine'; return (
{ e.preventDefault(); go('home'); }}> FRONT LINE — return to home FRONT LINE — return to home
{menuOpen && (
{ if (e.target === e.currentTarget) setMenuOpen(false); }}>
)}
); } /* ---------------- Hero Background — Spinning Globe ---------------- */ function HeroBackdrop() { const canvasRef = useRef(null); const rafRef = useRef(0); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); let W = 0, H = 0, DPR = window.devicePixelRatio || 1; // Star field — positions stored as fractions of the canvas so they // survive resizes; density scales with area. Reseeded on resize. let stars = []; const seedStars = () => { const n = Math.round((W * H) / 11000); stars = Array.from({ length: n }, () => ({ fx: Math.random(), fy: Math.random() * 0.82, r: 0.5 + Math.random() * 1.3, a: 0.18 + Math.random() * 0.45, tw: 0.4 + Math.random() * 1.3, // twinkle speed (rad/s) ph: Math.random() * Math.PI * 2, })); }; const resize = () => { DPR = window.devicePixelRatio || 1; const r = canvas.getBoundingClientRect(); W = r.width; H = r.height; canvas.width = W * DPR; canvas.height = H * DPR; ctx.setTransform(DPR, 0, 0, DPR, 0, 0); seedStars(); // Resizing wipes the buffer; under reduced-motion no loop is running // to repaint it, so schedule a single fresh frame. if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { cancelAnimationFrame(rafRef.current); rafRef.current = requestAnimationFrame((ts) => draw(ts)); } }; // Basemap projection — shared between the office dots and the land texture // so they're guaranteed to line up. Tweaking these without re-deriving // offices/land will desync them. const PROJ = { X0: 549.7, // basemap x pixel where lon = 0 X_PER_LON: 3.56, // px per degree of longitude Y0: 488.3, // basemap y pixel where lat = 0 Y_PER_MERC: -224.3, // px per Mercator unit (negative: y grows southward) }; // basemap pixel → sphere (lat, lon) using inverse Mercator. const pixelToLatLon = (mx, my) => { const lon = (mx - PROJ.X0) / PROJ.X_PER_LON; const ymerc = (PROJ.Y0 - my) / -PROJ.Y_PER_MERC; const lat = (2 * Math.atan(Math.exp(ymerc)) - Math.PI / 2) * 180 / Math.PI; return [lat, lon]; }; // Each office is anchored to a basemap pixel (matching where the Network // tab places it). Sphere coords are derived via pixelToLatLon — since the // land grid uses the same projection, the dot is guaranteed to sit on its // country regardless of how non-standard the basemap's projection is. // [mx, my] are pixel coords in world-map.png's native 1198×784. const officePixels = [ [625, 315, 'PIR'], // Piraeus — from network-map gr [560, 255, 'RTM'], // Rotterdam — from network-map nl [1058, 302, 'TYO'], // Tokyo — from network-map jp-tk [962, 308, 'SHA'], // Shanghai — from network-map cn [1003, 318, 'PUS'], // Busan — extrapolated SE of Seoul (988,298) [940, 475, 'SIN'], // Singapore — from network-map sg [933, 467, 'KUL'], // Kuala Lumpur — extrapolated NW of Singapore ]; const offices = officePixels.map(([mx, my, code]) => { const [lat, lon] = pixelToLatLon(mx, my); return [lat, lon, code]; }); // Real continent outlines — sampled from world-map.png + japan.png (the same // pair the Network page uses; the basemap PNG omits Japan, hence the overlay). // Built once after both images load; rendered as a transparent blue texture // on the globe. let landGrid = null; (() => { const loadImg = (src) => new Promise((resolve) => { const im = new Image(); im.onload = () => resolve(im); im.onerror = () => resolve(null); im.src = src; }); const readPixels = (im) => { const w = im.naturalWidth, h = im.naturalHeight; const off = document.createElement('canvas'); off.width = w; off.height = h; const oc = off.getContext('2d'); oc.drawImage(im, 0, 0); try { return { w, h, data: oc.getImageData(0, 0, w, h).data }; } catch (e) { return null; } }; Promise.all([loadImg('/world-map.png'), loadImg('/japan.png')]).then(([wmImg, jpImg]) => { if (!wmImg) return; const wm = readPixels(wmImg); if (!wm) return; const jp = jpImg ? readPixels(jpImg) : null; // Use the SAME projection params as the office dots above — critical // for keeping dots and continents aligned. const { X0, X_PER_LON, Y0, Y_PER_MERC } = PROJ; // japan.png overlay placement in basemap coordinates — must stay in // sync with network-map.jsx's . const JP_X = 965, JP_Y = 231, JP_W = 150, JP_H = 150; // Sphere lat/lon coverage of the basemap. const LAT_TOP = 77, LAT_BOT = -60; // Step controls density of the land texture on the globe. const STEP = 0.7; const grid = []; for (let lat = LAT_BOT + 0.5; lat <= LAT_TOP - 0.5; lat += STEP) { const ymerc = Math.log(Math.tan(Math.PI / 4 + lat * Math.PI / 360)); const my = Math.floor(Y0 + Y_PER_MERC * ymerc); if (my < 0 || my >= wm.h) continue; for (let lon = -180; lon < 180; lon += STEP) { const mx = Math.floor(X0 + lon * X_PER_LON); if (mx < 0 || mx >= wm.w) continue; // Basemap: land pixels are near-white; ocean is light gray. let isLand = wm.data[(my * wm.w + mx) * 4] > 233; // Japan overlay: fills the islands the basemap is missing. if (!isLand && jp && mx >= JP_X && mx < JP_X + JP_W && my >= JP_Y && my < JP_Y + JP_H) { const px = Math.floor((mx - JP_X) / JP_W * jp.w); const py = Math.floor((my - JP_Y) / JP_H * jp.h); const a = jp.data[(py * jp.w + px) * 4 + 3]; if (a > 60) isLand = true; } if (isLand) grid.push([lat, lon]); } } landGrid = grid; }); })(); // Project lat/lon onto sphere with rotation // Returns {x, y, z, visible} — z>0 means front-facing const project = (lat, lon, rotLon, cx, cy, R) => { const φ = lat * Math.PI / 180; const λ = (lon + rotLon) * Math.PI / 180; const x = Math.cos(φ) * Math.sin(λ); const y = -Math.sin(φ); const z = Math.cos(φ) * Math.cos(λ); return { x: cx + x * R, y: cy + y * R, z, visible: z > 0 }; }; // Like project(), but lifts the point off the surface by `lift` (fraction // of R). A lifted point stays visible slightly past the limb — it is // hidden only when it sits behind the sphere AND inside the disc outline. const projectLifted = (lat, lon, rotLon, cx, cy, R, lift) => { const φ = lat * Math.PI / 180; const λ = (lon + rotLon) * Math.PI / 180; const x = Math.cos(φ) * Math.sin(λ); const y = -Math.sin(φ); const z = Math.cos(φ) * Math.cos(λ); const m = 1 + lift; return { x: cx + x * R * m, y: cy + y * R * m, z, visible: z > 0 || (x * x + y * y) * m * m > 1 }; }; // Great-circle arc between two lat/lon points, sampled const arcPoints = (lat1, lon1, lat2, lon2, n = 40) => { const pts = []; const φ1 = lat1 * Math.PI / 180, λ1 = lon1 * Math.PI / 180; const φ2 = lat2 * Math.PI / 180, λ2 = lon2 * Math.PI / 180; const d = 2 * Math.asin(Math.sqrt( Math.sin((φ2 - φ1) / 2) ** 2 + Math.cos(φ1) * Math.cos(φ2) * Math.sin((λ2 - λ1) / 2) ** 2 )); if (d === 0) return [[lat1, lon1]]; for (let i = 0; i <= n; i++) { const f = i / n; const A = Math.sin((1 - f) * d) / Math.sin(d); const B = Math.sin(f * d) / Math.sin(d); const x = A * Math.cos(φ1) * Math.cos(λ1) + B * Math.cos(φ2) * Math.cos(λ2); const y = A * Math.cos(φ1) * Math.sin(λ1) + B * Math.cos(φ2) * Math.sin(λ2); const z = A * Math.sin(φ1) + B * Math.sin(φ2); const lat = Math.atan2(z, Math.sqrt(x * x + y * y)) * 180 / Math.PI; const lon = Math.atan2(y, x) * 180 / Math.PI; pts.push([lat, lon]); } return pts; }; // Pre-compute arc geometry from Piraeus to others. altPeak lifts each // route off the surface like a flight path — longer hauls fly higher. const CYCLE = 7; // seconds per departure on every route const arcs = offices.slice(1).map((o, i) => { const φ1 = offices[0][0] * Math.PI / 180, λ1 = offices[0][1] * Math.PI / 180; const φ2 = o[0] * Math.PI / 180, λ2 = o[1] * Math.PI / 180; const d = 2 * Math.asin(Math.sqrt( Math.sin((φ2 - φ1) / 2) ** 2 + Math.cos(φ1) * Math.cos(φ2) * Math.sin((λ2 - λ1) / 2) ** 2 )); return { pts: arcPoints(offices[0][0], offices[0][1], o[0], o[1], 60), delay: i * 1.2, targetIdx: i + 1, altPeak: 0.035 + Math.min(0.075, d * 0.045), }; }); // Directional light (upper-left, toward the viewer) — keep in sync with // the sphere-gradient highlight in draw(). Pre-normalized. const LIGHT = [-0.45, -0.52, 0.727]; // 32-step colour LUT for land dots: deep steel in shadow → bright sky in // light. Pre-built strings — a template literal per dot per frame (~14k) // is too hot, and bucketing lets fillStyle changes be skipped entirely // when consecutive dots share a shade. const LAND_LUT = []; for (let i = 0; i < 32; i++) { const s = i / 31; LAND_LUT.push(`rgba(${Math.round(88 + 97 * s)},${Math.round(150 + 75 * s)},${Math.round(205 + 45 * s)},${(0.09 + 0.52 * s).toFixed(3)})`); } let t0 = performance.now(); let parked = false; // true while the hero is scrolled out of view — loop pauses const draw = (now) => { const t = (now - t0) / 1000; // Pendulum sweep instead of a full spin: every office sits between // lon 3° (RTM) and 140° (TYO), so a 360° rotation hides the entire // network behind the globe for half of each turn. Oscillating // rotLon over [-100°, -10°] keeps Piraeus on the visible face at all // times and sweeps the camera Europe ↔ East Asia. Phase offset opens // on the Europe/Piraeus view. const rotLon = -55 + 45 * Math.sin(t * 0.18 + 1.12); // Center sits below the midline: the network lives in the northern // hemisphere, so this keeps the lifted Europe→Asia arcs (which peak // ~10% above the surface) inside the canvas instead of cropped. const cx = W / 2, cy = H * 0.58; const R = Math.min(W, H) * 0.50; // Highlight point on the sphere, aligned with LIGHT — shared by the // base gradient and the night-side shading so they agree. const hx = cx - R * 0.32, hy = cy - R * 0.36; ctx.clearRect(0, 0, W, H); // Background gradient const bg = ctx.createLinearGradient(0, 0, 0, H); bg.addColorStop(0, '#061634'); bg.addColorStop(0.5, '#0A1F3D'); bg.addColorStop(1, '#163b66'); ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H); // Star field — faint slow twinkle (celestial-navigation nod). The // sphere paints over whatever falls behind the globe. for (let i = 0; i < stars.length; i++) { const st = stars[i]; const al = st.a * (0.55 + 0.45 * Math.sin(t * st.tw + st.ph)); if (al < 0.02) continue; ctx.fillStyle = `rgba(205,228,250,${al})`; ctx.fillRect(st.fx * W, st.fy * H, st.r, st.r); } // Glow halos const g1 = ctx.createRadialGradient(W * 0.7, H * 0.3, 0, W * 0.7, H * 0.3, W * 0.5); g1.addColorStop(0, 'rgba(127,179,213,0.22)'); g1.addColorStop(1, 'rgba(127,179,213,0)'); ctx.fillStyle = g1; ctx.fillRect(0, 0, W, H); // Atmosphere glow around globe — biased slightly toward the light const atm = ctx.createRadialGradient(cx - R * 0.06, cy - R * 0.07, R * 0.95, cx, cy, R * 1.3); atm.addColorStop(0, 'rgba(127,179,213,0.28)'); atm.addColorStop(0.5, 'rgba(127,179,213,0.09)'); atm.addColorStop(1, 'rgba(127,179,213,0)'); ctx.fillStyle = atm; ctx.beginPath(); ctx.arc(cx, cy, R * 1.3, 0, Math.PI * 2); ctx.fill(); // Globe sphere — dark base, highlight aligned with LIGHT const sphere = ctx.createRadialGradient(hx, hy, 0, cx, cy, R); sphere.addColorStop(0, '#16365e'); sphere.addColorStop(0.65, '#0A1F3D'); sphere.addColorStop(1, '#03101f'); ctx.fillStyle = sphere; ctx.beginPath(); ctx.arc(cx, cy, R, 0, Math.PI * 2); ctx.fill(); // Latitude lines (every 20°) ctx.strokeStyle = 'rgba(127,179,213,0.08)'; ctx.lineWidth = 0.6; for (let lat = -80; lat <= 80; lat += 20) { ctx.beginPath(); let started = false; for (let lon = -180; lon <= 180; lon += 4) { const p = project(lat, lon, rotLon, cx, cy, R); if (p.visible) { if (!started) { ctx.moveTo(p.x, p.y); started = true; } else ctx.lineTo(p.x, p.y); } else { started = false; } } ctx.stroke(); } // Longitude meridians (every 20°) for (let lon = -180; lon < 180; lon += 20) { ctx.beginPath(); let started = false; for (let lat = -80; lat <= 80; lat += 4) { const p = project(lat, lon, rotLon, cx, cy, R); if (p.visible) { if (!started) { ctx.moveTo(p.x, p.y); started = true; } else ctx.lineTo(p.x, p.y); } else { started = false; } } ctx.stroke(); } // Land texture — transparent blue rendering of the network-tab map, // projected onto the sphere and lit by LIGHT so the globe reads as 3D: // bright sky-blue toward the upper-left, falling into shadow on the // far side. For orthographic projection the screen offset over R IS // the unit normal's x/y, so no extra trig is needed. if (landGrid) { const dotSize = Math.max(1.2, R * 0.006); let lastIdx = -1; for (let i = 0; i < landGrid.length; i++) { const [lat, lon] = landGrid[i]; const p = project(lat, lon, rotLon, cx, cy, R); if (!p.visible) continue; const nx = (p.x - cx) / R, ny = (p.y - cy) / R; const diff = nx * LIGHT[0] + ny * LIGHT[1] + p.z * LIGHT[2]; let s = 0.10 + 0.58 * (diff > 0 ? diff : 0) + 0.28 * p.z; if (s > 1) s = 1; const idx = (s * 31) | 0; if (idx !== lastIdx) { ctx.fillStyle = LAND_LUT[idx]; lastIdx = idx; } ctx.fillRect(p.x - dotSize / 2, p.y - dotSize / 2, dotSize, dotSize); } } // Night-side shading — darkens the far-from-light side of everything // painted so far (ocean, graticule, land). Arcs and ports draw after // this, staying bright so they read as emissive. const shade = ctx.createRadialGradient(hx, hy, R * 0.5, hx, hy, R * 1.62); shade.addColorStop(0, 'rgba(2,8,20,0)'); shade.addColorStop(0.55, 'rgba(2,8,20,0)'); shade.addColorStop(1, 'rgba(2,8,20,0.34)'); ctx.fillStyle = shade; ctx.beginPath(); ctx.arc(cx, cy, R, 0, Math.PI * 2); ctx.fill(); // Trade-route arcs — great-circles lifted off the surface like flight // paths, each with a comet trail and an arrival ripple at the // destination port. arcs.forEach((arc) => { const u = (t - arc.delay) % CYCLE; // seconds into the current cycle (negative before first departure) if (u < 0) return; const phase = u / CYCLE; const n = arc.pts.length - 1; const lifted = arc.pts.map(([lat, lon], k) => projectLifted(lat, lon, rotLon, cx, cy, R, Math.sin(k / n * Math.PI) * arc.altPeak)); // Static dashed full arc (front-side only) ctx.strokeStyle = 'rgba(127,179,213,0.20)'; ctx.lineWidth = 0.8; ctx.setLineDash([2, 5]); ctx.beginPath(); let started = false; for (const p of lifted) { if (p.visible) { if (!started) { ctx.moveTo(p.x, p.y); started = true; } else ctx.lineTo(p.x, p.y); } else { started = false; } } ctx.stroke(); ctx.setLineDash([]); // Comet trail — transparent tail fading up to a bright head const headIdx = Math.min(n, Math.floor(phase * n)); const tailIdx = Math.max(0, Math.floor((phase - 0.22) * n)); const head = lifted[headIdx]; if (headIdx > tailIdx && head.visible) { const grad = ctx.createLinearGradient(lifted[tailIdx].x, lifted[tailIdx].y, head.x, head.y); grad.addColorStop(0, 'rgba(127,179,213,0)'); grad.addColorStop(1, 'rgba(214,238,252,0.9)'); ctx.strokeStyle = grad; ctx.lineWidth = 1.6; ctx.lineCap = 'round'; ctx.beginPath(); let ss = false; for (let k = tailIdx; k <= headIdx; k++) { const p = lifted[k]; if (p.visible) { if (!ss) { ctx.moveTo(p.x, p.y); ss = true; } else ctx.lineTo(p.x, p.y); } else { ss = false; } } ctx.stroke(); // Leading dot ctx.fillStyle = '#dff1fc'; ctx.shadowColor = '#7FB3D5'; ctx.shadowBlur = 10; ctx.beginPath(); ctx.arc(head.x, head.y, 2.5, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; } // Arrival ripple at the destination, just after each hand-off. // Skipped during the first cycle — nothing has arrived yet. if (t - arc.delay >= CYCLE && u < 0.9) { const tp = offices[arc.targetIdx]; const p = project(tp[0], tp[1], rotLon, cx, cy, R); if (p.visible) { const k = u / 0.9; ctx.strokeStyle = `rgba(170,215,245,${0.45 * (1 - k)})`; ctx.lineWidth = 1.1; ctx.beginPath(); ctx.arc(p.x, p.y, 3 + k * 15, 0, Math.PI * 2); ctx.stroke(); } } }); // Office ports — expanding sonar rings instead of a blobby halo; // Piraeus (index 0, HQ) reads strongest. offices.forEach(([lat, lon, code], i) => { const p = project(lat, lon, rotLon, cx, cy, R); if (!p.visible) return; const limb = 0.35 + p.z * 0.65; // dim markers approaching the edge const isHQ = i === 0; // Two staggered rings per port for (let ring = 0; ring < 2; ring++) { const rp = (t * 0.42 + i * 0.31 + ring * 0.5) % 1; const ra = (1 - rp) * (isHQ ? 0.5 : 0.3) * limb; if (ra < 0.02) continue; ctx.strokeStyle = `rgba(159,208,238,${ra})`; ctx.lineWidth = isHQ ? 1.2 : 1; ctx.beginPath(); ctx.arc(p.x, p.y, 2.5 + rp * (isHQ ? 17 : 11), 0, Math.PI * 2); ctx.stroke(); } // Core ctx.fillStyle = isHQ ? '#ffffff' : '#cfe6f5'; ctx.shadowColor = '#7FB3D5'; ctx.shadowBlur = isHQ ? 10 : 6; ctx.beginPath(); ctx.arc(p.x, p.y, isHQ ? 2.8 : 2.1, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; // Label ctx.fillStyle = `rgba(207,230,245,${(isHQ ? 0.5 : 0.32) + p.z * 0.5})`; ctx.font = isHQ ? '600 9.5px "Geist Mono", monospace' : '9px "Geist Mono", monospace'; ctx.fillText(code, p.x + (isHQ ? 9 : 7), p.y + 3); }); // Globe edge — faint full ring plus a rim-light along the lit limb ctx.strokeStyle = 'rgba(127,179,213,0.20)'; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(cx, cy, R, 0, Math.PI * 2); ctx.stroke(); const rim = ctx.createLinearGradient(cx - 0.654 * R, cy - 0.756 * R, cx + 0.39 * R, cy + 0.45 * R); rim.addColorStop(0, 'rgba(176,218,248,0.55)'); rim.addColorStop(0.45, 'rgba(176,218,248,0.10)'); rim.addColorStop(0.75, 'rgba(176,218,248,0)'); ctx.strokeStyle = rim; ctx.lineWidth = 1.4; ctx.beginPath(); ctx.arc(cx, cy, R - 0.5, 0, Math.PI * 2); ctx.stroke(); // Soft scrim behind the left-side headline so the text keeps contrast // against the brighter lit land. const scrim = ctx.createLinearGradient(0, 0, W * 0.58, 0); scrim.addColorStop(0, 'rgba(4,12,28,0.36)'); scrim.addColorStop(1, 'rgba(4,12,28,0)'); ctx.fillStyle = scrim; ctx.fillRect(0, 0, W * 0.58, H); // Honour reduced-motion: paint a single static frame instead of spinning if (!parked && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) { rafRef.current = requestAnimationFrame(draw); } }; resize(); window.addEventListener('resize', resize); // Re-measure when the canvas box itself changes without a window resize // (font-load reflow, mobile URL-bar collapse, late layout). const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(resize) : null; if (ro) ro.observe(canvas); // Park the loop while the hero is scrolled out of view — no reason to // burn frames behind the rest of the page. const io = typeof IntersectionObserver !== 'undefined' ? new IntersectionObserver((entries) => { const vis = entries.some(e => e.isIntersecting); if (vis === !parked) return; parked = !vis; cancelAnimationFrame(rafRef.current); if (!parked) rafRef.current = requestAnimationFrame(draw); }) : null; if (io) io.observe(canvas); rafRef.current = requestAnimationFrame(draw); return () => { cancelAnimationFrame(rafRef.current); window.removeEventListener('resize', resize); if (ro) ro.disconnect(); if (io) io.disconnect(); }; }, []); return (
LAT 37.9420° N LON 23.6464° E PIR Piraeus, GR TEL +30 210 4200 051 Vessel desk · 24 / 7
); } /* ---------------- Hero ---------------- */ function Hero({ lang, navigate }) { // `lang` here is the content-language key (already converted upstream — 'en' or 'gr'). // Don't re-run routerLangToContent or 'gr' would fall through to 'en' and skip the Greek copy. const t = C[lang].hero; const routerLang = contentLangToRouter(lang); const buildPath = window.FL_ROUTER.buildPath; const [active, setActive] = useState(0); useEffect(() => { const i = setInterval(() => setActive(a => (a + 1) % t.rail.length), 2400); return () => clearInterval(i); }, [t.rail.length]); return (
{t.eyebrow}
{t.live}

{t.title_a} {t.title_b} {t.title_c}

{t.lede}

{ e.preventDefault(); navigate('services'); }} className="btn btn-light"> {t.cta_secondary} {/* Mobile twin of the hero-rail portal link — the rail is hidden ≤1100px, so this copy carries the portal CTA on tablet/phone (hidden on desktop via CSS). */} Connect to Portal
{t.rail.map((r, i) => ( { e.preventDefault(); navigate('services'); }} className={`rail-item ${i === active ? 'active' : ''}`} onMouseEnter={() => setActive(i)} >{String(i + 1).padStart(2, '0')} · {r} ))} Connect to Portal
{t.meta.map((m, i) => (
{m.num}{m.sub && {m.sub}}
{m.label}
))}
); } /* ---------------- Why ---------------- */ function ValueIcon({ n }) { // simple geometric glyphs — no AI ship art const paths = { '01': <>, '02': <>, '03': <>, '04': <>, '05': <>, '06': <>, }; return {paths[n]}; } function Why({ lang, navigate }) { const t = C[lang].why; const go = (action) => { if (!action) return; if (action.page) { if (navigate) navigate(action.page); else if (window.__fl_setPage) window.__fl_setPage(action.page); return; } if (action.scrollTo) { const el = document.querySelector(action.scrollTo); if (!el) return; const top = el.getBoundingClientRect().top + window.pageYOffset - 80; window.scrollTo({ top, behavior: 'smooth' }); } }; return (
{t.eyebrow}

{t.title_a}
{t.title_b}
{t.title_c}

{t.desc}

{t.values.map((v, i) => (
{v.n}

{v.t}

{v.p}

{v.action && ( )}
))}
); } /* ---------------- Audience ---------------- */ function Audience({ lang }) { const t = C[lang].audience; const [tab, setTab] = useState(0); const cur = t.tabs[tab]; return (
{t.eyebrow}

{t.title_a} {t.title_b}
{t.title_c}

{t.desc}

{t.tabs.map((tb, i) => ( ))}

{cur.h}

{cur.p}

    {cur.points.map((p, i) =>
  • {p}
    • )}
); } /* ---------------- Services ---------------- */ function ServiceIcon({ n }) { const ps = { '01': <>, '02': <>, '03': <>, '04': <>, '05': <>, '06': <>, '07': <>, '08': <>, }; return {ps[n]}; } function Services({ lang }) { const t = C[lang].services; const [openSubs, setOpenSubs] = React.useState({}); const moreLabel = lang === 'el' ? 'Διαβάστε περισσότερα' : 'Read more'; const lessLabel = lang === 'el' ? 'Λιγότερα' : 'Show less'; return (
{t.eyebrow}

{t.desc}

{t.items.map((s) => { const isOpen = !!openSubs[s.n]; return (
{s.n}

{s.t}{s.sub && · {s.sub}}

{s.p}

{s.subs && isOpen && (
    {s.subs.map((sb, i) => (
  • {sb.t}{sb.p}
    • ))}
)} {s.subs ? ( ) : null}
); })}
); } /* ---------------- Departments ---------------- */ function DeptIcon({ n }) { const paths = { '01': <>, // logistics — compass '02': <>, // air export '03': <>, // customs — stamped doc '04': <>, // third country — globe '05': <>, // accounting — ledger '06': <>, // HR — person '07': <>, // sea & road — wave + truck '08': <>, // import — arrow down to baseline '09': <>, // on-board delivery — truck/forklift }; return {paths[n]}; } function Departments({ lang }) { const t = C[lang].departments; const [hover, setHover] = useState(null); return (
{t.eyebrow}

{t.title_a}
{t.title_b}

{t.desc}

{t.items.map((d, i) => (
setHover(i)} onMouseLeave={() => setHover(null)} >
{d.n}
{d.t}

{d.p}

))}
); } /* ---------------- Timeline ---------------- */ function Timeline({ lang }) { const t = C[lang].history; return (
{t.eyebrow}

{t.title_a} {t.title_b}

{t.desc}

{t.cards.map((c, i) => (
{c.y}

{c.t}

{c.p}

))}
); } /* ---------------- Network map ---------------- */ const PINS = [ { code: 'GR', name: 'Piraeus', x: 555, y: 195 }, { code: 'NL', name: 'Rotterdam', x: 510, y: 145 }, { code: 'JP', name: 'Tokyo', x: 870, y: 195 }, { code: 'CN', name: 'Shanghai', x: 825, y: 220 }, { code: 'KR', name: 'Busan', x: 850, y: 200 }, { code: 'SG', name: 'Singapore', x: 790, y: 285 }, { code: 'MY', name: 'Kuala Lumpur', x: 780, y: 280 }, ]; function NetworkMap({ lang }) { const t = C[lang].network; const [hover, setHover] = useState(null); return (
{t.eyebrow}

{t.title_a}
{t.title_b}

{t.desc}

{t.stats.map((s, i) => (
{s.n}
{s.l}
))}
{/* abstract continent outlines as soft polygons */} {/* connection arcs */} {PINS.slice(1).map((p, i) => ( ))} {PINS.map((p, i) => ( setHover(i)} onMouseLeave={() => setHover(null)} style={{ cursor: 'pointer' }}> {p.code} ))} {hover !== null && (
{PINS[hover].name}
{t.countries.find(c => c.code === PINS[hover].code)?.name}
)}
{t.countries.map((c, i) => (
{c.code}

{c.name}

{c.city}
))}
); } /* ---------------- ESG ---------------- */ function ESG({ lang }) { const t = C[lang].esg; return (
{t.eyebrow}

{t.title_a}
{t.title_b}

{t.desc}

{t.cards.map((c, i) => (
{c.badge}

{c.t}

{c.p}

{c.tags.map((tag, j) => {tag})}
))}
); } /* ---------------- Team ---------------- */ function Team({ lang }) { const t = C[lang].team; return (
{t.eyebrow}

{t.title_a}

{t.desc}

{t.members.map((m, i) => (
PHOTO · {m.i}
{m.i}

{m.n}

{m.r}
))}
); } /* ---------------- News ---------------- */ function News({ lang }) { const t = C[lang].news; return (
{t.eyebrow}

{t.title_a}

{t.desc}

{t.items.map((n, i) => (
{n.img ? {n.t} :
IMG · {n.tag}
}
{n.date && <>{n.date}·} {n.tag} {n.live && ● LIVE}

{n.t}

{n.p &&

{n.p}

} {n.p &&
Read more →
}
))}
); } /* ---------------- Testimonials ---------------- */ function Testimonials({ lang }) { const t = C[lang].testimonials; return (
{t.eyebrow}

{t.title_a}
{t.title_b}

{t.desc}

{t.items.map((q, i) => { const initial = (q.a || '?').trim().charAt(0).toUpperCase(); const rating = q.rating || 5; return (
{q.a} {q.r} {q.source === 'Google' && ( Google )}
{q.isNew && NEW}
{q.q}
{rating}/5
{q.d}
); })}
); } /* ---------------- Services Teaser (replaces old mission line) ---------------- */ function Mission({ lang, navigate, compact }) { const t = C[lang].mission; const go = (e) => { e.preventDefault(); if (navigate) navigate('services'); else if (window.__fl_setPage) window.__fl_setPage('services'); }; if (compact) { return (
{t.eyebrow}

{t.title_a} {t.title_b}

{t.desc}

{t.cta}
); } return (
{t.eyebrow}

{t.title_a}
{t.title_b}

{t.desc}

    {t.items.map((it, i) => (
  • {it.n} {it.t}
    • ))}
{t.cta}

{t.note}

); } /* ---------------- Certifications & Memberships ---------------- */ function Certifications({ lang }) { const isEl = lang === 'gr'; const eyebrow = isEl ? 'ΠΙΣΤΟΠΟΙΗΣΕΙΣ & ΣΥΝΕΡΓΑΣΙΕΣ' : 'CERTIFICATIONS & MEMBERSHIPS'; const title_a = isEl ? 'Διαπιστευμένοι.' : 'Accredited.'; const title_b = isEl ? 'Επαληθευμένοι.' : 'Verified.'; const desc = isEl ? 'Λειτουργούμε σύμφωνα με τα διεθνή πρότυπα ποιότητας και ασφάλειας της αλυσίδας εφοδιασμού — πιστοποιημένοι από αναγνωρισμένους φορείς και ενεργά μέλη των βασικών διεθνών ενώσεων μεταφορών.' : 'We operate to international quality and supply-chain-security standards — certified by recognised bodies and active members of the principal global freight associations.'; const items = [ { src: '/assets/cert-lrqa-iso9001.png', alt: 'LRQA Certified — ISO 9001', label: isEl ? 'ISO 9001 — Πιστοποίηση LRQA' : 'ISO 9001 — Certified by LRQA', caption: 'UKAS 0001', }, { src: '/assets/cert-customs-iata-fiata-aeo.png', alt: 'IATA, FIATA, AEO and EU Directorate General Customs and Taxation memberships', label: isEl ? 'IATA · FIATA · AEO · EU Customs' : 'IATA · FIATA · AEO · EU Customs', caption: isEl ? 'Μέλη & εξουσιοδοτημένοι' : 'Members & authorised', }, ]; return (
{eyebrow}

{title_a}
{title_b}

{desc}

{items.map((it, i) => (
{it.alt}
{it.label} {it.caption}
))}
); } /* ---------------- Ethics / Quality Policy ---------------- */ function Policy({ lang }) { const tQ = C[lang].policy; const tA = C[lang].policy_anti; const [active, setActive] = useState('quality'); if (!tQ) return null; const t = active === 'quality' ? tQ : tA; const tabs = [ { id: 'quality', label: lang === 'el' ? 'Πολιτική Ποιότητας' : 'Quality Policy', meta: 'ISO 9001:2015' }, { id: 'anti', label: lang === 'el' ? 'Καταπολέμηση Διαφθοράς' : 'Anti-Bribery & Corruption', meta: lang === 'el' ? 'Μηδενική ανοχή' : 'Zero tolerance' }, ]; return (
{lang === 'el' ? 'Πολιτικές Εταιρείας' : 'Company Policies'}

{t.title_a}
{t.title_b}

{t.intro}

{tabs.map((tab) => ( ))}
{t.meta_date_label} {t.meta_date_value}
{t.meta_sig_label} {t.meta_sig_value}
{lang === 'el' ? 'Πρότυπο' : 'Standard'} {active === 'quality' ? 'ISO 9001:2015' : (lang === 'el' ? 'UK Bribery Act' : 'UK Bribery Act')}
{active === 'quality' ? ( <>
{tQ.objectives_label}
    {tQ.objectives.map((o, i) => (
  1. {String(i + 1).padStart(2, '0')}{o}
    2. ))}

{tQ.objectives_note}

{tQ.body.map((p, i) =>

{p}

)}
) : (
{tA.sections.map((s, i) => (
{s.num}

{s.title}

{s.body.map((p, j) =>

{p}

)}
))}
)}

{t.closing}

); } /* ---------------- Contact ---------------- */ // Web3Forms public access key — safe in client code; sets which inbox gets // submissions. Free key at https://web3forms.com. const WEB3FORMS_ACCESS_KEY = '4497a57a-f8b3-4271-acc0-e6c34798e703'; function Contact({ lang }) { const t = C[lang].contact; const [status, setStatus] = useState('idle'); // idle | sending | success | error const onSubmit = async (e) => { e.preventDefault(); if (status === 'sending') return; const form = e.currentTarget; const fd = new FormData(form); if (fd.get('company_website')) { setStatus('success'); form.reset(); return; } // honeypot setStatus('sending'); try { const res = await fetch('https://api.web3forms.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify({ access_key: WEB3FORMS_ACCESS_KEY, from_name: 'FrontLine Website', subject: `New website enquiry - ${fd.get('name') || ''}${fd.get('interest') ? ` (${fd.get('interest')})` : ''}`, replyto: fd.get('email') || '', Name: fd.get('name') || '', Email: fd.get('email') || '', Company: fd.get('company') || '-', Phone: fd.get('phone') || '-', Interest: fd.get('interest') || '-', Message: fd.get('message') || '-', Language: lang, }), }); const data = await res.json().catch(() => ({})); if (res.ok && data.success) { setStatus('success'); form.reset(); } else setStatus('error'); } catch { setStatus('error'); } }; return (
{t.eyebrow}

{t.title_a} {t.title_b}

{t.form.p}

{t.form.h}

{t.form.p}

{ status === 'success' ? '✓ ' + t.form.sent : status === 'sending' ? t.form.sending : status === 'error' ? t.form.error : t.form.labels.status }

{t.info.h}

{t.info.addr_lab}{t.info.addr_val}
{t.info.phone_lab}{(t.info.phone_vals || [t.info.phone_val]).map((p, i) => ({i > 0 &&
}{p}))}
{t.info.mail_lab}{t.info.mail_val}
{t.info.hours_lab}{t.info.hours_val}
); } /* ---------------- Footer ---------------- */ function Footer({ lang, navigate }) { const cl = routerLangToContent(lang); const t = C[cl].foot; const nav = C[cl].nav; const svc = C[cl].services.items.slice(0, 6); const buildPath = window.FL_ROUTER.buildPath; return ( ); } /* ---------------- Sub-pages (About, Services, Network, Contact) ---------------- */ function PageHero({ crumb, title, lede, lang }) { return (
{crumb}

{title}

{lede}

); } function AboutPage({ lang }) { return (
{}}>HOME  /  {C[lang].nav.about.toUpperCase()}} title={<>Our road to Excellence.} lede="A forwarding company that grew from a single Piraeus office into a seven-country network — without losing the operating culture that started it." />
); } function ServicesPage({ lang }) { return (
HOME  /  {C[lang].nav.services.toUpperCase()}} title={<>Eight services, one partner.} lede="From the warehouse rack to the engine room. Each service runs on documented procedures — combined or standalone, the cargo moves the same way." />
); } function NetworkPage({ lang }) { return (
HOME  /  {C[lang].nav.network.toUpperCase()}} title={<>Nine offices. One operating culture.} lede="Own offices in the markets that move your cargo. Partners qualified by name where we don't have a flag — every link of the network operates against the same SOPs." />
); } function ContactPage({ lang }) { return (
); } /* ---------------- App ---------------- */ function App() { const { useRouter, useDocumentMeta, buildPath } = window.FL_ROUTER; const { lang, page, navigate, switchLang } = useRouter(); const cl = routerLangToContent(lang); // Sync , meta, OG, hreflang, canonical, html[lang] on every nav useDocumentMeta(lang, page); // Speaker-notes / parent host hook (kept for design-canvas embedding) useEffect(() => { try { window.parent && window.parent.postMessage({ slideIndexChanged: ['home','about','services','network','newsroom','contact'].indexOf(page) }, '*'); } catch (e) {} }, [page]); // Cross-page nav helper exposed to news/insights detail pages useEffect(() => { window.__fl_setPage = (p) => navigate(p); }, [navigate]); // reveal on scroll — observes existing AND newly-added .reveal nodes useEffect(() => { const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.1 }); const observeAll = (root) => { const nodes = root.querySelectorAll ? root.querySelectorAll('.reveal:not(.in)') : []; nodes.forEach(el => io.observe(el)); if (root.classList && root.classList.contains('reveal') && !root.classList.contains('in')) { io.observe(root); } }; observeAll(document); const mo = new MutationObserver((muts) => { muts.forEach(m => m.addedNodes.forEach(n => { if (n.nodeType === 1) observeAll(n); })); }); mo.observe(document.body, { childList: true, subtree: true }); return () => { io.disconnect(); mo.disconnect(); }; }, [page]); /* Localised breadcrumb "HOME" link, used on every sub-page hero */ const HomeCrumb = ({ children }) => ( <a href={buildPath(lang, 'home')} onClick={(e) => { e.preventDefault(); navigate('home'); }}>{children}</a> ); return ( <> <Splash /> <Nav page={page} navigate={navigate} switchLang={switchLang} lang={lang} /> <main id="main"> {page === 'home' && ( <article className="page active" data-screen-label="01 Home" aria-labelledby="hero-title"> <Hero lang={cl} navigate={navigate} /> <Why lang={cl} navigate={navigate} /> <Mission lang={cl} navigate={navigate} compact={true} /> {/* Testimonials section removed */} <News lang={cl} /> <Certifications lang={cl} /> <div className="home-newscta reveal"> <div className="container"> <a className="btn btn-primary" onClick={(e) => { e.preventDefault(); navigate('newsroom'); }} href={buildPath(lang, 'newsroom')}> {lang === 'el' ? 'Δείτε το Newsroom' : 'Visit the FrontLine Newsroom'} <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h10m0 0L9 4m4 4l-4 4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"/></svg> </a> </div> </div> <Policy lang={cl} /> </article> )} {page === 'about' && ( <article className="page active" data-screen-label="02 About"> <PageHero crumb={<><HomeCrumb>{lang === 'el' ? 'ΑΡΧΙΚΗ' : 'HOME'}</HomeCrumb>  /  <span aria-current="page">{C[cl].nav.about.toUpperCase()}</span></>} title={lang === 'el' ? <>Ο δρόμος μας προς την <span className="serif">αριστεία</span>.</> : <>Our road to <span className="serif">Excellence</span>.</>} lede={lang === 'el' ? 'Μια διαμεταφορική που μεγάλωσε από ένα γραφείο στον Πειραιά σε ένα δίκτυο επτά χωρών — χωρίς να χάσει την κουλτούρα της.' : 'A forwarding company that grew from a single Piraeus office into a seven-country network — without losing the operating culture that started it.'} /> <Timeline lang={cl} /> <Departments lang={cl} /> <ESG lang={cl} /> </article> )} {page === 'services' && ( <article className="page active" data-screen-label="03 Services"> <PageHero crumb={<><HomeCrumb>{lang === 'el' ? 'ΑΡΧΙΚΗ' : 'HOME'}</HomeCrumb>  /  <span aria-current="page">{C[cl].nav.services.toUpperCase()}</span></>} title={lang === 'el' ? <>Οκτώ υπηρεσίες. <span className="serif">Ένας συνεργάτης.</span></> : <>Eight services, <span className="serif">one partner.</span></>} lede={lang === 'el' ? 'Από το ράφι της αποθήκης ώς το μηχανοστάσιο — κάθε υπηρεσία τρέχει με τεκμηριωμένες διαδικασίες.' : 'From the warehouse rack to the engine room. Each service runs on documented procedures — combined or standalone.'} /> <Services lang={cl} /> <Audience lang={cl} /> </article> )} {page === 'network' && ( <article className="page active" data-screen-label="04 Network"> <PageHero crumb={<><HomeCrumb>{lang === 'el' ? 'ΑΡΧΙΚΗ' : 'HOME'}</HomeCrumb>  /  <span aria-current="page">{C[cl].nav.network.toUpperCase()}</span></>} title={lang === 'el' ? <>Εννέα γραφεία. <span className="serif">Μία κουλτούρα.</span></> : <>Nine offices. <span className="serif">One operating culture.</span></>} lede={lang === 'el' ? 'Δικά μας γραφεία σε επτά χώρες. Κάθε κρίκος του δικτύου τρέχει με τα ίδια SOPs.' : "Own offices across seven countries. Every link of the network operates against the same SOPs."} /> {window.NetworkMapInteractive ? <window.NetworkMapInteractive lang={cl} /> : <NetworkMap lang={cl} />} </article> )} {page === 'newsroom' && window.NewsroomPage && <window.NewsroomPage lang={cl} navigate={navigate} />} {page === 'contact' && ( <article className="page active" data-screen-label="05 Contact"> <Contact lang={cl} /> </article> )} </main> <Footer lang={lang} navigate={navigate} /> </> ); } ReactDOM.createRoot(document.getElementById('root')).render(<App />);