import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInAnonymously, 
  signInWithCustomToken, 
  onAuthStateChanged,
  signInWithEmailAndPassword,
  signOut
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  onSnapshot,
  addDoc,
  deleteDoc,
  updateDoc,
  doc,
  serverTimestamp
} from 'firebase/firestore';
import { 
  PlayCircle, Moon, Sun, ArrowRight, Download, 
  Linkedin, Youtube, Instagram, MessageSquare, Mail, Music, BadgeCheck, 
  Volume2, Clock, Zap, ChevronDown, Users, Sparkles, Feather, Camera, ArrowLeft, X, Share2,
  MapPin, PenTool, Image as ImageIcon, Radio, Plus, Trash2, Send, Layout, Settings, Terminal, Lock, Unlock, ShieldAlert, LogOut
} from 'lucide-react';

// --- CONFIGURATION ---
const ADMIN_EMAIL = "howdy@alexwattsblog.com"; 
const PROFILE_PHOTO_URL = "https://lh3.googleusercontent.com/d/1_tPRnlXO4VGG9cVZD9lDnZSq-e6jpnsR";

// --- FIREBASE SETUP ---
// Integrated with your Rogue Rocket credentials from screenshot
const firebaseConfig = typeof __firebase_config !== 'undefined' 
  ? JSON.parse(__firebase_config) 
  : {
      apiKey: "AIzaSyDWhsce7nBSAOkC00GN3IGY4_NOHa0w05E",
      authDomain: "rogue-rocket.firebaseapp.com",
      projectId: "rogue-rocket",
      storageBucket: "rogue-rocket.firebasestorage.app",
      messagingSenderId: "622357995671",
      appId: "1:622357995671:web:7365bf49e32a75ea7309d2",
      measurementId: "G-JGQTTPЕ0KH"
    };

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'rogue-rocket-prod';

const MOCK_DATA = [
  { date: '2026-04-26T23:00:00', location: 'Freshwater Shoreline', title: '', content: '<p>Found a gluten-free loaf in a tiny bakery that actually had structural integrity. Didn’t even turn into sawdust when looked at. A genuine Sunday&nbsp;miracle. 🍞✨</p>', tldr: 'Found edible GF bread. The bar is low, but the joy is&nbsp;high.', format: 'status' },
  { date: '2026-04-24T14:15:00', location: 'In the Studio', title: 'ADHD, AI, and Cognitive Prosthetics', content: '<p>Stories shouldn\'t be transfixed on AABB or ABBA structure. Zoning in on the nuances of details is what paints the scene. When looking at how neurodivergent minds interact with AI in a remote setting, the little things matter the most. Hyper-focus isn’t a bug; it’s the feature that makes AI actually useful.</p><p>Using AI as a cognitive prosthetic allows for the outsourcing of executive function fatigue. Instead of wrestling with the "how," focus shifts entirely to the "what." This isn\'t about shortcuts—it\'s about clearing the mental noise to reach the destination&nbsp;faster.</p>', tldr: 'Neurodivergent folks use AI as a cognitive prosthetic. Nuance is the&nbsp;focus.', format: 'standard' },
  { date: '2026-04-22T08:30:00', location: 'West Coast', title: 'The Solitude of the Shore', content: '<p>Captured this morning on the west coast. Specific kinds of silence exist only on an island before the first ferry arrives. Best thinking happens&nbsp;here.</p>', tldr: 'Early morning photography serves as a form of&nbsp;meditation.', format: 'image', featured_image: 'https://images.unsplash.com/photo-1505144808419-1957a94ca61e?auto=format&fit=crop&w=800&q=80' }
];

const MOCK_TOUR = [
  { date: '2026-10-12', city: 'London, UK', event: 'Neurodiversity in Tech', status: 'Sold Out', link: '' },
  { date: '2026-11-05', city: 'Berlin, DE', event: 'AI & Executive Function', status: 'Tickets', link: 'https://example.com' },
  { date: '2027-01-18', city: 'Austin, TX', event: 'Leadership Summit', status: 'Tickets', link: 'https://example.com' }
];

const getSnippet = (html) => {
  if (!html) return '';
  const text = html.replace(/<[^>]*>?/gm, '');
  const words = text.split(/\s+/);
  if (words.length <= 22) return html;
  return words.slice(0, 22).join(' ') + '...';
};

const EYEBROW_PHRASES = [
  "Alex Watts is just casually fine",
  "Alex Watts is risking it all for a pastry",
  "Alex Watts is avoiding long paragraphs",
  "Alex Watts is cutting through the noise",
  "Alex Watts has 73 browser tabs open",
  "Alex Watts is operating on a different system"
];

const FILTERS = [
  { id: 'all', label: 'All' },
  { id: 'essays', label: 'Essays' },
  { id: 'notes', label: 'Notes' },
];

