Skip to content

AUI x VolvoLovers #3638

Open
Open
AUI x VolvoLovers#3638
@asoulaimaneel7-alt

Description

@asoulaimaneel7-alt
asoulaimaneel7-alt
opened on May 13, 2026

import { useState } from "react";

// ── Brand tokens ─────────────────────────────────────────────────
const C = {
navy: "#1833",
blue: "#003A6C",
mid: "#1565A0",
steel: "#2E86C1",
ice: "#E8F4FD",
white: "#FFFFFF",
};

// ── Data ─────────────────────────────────────────────────────────
const VEHICLES = [
{ id: 1, name: "Volvo EX30 #1", location: "NAB Parking", status: "available", battery: 91, nextAvail: "Available now" },
{ id: 2, name: "Volvo EX30 #2", location: "Building 38 Parking", status: "reserved", battery: 67, nextAvail: "Available 14:30" },
{ id: 3, name: "Volvo EX30 #3", location: "Building 9 Parking", status: "charging", battery: 43, nextAvail: "Available 16:00" },
];

const STATUS = {
available: { label: "Available", bg: "#D1FAE5", txt: "#065F46", dot: "#10B981" },
reserved: { label: "Reserved", bg: "#FEF3C7", txt: "#92400E", dot: "#F59E0B" },
charging: { label: "Charging", bg: "#DBEAFE", txt: "#1E40AF", dot: "#3B82F6" },
};

const STATS = [
{ icon: "🌿", value: "2.4 t", label: "CO₂ Saved", sub: "This semester" },
{ icon: "⚡", value: "318", label: "EV Trips Completed", sub: "Since Jan 2026" },
{ icon: "⛽", value: "MAD 4,100", label: "Fuel Savings", sub: "Estimated total"},
];

const STEPS = [
{ n: "01", text: "Pick up vehicle at assigned campus parking spot" },
{ n: "02", text: "Check battery level before departure — minimum 30%" },
{ n: "03", text: "Drive responsibly within and around campus" },
{ n: "04", text: "Return to the exact same parking location" },
{ n: "05", text: "Share your experience with #VolvoLovers" },
];

// ── Shared UI primitives ─────────────────────────────────────────
function Battery({ pct }) {
const col = pct > 60 ? "#10B981" : pct > 30 ? "#F59E0B" : "#EF4444";
return (
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
<div style={{ flex: 1, height: 6, background: "#E5E7EB", borderRadius: 99, overflow: "hidden" }}>
<div style={{ width: ${pct}%, height: "100%", background: col,
borderRadius: 99, transition: "width .5s ease" }} />

<span style={{ fontSize: 12, fontWeight: 700, color: col, minWidth: 32 }}>{pct}%

);
}

function CarSVG({ tint = C.blue, opacity = 0.10 }) {
return (
<svg viewBox="0 0 220 72" style={{ width: "100%", display: "block", pointerEvents: "none" }}>











);
}

function SectionTitle({ icon, title, sub }) {
return (
<div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
<div style={{ width: 40, height: 40, borderRadius: 12, flexShrink: 0,
background: linear-gradient(135deg, ${C.blue}, ${C.steel}),
display: "flex", alignItems: "center", justifyContent: "center" }}>
{icon}


<div style={{ fontSize: 18, fontWeight: 900, color: C.navy, letterSpacing: "-0.4px" }}>{title}

<div style={{ fontSize: 12, color: "#6B7280", marginTop: 1 }}>{sub}


);
}

const CarIcon = ({ stroke = "#fff" }) => (






);

const CalIcon = ({ stroke = "#fff" }) => (




);

const CheckIcon = ({ stroke = "#93C5FD" }) => (




);

