{new Date(r.createdAt).toLocaleString()}
+ {r.type}
+ {r.desc}
+ Severity: {r.severity} • Impact: {r.impactScore}
+
+
+ Details
+
+
-
- {/* Brand */}
-
-
- E
-
-
- ECOSPHERE
-
-
+ <>
+ {/* Fixed header */}
+
+ {/* Glass bar */}
+
- );
-}
+
+ {open && (
+ setAboutOpen(false)} />
+
+
+ {/* slight tilt/zoom container */}
+
+
+
+
+ );
+}
diff --git a/stunning-site/src/components/reporter/AIImpactCard.jsx b/stunning-site/src/components/reporter/AIImpactCard.jsx
new file mode 100644
index 0000000..a053395
--- /dev/null
+++ b/stunning-site/src/components/reporter/AIImpactCard.jsx
@@ -0,0 +1,43 @@
+import React from "react";
+
+function Ring({ label, value, color }) {
+ const r = 28, c = 2*Math.PI*r;
+ const off = c - (value/100)*c;
+ return (
+
+ {open && (
+
+
+
+
+
+
-
+ {/* Brand */}
+
+
+ E
+
+
+ ECOSPHERE
+
+
- {/* Simple nav (placeholders for now) */}
-
+ {/* Simple nav */}
+
- {/* CTA */}
-
- {/* Soft divider line under the header */}
-
-
-
+ {/* CTA */}
+
+
+ {/* Soft divider line under the header */}
+
+
+
+
+ )}
+
+
+ {/* Spacer to prevent overlap with fixed header */}
+
+
+
+*/
diff --git a/stunning-site/src/components/ai/PromptChip.jsx b/stunning-site/src/components/ai/PromptChip.jsx
new file mode 100644
index 0000000..d18d74a
--- /dev/null
+++ b/stunning-site/src/components/ai/PromptChip.jsx
@@ -0,0 +1,77 @@
+import React, { useState, useRef, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { motion, AnimatePresence } from "framer-motion";
+
+export default function PromptChip() {
+ const [open, setOpen] = useState(false);
+ const [value, setValue] = useState("Ask me about today’s marine pollution hotspots");
+ const inputRef = useRef(null);
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (open && inputRef.current) {
+ inputRef.current.focus();
+ inputRef.current.setSelectionRange(0, value.length);
+ }
+ }, [open]);
+
+ function submit(q) {
+ const query = (q ?? value).trim();
+ if (!query) return;
+ navigate(`/assistant?q=${encodeURIComponent(query)}`);
+ }
+
+ return (
+
+
+
+ About EcoSphere
+
+
+ EcoSphere is a platform dedicated to turning ocean data into actionable insights.
+It works by aggregating real-time data from marine ecosystems and presenting it in an interactive format.
+EcoSphere has a significant impact on the environment by promoting community-led projects that restore marine life.
+
+ {!open && (
+ setOpen(true)}
+ whileHover={{ y: -3, scale: 1.02 }}
+ whileTap={{ scale: 0.98 }}
+ className="glass rounded-full px-4 py-2 flex items-center gap-2 text-navy bg-white/20 hover:bg-white/30"
+ aria-label="Open AI prompt"
+ >
+
+ Ask Ecosphere AI
+
+ )}
+
+
+ {open && (
+
+
+ )}
+
+
+ );
+}
diff --git a/stunning-site/src/components/auth/CtaCenter.jsx b/stunning-site/src/components/auth/CtaCenter.jsx
new file mode 100644
index 0000000..a422896
--- /dev/null
+++ b/stunning-site/src/components/auth/CtaCenter.jsx
@@ -0,0 +1,76 @@
+// src/components/auth/CtaCenter.jsx
+import React from "react";
+import { motion } from "framer-motion";
+
+export default function CtaCenter() {
+ return (
+
+
+ setValue(e.target.value)}
+ onKeyDown={(e) => e.key === "Enter" && submit()}
+ className="flex-1 bg-transparent outline-none text-ivory placeholder:text-ivory/60 text-sm md:text-base"
+ placeholder="Type a question…"
+ />
+
+
+
+
+
+ {["Hotspots near Mumbai today","Ghost nets incidents this week","Coral bleaching alerts now","Top active cleanup projects"].map((s) => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/stunning-site/src/components/auth/UserMenu.jsx b/stunning-site/src/components/auth/UserMenu.jsx
new file mode 100644
index 0000000..7afe6a9
--- /dev/null
+++ b/stunning-site/src/components/auth/UserMenu.jsx
@@ -0,0 +1,51 @@
+// src/components/auth/UserMenu.jsx
+import React, { useEffect, useRef, useState } from "react";
+import { useUser } from "../../context/UserContext";
+
+export default function UserMenu() {
+ const { user, signOut } = useUser();
+ const [open, setOpen] = useState(false);
+ const ref = useRef(null);
+
+ useEffect(() => {
+ const onClick = (e) => {
+ if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+ };
+ document.addEventListener("click", onClick);
+ return () => document.removeEventListener("click", onClick);
+ }, []);
+
+ if (!user) return null;
+
+ return (
+
+ {/* soft radial glow */}
+
+
+ {/* Headline */}
+
+ We turn{" "}
+
+ ocean data
+ {" "}
+ into action
+
+
+ {/* Value prop */}
+
+ Explore live hotspots, follow real impact stories, and back
+ community-led projects that restore marine life.
+
+
+ {/* CTA row */}
+
+ Ready to dive in?
+
+
+
+
+
+ Login
+
+
+
+ Create an account
+
+
+
+
+ Free account • No spam • Cancel anytime
+
+
+
+ {open && (
+
+ );
+}
diff --git a/stunning-site/src/components/decor/DecorFX.jsx b/stunning-site/src/components/decor/DecorFX.jsx
new file mode 100644
index 0000000..4f4bcf9
--- /dev/null
+++ b/stunning-site/src/components/decor/DecorFX.jsx
@@ -0,0 +1,26 @@
+import React, { useMemo } from "react";
+
+export function Particles({ mode = "morning", count = 16 }) {
+ // pick a mix per mode
+ const types = mode === "evening" ? ["p-star","p-bubble"] :
+ mode === "afternoon" ? ["p-leaf","p-bubble"] :
+ ["p-bubble","p-leaf"];
+ const items = useMemo(() => {
+ return Array.from({ length: count }).map((_, i) => {
+ const x = Math.round(Math.random() * 100); // 0–100%
+ const d = 10 + Math.random() * 10; // 10–20s
+ const tx = (Math.random() * 160 - 80).toFixed(0); // -80..+80px drift
+ const cls = types[(Math.random() * types.length) | 0];
+ return { i, x, d, tx, cls };
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [mode, count]); // fix count/mode only
+
+ return (
+
+
+ )}
+
+
+
+ Profile (soon)
+
+
+ {user.username}
+{user.email}
+
+ {items.map(({ i, x, d, tx, cls }) => (
+
+ ))}
+
+ );
+}
diff --git a/stunning-site/src/components/layout/Footer.jsx b/stunning-site/src/components/layout/Footer.jsx
new file mode 100644
index 0000000..838d3c8
--- /dev/null
+++ b/stunning-site/src/components/layout/Footer.jsx
@@ -0,0 +1,77 @@
+// src/components/layout/Footer.jsx
+import React from "react";
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/stunning-site/src/components/layout/Header.jsx b/stunning-site/src/components/layout/Header.jsx
new file mode 100644
index 0000000..a601855
--- /dev/null
+++ b/stunning-site/src/components/layout/Header.jsx
@@ -0,0 +1,229 @@
+// src/components/layout/Header.jsx
+import React, { useMemo, useState, useEffect, useRef } from "react";
+
+/* -------- About Modal -------- */
+function AboutEcoSphereModal({ open, onClose }) {
+ if (!open) return null;
+ return (
+
+
+ );
+}
+
+/* -------- Small user chip + menu (reads from localStorage) -------- */
+function useStoredUser() {
+ const [user, setUser] = useState(null);
+
+ useEffect(() => {
+ const load = () => {
+ try {
+ const obj = JSON.parse(localStorage.getItem("ecos_user") || "null");
+ setUser(obj);
+ } catch {
+ setUser(null);
+ }
+ };
+ load();
+ // update if another tab logs in/out
+ const onStorage = (e) => {
+ if (e.key === "ecos_user") load();
+ };
+ window.addEventListener("storage", onStorage);
+ return () => window.removeEventListener("storage", onStorage);
+ }, []);
+
+ return [user, setUser];
+}
+
+function UserMenu() {
+ const [user, setUser] = useStoredUser();
+ const [open, setOpen] = useState(false);
+ const ref = useRef(null);
+
+ useEffect(() => {
+ const onClick = (e) => {
+ if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+ };
+ document.addEventListener("click", onClick);
+ return () => document.removeEventListener("click", onClick);
+ }, []);
+
+ if (!user) {
+ return (
+
+
+
+
+
+ {/* NOTE: files in /public are served from root → use /logo.png */}
+ 
+
+
+
+ About EcoSphere
+
+
+
+
+
+
+
+
+
+
+ What it is
+EcoSphere turns ocean data into real-world action by connecting citizens, researchers, NGOs, and local authorities.
+
+
+ How it works
+-
+
- Collects reports & media from the field +
- Maps live hotspots & trends +
- AI classifies incidents & severity +
+
+ For communities
+-
+
- See nearby issues & verified updates +
- Join cleanup / conservation projects +
- Track progress with open metrics +
+
+ Impact
+-
+
- Waste removed & species protected +
- Faster reporting → faster response +
- Open data for education & research +
What you can do here
+Report incidents, explore hotspots, follow stories, and support community-led efforts that restore marine life.
+
+ Login
+
+ Create account
+
+
+ );
+ }
+
+ const avatarSrc = user.avatar || "/images/avatars/default1.png";
+
+ const signOut = () => {
+ localStorage.removeItem("ecos_user");
+ setUser(null);
+ setOpen(false);
+ };
+
+ return (
+
+
+
+ {open && (
+
+ );
+}
+
+export default function Header() {
+ const [aboutOpen, setAboutOpen] = useState(false);
+
+ useEffect(() => {
+ const handler = () => setAboutOpen(true);
+ window.addEventListener("open-about-modal", handler);
+ return () => window.removeEventListener("open-about-modal", handler);
+ }, []);
+
+ const sections = useMemo(() => ({ hotspots: "#hotspots", stories: "#stories", impact: "#impact" }), []);
+
+ const handleSearch = (e) => {
+ e.preventDefault();
+ const term = (new FormData(e.currentTarget).get("q") || "").toString().trim().toLowerCase();
+ if (!term) return;
+ if (term.includes("about")) return setAboutOpen(true);
+ const key = Object.keys(sections).find((k) => term === k || term.includes(k) || k.includes(term));
+ if (!key) return;
+ document.querySelector(sections[key])?.scrollIntoView({ behavior: "smooth", block: "start" });
+ };
+
+ // NOTE: Header is positioned absolutely by its parent (hero) so it scrolls away.
+ return (
+ <>
+
+
+ )}
+
+
+ Profile (soon)
+
+ {user.username}
+{user.email}
+
+
+
+ );
+}
diff --git a/stunning-site/src/components/overlay/DiveOverlay.jsx b/stunning-site/src/components/overlay/DiveOverlay.jsx
new file mode 100644
index 0000000..90f37cd
--- /dev/null
+++ b/stunning-site/src/components/overlay/DiveOverlay.jsx
@@ -0,0 +1,168 @@
+import React, { useEffect, useRef } from "react";
+import { motion } from "framer-motion";
+import { useNavigate } from "react-router-dom";
+import { useSceneTransition } from "../../context/SceneTransitionContext";
+
+/**
+ * Plays a ~1.7s dive animation:
+ * - quick darken/vignette + refraction shimmer
+ * - streaking "bubbles" (2D canvas) moving downward
+ * - navigate to destination at ~1.1s
+ * - fade out by ~1.7s
+ */
+export default function DiveOverlay() {
+ const { active, finishDive, getDestination } = useSceneTransition();
+ const nav = useNavigate();
+ const canvasRef = useRef(null);
+ const rafRef = useRef(null);
+ const startedRef = useRef(false);
+ const t0Ref = useRef(0);
+
+ useEffect(() => {
+ if (!active) {
+ // stop anim if running
+ if (rafRef.current) cancelAnimationFrame(rafRef.current);
+ rafRef.current = null;
+ startedRef.current = false;
+ return;
+ }
+
+ const DURATION = 1700; // total ms
+ const NAVIGATE_AT = 1100; // ms to push route
+
+ const canvas = canvasRef.current;
+ const ctx = canvas.getContext("2d");
+ const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
+
+ // size canvas
+ function resize() {
+ const { innerWidth: w, innerHeight: h } = window;
+ canvas.width = Math.floor(w * dpr);
+ canvas.height = Math.floor(h * dpr);
+ canvas.style.width = w + "px";
+ canvas.style.height = h + "px";
+ }
+ resize();
+ window.addEventListener("resize", resize);
+
+ // bubble streaks
+ const W = () => canvas.width;
+ const H = () => canvas.height;
+ const N = 120; // count (kept light)
+ const bubbles = Array.from({ length: N }).map(() => ({
+ x: Math.random() * W(),
+ y: -(Math.random() * H()),
+ r: 1.5 + Math.random() * 3.5,
+ v: 280 + Math.random() * 320, // px/sec downward
+ a: 0.18 + Math.random() * 0.22,
+ }));
+
+ function reset(i) {
+ bubbles[i].x = Math.random() * W();
+ bubbles[i].y = -bubbles[i].r - Math.random() * (H() * 0.3);
+ bubbles[i].r = 1.5 + Math.random() * 3.5;
+ bubbles[i].v = 280 + Math.random() * 320;
+ bubbles[i].a = 0.18 + Math.random() * 0.22;
+ }
+
+ // animation loop
+ function frame(t) {
+ if (!t0Ref.current) t0Ref.current = t;
+ const elapsed = t - t0Ref.current;
+ const dt = Math.min(32, elapsed - (frame.prev || elapsed)) / 1000;
+ frame.prev = elapsed;
+
+ // navigate mid-animation (once)
+ if (elapsed >= NAVIGATE_AT && !startedRef.current) {
+ startedRef.current = true;
+ const dest = getDestination() || "/explore";
+ nav(dest);
+ }
+
+ // draw
+ ctx.clearRect(0, 0, W(), H());
+
+ // subtle blue wash + vignette
+ const grad = ctx.createRadialGradient(W() * 0.5, H() * 0.55, H() * 0.1, W() * 0.5, H() * 0.5, H() * 0.8);
+ grad.addColorStop(0, "rgba(0, 38, 105, 0.12)");
+ grad.addColorStop(1, "rgba(0, 0, 0, 0.45)");
+ ctx.fillStyle = grad;
+ ctx.fillRect(0, 0, W(), H());
+
+ // refraction shimmer (simple sin bands)
+ const shimmer = Math.min(1, elapsed / 450);
+ ctx.globalCompositeOperation = "screen";
+ ctx.globalAlpha = 0.12 * shimmer;
+ const bands = 6;
+ for (let i = 0; i < bands; i++) {
+ ctx.fillStyle = "rgba(180,220,255,0.65)";
+ const y = (H() / bands) * i + Math.sin((elapsed * 0.004 + i) * 1.7) * 12 * dpr;
+ ctx.fillRect(0, y, W(), 2 * dpr);
+ }
+ ctx.globalAlpha = 1;
+ ctx.globalCompositeOperation = "source-over";
+
+ // bubbles (downward streaks)
+ ctx.strokeStyle = "rgba(255,255,255,0.35)";
+ ctx.lineWidth = 1.0 * dpr;
+ for (let i = 0; i < N; i++) {
+ const b = bubbles[i];
+ b.y += b.v * dt * dpr; // move down
+ const len = 12 * dpr;
+ ctx.globalAlpha = b.a;
+ ctx.beginPath();
+ ctx.moveTo(b.x, b.y);
+ ctx.lineTo(b.x, b.y + len);
+ ctx.stroke();
+ if (b.y - len > H()) reset(i);
+ }
+ ctx.globalAlpha = 1;
+
+ // darken at the end (settle underwater)
+ const settle = Math.max(0, (elapsed - 1000) / 600);
+ if (settle > 0) {
+ ctx.fillStyle = `rgba(0,10,30,${0.25 * Math.min(1, settle)})`;
+ ctx.fillRect(0, 0, W(), H());
+ }
+
+ if (elapsed < DURATION) {
+ rafRef.current = requestAnimationFrame(frame);
+ } else {
+ // end
+ window.removeEventListener("resize", resize);
+ finishDive();
+ }
+ }
+
+ rafRef.current = requestAnimationFrame(frame);
+
+ return () => {
+ if (rafRef.current) cancelAnimationFrame(rafRef.current);
+ window.removeEventListener("resize", resize);
+ rafRef.current = null;
+ t0Ref.current = 0;
+ startedRef.current = false;
+ };
+ }, [active, finishDive, getDestination, nav]);
+
+ // Layered motion containers for a bit of tilt/zoom feel
+ if (!active) return null;
+ return (
+
+ {/* Brand */}
+
+ {/* same path fix here */}
+
+ ECOSPHERE
+
+
+ {/* Nav */}
+
+
+ {/* Right side: search + user */}
+
+
+ {/* Mobile quick links */}
+
+
+ ECOSPHERE
+
+
+ {/* Nav */}
+
+
+ {/* Right side: search + user */}
+
+
+
+ {/* User chip / auth buttons */}
+
+
+
+
+ );
+}
+
+export default function AIImpactCard({ last }) {
+ if (!last) return null;
+ return (
+
+
+ {value}
+ {label}
+
+
+ );
+}
diff --git a/stunning-site/src/components/reporter/FooterImpact.jsx b/stunning-site/src/components/reporter/FooterImpact.jsx
new file mode 100644
index 0000000..f079dd5
--- /dev/null
+++ b/stunning-site/src/components/reporter/FooterImpact.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+export default function FooterImpact({ totals = { plastic:0, oil:0, fishing:0, other:0 } }) {
+ const sum = Object.values(totals).reduce((a,b)=>a+b,0) || 1;
+ const sdg = [
+ { name:"SDG 14: Life Below Water", v: totals.plastic + totals.oil + totals.fishing },
+ { name:"SDG 15: Life on Land", v: totals.other },
+ { name:"SDG 13: Climate Action", v: Math.round(sum*0.6) },
+ ];
+ const w = (v) => `${Math.round((v/sum)*100)}%`;
+ return (
+
+ );
+}
diff --git a/stunning-site/src/components/reporter/Gamification.jsx b/stunning-site/src/components/reporter/Gamification.jsx
new file mode 100644
index 0000000..4af7b3d
--- /dev/null
+++ b/stunning-site/src/components/reporter/Gamification.jsx
@@ -0,0 +1,359 @@
+// src/components/reporter/Gamification.jsx
+import React, { useMemo, useRef } from "react";
+
+/* Centered popup for LinkedIn/Facebook share */
+function openCentered(url, w = 740, h = 720) {
+ const dualScreenLeft = window.screenLeft ?? window.screenX ?? 0;
+ const dualScreenTop = window.screenTop ?? window.screenY ?? 0;
+ const width = window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;
+ const height = window.innerHeight ?? document.documentElement.clientHeight ?? screen.height;
+ const left = width / 2 - w / 2 + dualScreenLeft;
+ const top = height / 2 - h / 2 + dualScreenTop;
+ const win = window.open(url, "_blank", `scrollbars=yes,width=${w},height=${h},top=${top},left=${left}`);
+ if (win) win.focus();
+}
+
+/* Convert inline SVG to PNG without extra deps */
+async function svgToPngBlob(svgEl, scale = 2) {
+ const xml = new XMLSerializer().serializeToString(svgEl);
+ const svg64 = btoa(unescape(encodeURIComponent(xml)));
+ const src = `data:image/svg+xml;base64,${svg64}`;
+ const img = new Image();
+ img.decoding = "async";
+ img.src = src;
+ await img.decode();
+
+ const w = svgEl.viewBox.baseVal.width || svgEl.clientWidth || 1000;
+ const h = svgEl.viewBox.baseVal.height || svgEl.clientHeight || 600;
+
+ const canvas = document.createElement("canvas");
+ canvas.width = Math.round(w * scale);
+ canvas.height = Math.round(h * scale);
+
+ const ctx = canvas.getContext("2d");
+ ctx.fillStyle = "#ffffff";
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+ const blob = await new Promise((res) => canvas.toBlob(res, "image/png", 0.95));
+ return blob;
+}
+
+/* 3D tilt for certificate */
+function useTilt() {
+ const ref = useRef(null);
+ const onMove = (e) => {
+ const el = ref.current;
+ if (!el) return;
+ const r = el.getBoundingClientRect();
+ const px = (e.clientX - r.left) / r.width;
+ const py = (e.clientY - r.top) / r.height;
+ const rx = (py - 0.5) * 8;
+ const ry = (px - 0.5) * -8;
+ el.style.transform = `perspective(900px) rotateX(${rx}deg) rotateY(${ry}deg)`;
+ };
+ const onLeave = () => { if (ref.current) ref.current.style.transform = "perspective(900px) rotateX(0) rotateY(0)"; };
+ return { ref, onMove, onLeave };
+}
+
+export default function Gamification() {
+ const certRef = useRef(null);
+ const tilt = useTilt();
+
+ const today = useMemo(
+ () =>
+ new Date().toLocaleDateString(undefined, {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ }),
+ []
+ );
+
+ const name = "Eco Hero"; // plug real user here if you have it
+ const shareUrl = typeof window !== "undefined" ? window.location.origin : "";
+
+ const caption =
+ `🏆 Environmental Champion – ${name}\n\n` +
+ `Recognized by EcoSphere for reporting incidents and protecting our oceans.\n` +
+ `#EcoSphere #OceanAction #Sustainability #ClimateAction`;
+
+ const onDownload = async () => {
+ try {
+ const blob = await svgToPngBlob(certRef.current, 2);
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = "EcoSphere-Certificate.png";
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
+ URL.revokeObjectURL(url);
+ } catch (e) {
+ console.error(e);
+ alert("Could not create PNG. Please try again.");
+ }
+ };
+
+ const shareDevice = async () => {
+ try {
+ const blob = await svgToPngBlob(certRef.current, 2);
+ const file = new File([blob], "EcoSphere-Certificate.png", { type: "image/png" });
+ if (navigator.canShare && navigator.canShare({ files: [file] })) {
+ await navigator.share({ files: [file], title: "EcoSphere Impact Certificate", text: caption });
+ } else {
+ await navigator.clipboard.writeText(caption);
+ alert("Caption copied. Download the PNG and share it from your device.");
+ }
+ } catch {
+ alert("Sharing not supported here. Use Download PNG instead.");
+ }
+ };
+
+ const shareLinkedIn = async () => {
+ try { await navigator.clipboard.writeText(caption); } catch {}
+ openCentered(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`);
+ };
+ const shareFacebook = () => {
+ openCentered(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`);
+ };
+ const shareInstagram = async () => {
+ try {
+ const blob = await svgToPngBlob(certRef.current, 2);
+ const file = new File([blob], "EcoSphere-Certificate.png", { type: "image/png" });
+ if (navigator.canShare && navigator.canShare({ files: [file] })) {
+ await navigator.share({ files: [file], title: "EcoSphere Impact Certificate", text: caption });
+ return;
+ }
+ } catch {}
+ await navigator.clipboard.writeText(caption).catch(() => {});
+ alert("Instagram on desktop doesn’t support direct share. Caption copied—download PNG and post it.");
+ };
+
+ /* Leaderboard demo data for progress bars/medals */
+ const leaderboard = [
+ { id: 21, name: "Aarav", city: "Your City", pts: 210 },
+ { id: 47, name: "You", city: "Your City", pts: 120 },
+ { id: 33, name: "Maya", city: "Your City", pts: 80 },
+ ];
+ const maxPts = Math.max(...leaderboard.map(d => d.pts));
+ const medalDot = (i) => {
+ const cls = i === 0 ? "metal-gold" : i === 1 ? "metal-silver" : "metal-bronze";
+ return ;
+ };
+
+ return (
+ AI Prediction (demo)
+ {last.type}
+ {last.desc}
+ +
+ =80?"#ef4444":last.severity>=60?"#f59e0b":"#22c55e"} />
+
+
+
+ If unresolved (30 days)
+
+ {Math.round(last.impactScore*5+50)}+ lives affected
+
+ Based on 3 similar incidents in your area
+
+ {/* ====== YOUR ORIGINAL BADGES (unchanged) ====== */}
+
+ );
+}
diff --git a/stunning-site/src/components/reporter/MapView.jsx b/stunning-site/src/components/reporter/MapView.jsx
new file mode 100644
index 0000000..891390b
--- /dev/null
+++ b/stunning-site/src/components/reporter/MapView.jsx
@@ -0,0 +1,95 @@
+// src/components/reporter/MapView.jsx
+import React, { useEffect, useMemo, useState } from "react";
+import { MapContainer, TileLayer, CircleMarker, useMap, useMapEvents } from "react-leaflet";
+
+const severityColor = (s = 50) => (s >= 80 ? "#ef4444" : s >= 60 ? "#f59e0b" : "#22c55e");
+
+function Locator({ setCenter }) {
+ useEffect(() => {
+ if (!navigator.geolocation) return;
+ navigator.geolocation.getCurrentPosition(
+ (pos) => setCenter({ lat: pos.coords.latitude, lng: pos.coords.longitude }),
+ () => {}
+ );
+ }, [setCenter]);
+ useMapEvents({});
+ return null;
+}
+
+/* Make sure tiles lay out correctly after being placed in a 50% column */
+function ResizeFix() {
+ const map = useMap();
+ useEffect(() => {
+ const fix = () => map.invalidateSize();
+ fix();
+ window.addEventListener("resize", fix);
+ return () => window.removeEventListener("resize", fix);
+ }, [map]);
+ return null;
+}
+
+/* Listen for `window.dispatchEvent(new CustomEvent("focus-incident",{detail:item}))` and fly to it */
+function FocusIncidentBridge() {
+ const map = useMap();
+ useEffect(() => {
+ const handler = (e) => {
+ const it = e.detail;
+ const lat = it?.coords?.[0] ?? it?.location?.lat;
+ const lng = it?.coords?.[1] ?? it?.location?.lng;
+ if (typeof lat === "number" && typeof lng === "number") {
+ map.flyTo([lat, lng], 15, { duration: 1.6 });
+ }
+ };
+ window.addEventListener("focus-incident", handler);
+ return () => window.removeEventListener("focus-incident", handler);
+ }, [map]);
+ return null;
+}
+
+export default function MapView({ reports = [], filters, onOpenReport, height = "60vh" }) {
+ const [center, setCenter] = useState({ lat: 13.0827, lng: 80.2707 }); // Chennai default
+
+ const visible = useMemo(() => {
+ return reports.filter((r) => {
+ const t = r.type?.toLowerCase() || "";
+ const isWaste = t.includes("plastic") || t.includes("oil") || t.includes("waste");
+ const isMarine = t.includes("fishing") || t.includes("turtle") || t.includes("coral");
+ const isAir = t.includes("smoke") || t.includes("air");
+ const isForest = t.includes("mangrove") || t.includes("deforest");
+ return (
+ (filters.waste && isWaste) ||
+ (filters.marine && isMarine) ||
+ (filters.air && isAir) ||
+ (filters.forest && isForest) ||
+ (!isWaste && !isMarine && !isAir && !isForest)
+ );
+ });
+ }, [reports, filters]);
+
+ return (
+
+
+
+ {/* ====== UPGRADED LEADERBOARD (kept) ====== */}
+ Badges
+ Achievement gallery
+
+
+
+
+
+ 🥇
+ First Report
+ Unlocked
+
+
+ 🌊
+ Ocean Ally
+ Unlocked
+
+
+ 🔟
+ 10 Reports
+ Locked
+
+
+ ⚡
+ Rapid Responder
+ Locked
+
+
+
+ {/* ====== UPGRADED CERTIFICATE (kept) ====== */}
+ Leaderboard (city)
+ Friendly competition
+
+ -
+ {leaderboard.map((p, i) => (
+
-
+ + {medalDot(i)} + + {String(p.id).slice(-2)} + ++++++++{p.name}+{p.city}+{p.pts} pts++ ++
+ ))}
+
+
+ Impact Certificate
+ Download & share
+
+
+
+
+ {/* Actions */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/stunning-site/src/components/reporter/MyReports.jsx b/stunning-site/src/components/reporter/MyReports.jsx
new file mode 100644
index 0000000..d859cd1
--- /dev/null
+++ b/stunning-site/src/components/reporter/MyReports.jsx
@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from "react";
+import api from "../../lib/api/index";
+
+const STATUS = ["open","assigned","in_progress","resolved"];
+
+export default function MyReports() {
+ const [items, setItems] = useState([]);
+ const [filter, setFilter] = useState("all");
+
+ const load = async () => {
+ const { items } = await api.listReports();
+ setItems(items);
+ };
+ useEffect(() => { load(); }, []);
+
+ const changeStatus = async (id, status) => {
+ await api.updateReport(id, { status });
+ load();
+ };
+
+ const filtered = items.filter(x => filter==="all" ? true : x.status===filter);
+ const totalImpact = items.reduce((a,b)=>a+(b.impactScore||0),0);
+
+ return (
+
+
+ );
+}
diff --git a/stunning-site/src/components/reporter/ReportModal.jsx b/stunning-site/src/components/reporter/ReportModal.jsx
new file mode 100644
index 0000000..8a476e5
--- /dev/null
+++ b/stunning-site/src/components/reporter/ReportModal.jsx
@@ -0,0 +1,175 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import api from "../../lib/api/index";
+
+const CATS = [
+ { label: "Plastic waste", icon: "🧴" },
+ { label: "Oil spill", icon: "🛢️" },
+ { label: "Illegal fishing", icon: "🎣" },
+ { label: "Other", icon: "✨" },
+];
+
+export default function ReportModal({ open, onClose, onCreated }) {
+ const [cat, setCat] = useState(CATS[0].label);
+ const [desc, setDesc] = useState("");
+ const [files, setFiles] = useState([]);
+ const [loc, setLoc] = useState({ lat: null, lng: null });
+ const [busy, setBusy] = useState(false);
+
+ useEffect(() => {
+ if (!open) return;
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition(
+ pos => setLoc({ lat: pos.coords.latitude, lng: pos.coords.longitude }),
+ () => {}
+ );
+ }
+ }, [open]);
+
+ // Simple “AI” detection preview (mock)
+ const detected = useMemo(() => {
+ const name = files?.[0]?.name?.toLowerCase() || "";
+ if (name.includes("oil")) return "Detected: Oil spill near shore";
+ if (name.includes("fish")) return "Detected: Fishing net / bycatch";
+ if (name.includes("plastic")) return "Detected: Plastic waste on beach";
+ return cat === "Oil spill" ? "Detected: Oil sheen on surface" :
+ cat === "Illegal fishing" ? "Detected: Suspicious fishing activity" :
+ "Detected: Litter / debris";
+ }, [files, cat]);
+
+ const suggest = () => {
+ const t = new Date().toLocaleString();
+ setDesc(d => d?.trim() ? d : `Observed ${cat.toLowerCase()} at approx ${loc.lat?.toFixed(4)}, ${loc.lng?.toFixed(4)} on ${t}. Visible impact on nearby habitat. Recommend immediate cleanup and monitoring.`);
+ };
+
+ const onDrop = (e) => {
+ e.preventDefault();
+ const f = Array.from(e.dataTransfer.files || []).slice(0, 6);
+ setFiles(f);
+ };
+
+ const submit = async () => {
+ if (!cat || !desc.trim()) return alert("Please select a category and write a short description.");
+ setBusy(true);
+ try {
+ const media = files.map(f => ({ url: URL.createObjectURL(f), type: f.type.startsWith("video") ? "video" : "image" }));
+ const { report } = await api.createReport({
+ type: cat,
+ desc,
+ location: { lat: loc.lat ?? 13.0827, lng: loc.lng ?? 80.2707 },
+ media
+ });
+ onCreated?.(report);
+ try { (await import("canvas-confetti")).default({ particleCount: 60, spread: 60, origin: { y: 0.8 } }); } catch {}
+ onClose();
+ // reset
+ setFiles([]); setDesc(""); setCat(CATS[0].label);
+ } catch (e) {
+ console.error(e);
+ alert("Could not create report (demo).");
+ } finally { setBusy(false); }
+ };
+
+ return (
+
+
+
+
+
+ My Reports
+ Total Impact Score: {totalImpact}
+
+ {["all",...STATUS].map(s=>(
+
+ ))}
+
+
+ {filtered.map(r=>(
+
+
+ ))}
+ {filtered.length===0 && (
+
+ No reports yet.
+ )}
+
+
+
+
+ {/* Categories */}
+ Report Incident
+ +
+ {CATS.map(c => (
+
+ ))}
+
+
+ {/* Upload */}
+
+
+
+ {/* Smart description */}
+ e.preventDefault()}
+ onDrop={onDrop}
+ className="rounded-xl border border-dashed border-navy/25 p-4 text-center bg-navy/2"
+ >
+
+ {files.length > 0 && (
+ Drag & drop photo/video here
+ or
+
+
+ {files.map((f,i)=>(
+
+ )}
+ {f.name}
+ ))}
+
+
+