export default function App() {
  const [user, setUser] = useState(null);
  const [view, setView] = useState('public'); 
  const [posts, setPosts] = useState([]);
  const [tourDates, setTourDates] = useState([]);
  const [activeFilter, setActiveFilter] = useState('all');
  const [isDarkMode, setIsDarkMode] = useState(true);
  const [openTldrs, setOpenTldrs] = useState({});
  const [selectedPost, setSelectedPost] = useState(null);
  const [eyebrowText, setEyebrowText] = useState("");
  const [isPlaying, setIsPlaying] = useState(false);
  const [isBookingExpanded, setIsBookingExpanded] = useState(false);

  const [authEmail, setAuthEmail] = useState("");
  const [authPass, setAuthPass] = useState("");
  const [authError, setAuthError] = useState("");
  const [isLoggingIn, setIsLoggingIn] = useState(false);

  const [newPost, setNewPost] = useState({ title: '', content: '', tldr: '', format: 'standard', location: 'Freshwater Shoreline' });
  const [newTour, setNewTour] = useState({ date: '', city: '', event: '', status: 'Tickets', link: '' });

  useEffect(() => {
    const initAuth = async () => {
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
        await signInWithCustomToken(auth, __initial_auth_token);
      } else {
        await signInAnonymously(auth);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (u) => {
      setUser(u);
    });
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (!user) return;

    const postsRef = collection(db, 'artifacts', appId, 'public', 'data', 'posts');
    const unsubPosts = onSnapshot(postsRef, (snapshot) => {
      const docs = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
      setPosts(docs.sort((a, b) => new Date(b.date) - new Date(a.date)));
    }, (err) => console.error("Posts error:", err));

    const tourRef = collection(db, 'artifacts', appId, 'public', 'data', 'tour_dates');
    const unsubTour = onSnapshot(tourRef, (snapshot) => {
      const docs = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
      setTourDates(docs.sort((a, b) => new Date(a.date) - new Date(b.date)));
    }, (err) => console.error("Tour error:", err));

    return () => {
      unsubPosts();
      unsubTour();
    };
  }, [user]);

  useEffect(() => {
    if (selectedPost || view === 'admin') window.scrollTo({ top: 0, behavior: 'smooth' });
    if (!eyebrowText) setEyebrowText(EYEBROW_PHRASES[Math.floor(Math.random() * EYEBROW_PHRASES.length)]);
  }, [selectedPost, view]);

  const toggleAudio = () => setIsPlaying(!isPlaying);

  const handleTerminalLogin = async (e) => {
    e.preventDefault();
    setAuthError("");
    setIsLoggingIn(true);
    try {
      await signInWithEmailAndPassword(auth, authEmail, authPass);
      setAuthPass("");
      setAuthEmail("");
    } catch (err) {
      setAuthError("Unauthorized uplink. Credentials rejected.");
      console.error(err);
    } finally {
      setIsLoggingIn(false);
    }
  };

  const handleLogout = async () => {
    await signOut(auth);
    await signInAnonymously(auth);
    setView('public');
  };

  const filteredPosts = useMemo(() => {
    return posts.filter(post => {
      if (activeFilter === 'all') return true;
      if (activeFilter === 'notes') return post.format === 'status';
      if (activeFilter === 'essays') return post.format === 'standard';
      return true;
    });
  }, [posts, activeFilter]);

  const handleContactClick = (e) => {
    e.preventDefault();
    window.location.href = `mailto:howdy@alexwattsblog.com?subject=Speaking Inquiry`;
  };

  const broadcastPost = async () => {
    if (!newPost.content || !isPilot) return;
    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'posts'), {
        ...newPost,
        date: new Date().toISOString(),
        timestamp: serverTimestamp()
      });
      setNewPost({ title: '', content: '', tldr: '', format: 'standard', location: 'Freshwater Shoreline' });
    } catch (e) { console.error(e); }
  };

  const broadcastTour = async () => {
    if (!newTour.date || !newTour.event || !isPilot) return;
    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'tour_dates'), newTour);
      setNewTour({ date: '', city: '', event: '', status: 'Tickets', link: '' });
    } catch (e) { console.error(e); }
  };

  const deleteItem = async (col, id) => {
    if (!isPilot) return;
    try {
      await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', col, id));
    } catch (e) { console.error(e); }
  };

  const seedDatabase = async () => {
    if (!isPilot) return;
    try {
      for (const p of MOCK_DATA) {
        await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'posts'), p);
      }
      for (const t of MOCK_TOUR) {
        await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'tour_dates'), t);
      }
    } catch (e) { console.error(e); }
  };

  const calculateReadTime = (content) => Math.max(1, Math.ceil((content || "").split(' ').length / 200));

  const isPilot = user && !user.isAnonymous && user.email === ADMIN_EMAIL;

  const PostDetail = ({ post, onBack }) => (
    <div className="animate-in-framer max-w-2xl pb-32">
      <button onClick={onBack} className="group flex items-center gap-3 mb-12 text-[10px] font-bold text-slate-400 hover:text-[#ff5241] uppercase tracking-[0.3em] transition-colors">
        <div className="relative p-2 rounded-full bg-slate-100 dark:bg-white/5 group-hover:bg-[#ff5241]/10">
          <ArrowLeft size={16} className="group-hover:-translate-x-1 transition-transform" />
        </div>
        Back to stream
      </button>
      <div className="flex items-center gap-4 mb-8">
        <span className="px-3 py-1 bg-[#ff5241]/10 text-[#ff5241] text-[10px] font-bold uppercase tracking-[0.2em] rounded-md">{post.format === 'status' ? 'Note' : post.format}</span>
        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{new Date(post.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}</span>
      </div>
      {post.title && <h1 className="text-4xl sm:text-6xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-10 leading-[1.1] text-balance">{post.title}</h1>}
      <div className="prose prose-slate dark:prose-invert max-w-none text-lg sm:text-xl leading-relaxed text-slate-700 dark:text-slate-300 font-normal space-y-8 text-balance" dangerouslySetInnerHTML={{ __html: post.content }} />
    </div>
  );

  return (
    <div className={isDarkMode ? 'dark' : ''}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;1,400;1,500&display=swap');
        * { font-family: 'Poppins', sans-serif; box-sizing: border-box; }
        .font-serif-brand { font-family: 'Lora', serif !important; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        @keyframes reveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes subtleFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .animate-in { animation: reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
        .animate-in-framer { animation: subtleFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .cta-pulse { animation: pulse-ring 2s infinite; }
        @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 82, 65, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(255, 82, 65, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 82, 65, 0); } }
        @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
        .animate-shake { animation: shake 0.2s ease-in-out infinite; }
      `}</style>

      <div className="min-h-screen bg-slate-50 dark:bg-[#050505] text-slate-900 dark:text-slate-100 transition-colors duration-500 relative overflow-x-hidden flex flex-col selection:bg-[#ff5241] selection:text-white">
        
        <nav className="sticky top-0 z-50 bg-white/80 dark:bg-[#050505]/80 backdrop-blur-2xl border-b border-slate-200 dark:border-white/5">
          <div className="max-w-5xl mx-auto px-6 h-20 flex items-center justify-between">
            <button onClick={() => { setView('public'); setSelectedPost(null); }} className="flex items-center group cursor-pointer focus:outline-none">
              <span className="font-bold text-xl tracking-tighter">AlexWattsBlog</span>
              <BadgeCheck size={18} fill="#ff5241" className="text-white dark:text-black ml-1" />
            </button>
            <div className="flex items-center gap-4">
              {isPilot && view === 'admin' && (
                <button onClick={handleLogout} className="flex items-center gap-2 text-[10px] font-bold text-[#ff5241] uppercase tracking-[0.2em] px-4 py-2 bg-[#ff5241]/10 rounded-full hover:bg-[#ff5241]/20 transition-colors">
                  <LogOut size={12} /> Log Out
                </button>
              )}
              {isPilot && view === 'public' && (
                <button onClick={() => setView('admin')} className="text-[10px] font-bold text-[#ff5241] uppercase tracking-[0.2em] px-4 py-2 bg-[#ff5241]/10 rounded-full">Pilot Deck</button>
              )}
              <button onClick={() => setIsDarkMode(!isDarkMode)} className="p-2 text-slate-400 hover:text-[#ff5241] rounded-full transition-all active:scale-90">
                {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
              </button>
            </div>
          </div>
        </nav>

        <main className="max-w-5xl mx-auto px-6 py-12 sm:py-24 relative z-10 flex-grow w-full">
          
          {view === 'admin' ? (
            !isPilot ? (
              <div className="flex flex-col items-center justify-center min-h-[50vh] animate-in">
                <div className="bg-white/[0.02] border border-slate-200 dark:border-white/5 p-12 rounded-[2.5rem] max-w-md w-full text-center shadow-2xl relative overflow-hidden">
                  <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[#ff5241] to-transparent"></div>
                  
                  <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-8 transition-colors ${authError ? 'bg-red-500/20 text-red-500 animate-shake' : 'bg-[#ff5241]/10 text-[#ff5241]'}`}>
                    {authError ? <ShieldAlert size={28} /> : <Lock size={28} />}
                  </div>
                  <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2 tracking-tight uppercase">Pilot Identity Required</h2>
                  <p className="text-slate-500 text-sm mb-10">Verification required to access the Rogue Rocket broadcasting deck.</p>
                  
                  <form onSubmit={handleTerminalLogin} className="space-y-4">
                    <div className="space-y-2">
                      <input 
                        type="email" 
                        placeholder="PILOT EMAIL" 
                        className="w-full bg-white dark:bg-[#0a0a0a] border border-slate-200 dark:border-white/10 rounded-xl p-4 text-center text-sm font-medium tracking-widest focus:border-[#ff5241] outline-none transition-all text-slate-900 dark:text-white"
                        value={authEmail}
                        onChange={e => setAuthEmail(e.target.value)}
                        required
                      />
                      <input 
                        type="password" 
                        placeholder="PILOT PASSWORD" 
                        className="w-full bg-white dark:bg-[#0a0a0a] border border-slate-200 dark:border-white/10 rounded-xl p-4 text-center text-sm font-medium tracking-[0.4em] focus:border-[#ff5241] outline-none transition-all text-slate-900 dark:text-white"
                        value={authPass}
                        onChange={e => setAuthPass(e.target.value)}
                        required
                      />
                    </div>
                    {authError && <p className="text-red-500 text-[10px] font-bold uppercase tracking-widest">{authError}</p>}
                    <button type="submit" disabled={isLoggingIn} className="w-full py-5 bg-[#ff5241] text-white font-black uppercase tracking-widest rounded-2xl hover:bg-[#ff5241]/90 disabled:opacity-50 transition-all flex items-center justify-center gap-3 mt-4">
                      {isLoggingIn ? "Establishing..." : <><Unlock size={18} /> Establish Uplink</>}
                    </button>
                    <button type="button" onClick={() => setView('public')} className="text-[10px] font-bold text-slate-500 uppercase tracking-widest hover:text-[#ff5241] transition-colors mt-4">Abort Access</button>
                  </form>
                </div>
              </div>
            ) : (
              <div className="animate-in-framer space-y-20">
                <div className="flex flex-col sm:flex-row items-center justify-between border-b border-slate-200 dark:border-white/5 pb-8 gap-6">
                  <div>
                    <h2 className="text-4xl font-black text-slate-900 dark:text-white uppercase tracking-tight italic">Pilot Deck</h2>
                    <p className="text-slate-500 font-medium text-sm mt-2">Managing signals for {user.email} • Isle of Wight</p>
                  </div>
                  <div className="flex items-center gap-4">
                    <button onClick={seedDatabase} className="flex items-center gap-2 text-[10px] font-bold text-slate-400 hover:text-[#ff5241] transition-colors uppercase tracking-widest border border-slate-200 dark:border-white/10 px-4 py-2 rounded-xl">
                      <Plus size={14} /> Seed Data
                    </button>
                    <button onClick={() => setView('public')} className="flex items-center gap-2 text-[10px] font-bold text-slate-900 dark:text-white uppercase tracking-widest bg-white dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 px-4 py-2 rounded-xl border border-slate-200 dark:border-white/10">
                      View Site
                    </button>
                  </div>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
                  <div className="space-y-8 bg-white dark:bg-white/[0.02] p-8 rounded-[2rem] border border-slate-200 dark:border-white/5 shadow-xl">
                    <h3 className="flex items-center gap-3 text-xl font-bold text-slate-900 dark:text-white tracking-tight"><PenTool size={20} className="text-[#ff5241]" /> Broadcast Signal</h3>
                    <div className="space-y-4">
                      <input type="text" placeholder="Post Title (Optional)" className="w-full bg-slate-50 dark:bg-[#0a0a0a] border border-slate-200 dark:border-white/10 rounded-xl p-4 text-sm focus:border-[#ff5241] outline-none text-slate-900 dark:text-white" value={newPost.title} onChange={e => setNewPost({...newPost, title: e.target.value})} />
                      <select className="w-full bg-slate-50 dark:bg-[#0a0a0a] border border-slate-200 dark:border-white/10 rounded-xl p-4 text-sm focus:border-[#ff5241] outline-none text-slate-900 dark:text-white" value={newPost.format} onChange={e => setNewPost({...newPost, format: e.target.value})}>
                        <option value="standard">Standard Essay</option>
                        <option value="status">Shoreline Note (Italic)</option>
                      </select>
                      <textarea placeholder="The Content (HTML supported)" className="w-full bg-slate-50 dark:bg-[#0a0a0a] border border-slate-200 dark:border-white/10 rounded-xl p-4 text-sm h-48 focus:border-[#ff5241] outline-none text-slate-900 dark:text-white" value={newPost.content} onChange={e => setNewPost({...newPost, content: e.target.value})} />
                      <input type="text" placeholder="TL;DR Snapshot" className="w-full bg-slate-50 dark:bg-[#0a0a0a] border border-slate-200 dark:border-white/10 rounded-xl p-4 text-sm focus:border-[#ff5241] outline-none text-slate-900 dark:text-white" value={newPost.tldr} onChange={e => setNewPost({...newPost, tldr: e.target.value})} />
                      <button onClick={broadcastPost} className="w-full py-4 bg-[#ff5241] text-white font-bold rounded-xl flex items-center justify-center gap-3 hover:bg-[#ff5241]/90 transition-all shadow-lg shadow-[#ff5241]/20">
                        <Send size={18} /> Broadcast Now
                      </button>
                    </div>
                  </div>

                  <div className="space-y-8 bg-white dark:bg-white/[0.02] p-8 rounded-[2rem] border border-slate-200 dark:border-white/5 shadow-xl">
                    <h3 className="flex items-center gap-3 text-xl font-bold text-slate-900 dark:text-white tracking-tight"><Radio size={20} className="text-[#ff5241]" /> Live Signals</h3>
                    <div className="grid grid-cols-2 gap-4">
                      <input type="date" className="bg-slate-50 dark:bg-[#0a0a0a] border border-slate-200 dark:border-white/10 rounded-xl p-4 text-sm focus:border-[#ff5241] outline-none text-slate-900 dark:text-white" value={newTour.date} onChange={e => setNewTour({...newTour, date: e.target.value})} />
                      <input type="text" placeholder="City" className="bg-slate-50 dark:bg-[#0a0a0a] border border-slate-200 dark:border-white/10 rounded-xl p-4 text-sm focus:border-[#ff5241] outline-none text-slate-900 dark:text-white" value={newTour.city} onChange={e => setNewTour({...newTour, city: e.target.value})} />
                    </div>
                    <input type="text" placeholder="Event Name" className="w-full bg-slate-50 dark:bg-[#0a0a0a] border border-slate-200 dark:border-white/10 rounded-xl p-4 text-sm focus:border-[#ff5241] outline-none text-slate-900 dark:text-white" value={newTour.event} onChange={e => setNewTour({...newTour, event: e.target.value})} />
                    <input type="text" placeholder="Ticket Link" className="w-full bg-slate-50 dark:bg-[#0a0a0a] border border-slate-200 dark:border-white/10 rounded-xl p-4 text-sm focus:border-[#ff5241] outline-none text-slate-900 dark:text-white" value={newTour.link} onChange={e => setNewTour({...newTour, link: e.target.value})} />
                    <button onClick={broadcastTour} className="w-full py-4 bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold rounded-xl flex items-center justify-center gap-3 hover:opacity-90 transition-all">
                      <Plus size={18} /> Add Show
                    </button>

                    <div className="space-y-3 mt-10 max-h-64 overflow-y-auto pr-2 no-scrollbar">
                      {tourDates.map(t => (
                        <div key={t.id} className="flex items-center justify-between p-4 bg-slate-50 dark:bg-[#0a0a0a] border border-slate-200 dark:border-white/5 rounded-xl">
                          <div className="text-xs">
                            <span className="font-bold text-slate-900 dark:text-white">{t.event}</span>
                            <span className="block text-slate-500 mt-1">{t.city} • {t.date}</span>
                          </div>
                          <button onClick={() => deleteItem('tour_dates', t.id)} className="p-2 text-slate-300 dark:text-white/20 hover:text-red-500 transition-colors"><Trash2 size={14} /></button>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                <div className="space-y-8 bg-white dark:bg-white/[0.02] p-8 rounded-[2rem] border border-slate-200 dark:border-white/5 shadow-xl">
                  <h3 className="text-xl font-bold text-slate-900 dark:text-white uppercase tracking-tight italic">Transmission Archive</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {posts.map(p => (
                      <div key={p.id} className="p-5 bg-slate-50 dark:bg-[#0a0a0a] border border-slate-200 dark:border-white/5 rounded-2xl group flex flex-col justify-between">
                        <div>
                          <div className="flex justify-between items-start mb-4">
                            <span className={`text-[9px] font-bold uppercase tracking-widest px-2 py-1 rounded-md ${p.format === 'status' ? 'bg-[#ff5241]/10 text-[#ff5241]' : 'bg-blue-500/10 text-blue-400'}`}>
                              {p.format === 'status' ? 'Note' : 'Essay'}
                            </span>
                            <button onClick={() => deleteItem('posts', p.id)} className="text-slate-300 dark:text-white/10 hover:text-red-500 p-1 transition-colors"><Trash2 size={16} /></button>
                          </div>
                          <h4 className="font-bold text-slate-900 dark:text-white truncate mb-2 tracking-tight">{p.title || "Untitled Note"}</h4>
                          <div className="text-xs text-slate-500 line-clamp-3" dangerouslySetInnerHTML={{ __html: p.content }} />
                        </div>
                        <p className="text-[10px] text-slate-400 dark:text-slate-600 mt-6 font-bold uppercase tracking-widest">{new Date(p.date).toLocaleDateString()}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )
          ) : selectedPost ? (
            <PostDetail post={selectedPost} onBack={() => setSelectedPost(null)} />
          ) : (
            <div className="animate-in space-y-24 sm:space-y-40">
              
              {/* SACRED COMPONENT: HERO */}
              <header className="max-w-2xl">
                <div className="mb-10 inline-block">
                  <div className="relative flex items-center gap-4 sm:gap-6 pr-4 cursor-pointer group transition-transform active:scale-95" onClick={toggleAudio}>
                    <div className={`absolute inset-0 bg-gradient-to-r from-[#ff5241] to-pink-500 rounded-full blur-xl transition-all duration-700 ${isPlaying ? 'opacity-40 animate-pulse scale-105' : 'opacity-10 group-hover:opacity-30'}`}></div>
                    <div className="relative z-10 shrink-0">
                      <div className="rounded-full p-[3px] bg-gradient-to-tr from-[#ff5241] to-pink-600 shadow-2xl">
                        <img src={PROFILE_PHOTO_URL} alt="Alex Watts" className="w-16 h-16 sm:w-20 sm:h-20 rounded-full object-cover border-4 border-white dark:border-[#050505]" />
                      </div>
                    </div>
                    <div className="relative z-10 flex items-center gap-3">
                      <div className="text-[#ff5241] font-bold text-[10px] uppercase tracking-[0.25em]">{eyebrowText}</div>
                      <div className="bg-white/90 dark:bg-[#050505]/80 backdrop-blur-sm p-1.5 rounded-full border border-slate-200 dark:border-white/10 group-hover:scale-110 transition-transform">
                        {isPlaying ? <Volume2 size={14} className="text-[#ff5241]" /> : <PlayCircle size={14} className="text-slate-400 group-hover:text-[#ff5241]" />}
                      </div>
                    </div>
                  </div>
                </div>
                
                <h2 className="text-5xl sm:text-7xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-8 leading-[1.05] text-balance">
                  Navigating the noise. <br className="hidden md:block" />
                  Championing the&nbsp;<span className="font-serif-brand italic font-medium text-transparent bg-clip-text bg-gradient-to-r from-[#ff5241] to-pink-500 pr-2">human.</span>
                </h2>
                
                <div className="border-l-[3px] border-[#ff5241]/20 dark:border-white/10 pl-6 sm:pl-8 py-1">
                  <p className="text-slate-600 dark:text-slate-300 text-lg sm:text-xl leading-relaxed font-normal text-pretty max-w-[65ch]">
                    Delivering informed, funny, and lived neurodiversity insights from the Isle of Wight—a physical, by-design disconnect from the corporate noise. I'm here to prove why Red, Amber, and Green spreadsheets will never quantify neurodivergent&nbsp;talent. When the signal is idle? Walking the dog, eating the exact same four meals on repeat, and playing Rocket League with day-one&nbsp;mates.
                  </p>
                </div>
              </header>

              {/* ROGUE ROCKET BUSINESS SECTION */}
              <section className="relative">
                <div className="bg-white dark:bg-white/[0.02] border border-slate-200 dark:border-white/5 rounded-[2.5rem] p-8 sm:p-14 shadow-2xl shadow-slate-200/40 dark:shadow-none transition-all duration-500">
                  <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
                    <div className="lg:col-span-7 xl:col-span-8">
                      <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-[#ff5241]/10 text-[#ff5241] text-[10px] font-bold uppercase tracking-[0.25em] rounded-md mb-8">
                        <div className="w-1.5 h-1.5 rounded-full bg-[#ff5241] animate-pulse"></div>
                        Rogue Rocket • 2026/27
                      </div>
                      <h3 className="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight leading-[1.1] text-slate-900 dark:text-white">
                        Same world. <br className="hidden lg:block" />
                        <span className="whitespace-nowrap"><span className="font-serif-brand italic font-medium text-transparent bg-clip-text bg-gradient-to-r from-[#ff5241] to-pink-500 pr-2">different</span>&nbsp;perspective.</span>
                      </h3>
                      <p className="mt-4 text-xs font-bold text-slate-400 uppercase tracking-widest italic opacity-70">
                        Alex Watts is the pilot; Rogue Rocket is the propulsion.
                      </p>
                      <div className="flex flex-wrap items-center gap-x-8 gap-y-5 mt-10">
                        {[{ icon: <Zap size={16} />, label: "Keynotes" }, { icon: <Users size={16} />, label: "Workshops" }, { icon: <MessageSquare size={16} />, label: "Consulting" }].map((item, i) => (
                          <div key={i} className="group flex items-center gap-2.5 text-[11px] sm:text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.2em] cursor-default">
                            <span className="text-[#ff5241] transition-all duration-300 ease-out group-hover:scale-125 group-hover:rotate-12 group-hover:drop-shadow-[0_0_8px_rgba(255,82,65,0.8)]">{item.icon}</span> {item.label}
                          </div>
                        ))}
                      </div>
                    </div>
                    <div className="lg:col-span-5 xl:col-span-4 flex flex-col gap-4">
                      <button onClick={handleContactClick} className="w-full flex items-center justify-center gap-4 bg-gradient-to-r from-[#ff5241] to-pink-600 text-white px-8 py-5 sm:py-6 rounded-2xl font-bold text-base cta-pulse active:scale-95 transition-all shadow-2xl shadow-[#ff5241]/20">
                        <Mail size={20} /> Let's Chat
                      </button>
                      <button className="w-full flex items-center justify-center gap-4 bg-slate-900 dark:bg-white text-white dark:text-slate-900 px-8 py-5 sm:py-6 rounded-2xl font-bold text-base active:scale-95 shadow-lg transition-all hover:translate-y-[-4px]">
                        <Download size={20} /> Get Kit
                      </button>
                    </div>
                  </div>

                  <div className="mt-16 pt-10 border-t border-slate-100 dark:border-white/5">
                    <button onClick={() => setIsBookingExpanded(!isBookingExpanded)} className="group flex items-center gap-5 focus:outline-none">
                      <div className="relative p-2.5 rounded-full bg-[#ff5241]/10 group-hover:bg-[#ff5241]/20 transition-all duration-300">
                        <ChevronDown size={20} className={`relative z-10 text-[#ff5241] transition-transform duration-500 ${isBookingExpanded ? 'rotate-180' : 'rotate-0'}`} />
                      </div>
                      <span className="text-xs font-bold text-slate-400 group-hover:text-slate-900 dark:group-hover:text-white uppercase tracking-[0.3em] transition-colors">
                        {isBookingExpanded ? "Collapse Talks & Dates" : "View Talks & Dates"}
                      </span>
                    </button>
                    <div className={`grid transition-all duration-500 ease-in-out ${isBookingExpanded ? 'grid-rows-[1fr] opacity-100 mt-14' : 'grid-rows-[0fr] opacity-0'}`}>
                      <div className="overflow-hidden">
                        <div className="pb-4">
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-16">
                            {[
                              { title: "Trapped in a Cell", icon: <Zap size={18} />, color: "bg-[#ff5241]/10 text-[#ff5241]", shadow: "group-hover:drop-shadow-[0_0_12px_rgba(255,82,65,0.8)]", text: "Exploring the intangible potential of neurodiverse minds and how measuring worth on a spreadsheet is never a good idea." },
                              { title: "AI: The Cognitive Prosthetic", icon: <Users size={18} />, color: "bg-pink-500/10 text-pink-500", shadow: "group-hover:drop-shadow-[0_0_12px_rgba(236,72,153,0.8)]", text: "Navigating the workloads and changeable nature of executive function and how AI workflows combat distraction." }
                            ].map((talk, i) => (
                              <div key={i} className="flex gap-6 group cursor-default">
                                <div className="shrink-0 mt-1">
                                  <div className={`w-12 h-12 rounded-full flex items-center justify-center ${talk.color} transition-all duration-300 ease-out group-hover:scale-110 group-hover:rotate-12 ${talk.shadow}`}>
                                    {talk.icon}
                                  </div>
                                </div>
                                <div>
                                  <h4 className="text-xl font-bold mb-3 text-slate-900 dark:text-white transition-colors group-hover:text-[#ff5241] tracking-tight">{talk.title}</h4>
                                  <p className="text-sm sm:text-base text-slate-600 dark:text-slate-400 leading-relaxed max-w-sm" dangerouslySetInnerHTML={{ __html: talk.text }} />
                                </div>
                              </div>
                            ))}
                          </div>

                          <div className="mt-12 pt-12 border-t border-slate-100 dark:border-white/5">
                            <div className="flex items-center justify-between mb-8">
                              <div className="flex items-center gap-3">
                                <Radio size={18} className="text-[#ff5241]" />
                                <h4 className="text-2xl font-bold text-slate-900 dark:text-white tracking-tight">Live Signals</h4>
                              </div>
                              <span className="text-[10px] font-bold text-[#ff5241] uppercase tracking-[0.25em] bg-[#ff5241]/10 px-3 py-1.5 rounded-md">2026</span>
                            </div>
                            
                            <div className="flex flex-col gap-3">
                              {tourDates.length > 0 ? tourDates.map((gig) => (
                                <div key={gig.id} className="flex items-center justify-between p-4 sm:p-5 rounded-[1.25rem] bg-slate-50 dark:bg-white/[0.02] border border-slate-200 dark:border-white/5 hover:border-[#ff5241]/40 transition-all group">
                                  <div className="flex items-center gap-5 sm:gap-6">
                                    <div className="w-10 sm:w-12 text-center shrink-0">
                                      <span className="block text-[9px] sm:text-[10px] font-bold text-[#ff5241] sm:text-slate-400 uppercase tracking-widest mb-1">{new Date(gig.date).toLocaleDateString('en-GB', { month: 'short' })}</span>
                                      <span className="block text-lg sm:text-xl font-black text-slate-900 dark:text-white leading-none">{new Date(gig.date).getDate()}</span>
                                    </div>
                                    <div className="w-px h-8 bg-slate-200 dark:bg-white/10 hidden sm:block"></div>
                                    <div>
                                      <h4 className="text-sm sm:text-base font-bold text-slate-900 dark:text-white group-hover:text-[#ff5241] transition-colors">{gig.event}</h4>
                                      <div className="flex items-center gap-1.5 text-[11px] sm:text-xs font-medium text-slate-500 mt-1 sm:mt-1.5">
                                        <MapPin size={12} className="opacity-70" /> {gig.city}
                                      </div>
                                    </div>
                                  </div>
                                  <div>
                                    <a href={gig.link || '#'} target="_blank" rel="noopener noreferrer" className={`text-[9px] sm:text-[10px] font-bold uppercase tracking-[0.2em] px-3 py-1.5 rounded-lg whitespace-nowrap transition-colors ${gig.status === 'Sold Out' || !gig.link ? 'bg-slate-200 dark:bg-white/5 text-slate-500 pointer-events-none' : 'bg-[#ff5241]/10 text-[#ff5241] group-hover:bg-[#ff5241] group-hover:text-white'}`}>
                                      {gig.status || (gig.link ? 'Tickets' : 'Sold Out')}
                                    </a>
                                  </div>
                                </div>
                              )) : (
                                <p className="text-xs text-slate-400 italic">Scanning for tour dates...</p>
                              )}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </section>

              {/* THE STREAM SECTION */}
              <div className="max-w-2xl relative mx-auto lg:ml-0 mt-8 sm:mt-12">
                <div className="mb-14">
                  <span className="text-[10px] font-bold text-[#ff5241] uppercase tracking-[0.3em] block mb-5">The Stream</span>
                  <h2 className="text-3xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight leading-[1.1] text-balance">
                    Digital artifacts, shoreline notes & <span className="font-serif-brand italic font-medium text-transparent bg-clip-text bg-gradient-to-r from-[#ff5241] to-pink-500">freewheeling</span>&nbsp;thought.
                  </h2>
                </div>

                <div className="relative mb-12 flex justify-center lg:justify-start gap-3 py-2 overflow-x-auto no-scrollbar">
                  {FILTERS.map(f => (
                    <button key={f.id} onClick={() => setActiveFilter(f.id)} className={`shrink-0 px-7 py-3 rounded-full text-[10px] font-bold uppercase tracking-[0.2em] transition-all duration-300 ${activeFilter === f.id ? 'bg-[#ff5241] text-white shadow-2xl shadow-[#ff5241]/30 scale-105' : 'bg-white dark:bg-white/5 text-slate-400 border border-slate-200 dark:border-white/5 hover:border-[#ff5241]'}`}>
                      {f.label}
                    </button>
                  ))}
                </div>

                <div className="flex flex-col gap-10 sm:gap-12 relative">
                  <div className="absolute left-[1.35rem] top-4 bottom-4 w-[2px] bg-slate-200/60 dark:bg-white/5 hidden sm:block"></div>

                  {posts.length > 0 ? filteredPosts.map((post) => (
                    <article key={post.id} className="relative group pl-0 sm:pl-14">
                      <div className="absolute left-0 top-0 hidden sm:flex flex-col items-center">
                        <div className={`relative z-10 w-11 h-11 rounded-full p-0.5 bg-slate-100 dark:bg-[#0a0a0a] border-2 border-slate-200 dark:border-white/10 group-hover:border-[#ff5241]/40 transition-colors`}>
                          <img src={PROFILE_PHOTO_URL} alt="" className="w-full h-full rounded-full object-cover" />
                        </div>
                      </div>

                      <div className="flex items-center gap-3 mb-4 sm:mb-5">
                        <img src={PROFILE_PHOTO_URL} alt="" className="sm:hidden w-7 h-7 rounded-full border border-white/10" />
                        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
                          <div className="flex items-center gap-1.5">
                            <span className="text-xs font-bold text-slate-900 dark:text-white">AlexWattsBlog</span>
                            <BadgeCheck size={13} fill="#ff5241" className="text-white dark:text-black" />
                          </div>
                          <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest">
                            <span>{new Date(post.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })}</span>
                            <span className="opacity-40">•</span>
                            <div className="flex items-center gap-1">
                              {post.format === 'status' ? <MessageSquare size={10} /> : <PenTool size={10} />}
                              <span>{post.format === 'status' ? 'Note' : 'Essay'}</span>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div className="cursor-pointer group/content" onClick={() => setSelectedPost(post)}>
                        {post.title && <h3 className="text-2xl sm:text-3xl font-bold mb-4 tracking-tight group-hover/content:text-[#ff5241] transition-colors text-slate-900 dark:text-white leading-tight">{post.title}</h3>}
                        <div className={`leading-relaxed ${post.format === 'status' ? 'text-2xl font-serif-brand italic dark:text-white' : 'text-lg text-balance text-slate-700 dark:text-slate-300'}`} dangerouslySetInnerHTML={{ __html: post.format === 'status' ? post.content : getSnippet(post.content) }} />
                        {post.featured_image && (
                          <div className="mt-5 rounded-2xl overflow-hidden border border-slate-200 dark:border-white/5 relative shadow-sm max-w-lg">
                            <img src={post.featured_image} alt="" className="w-full h-auto object-cover max-h-[400px]" />
                          </div>
                        )}
                      </div>

                      <div className="mt-6 flex items-center justify-between">
                        <div className="flex items-center gap-5">
                          {post.tldr && (
                            <button onClick={() => setOpenTldrs(p => ({...p, [post.id]: !p[post.id]}))} className={`flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] px-5 py-2.5 rounded-xl transition-all ${openTldrs[post.id] ? 'bg-[#ff5241] text-white shadow-lg' : 'bg-[#ff5241]/5 text-[#ff5241] border border-[#ff5241]/10 hover:bg-[#ff5241]/15'}`}>
                              <Zap size={10} fill={openTldrs[post.id] ? "white" : "none"} /> TL;DR
                            </button>
                          )}
                        </div>
                      </div>
                      <div className="mt-10 h-px w-full bg-slate-200/40 dark:bg-white/[0.02]" />
                    </article>
                  )) : (
                    <div className="py-20 text-center">
                      <p className="text-slate-400 text-sm italic">Stream is quiet. Waiting for the ferry...</p>
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}
        </main>
        
        <footer className="py-20 bg-white dark:bg-[#050505] border-t border-slate-200 dark:border-white/5">
          <div className="max-w-5xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-12">
            <div className="space-y-4 flex flex-col items-center md:items-start text-center md:text-left">
              <div className="flex items-center justify-center md:justify-start">
                <span className="font-bold text-2xl tracking-tighter bg-gradient-to-r from-[#ff5241] to-pink-500 bg-clip-text text-transparent">AlexWattsBlog</span>
                <BadgeCheck size={20} fill="#ff5241" className="text-white dark:text-[#050505] ml-1.5" />
              </div>
              <p className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.4em]">© 2026 • Broadcast from the Channel</p>
              
              <div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-6 mt-4">
                <a href="mailto:howdy@alexwattsblog.com" className="flex items-center gap-2 text-[10px] font-bold text-[#ff5241] uppercase tracking-[0.3em] hover:opacity-70 transition-opacity">
                  <Feather size={14} /> Send a pigeon
                </a>
                {view !== 'admin' && (
                  <button onClick={() => setView('admin')} className="flex items-center gap-2 text-[10px] font-bold text-slate-400 hover:text-[#ff5241] uppercase tracking-[0.3em] transition-colors">
                    <Terminal size={14} /> Terminal Access
                  </button>
                )}
              </div>
            </div>
            <div className="flex gap-10 text-slate-400 justify-center md:justify-end w-full md:w-auto">
              <Instagram size={22} className="hover:text-[#ff5241] transition-all hover:scale-110 cursor-pointer" />
              <Linkedin size={22} className="hover:text-[#ff5241] transition-all hover:scale-110 cursor-pointer" />
              <Youtube size={22} className="hover:text-[#ff5241] transition-all hover:scale-110 cursor-pointer" />
            </div>
          </div>
        </footer>
      </div>
    </div>
  );
}