// ══════════════════════════════════════════════════════════════════
// FLEET TAB
// ══════════════════════════════════════════════════════════════════
function FleetTab({ selected, setSelected, goToReserve }) {
return (


<div style={{ display: "flex", alignItems: "center",
justifyContent: "space-between", flexWrap: "wrap", gap: 12, marginBottom: 24 }}>
<SectionTitle
icon={}
title="Campus EV Fleet"
sub="Al Akhawayn University · Ifrane Campus · Spring 2026"
/>
<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
{Object.entries(STATUS).map(([k, s]) => (
<span key={k} style={{ background: s.bg, color: s.txt,
padding: "5px 14px", borderRadius: 99,
fontSize: 11, fontWeight: 700 }}>
{VEHICLES.filter(v => v.status === k).length} {s.label}

))}

  <div style={{ display: "grid",
                gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 20 }}>
    {VEHICLES.map(v => {
      const s = STATUS[v.status];
      const isAvail  = v.status === "available";
      const isSel    = selected === v.id;
      return (
        <div key={v.id}
          onClick={() => isAvail && setSelected(v.id)}
          style={{
            background: isSel
              ? `linear-gradient(150deg, ${C.blue} 0%, ${C.steel} 100%)`
              : "#fff",
            borderRadius: 20,
            border: isSel ? "none" : "1.5px solid #E5E7EB",
            boxShadow: isSel ? `0 12px 40px ${C.blue}44` : "0 2px 12px #0001",
            padding: "20px 20px 18px",
            cursor: isAvail ? "pointer" : "default",
            transition: "all .3s ease",
            transform: isSel ? "translateY(-4px)" : "none",
            opacity: isAvail ? 1 : 0.76,
          }}>

          <div style={{ margin: "-6px -8px 8px" }}>
            <CarSVG tint={isSel ? "#fff" : C.blue} opacity={isSel ? 0.18 : 0.09} />
          </div>

          <div style={{ display: "flex", justifyContent: "space-between",
                        alignItems: "flex-start", marginBottom: 12 }}>
            <div>
              <div style={{ fontSize: 15, fontWeight: 800, letterSpacing: "-0.3px",
                            color: isSel ? "#fff" : C.navy }}>
                {v.name}
              </div>
              <div style={{ fontSize: 11, fontWeight: 500, marginTop: 2,
                            color: isSel ? "#93C5FD" : "#6B7280" }}>
                {v.location}
              </div>
            </div>
            <span style={{
              display: "inline-flex", alignItems: "center", gap: 5,
              background: isSel ? "#ffffff22" : s.bg,
              color: isSel ? "#fff" : s.txt,
              padding: "3px 10px", borderRadius: 99, fontSize: 11, fontWeight: 700,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%",
                             background: isSel ? "#A7F3D0" : s.dot }} />
              {s.label}
            </span>
          </div>

          <div style={{ marginBottom: 10 }}>
            <div style={{ fontSize: 10, fontWeight: 700, textTransform: "uppercase",
                          letterSpacing: "0.5px", marginBottom: 5,
                          color: isSel ? "#93C5FD" : "#9CA3AF" }}>
              Battery
            </div>
            <Battery pct={v.battery} />
          </div>

          <div style={{ fontSize: 11, marginBottom: 16,
                        display: "flex", alignItems: "center", gap: 5,
                        color: isSel ? "#BAE6FD" : "#6B7280" }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
                 stroke={isSel ? "#BAE6FD" : "#9CA3AF"} strokeWidth="2.5">
              <circle cx="12" cy="12" r="10"/>
              <path d="M12 6v6l4 2"/>
            </svg>
            {v.nextAvail}
          </div>

          <button
            onClick={e => {
              e.stopPropagation();
              if (isAvail) { setSelected(v.id); goToReserve(); }
            }}
            disabled={!isAvail}
            style={{
              width: "100%", padding: "10px 0", borderRadius: 11, border: "none",
              fontFamily: "inherit", fontWeight: 800, fontSize: 13,
              cursor: isAvail ? "pointer" : "not-allowed",
              transition: "all .2s",
              background: isAvail
                ? (isSel ? "#fff" : `linear-gradient(90deg, ${C.blue}, ${C.steel})`)
                : "#E5E7EB",
              color: isAvail ? (isSel ? C.navy : "#fff") : "#9CA3AF",
              boxShadow: isAvail && !isSel ? `0 4px 14px ${C.mid}44` : "none",
            }}>
            {isAvail ? "Reserve Now →"
                     : v.status === "reserved" ? "Currently Reserved" : "Charging…"}
          </button>
        </div>
      );
    })}
  </div>
</div>

);
}

// ══════════════════════════════════════════════════════════════════
// RESERVE TAB
// ══════════════════════════════════════════════════════════════════
function ReserveTab({ selected, setSelected }) {
const [date, setDate] = useState("");
const [pickup, setPickup] = useState("");
const [ret, setRet] = useState("");
const [purpose, setPurpose] = useState("");
const [confirmed, setConfirmed] = useState(false);

const selVeh = VEHICLES.find(v => v.id === selected);
const canBook = selVeh?.status === "available" && date && pickup && ret && purpose;

const handleReset = () => {
setConfirmed(false);
setDate(""); setPickup(""); setRet(""); setPurpose("");
};

const inputStyle = {
width: "100%", padding: "11px 14px", borderRadius: 10, boxSizing: "border-box",
border: "1.5px solid #E5E7EB", fontSize: 13, color: C.navy,
background: "#FAFBFF", outline: "none", fontFamily: "inherit", appearance: "none",
};
const labelStyle = {
fontSize: 11, fontWeight: 700, color: "#6B7280", display: "block",
textTransform: "uppercase", letterSpacing: "0.5px", marginBottom: 6,
};

return (


<SectionTitle
icon={}
title="New Reservation"
sub="Select a vehicle and fill in your booking details"
/>

  <div style={{ display: "grid", gridTemplateColumns: "1fr minmax(300px, 400px)",
                gap: 24, alignItems: "start" }}>

    {/* LEFT — vehicle selector */}
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ fontSize: 12, fontWeight: 700, color: "#6B7280",
                    textTransform: "uppercase", letterSpacing: "0.5px", marginBottom: 4 }}>
        Choose Your Vehicle
      </div>
      {VEHICLES.map(v => {
        const s     = STATUS[v.status];
        const isAvail = v.status === "available";
        const isSel   = selected === v.id;
        return (
          <div key={v.id}
            onClick={() => isAvail && setSelected(v.id)}
            style={{
              background: isSel
                ? `linear-gradient(90deg, ${C.blue}, ${C.steel})`
                : "#fff",
              borderRadius: 16,
              border: isSel ? "none" : `1.5px solid ${isAvail ? "#E5E7EB" : "#F3F4F6"}`,
              padding: "16px 20px",
              display: "flex", alignItems: "center", gap: 16,
              cursor: isAvail ? "pointer" : "default",
              opacity: isAvail ? 1 : 0.7,
              boxShadow: isSel ? `0 8px 28px ${C.blue}44` : "0 1px 6px #0001",
              transition: "all .25s ease",
            }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, flexShrink: 0,
                          background: isSel ? "#ffffff22" : C.ice,
                          display: "flex", alignItems: "center", justifyContent: "center" }}>
              <CarIcon stroke={isSel ? "#fff" : C.mid} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 800, fontSize: 14,
                            color: isSel ? "#fff" : C.navy }}>{v.name}</div>
              <div style={{ fontSize: 11, marginTop: 2,
                            color: isSel ? "#BAE6FD" : "#6B7280" }}>{v.location}</div>
              <div style={{ marginTop: 8 }}>
                <Battery pct={v.battery} />
              </div>
            </div>
            <div style={{ textAlign: "right", flexShrink: 0 }}>
              <span style={{
                display: "inline-flex", alignItems: "center", gap: 5,
                background: isSel ? "#ffffff22" : s.bg,
                color: isSel ? "#fff" : s.txt,
                padding: "3px 10px", borderRadius: 99, fontSize: 11, fontWeight: 700,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%",
                               background: isSel ? "#A7F3D0" : s.dot }} />
                {s.label}
              </span>
              <div style={{ fontSize: 11, marginTop: 8,
                            color: isSel ? "#93C5FD" : "#9CA3AF" }}>
                {v.nextAvail}
              </div>
            </div>
          </div>
        );
      })}
    </div>

    {/* RIGHT — booking form */}
    <div style={{ background: "#fff", borderRadius: 20, padding: 26,
                  border: "1.5px solid #E5E7EB", boxShadow: "0 4px 20px #0001" }}>

      {/* Selected vehicle chip */}
      <div style={{ background: C.ice, borderRadius: 12, padding: "12px 16px",
                    marginBottom: 20, border: `1.5px solid ${C.steel}22` }}>
        <div style={{ fontSize: 10, fontWeight: 700, color: C.mid,
                      textTransform: "uppercase", letterSpacing: "0.5px", marginBottom: 6 }}>
          Selected Vehicle
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div style={{ fontWeight: 800, fontSize: 14, color: C.navy }}>{selVeh?.name}</div>
            <div style={{ fontSize: 11, color: "#6B7280", marginTop: 1 }}>{selVeh?.location}</div>
          </div>
          <span style={{ fontSize: 11, fontWeight: 700, padding: "3px 10px", borderRadius: 99,
                         background: STATUS[selVeh?.status]?.bg,
                         color: STATUS[selVeh?.status]?.txt }}>
            {STATUS[selVeh?.status]?.label}
          </span>
        </div>
      </div>

      {confirmed ? (
        /* ── Confirmation state ───────────────────────────── */
        <div style={{ textAlign: "center", padding: "16px 0" }}>
          <div style={{ width: 64, height: 64, borderRadius: "50%",
                        background: "#D1FAE5", margin: "0 auto 16px",
                        display: "flex", alignItems: "center", justifyContent: "center",
                        fontSize: 28 }}>
            ✓
          </div>
          <div style={{ fontSize: 18, fontWeight: 900, color: "#065F46", marginBottom: 10 }}>
            Reservation Confirmed!
          </div>
          <div style={{ fontSize: 13, color: "#374151", lineHeight: 1.7,
                        background: "#F9FAFB", borderRadius: 10, padding: "12px 16px",
                        marginBottom: 14, textAlign: "left" }}>
            <div><strong>Vehicle:</strong> {selVeh?.name}</div>
            <div><strong>Location:</strong> {selVeh?.location}</div>
            <div><strong>Date:</strong> {date}</div>
            <div><strong>Time:</strong> {pickup} → {ret}</div>
            <div><strong>Purpose:</strong> {purpose}</div>
          </div>
          <div style={{ background: "#FEF3C7", border: "1px solid #FDE68A",
                        borderRadius: 10, padding: "10px 14px", fontSize: 12,
                        color: "#92400E", fontWeight: 600, marginBottom: 18 }}>
            A confirmation email has been sent to your AUI address.
            Don't forget to post with <strong>#VolvoLovers</strong>!
          </div>
          <button onClick={handleReset}
            style={{ padding: "11px 28px", borderRadius: 11, border: "none",
                     background: `linear-gradient(90deg, ${C.blue}, ${C.steel})`,
                     color: "#fff", fontWeight: 800, fontSize: 13,
                     cursor: "pointer", fontFamily: "inherit" }}>
            New Reservation
          </button>
        </div>
      ) : (
        /* ── Form ─────────────────────────────────────────── */
        <div style={{ display: "flex", flexDirection: "column", gap: 15 }}>
          <div>
            <label style={labelStyle}>Date</label>
            <input type="date" value={date}
              onChange={e => setDate(e.target.value)} style={inputStyle} />
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            <div>
              <label style={labelStyle}>Pickup Time</label>
              <input type="time" value={pickup}
                onChange={e => setPickup(e.target.value)} style={inputStyle} />
            </div>
            <div>
              <label style={labelStyle}>Return Time</label>
              <input type="time" value={ret}
                onChange={e => setRet(e.target.value)} style={inputStyle} />
            </div>
          </div>

          <div>
            <label style={labelStyle}>Trip Purpose</label>
            <select value={purpose}
              onChange={e => setPurpose(e.target.value)} style={inputStyle}>
              <option value="">Select a purpose...</option>
              <option value="Campus Commute">Campus Commute</option>
              <option value="Academic Field Trip">Academic Field Trip</option>
              <option value="Personal Errand">Personal Errand</option>
              <option value="University Event">University Event</option>
              <option value="Other">Other</option>
            </select>
          </div>

          <div style={{ fontSize: 11, color: "#9CA3AF", lineHeight: 1.6,
                        background: "#F9FAFB", borderRadius: 8, padding: "10px 12px",
                        border: "1px solid #F3F4F6" }}>
            By confirming, you agree to AUI-VolvoLovers terms and certify you hold
            a valid driving licence. The debit card guarantee is managed by AUI.
          </div>

          {/* Unavailable warning */}
          {selVeh?.status !== "available" && (
            <div style={{ background: "#FEF3C7", border: "1px solid #FDE68A",
                          borderRadius: 10, padding: "10px 14px",
                          fontSize: 12, color: "#92400E", fontWeight: 600 }}>
              This vehicle is currently {selVeh?.status}.
              Please select an available vehicle on the left.
            </div>
          )}

          <button onClick={() => canBook && setConfirmed(true)}
            disabled={!canBook}
            style={{
              padding: "13px", borderRadius: 11, border: "none",
              fontFamily: "inherit", fontWeight: 800, fontSize: 14,
              cursor: canBook ? "pointer" : "not-allowed",
              transition: "all .2s",
              background: canBook
                ? `linear-gradient(90deg, ${C.blue} 0%, ${C.steel} 100%)`
                : "#E5E7EB",
              color: canBook ? "#fff" : "#9CA3AF",
              boxShadow: canBook ? `0 4px 18px ${C.mid}44` : "none",
            }}>
            Confirm Reservation
          </button>
        </div>
      )}
    </div>
  </div>
