Main structure.

2026-03-12 23:51:48 +01:00
commit d317eccc9e
25 changed files with 8920 additions and 0 deletions
@@ -0,0 +1,80 @@
+// src/App.tsx
+
+import { Calendar, FileText, Home as HomeIcon, Leaf, Map, ShieldAlert } from 'lucide-react';
+import { Link, Route, BrowserRouter as Router, Routes, useLocation } from 'react-router-dom';
+
+import { Documents } from './pages/Documents';
+import { FAQ } from './pages/FAQ';
+import { Home } from './pages/Home';
+import { JobInfo } from './pages/JobInfo';
+import { Schedule } from './pages/Schedule';
+
+const Admin = () => <div className="p-6"><h2>Admin Dashboard (Kräver pinkod)</h2></div>;
+
+const NavItem = ({ to, icon: Icon, label }: { to: string, icon: any, label: string }) => {
+  const location = useLocation();
+  const isActive = location.pathname === to;
+  return (
+    <Link
+      to={to}
+      className={`flex items-center px-4 py-3 whitespace-nowrap text-sm font-bold transition-all border-b-[3px] ${isActive
+        ? 'border-gold text-gold bg-ebony/30'
+        : 'border-transparent text-eggshell/80 hover:text-eggshell hover:bg-eggshell/5'
+        }`}
+    >
+      <Icon size={18} className="mr-2" strokeWidth={isActive ? 2.5 : 2} />
+      {label}
+    </Link>
+  );
+};
+
+function AppContent() {
+  return (
+    <div className="min-h-screen bg-eggshell font-sans text-ebony selection:bg-gold selection:text-ebony">
+
+      {/* Creative, vibrant header using only your colors */}
+      <header className="sticky top-0 z-50 bg-ebony shadow-md">
+        <div className="max-w-5xl mx-auto">
+          {/* App Title Bar */}
+          <div className="px-4 py-3 flex items-center justify-between">
+            <h1 className="text-xl font-black text-eggshell flex items-center tracking-tight uppercase drop-shadow-sm">
+              <Leaf className="mr-2 text-seafoam" size={20} />
+              Naturvärdarna
+            </h1>
+          </div>
+
+          {/* Scrollable Tab Navigation */}
+          <nav className="flex overflow-x-auto scrollbar-hide border-t border-eggshell/10">
+            <NavItem to="/" icon={HomeIcon} label="Hem" />
+            <NavItem to="/faq" icon={Map} label="FAQ" />
+            <NavItem to="/schedule" icon={Calendar} label="Schema" />
+            <NavItem to="/documents" icon={FileText} label="Info & Dok" />
+            <NavItem to="/admin" icon={ShieldAlert} label="Admin" />
+          </nav>
+        </div>
+      </header>
+
+      {/* Main Content Area */}
+      <main className="max-w-5xl mx-auto p-4 py-6 md:py-8">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/info" element={<JobInfo />} />
+          <Route path="/faq" element={<FAQ />} />
+          <Route path="/documents" element={<Documents />} />
+          <Route path="/schedule" element={<Schedule />} />
+          <Route path="/admin" element={<Admin />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <Router>
+      <AppContent />
+    </Router>
+  );
+}
+
+export default App;
@@ -0,0 +1,98 @@
+[
+    {
+        "category": "Alla platser",
+        "questions": [
+            {
+                "q": "Är parkeringen gratis?",
+                "a": "JA!"
+            },
+            {
+                "q": "Var får man ställa husbilen?",
+                "a": "Vid golfparkeringen längst in, Stora parkeringen längst in, Vid Mölle kapell, eller First Camp."
+            }
+        ]
+    },
+    {
+        "category": "Stora parkeringen",
+        "questions": [
+            {
+                "q": "Hur långt är det till fyren?",
+                "a": "350m."
+            },
+            {
+                "q": "Finns det någon bra kort vandringsrunda?",
+                "a": "Facit i form av förbestämda rutter med kända distanser."
+            },
+            {
+                "q": "Finns det några coola grottor i närheten?",
+                "a": "Silvergrottan, Visitgrottan (efter 15 juli), Lahibiagrottan (störst)."
+            },
+            {
+                "q": "Var ligger Naturum?",
+                "a": "Vid fyren, 350m. Här finns info, broschyrer, personal, akvarier, fågelskådning, tumlarspaning, och Kullabergsguiderna."
+            },
+            {
+                "q": "Tumalarsafari/Kullabergsguiderna?",
+                "a": "Skicka till Naturum, infodisk på insidan."
+            },
+            {
+                "q": "Var kan man tälta?",
+                "a": "Tältrutan eller i vindskydden, se karta."
+            },
+            {
+                "q": "Var får man grilla?",
+                "a": "Bara i fasta grillplatser! INGEN EGEN GRILL! Ingen grillning under eldningsförbud."
+            },
+            {
+                "q": "Var kan man bada?",
+                "a": "Se broschyrer om badplatser."
+            },
+            {
+                "q": "Vad kan man göra mer i Höganäs?",
+                "a": "Kolla in destinationskunskaps underlaget."
+            }
+        ]
+    },
+    {
+        "category": "Himmelstorp",
+        "questions": [
+            {
+                "q": "Var ligger det här Nimis stället?",
+                "a": "Avråd från att gå dit. Vill de gå ändå så tänk på skor, små barn, väder, ålder = det är brant. Vi vill inte behöva ringa räddningstjänsten."
+            },
+            {
+                "q": "Finns det någon bra vandringsrunda?",
+                "a": "Facit i form av förbestämda rutter med kända distanser."
+            },
+            {
+                "q": "Var ligger himmelstorpsgården?",
+                "a": "Bara upp för backen och till vänster längs med stigen."
+            },
+            {
+                "q": "Var parkerar man om det är fullt?",
+                "a": "Nedre parkeringen eller på björkerrödsparkering, lätt guidning dit."
+            },
+            {
+                "q": "Vart är islandshästridningen?",
+                "a": "Precis ovanför backen."
+            }
+        ]
+    },
+    {
+        "category": "Josefinelust",
+        "questions": [
+            {
+                "q": "Finns det någon bra vandringsrunda?",
+                "a": "Facit i form av förbestämda rutter med kända distanser."
+            },
+            {
+                "q": "Var ligger Ransvik?",
+                "a": "Följ vägen utå mot fyren och ta första vänster där det står skyltat mot Ransvik."
+            },
+            {
+                "q": "Var parkerar man om det är fullt?",
+                "a": "Ransviks övre parkering."
+            }
+        ]
+    }
+]
@@ -0,0 +1,83 @@
+[
+    {
+        "day": "Måndag",
+        "pilgrimsfalkarna": {
+            "time": "08:00 - 12:00",
+            "title": "Pilgrimsfalkarna",
+            "notes": "Morgonpass"
+        },
+        "tumlarna": {
+            "time": "12:00 - 16:00",
+            "title": "Tumlarna",
+            "notes": "Eftermiddagspass"
+        }
+    },
+    {
+        "day": "Tisdag",
+        "pilgrimsfalkarna": {
+            "time": "08:00 - 12:00",
+            "title": "Pilgrimsfalkarna",
+            "notes": "Morgonpass"
+        },
+        "tumlarna": {
+            "time": "12:00 - 16:00",
+            "title": "Tumlarna",
+            "notes": "Eftermiddagspass"
+        }
+    },
+    {
+        "day": "Onsdag",
+        "pilgrimsfalkarna": {
+            "time": "12:00 - 16:00",
+            "title": "Pilgrimsfalkarna",
+            "notes": "Eftermiddagspass"
+        },
+        "tumlarna": {
+            "time": "08:00 - 12:00",
+            "title": "Tumlarna",
+            "notes": "Morgonpass"
+        }
+    },
+    {
+        "day": "Torsdag",
+        "pilgrimsfalkarna": {
+            "time": "12:00 - 16:00",
+            "title": "Pilgrimsfalkarna",
+            "notes": "Eftermiddagspass"
+        },
+        "tumlarna": {
+            "time": "08:00 - 12:00",
+            "title": "Tumlarna",
+            "notes": "Morgonpass"
+        }
+    },
+    {
+        "day": "Fredag",
+        "pilgrimsfalkarna": {
+            "time": "08:00 - 12:00",
+            "title": "Pilgrimsfalkarna",
+            "notes": "Morgonpass"
+        },
+        "tumlarna": {
+            "time": "12:00 - 16:00",
+            "title": "Tumlarna",
+            "notes": "Eftermiddagspass"
+        }
+    },
+    {
+        "day": "Lördag",
+        "pilgrimsfalkarna": {
+            "time": "08:00 - 15:10",
+            "title": "Pilgrimsfalkarna",
+            "notes": "Heldagspass"
+        }
+    },
+    {
+        "day": "Söndag",
+        "tumlarna": {
+            "time": "08:00 - 15:10",
+            "title": "Tumlarna",
+            "notes": "Heldagspass"
+        }
+    }
+]
@@ -0,0 +1,18 @@
+/* src/index.css */
+
+@import "tailwindcss";
+
+@theme {
+    --color-ebony: #5e6545;
+    --color-moss: #878b5a;
+    --color-eggshell: #e7e4cf;
+    --color-gold: #d6b456;
+    --color-goldenrod: #c48d2e;
+    
+    --color-slate-teal: #456466;
+    --color-seafoam: #5B8C8A;
+}
+
+body {
+    background-color: var(--color-eggshell);
+}
@@ -0,0 +1,15 @@
+// src/main.tsx
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+import { registerSW } from 'virtual:pwa-register'
+
+registerSW({ immediate: true })
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
@@ -0,0 +1,62 @@
+// src/pages/Documents.tsx
+
+import React from 'react';
+import { Map, Droplets, ShieldAlert, Download, ExternalLink, Folder } from 'lucide-react';
+
+export const Documents: React.FC = () => {
+    const docs = [
+        { title: 'Turistkarta Kullaberg', icon: <Map size={24} />, file: '/Turistkarta - Kullaberg.pdf' },
+        { title: 'Badplatser att besöka', icon: <Droplets size={24} />, file: '/Badplatser att besöka.pdf' },
+        { title: 'Checklista Nödsituationer', icon: <ShieldAlert size={24} />, file: '/2025 Checklista vid nödsituationer Kullabergs naturreservat.docx' }
+    ];
+
+    const links = [
+        { title: 'Kullabergs Naturreservat', url: 'https://www.kullabergsnatur.se/' },
+        { title: 'Väderprognos Mölle', url: 'https://www.smhi.se' }
+    ];
+
+    return (
+        <div className="space-y-8 animate-fade-in w-full">
+            <div>
+                <h1 className="text-3xl font-black text-slate-teal tracking-tight flex items-center">
+                    <Folder className="mr-3 text-seafoam" size={32} />
+                    Info & Dokument
+                </h1>
+                <p className="text-moss font-medium mt-2 ml-11">Allt du behöver för att guida besökarna.</p>
+            </div>
+
+            <section>
+                <h2 className="text-sm font-black text-ebony/50 uppercase tracking-widest mb-4">Nedladdningar</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {docs.map((doc, idx) => (
+                        <a key={idx} href={doc.file} target="_blank" rel="noopener noreferrer"
+                            className="group flex items-center justify-between bg-white/60 backdrop-blur-sm p-5 rounded-2xl border border-white hover:-translate-y-1 hover:shadow-xl hover:shadow-moss/10 transition-all duration-300"
+                        >
+                            <div className="flex items-center text-slate-teal">
+                                <div className="bg-gradient-to-br from-seafoam to-slate-teal p-3 rounded-xl mr-4 text-eggshell shadow-inner">{doc.icon}</div>
+                                <span className="font-bold text-sm">{doc.title}</span>
+                            </div>
+                            <Download size={20} className="text-moss group-hover:text-slate-teal transition-colors" />
+                        </a>
+                    ))}
+                </div>
+            </section>
+
+            <section>
+                <h2 className="text-sm font-black text-ebony/50 uppercase tracking-widest mb-4">Användbara Länkar</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {links.map((link, idx) => (
+                        <a key={idx} href={link.url} target="_blank" rel="noopener noreferrer"
+                            className="group flex items-center justify-between bg-white/60 backdrop-blur-sm p-5 rounded-2xl border border-white hover:-translate-y-1 hover:shadow-xl hover:shadow-moss/10 transition-all duration-300"
+                        >
+                            <span className="font-bold text-slate-teal text-sm">{link.title}</span>
+                            <div className="bg-eggshell rounded-full p-2 group-hover:bg-seafoam group-hover:text-eggshell transition-colors">
+                                <ExternalLink size={16} className="text-slate-teal group-hover:text-eggshell" />
+                            </div>
+                        </a>
+                    ))}
+                </div>
+            </section>
+        </div>
+    );
+};
@@ -0,0 +1,59 @@
+// src/pages/FAQ.tsx
+
+import React, { useState } from 'react';
+import faqData from '../data/faq.json';
+import { ChevronDown, ChevronUp, MessageCircleQuestionMark } from 'lucide-react';
+
+export const FAQ: React.FC = () => {
+    const [openIndex, setOpenIndex] = useState<string | null>(null);
+
+    const toggleQuestion = (index: string) => {
+        setOpenIndex(openIndex === index ? null : index);
+    };
+
+    return (
+        <div className="w-full animate-fade-in">
+            <div className="mb-8">
+                <h1 className="text-3xl font-black text-slate-teal tracking-tight flex items-center">
+                    <MessageCircleQuestionMark className="mr-3 text-seafoam" size={32} />
+                    Veckoschema
+                </h1>
+                <p className="text-moss font-medium mt-2 ml-11">Här hittar du när vi bemannar Kullaberg.</p>
+            </div>
+
+            <div className="columns-1 lg:columns-2 gap-6 space-y-6">
+                {faqData.map((section, sIndex) => (
+                    <div key={sIndex} className="break-inside-avoid bg-white/40 backdrop-blur-md border border-white p-6 rounded-3xl shadow-lg shadow-ebony/5">
+                        <h2 className="text-lg font-black text-ebony/70 uppercase tracking-widest mb-4">
+                            {section.category}
+                        </h2>
+                        <div className="space-y-3">
+                            {section.questions.map((item, qIndex) => {
+                                const id = `${sIndex}-${qIndex}`;
+                                const isOpen = openIndex === id;
+                                return (
+                                    <div key={id} className={`rounded-2xl overflow-hidden transition-all duration-300 ${isOpen ? 'bg-white shadow-md shadow-seafoam/10' : 'bg-eggshell/50 hover:bg-white'}`}>
+                                        <button
+                                            className="w-full text-left p-4 flex justify-between items-center focus:outline-none"
+                                            onClick={() => toggleQuestion(id)}
+                                        >
+                                            <span className="font-bold text-slate-teal text-sm pr-4 leading-snug">{item.q}</span>
+                                            <div className={`p-1 rounded-full transition-colors ${isOpen ? 'bg-seafoam text-eggshell' : 'bg-transparent text-seafoam'}`}>
+                                                {isOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+                                            </div>
+                                        </button>
+                                        <div className={`transition-all duration-300 ease-in-out ${isOpen ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0 overflow-hidden'}`}>
+                                            <div className="p-4 pt-0 text-ebony font-medium text-sm leading-relaxed border-t border-ebony/5 mx-4 mt-2">
+                                                {item.a}
+                                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
@@ -0,0 +1,75 @@
+// src/pages/Home.tsx
+
+import React from 'react';
+import { AlertTriangle, PhoneCall, ArrowRight } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+export const Home: React.FC = () => {
+    return (
+        <div className="space-y-6 animate-fade-in">
+
+            {/* Welcome Banner */}
+            <div className="bg-slate-teal rounded-2xl p-6 md:p-8 shadow-lg shadow-slate-teal/10 text-eggshell">
+                <h1 className="text-3xl md:text-4xl font-black tracking-tight mb-2 drop-shadow-sm">Välkommen!</h1>
+                <p className="text-eggshell/90 font-bold text-lg">Naturvärdarna på Kullaberg — Sommar {new Date().getFullYear()}</p>
+            </div>
+
+            {/* Daily Notice Card */}
+            <div className="bg-gold rounded-2xl p-5 flex items-start shadow-md shadow-goldenrod/20 text-ebony">
+                <div className="bg-eggshell/40 p-2 rounded-xl mr-4 shrink-0">
+                    <AlertTriangle className="text-ebony" size={24} />
+                </div>
+                <div>
+                    <h3 className="font-black uppercase tracking-widest text-sm mb-1">Dagens Påminnelse</h3>
+                    <p className="text-sm font-medium leading-relaxed">
+                        Glöm inte minst 1 liter vatten, solkräm och myggmedel. Det förväntas bli mycket varmt idag!
+                    </p>
+                </div>
+            </div>
+
+            {/* Quick Action Cards */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <Link to="/schedule" className="group bg-eggshell/50 border-2 border-moss/30 rounded-2xl p-6 hover:-translate-y-1 hover:bg-moss/10 hover:border-moss/60 hover:shadow-lg transition-all duration-300">
+                    <div className="bg-seafoam/20 w-12 h-12 rounded-xl flex items-center justify-center mb-4 text-slate-teal group-hover:bg-seafoam group-hover:text-eggshell transition-colors">
+                        <ArrowRight size={24} className="group-hover:rotate-45 transition-transform" />
+                    </div>
+                    <h3 className="font-black text-ebony text-xl mb-2 uppercase tracking-wide">Ditt Schema</h3>
+                    <p className="text-sm text-ebony/70 font-medium">Kolla dina arbetspass och dagliga rundor snabbt.</p>
+                </Link>
+
+                <Link to="/faq" className="group bg-eggshell/50 border-2 border-moss/30 rounded-2xl p-6 hover:-translate-y-1 hover:bg-moss/10 hover:border-moss/60 hover:shadow-lg transition-all duration-300">
+                    <div className="bg-seafoam/20 w-12 h-12 rounded-xl flex items-center justify-center mb-4 text-slate-teal group-hover:bg-seafoam group-hover:text-eggshell transition-colors">
+                        <ArrowRight size={24} className="group-hover:rotate-45 transition-transform" />
+                    </div>
+                    <h3 className="font-black text-ebony text-xl mb-2 uppercase tracking-wide">Vanliga Frågor</h3>
+                    <p className="text-sm text-ebony/70 font-medium">Snabba svar på turisternas vanligaste funderingar.</p>
+                </Link>
+            </div>
+
+            {/* Contact Card */}
+            <div className="bg-eggshell/50 border-2 border-moss/30 rounded-2xl overflow-hidden shadow-sm">
+                <div className="bg-moss/20 px-6 py-4 flex items-center border-b-2 border-moss/30">
+                    <PhoneCall size={20} className="text-ebony mr-3" />
+                    <h3 className="font-black text-ebony uppercase tracking-widest text-sm">Snabbkontakt</h3>
+                </div>
+                <div className="p-6 space-y-4">
+                    <div className="flex justify-between items-center pb-4 border-b border-moss/20">
+                        <span className="text-base font-bold text-ebony">William Söderberg</span>
+                        <div className='flex gap-2  flex-wrap justify-end'>
+                            <a href="tel:0722470291" className="text-sm text-slate-teal font-mono font-bold bg-seafoam/20 hover:bg-seafoam/40 px-3 py-1.5 rounded-lg transition-colors">072-247 02 91</a>
+                            <a href="tel:078389355810604" className="text-sm text-slate-teal font-mono font-bold bg-seafoam/20 hover:bg-seafoam/40 px-3 py-1.5 rounded-lg transition-colors">078-389 35 58 10 604</a>
+                        </div>
+                    </div>
+                    <div className="flex justify-between items-center">
+                        <span className="text-base font-bold text-ebony">Oliver Nilsson</span>
+                        <div className='flex gap-2 flex-wrap justify-end'>
+                            <a href="tel:0727177440" className="text-sm text-slate-teal font-mono font-bold bg-seafoam/20 hover:bg-seafoam/40 px-3 py-1.5 rounded-lg transition-colors">072-717 74 40</a>
+                            <a href="tel:078389355810605" className="text-sm text-slate-teal font-mono font-bold bg-seafoam/20 hover:bg-seafoam/40 px-3 py-1.5 rounded-lg transition-colors">078-389 35 58 10 605</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    );
+};
@@ -0,0 +1,45 @@
+// src/pages/Info.tsx
+
+import React from 'react';
+
+export const JobInfo: React.FC = () => {
+    return (
+        <div className="p-4 max-w-md mx-auto space-y-6">
+            <h1 className="text-2xl font-bold text-green-800">Jobbinfo & Regler</h1>
+
+            <section className="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
+                <h2 className="text-lg font-bold text-gray-800 mb-2">Förväntningar</h2>
+                <p className="text-sm text-gray-600 mb-2">
+                    Vi förväntar oss att du tar ansvar, visar respekt för både natur och varandra, samt gör ditt bästa med dina arbetsuppgifter.
+                </p>
+                <ul className="list-disc pl-5 text-sm text-gray-600 space-y-1">
+                    <li><strong>Period 1:</strong> Start 23 juni kl 08:10 (Buss station Mölle)</li>
+                    <li><strong>Period 2:</strong> Start 7 juli kl 08:10</li>
+                </ul>
+            </section>
+
+            <section className="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
+                <h2 className="text-lg font-bold text-gray-800 mb-2">Daglig Utrustning</h2>
+                <ul className="list-disc pl-5 text-sm text-gray-600 space-y-2">
+                    <li>Bra promenadskor (du kommer gå mycket!)</li>
+                    <li>Oömma och väderanpassade kläder</li>
+                    <li>En bekväm ryggsäck</li>
+                    <li>Egen lunch (ingen tillgång till kyl/mikro)</li>
+                    <li>Minst 1 liter vatten</li>
+                    <li>Myggmedel & Solkräm</li>
+                </ul>
+            </section>
+
+            <section className="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
+                <h2 className="text-lg font-bold text-gray-800 mb-2">Exempel på uppgifter</h2>
+                <ul className="list-disc pl-5 text-sm text-gray-600 space-y-1">
+                    <li>Parkeringsguide</li>
+                    <li>Naturvägledare för besökare</li>
+                    <li>Plocka skräp & ta bort invasiva växter</li>
+                    <li>Städa anläggningar</li>
+                    <li>Allmänt underhåll (olja skyltar, fixa staket)</li>
+                </ul>
+            </section>
+        </div>
+    );
+};
@@ -0,0 +1,205 @@
+// src/pages/Schedule.tsx
+
+import React, { useRef } from 'react';
+import scheduleData from '../data/schedule.json';
+import { Clock, CalendarRange } from 'lucide-react';
+
+// --- Helper Functions ---
+
+// Bulletproof parser: Finds the times regardless of spaces or dashes!
+const parseTimeBlock = (timeStr: string) => {
+    if (!timeStr || timeStr === 'Ledig') return null;
+
+    // Scans the string and extracts any "HH:MM" patterns
+    const matches = timeStr.match(/(\d{1,2}):(\d{2})/g);
+    if (!matches || matches.length < 2) return null;
+
+    const parse = (t: string) => {
+        const [h, m] = t.split(':').map(Number);
+        return h + (m / 60);
+    };
+
+    return { start: parse(matches[0]), end: parse(matches[1]) };
+};
+
+// Checks if the two time blocks actually collide
+const checkOverlap = (time1?: string, time2?: string) => {
+    const t1 = time1 ? parseTimeBlock(time1) : null;
+    const t2 = time2 ? parseTimeBlock(time2) : null;
+    if (!t1 || !t2) return false;
+
+    return t1.start < t2.end && t1.end > t2.start;
+};
+
+
+// --- Types & Components ---
+
+interface ShiftData {
+    time: string;
+    title?: string;
+    notes?: string;
+}
+
+interface ShiftBlockProps {
+    team: 'PF' | 'TU';
+    data: ShiftData;
+    pos: { top: number; height: number };
+    isOverlapping: boolean;
+}
+
+// Reusable Component for the Event Cards
+const ShiftBlock: React.FC<ShiftBlockProps> = ({ team, data, pos, isOverlapping }) => {
+    const isPF = team === 'PF';
+
+    // Calculate layout based on overlap
+    const widthClasses = isOverlapping
+        ? isPF ? "left-1 right-1/2 mr-0.5" : "left-1/2 right-1 ml-0.5"
+        : "left-1 right-1";
+
+    // Team-specific styling
+    const bgClasses = isPF
+        ? "bg-gradient-to-br from-ebony to-moss border-moss"
+        : "bg-gradient-to-br from-seafoam to-slate-teal border-slate-teal";
+
+    const textMain = isPF ? "text-eggshell" : "text-eggshell";
+    const textMuted = isPF ? "text-eggshell/80" : "text-eggshell/90";
+    const notesBg = isPF ? "bg-eggshell/30 border-seafoam/5" : "bg-ebony/20 border-eggshell/10";
+    const fallbackTitle = isPF ? "PF" : "TU";
+
+    return (
+        <div
+            // Removed scale on hover! Added brightness-105 for a safe, non-clipping hover effect.
+            className={`absolute ${widthClasses} ${bgClasses} rounded-lg p-1.5 flex flex-col overflow-hidden shadow-sm border cursor-pointer transition-all hover:brightness-105 hover:shadow-md`}
+            style={{ top: `${pos.top}px`, height: `${pos.height}px` }}
+        >
+            <p className={`text-[10px] font-black ${textMain} uppercase tracking-wide leading-tight truncate`}>
+                {data.title || fallbackTitle}
+            </p>
+            <p className={`text-[9px] font-bold ${textMuted} flex items-center mt-0.5 whitespace-nowrap`}>
+                <Clock size={8} className="mr-0.5 shrink-0" />
+                <span className="truncate">{data.time}</span>
+            </p>
+            {data.notes && pos.height > 50 && (
+                <div className={`mt-1 ${notesBg} p-1 rounded-md border`}>
+                    <p className={`text-[9px] font-medium ${textMain} leading-tight truncate`}>
+                        {data.notes}
+                    </p>
+                </div>
+            )}
+        </div>
+    );
+};
+
+
+// --- Main Schedule View ---
+
+export const Schedule: React.FC = () => {
+    const startHour = 7;
+    const endHour = 17;
+    const hours = Array.from({ length: endHour - startHour + 1 }, (_, i) => startHour + i);
+    const PIXELS_PER_HOUR = 60;
+
+    const GRID_PADDING_TOP = 24;
+    const TOTAL_GRID_HEIGHT = (hours.length * PIXELS_PER_HOUR) + GRID_PADDING_TOP;
+
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const calculatePosition = (timeStr: string) => {
+        const t = parseTimeBlock(timeStr);
+        if (!t) return null;
+
+        const topOffset = (t.start - startHour) * PIXELS_PER_HOUR;
+        const duration = (t.end - t.start) * PIXELS_PER_HOUR;
+
+        return { top: topOffset + GRID_PADDING_TOP + 1, height: duration - 2 };
+    };
+
+    return (
+        <div className="space-y-4 animate-fade-in w-full">
+            <div>
+                <h1 className="text-3xl font-black text-slate-teal tracking-tight flex items-center">
+                    <CalendarRange className="mr-3 text-seafoam" size={32} />
+                    Veckoschema
+                </h1>
+                <p className="text-moss font-medium mt-2 ml-11">Här hittar du när vi bemannar Kullaberg.</p>
+            </div>
+
+            <div className="bg-eggshell border-2 border-slate-teal/20 rounded-2xl shadow-sm overflow-hidden flex flex-col max-h-[65vh] h-max min-h-125">
+                <div className="flex-1 overflow-auto scrollbar-hide" ref={containerRef}>
+                    <div className="flex min-w-200 w-full">
+
+                        {/* Sticky Time Column */}
+                        <div className="sticky left-0 z-20 w-18 flex-none bg-eggshell border-r-2 border-slate-teal/10 shadow-[2px_0_5px_rgba(0,0,0,0.02)]">
+                            <div className="sticky top-0 z-30 h-12 border-b-2 border-slate-teal/10 bg-eggshell"></div>
+                            <div className="relative w-full" style={{ height: `${TOTAL_GRID_HEIGHT}px` }}>
+                                {hours.map((hour, i) => (
+                                    <div key={hour} className="absolute w-full flex justify-end pr-3" style={{ top: `${i * PIXELS_PER_HOUR + GRID_PADDING_TOP}px` }}>
+                                        <span className="text-[11px] font-bold text-slate-teal -mt-2 bg-eggshell px-1">
+                                            {hour.toString().padStart(2, '0')}:00
+                                        </span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* Grid Area */}
+                        <div className="flex-auto relative">
+                            {/* Sticky Day Headers */}
+                            <div className="sticky top-0 z-10 flex h-12 border-b-2 border-slate-teal/10 bg-eggshell">
+                                {scheduleData.map((d) => (
+                                    <div key={d.day} className="flex-1 flex items-center justify-center border-l-2 border-slate-teal/5 first:border-l-0 min-w-25">
+                                        <span className="text-xs font-black text-ebony uppercase tracking-widest">{d.day.substring(0, 3)}</span>
+                                    </div>
+                                ))}
+                            </div>
+
+                            {/* Main Grid Canvas */}
+                            <div className="relative w-full" style={{ height: `${TOTAL_GRID_HEIGHT}px` }}>
+                                <div className="absolute inset-0 z-0">
+                                    {hours.map((hour, i) => (
+                                        <div key={hour} className="absolute w-full border-t border-slate-teal/10" style={{ top: `${i * PIXELS_PER_HOUR + GRID_PADDING_TOP}px`, height: `${PIXELS_PER_HOUR}px` }} />
+                                    ))}
+                                </div>
+
+                                {/* Vertical Columns & Blocks */}
+                                <div className="absolute inset-0 flex z-0">
+                                    {scheduleData.map((d, colIndex) => {
+                                        // Type casting here assumes scheduleData is typed loosely.
+                                        const pfData = d.pilgrimsfalkarna as ShiftData | undefined;
+                                        const tuData = d.tumlarna as ShiftData | undefined;
+
+                                        const hasPF = !!(pfData && pfData.time && pfData.time !== 'Ledig');
+                                        const hasTU = !!(tuData && tuData.time && tuData.time !== 'Ledig');
+                                        const isOverlapping = hasPF && hasTU && checkOverlap(pfData.time, tuData.time);
+
+                                        return (
+                                            <div key={colIndex} className="flex-1 border-l border-slate-teal/10 relative min-w-25">
+                                                {/* Pilgrimsfalkarna Component */}
+                                                {hasPF && (() => {
+                                                    const pos = calculatePosition(pfData.time);
+                                                    return pos ? <ShiftBlock team="PF" data={pfData} pos={pos} isOverlapping={isOverlapping} /> : null;
+                                                })()}
+
+                                                {/* Tumlarna Component */}
+                                                {hasTU && (() => {
+                                                    const pos = calculatePosition(tuData.time);
+                                                    return pos ? <ShiftBlock team="TU" data={tuData} pos={pos} isOverlapping={isOverlapping} /> : null;
+                                                })()}
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Legend */}
+            <div className="flex items-center justify-center space-x-6 py-2 text-xs font-bold text-slate-teal">
+                <span className="flex items-center"><div className="w-3 h-3 bg-linear-to-br from-ebony to-moss rounded-full mr-2 shadow-sm"></div> Pilgrimsfalkarna</span>
+                <span className="flex items-center"><div className="w-3 h-3 bg-linear-to-br from-seafoam to-slate-teal rounded-full mr-2 shadow-sm"></div> Tumlarna</span>
+            </div>
+        </div>
+    );
+};
@@ -0,0 +1,4 @@
+// src/vite-env.d.ts
+
+/// <reference types="vite-plugin-pwa/client" />
+/// <reference types="vite/client" />