</div>

);
}

// ══════════════════════════════════════════════════════════════════
// GAMIFICATION DATA
// ══════════════════════════════════════════════════════════════════
const LEADERBOARD = [
{ rank: 1, name: "Yasmine B.", pts: 1240, badge: "Platinum", trips: 22, avatar: "YB" },
{ rank: 2, name: "Mehdi O.", pts: 1095, badge: "Gold", trips: 19, avatar: "MO" },
{ rank: 3, name: "Sara A.", pts: 980, badge: "Gold", trips: 17, avatar: "SA" },
{ rank: 4, name: "Adam K.", pts: 760, badge: "Silver", trips: 13, avatar: "AK" },
{ rank: 5, name: "You", pts: 620, badge: "Silver", trips: 11, avatar: "AU", isUser: true },
];

const POINT_ACTIONS = [
{ icon: "↩", label: "On-time return", pts: "+30 pts", color: "#10B981", bg: "#D1FAE5" },
{ icon: "✓", label: "Clean vehicle handback", pts: "+25 pts", color: "#3B82F6", bg: "#DBEAFE" },
{ icon: "⚡", label: "Return with 50%+ battery", pts: "+20 pts", color: "#F59E0B", bg: "#FEF3C7" },
{ icon: "📱", label: "#VolvoLovers social post", pts: "+15 pts", color: "#8B5CF6", bg: "#EDE9FE" },
{ icon: "⭐", label: "5-star staff rating", pts: "+10 pts", color: "#EC4899", bg: "#FCE7F3" },
{ icon: "🚫", label: "Late / damaged return", pts: "−50 pts", color: "#EF4444", bg: "#FEE2E2" },
];

const BADGE_TIERS = [
{ tier: "Bronze", min: 0, max: 299, color: "#CD7F32", bg: "#FEF3E2" },
{ tier: "Silver", min: 300, max: 699, color: "#94A3B8", bg: "#F1F5F9" },
{ tier: "Gold", min: 700, max: 1099, color: "#F59E0B", bg: "#FEF3C7" },
{ tier: "Platinum", min: 1100, max: 9999, color: "#2E86C1", bg: "#E8F4FD" },
];

const CAMPUS_REWARDS = [
{ pts: 500, reward: "AUI Café discount voucher (10%)", claimed: true },
{ pts: 800, reward: "Priority booking slot for 1 week", claimed: true },
{ pts: 1000, reward: "Free campus printing credits (100 pages)", claimed: false },
{ pts: 1500, reward: "AUI Bookstore gift card — MAD 100", claimed: false },
{ pts: 2000, reward: "Volvo Maroc branded kit (cap + bag)", claimed: false },
];

// ══════════════════════════════════════════════════════════════════
// GAMIFICATION SECTION COMPONENT
// ══════════════════════════════════════════════════════════════════
function GamificationSection() {
const [activeReward, setActiveReward] = useState(null);
const userPts = 620;
const userBadge = BADGE_TIERS.find(b => userPts >= b.min && userPts <= b.max);
const nextBadge = BADGE_TIERS.find(b => b.min > userPts);
const pctToNext = nextBadge
? Math.round(((userPts - userBadge.min) / (nextBadge.min - userBadge.min)) * 100)
: 100;
const rankColors = ["#F59E0B", "#94A3B8", "#CD7F32"];

return (
<div style={{ display: "flex", flexDirection: "column", gap: 20 }}>

  {/* ── Section header ────────────────────────────────────── */}
  <div style={{
    display: "flex", alignItems: "center", gap: 12,
    paddingTop: 8, borderTop: "1.5px solid #E5E7EB",
  }}>
    <div style={{
      width: 40, height: 40, borderRadius: 12, flexShrink: 0,
      background: "linear-gradient(135deg, #7C3AED, #A855F7)",
      display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20,
    }}>🏆</div>
    <div>
      <div style={{ fontSize: 18, fontWeight: 900, color: "#001833", letterSpacing: "-0.4px" }}>
        VolvoLovers Gamification
      </div>
      <div style={{ fontSize: 12, color: "#6B7280", marginTop: 1 }}>
        Earn points for responsible EV use · Redeem campus rewards
      </div>
    </div>
  </div>

  {/* ── Row 1: My Points + Earn/Lose actions ──────────────── */}
  <div style={{ display: "grid", gridTemplateColumns: "300px 1fr", gap: 20 }}>

    {/* My Points card */}
    <div style={{
      background: "linear-gradient(145deg, #4C1D95, #7C3AED)",
      borderRadius: 20, padding: 24, color: "#fff",
      boxShadow: "0 8px 32px #7C3AED44",
    }}>
      <div style={{ fontSize: 11, fontWeight: 700, color: "#C4B5FD",
                    textTransform: "uppercase", letterSpacing: "0.5px", marginBottom: 16 }}>
        My EV Points
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 20 }}>
        <div style={{
          width: 52, height: 52, borderRadius: "50%",
          background: "linear-gradient(135deg, #2E86C1, #1565A0)",
          display: "flex", alignItems: "center", justifyContent: "center",
          fontSize: 18, fontWeight: 900, color: "#fff",
          boxShadow: `0 0 0 3px ${userBadge.color}`,
        }}>AU</div>
        <div>
          <div style={{ fontWeight: 800, fontSize: 15 }}>AUI Student</div>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 5, marginTop: 4,
            background: userBadge.bg, color: userBadge.color,
            padding: "2px 10px", borderRadius: 99, fontSize: 11, fontWeight: 800,
          }}>★ {userBadge.tier}</div>
        </div>
      </div>

      <div style={{ textAlign: "center", marginBottom: 16 }}>
        <div style={{ fontSize: 52, fontWeight: 900, lineHeight: 1,
                      letterSpacing: "-2px" }}>
          {userPts.toLocaleString()}
        </div>
        <div style={{ fontSize: 12, color: "#C4B5FD", marginTop: 4 }}>total points earned</div>
      </div>

      {nextBadge && (
        <div>
          <div style={{ display: "flex", justifyContent: "space-between",
                        fontSize: 11, color: "#DDD6FE", marginBottom: 6, fontWeight: 600 }}>
            <span>{userBadge.tier}</span>
            <span>{nextBadge.tier} at {nextBadge.min} pts</span>
          </div>
          <div style={{ height: 8, background: "#ffffff22", borderRadius: 99, overflow: "hidden" }}>
            <div style={{
              width: `${pctToNext}%`, height: "100%", borderRadius: 99,
              background: "linear-gradient(90deg, #A78BFA, #7C3AED)",
              transition: "width .8s ease",
            }} />
          </div>
          <div style={{ fontSize: 10, color: "#C4B5FD", marginTop: 5, textAlign: "right" }}>
            {nextBadge.min - userPts} pts to {nextBadge.tier}
          </div>
        </div>
      )}

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 18 }}>
        {[
          { label: "Trips",          value: "11"    },
          { label: "On-time",        value: "10/11" },
          { label: "Clean returns",  value: "9/11"  },
          { label: "Social posts",   value: "7"     },
        ].map(s => (
          <div key={s.label} style={{
            background: "#ffffff18", borderRadius: 10,
            padding: "10px 12px", textAlign: "center",
          }}>
            <div style={{ fontSize: 16, fontWeight: 900, color: "#fff" }}>{s.value}</div>
            <div style={{ fontSize: 10, color: "#C4B5FD", marginTop: 2 }}>{s.label}</div>
          </div>
        ))}
      </div>
    </div>

    {/* How to earn/lose points */}
    <div style={{
      background: "#fff", borderRadius: 20, padding: 24,
      border: "1.5px solid #E5E7EB", boxShadow: "0 2px 10px #0001",
    }}>
      <div style={{ fontSize: 15, fontWeight: 800, color: "#001833", marginBottom: 18 }}>
        How to Earn (and Lose) Points
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        {POINT_ACTIONS.map(a => (
          <div key={a.label} style={{
            display: "flex", alignItems: "center", gap: 12,
            background: a.bg, borderRadius: 12, padding: "12px 14px",
            border: `1.5px solid ${a.color}22`,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10, flexShrink: 0,
              background: "#fff", display: "flex", alignItems: "center",
              justifyContent: "center", fontSize: 16,
              boxShadow: `0 2px 8px ${a.color}33`,
            }}>{a.icon}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: "#111827", lineHeight: 1.3 }}>
                {a.label}
              </div>
              <div style={{ fontSize: 13, fontWeight: 900, color: a.color, marginTop: 3 }}>
                {a.pts}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>

  {/* ── Row 2: Badge tiers + Leaderboard ──────────────────── */}
  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>

    {/* Badge tiers */}
    <div style={{
      background: "#fff", borderRadius: 20, padding: 24,
      border: "1.5px solid #E5E7EB", boxShadow: "0 2px 10px #0001",
    }}>
      <div style={{ fontSize: 15, fontWeight: 800, color: "#001833", marginBottom: 18 }}>
        Membership Tiers
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {BADGE_TIERS.map(b => {
          const isActive = b.tier === userBadge.tier;
          return (
            <div key={b.tier} style={{
              display: "flex", alignItems: "center", gap: 14,
              background: isActive ? b.bg : "#FAFAFA",
              borderRadius: 12, padding: "12px 16px",
              border: isActive ? `2px solid ${b.color}` : "1.5px solid #E5E7EB",
              transition: "all .2s",
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: "50%", flexShrink: 0,
                background: b.bg, display: "flex", alignItems: "center",
                justifyContent: "center", fontSize: 18,
                boxShadow: isActive ? `0 0 0 3px ${b.color}` : "none",
              }}>
                {b.tier === "Bronze" ? "🥉" : b.tier === "Silver" ? "🥈"
                  : b.tier === "Gold" ? "🥇" : "💎"}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 800, fontSize: 14, color: b.color }}>
                  {b.tier}
                  {isActive && (
                    <span style={{
                      marginLeft: 8, fontSize: 10, background: b.color,
                      color: "#fff", padding: "1px 7px", borderRadius: 99, fontWeight: 700,
                    }}>YOUR TIER</span>
                  )}
                </div>
                <div style={{ fontSize: 11, color: "#6B7280", marginTop: 2 }}>
                  {b.max === 9999 ? `${b.min}+ points` : `${b.min} – ${b.max} points`}
                </div>
              </div>
              <div style={{ width: 60, height: 6, background: "#E5E7EB",
                            borderRadius: 99, overflow: "hidden" }}>
                <div style={{
                  width: isActive ? `${pctToNext}%`
                          : b.min <= userPts ? "100%" : "0%",
                  height: "100%", background: b.color, borderRadius: 99,
                }} />
              </div>
            </div>
          );
        })}
      </div>
    </div>

    {/* Leaderboard */}
    <div style={{
      background: "linear-gradient(145deg, #0F172A, #1E3A5F)",
      borderRadius: 20, padding: 24, color: "#fff",
    }}>
      <div style={{ fontSize: 15, fontWeight: 800, marginBottom: 18,
                    display: "flex", alignItems: "center", gap: 8 }}>
        <span style={{ fontSize: 18 }}>🏆</span> Campus Leaderboard
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {LEADERBOARD.map((u, i) => (
          <div key={u.rank} style={{
            display: "flex", alignItems: "center", gap: 12,
            background: u.isUser ? "#2E86C133" : "#ffffff0D",
            borderRadius: 12, padding: "10px 14px",
            border: u.isUser ? "1.5px solid #2E86C1" : "1.5px solid #ffffff11",
          }}>
            <div style={{
              width: 28, height: 28, borderRadius: "50%", flexShrink: 0,
              background: i < 3 ? rankColors[i] : "#ffffff18",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: i < 3 ? 14 : 11, fontWeight: 900,
              color: i < 3 ? "#fff" : "#94A3B8",
            }}>
              {i < 3 ? ["🥇","🥈","🥉"][i] : `#${u.rank}`}
            </div>
            <div style={{
              width: 32, height: 32, borderRadius: "50%", flexShrink: 0,
              background: u.isUser
                ? "linear-gradient(135deg, #2E86C1, #1565A0)"
                : `hsl(${u.rank * 60}, 55%, 45%)`,
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: 11, fontWeight: 800, color: "#fff",
            }}>{u.avatar}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 13,
                            color: u.isUser ? "#93C5FD" : "#F1F5F9" }}>
                {u.name}{u.isUser && <span style={{ fontSize: 10, color: "#93C5FD" }}> (you)</span>}
              </div>
              <div style={{ fontSize: 10, color: "#64748B", marginTop: 1 }}>{u.trips} trips</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontWeight: 900, fontSize: 14,
                            color: i === 0 ? "#FCD34D" : "#F1F5F9" }}>
                {u.pts.toLocaleString()}
              </div>
              <div style={{ fontSize: 10, color: "#64748B" }}>pts</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 14, fontSize: 10, color: "#475569", textAlign: "center" }}>
        Updated weekly · Spring 2026 semester
      </div>
    </div>
  </div>

  {/* ── Row 3: Campus Rewards Store ────────────────────────── */}
  <div style={{
    background: "#fff", borderRadius: 20, padding: 24,
    border: "1.5px solid #E5E7EB", boxShadow: "0 2px 10px #0001",
  }}>
    <div style={{ display: "flex", justifyContent: "space-between",
                  alignItems: "center", marginBottom: 18 }}>
      <div style={{ fontSize: 15, fontWeight: 800, color: "#001833" }}>
        Campus Rewards Store
      </div>
      <div style={{ fontSize: 12, color: "#6B7280" }}>
        Your balance: <strong style={{ color: "#7C3AED" }}>{userPts} pts</strong>
      </div>
    </div>
    <div style={{ display: "grid",
                  gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))", gap: 12 }}>
      {CAMPUS_REWARDS.map((r, i) => {
        const canClaim = userPts >= r.pts && !r.claimed;
        const locked   = userPts < r.pts;
        return (
          <div key={i}
            onClick={() => canClaim && setActiveReward(activeReward === i ? null : i)}
            style={{
              borderRadius: 14, padding: "16px 16px 14px",
              border: r.claimed ? "1.5px solid #D1FAE5"
                    : canClaim  ? "1.5px solid #7C3AED"
                    : "1.5px solid #E5E7EB",
              background: r.claimed ? "#F0FDF4"
                    : canClaim  ? "#FAF5FF"
                    : "#FAFAFA",
              cursor: canClaim ? "pointer" : "default",
              transition: "all .2s",
              opacity: locked ? 0.6 : 1,
              position: "relative", overflow: "hidden",
            }}>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 4,
              background: r.claimed ? "#D1FAE5" : canClaim ? "#EDE9FE" : "#F3F4F6",
              color: r.claimed ? "#065F46" : canClaim ? "#7C3AED" : "#9CA3AF",
              padding: "3px 9px", borderRadius: 99,
              fontSize: 11, fontWeight: 800, marginBottom: 10,
            }}>
              {r.claimed ? "✓ Claimed" : locked ? `🔒 ${r.pts} pts` : `★ ${r.pts} pts`}
            </div>
            <div style={{ fontSize: 13, fontWeight: 700, color: "#111827", lineHeight: 1.4 }}>
              {r.reward}
            </div>
            {canClaim && activeReward !== i && (
              <div style={{ marginTop: 10, fontSize: 11, fontWeight: 700, color: "#7C3AED" }}>
                Tap to redeem →
              </div>
            )}
            {activeReward === i && (
              <div style={{
                position: "absolute", inset: 0, background: "#7C3AED",
                borderRadius: 14, display: "flex", alignItems: "center",
                justifyContent: "center", flexDirection: "column", gap: 6,
                cursor: "pointer",
              }}>
                <span style={{ fontSize: 28 }}>🎉</span>
                <span style={{ fontSize: 12, fontWeight: 800, color: "#fff" }}>Redeemed!</span>
                <span style={{ fontSize: 10, color: "#C4B5FD" }}>Show this at AUI admin</span>
              </div>
            )}
          </div>
        );
      })}
    </div>
  </div>

</div>

);
}

// ══════════════════════════════════════════════════════════════════
// STATS TAB
// ══════════════════════════════════════════════════════════════════
function StatsTab() {
return (
<div style={{ display: "flex", flexDirection: "column", gap: 24 }}>

  <SectionTitle
    icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
               stroke="#fff" strokeWidth="2.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>}
    title="Sustainability & Usage Stats"
    sub="AUI Campus EV Programme · Spring 2026"
  />

  {/* Stat cards */}
  <div style={{ display: "grid",
                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 16 }}>
    {STATS.map(s => (
      <div key={s.label} style={{
        background: "linear-gradient(145deg, #F0FDF4, #DCFCE7)",
        borderRadius: 18, padding: "26px 20px",
        border: "1.5px solid #A7F3D0", textAlign: "center",
      }}>
        <div style={{ fontSize: 32, marginBottom: 10 }}>{s.icon}</div>
        <div style={{ fontSize: 30, fontWeight: 900, color: "#065F46",
                      letterSpacing: "-1px", lineHeight: 1 }}>{s.value}</div>
        <div style={{ fontSize: 13, fontWeight: 700, color: "#047857", marginTop: 8 }}>
          {s.label}
        </div>
        <div style={{ fontSize: 11, color: "#6EE7B7", marginTop: 4 }}>{s.sub}</div>
      </div>
    ))}
  </div>

  {/* Usage + Instructions */}
  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>

    {/* Fleet usage breakdown */}
    <div style={{ background: "#fff", borderRadius: 20, padding: 24,
                  border: "1.5px solid #E5E7EB", boxShadow: "0 2px 10px #0001" }}>
      <div style={{ fontSize: 15, fontWeight: 800, color: C.navy, marginBottom: 20 }}>
        Fleet Usage Breakdown
      </div>
      {[
        { label: "EX30 #1 — NAB Parking",          pct: 78, col: "#3B82F6" },
        { label: "EX30 #2 — Building 38 Parking",  pct: 55, col: "#8B5CF6" },
        { label: "EX30 #3 — Building 9 Parking",   pct: 42, col: "#10B981" },
      ].map(r => (
        <div key={r.label} style={{ marginBottom: 18 }}>
          <div style={{ display: "flex", justifyContent: "space-between",
                        fontSize: 12, fontWeight: 600, color: "#374151", marginBottom: 6 }}>
            <span>{r.label}</span>
            <span style={{ color: r.col, fontWeight: 800 }}>{r.pct}%</span>
          </div>
          <div style={{ height: 8, background: "#F3F4F6",
                        borderRadius: 99, overflow: "hidden" }}>
            <div style={{ width: `${r.pct}%`, height: "100%", background: r.col,
                          borderRadius: 99, transition: "width .8s ease" }} />
          </div>
        </div>
      ))}
      <div style={{ marginTop: 10, padding: "12px 14px", background: C.ice,
                    borderRadius: 10, fontSize: 12, color: C.mid, fontWeight: 600 }}>
        Total: 318 trips · 4,240 km driven on campus
      </div>
    </div>

    {/* How to use */}
    <div style={{ background: `linear-gradient(145deg, ${C.navy}, ${C.blue})`,
                  borderRadius: 20, padding: 24 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10,
                    marginBottom: 20 }}>
        <CheckIcon />
        <div style={{ fontSize: 15, fontWeight: 800, color: "#fff" }}>How to Use</div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {STEPS.map((step, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{
              width: 30, height: 30, borderRadius: "50%", flexShrink: 0,
              background: i === 4 ? "linear-gradient(135deg, #F59E0B, #FBBF24)" : "#ffffff18",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: 10, fontWeight: 800,
              color: i === 4 ? C.navy : "#93C5FD",
              border: i === 4 ? "none" : "1px solid #ffffff33",
            }}>
              {step.n}
            </div>
            <div style={{ fontSize: 12.5, lineHeight: 1.4,
                          color: i === 4 ? "#FDE68A" : "#E0F2FE",
                          fontWeight: i === 4 ? 700 : 400 }}>
              {step.text}
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 18, padding: "10px 14px", borderRadius: 10,
                    background: "#F59E0B22", border: "1px solid #F59E0B44",
                    fontSize: 11, color: "#FDE68A", fontWeight: 600,
                    display: "flex", alignItems: "center", gap: 6 }}>
        <span style={{ fontSize: 14 }}>★</span>
        Tag your photos with{" "}
        <strong style={{ color: "#FBBF24" }}>#VolvoLovers</strong>
        {" "}on Instagram &amp; TikTok
      </div>
    </div>
  </div>

  {/* ── Gamification ──────────────────────────────────────── */}
  <GamificationSection />

</div>

);
}

// ══════════════════════════════════════════════════════════════════
// ROOT APP
// ══════════════════════════════════════════════════════════════════
export default function App() {
const [tab, setTab] = useState("fleet");
const [selected, setSelected] = useState(1);

const goToReserve = () => setTab("reserve");

const TABS = [
{ key: "fleet", label: "Fleet", icon: "🚗" },
{ key: "reserve", label: "Reserve", icon: "📅" },
{ key: "stats", label: "Stats", icon: "📊" },
];

return (
<div style={{ minHeight: "100vh", background: "#F1F5FB",
fontFamily: "'DM Sans', 'Segoe UI', system-ui, sans-serif",
color: C.navy }}>

  {/* ── HEADER ──────────────────────────────────────────────── */}
  <header style={{
    background: `linear-gradient(110deg, ${C.navy} 0%, ${C.blue} 100%)`,
    padding: "0 32px", height: 62,
    display: "flex", alignItems: "center", justifyContent: "space-between",
    boxShadow: "0 4px 24px #00183344",
    position: "sticky", top: 0, zIndex: 100,
    gap: 16,
  }}>

    {/* Logo */}
    <div style={{ display: "flex", alignItems: "center", gap: 12, flexShrink: 0 }}>
      <div style={{ width: 36, height: 36, borderRadius: "50%", flexShrink: 0,
                    background: "linear-gradient(135deg, #fff 0%, #CBD5E1 100%)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    boxShadow: "0 2px 8px #00000033" }}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="12" r="9" stroke={C.navy} strokeWidth="2"/>
          <path d="M8 12 L12 8 L16 12" stroke={C.navy} strokeWidth="2" strokeLinecap="round"/>
          <line x1="12" y1="8" x2="12" y2="16" stroke={C.navy} strokeWidth="2" strokeLinecap="round"/>
        </svg>
      </div>
      <div>
        <div style={{ fontSize: 15, fontWeight: 900, color: "#fff",
                      letterSpacing: "-0.3px", lineHeight: 1.15 }}>
          AUI-VolvoLovers
        </div>
        <div style={{ fontSize: 10, color: "#93C5FD", fontWeight: 500, letterSpacing: "0.4px" }}>
          Campus EV Sharing
        </div>
      </div>
    </div>

    {/* Navigation tabs */}
    <nav style={{ display: "flex", gap: 4, background: "#ffffff15",
                  borderRadius: 13, padding: 4 }}>
      {TABS.map(t => (
        <button key={t.key} onClick={() => setTab(t.key)}
          style={{
            padding: "7px 20px", borderRadius: 10, border: "none",
            cursor: "pointer", fontFamily: "inherit",
            background: tab === t.key ? "#fff" : "transparent",
            color: tab === t.key ? C.navy : "#93C5FD",
            fontWeight: 700, fontSize: 13,
            boxShadow: tab === t.key ? "0 2px 8px #00000022" : "none",
            transition: "all .2s ease",
            display: "flex", alignItems: "center", gap: 6,
          }}>
          <span>{t.icon}</span>
          {t.label}
        </button>
      ))}
    </nav>

    {/* User */}
    <div style={{ display: "flex", alignItems: "center", gap: 12, flexShrink: 0 }}>
      <div style={{ background: "#1565A022", border: "1px solid #93C5FD55",
                    color: "#93C5FD", padding: "4px 12px", borderRadius: 99,
                    fontSize: 11, fontWeight: 700 }}>
        #VolvoLovers
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <div style={{ width: 33, height: 33, borderRadius: "50%", flexShrink: 0,
                      background: `linear-gradient(135deg, ${C.steel}, ${C.mid})`,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      fontSize: 13, fontWeight: 800, color: "#fff",
                      boxShadow: "0 0 0 2px #ffffff44" }}>
          AU
        </div>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: "#fff" }}>AUI Student</div>
          <div style={{ fontSize: 10, color: "#93C5FD" }}>ID: 82405</div>
        </div>
      </div>
    </div>
  </header>

  {/* ── PAGE CONTENT ────────────────────────────────────────── */}
  <main style={{ maxWidth: 1200, margin: "0 auto", padding: "30px 24px 48px" }}>
    {tab === "fleet"   && <FleetTab   selected={selected} setSelected={setSelected} goToReserve={goToReserve} />}
    {tab === "reserve" && <ReserveTab selected={selected} setSelected={setSelected} />}
    {tab === "stats"   && <StatsTab />}
  </main>

  {/* ── FOOTER ──────────────────────────────────────────────── */}
  <footer style={{ textAlign: "center", paddingBottom: 28,
                   fontSize: 11, color: "#9CA3AF" }}>
    AUI-VolvoLovers Campus EV Sharing · Al Akhawayn University in Ifrane ·
    MIS Course — Prof. M. Morad MOUHSINE · Spring 2026 ·{" "}
    <span style={{ color: C.steel, fontWeight: 600 }}>
      Powered by Volvo Maroc × AUI
    </span>
  </footer>
</div>

);
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions