import React, { useState, useEffect } from 'react';
import { 
  Menu, ShoppingBag, Shield, Activity, 
  Cpu, Globe, ArrowRight, ArrowLeft, Lock, ChevronRight, 
  Database, BarChart3, Users, CheckCircle,
  Share2, Bookmark, Twitter, Linkedin, Facebook, TrendingUp, Filter,
  FileText, Mail, Search
} from 'lucide-react';

// --- EXACT COLOR PALETTE ---
// Dark Background: #24212e
// Secondary Dark: #3d3262
// Muted Purple: #786c9d
// Accent Gold: #e7d397
// Light Cream: #fefcf9
// Taupe/Muted: #a29b90

const BRAND = {
  bg: "bg-[#24212e]",
  bgSecondary: "bg-[#3d3262]",
  bgSecondaryHover: "hover:bg-[#3d3262]/80",
  bgLight: "bg-[#fefcf9]",
  textDark: "text-[#24212e]",
  textDarkMuted: "text-[#a29b90]",
  text: "text-[#fefcf9]",
  textMuted: "text-[#a29b90]",
  accent: "text-[#e7d397]",
  accentBg: "bg-[#e7d397]",
  accentBorder: "border-[#e7d397]",
  border: "border-[#786c9d]/30",
  borderLight: "border-[#786c9d]/10",
  borderOnLight: "border-[#786c9d]/20"
};

// --- DATA SOURCE OF TRUTH (BLOG AUTOMATION CSV MOCK) ---
const EDITORIAL_ARTICLES = [
  { id: 'a1', title: "The New AI Perimeter: Reinforcing Digital Borders", category: "AI Infrastructure", excerpt: "Systems are only as secure as the assumptions behind them.", image: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=2000" },
  { id: 'a2', title: "Urban Sensors: A Governance Playbook", category: "Smart City", excerpt: "Privacy is a luxury asset. The framework for ethical urban monitoring.", image: "https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?auto=format&fit=crop&q=80&w=2000" },
  { id: 'a3', title: "Inside the Modern Breach: Target #1", category: "Cybersecurity", excerpt: "Why mid-size companies are the primary training ground for state-sponsored AI.", image: "https://images.unsplash.com/photo-1563986768609-322da13575f3?auto=format&fit=crop&q=80&w=2000" },
  { id: 'a4', title: "The 2030 Grid Outlook", category: "Forecasts", excerpt: "Where the next $5 Trillion in infrastructure spending will flow.", image: "https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?auto=format&fit=crop&q=80&w=2000" },
  { id: 'a5', title: "The Risk Map: Visualizing Blind Spots", category: "Corporate Intel", excerpt: "Identifying critical failures before the board meeting.", image: "https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&q=80&w=2000" }
];

const BRIEFINGS = [
  { id: 'b1', title: "The 2030 Smart Grid Outlook", price: "$149", subtitle: "5-Year Infrastructure Forecast", stack: "Predictive timeline • $5T capital flow map" },
  { id: 'b2', title: "Enterprise AI Risk Report: Q4 2025", price: "$149", subtitle: "The C-Suite Risk Register", stack: "LLM vulnerability analysis • Liability matrix" },
  { id: 'b3', title: "Urban Surveillance Governance Manual", price: "$97", subtitle: "Ethical Deployment Standards", stack: "Public privacy protocols • Sensor limits" },
  { id: 'b4', title: "The Zero Trust Architecture Handbook", price: "$97", subtitle: "Implementation Roadmap", stack: "Segmentation diagrams • Identity logic" },
  { id: 'b5', title: "Hybrid Work Security Briefing", price: "$79", subtitle: "Remote Endpoint Defense", stack: "Device policies • Shadow IT audit" }
];

const SYSTEMS = [
  { id: 's1', title: "AI Infrastructure Audit Kit", price: "$199", subtitle: "The 200-Point Deployment Checklist", stack: "Pre-flight validation • Vendor risk scores", Icon: Database },
  { id: 's2', title: "Cybersecurity Incident Response Deck", price: "$149", subtitle: "Crisis Action Protocols", stack: "First 48-hour timeline • Chain of command", Icon: Shield },
  { id: 's3', title: "Smart City Vendor Vetting Protocol", price: "$129", subtitle: "Procurement Safety System", stack: "RFP questions • Red flag indicators", Icon: Globe },
  { id: 's4', title: "Corporate Crisis Comm Protocols", price: "$97", subtitle: "Reputation Defense System", stack: "Breach templates • Media holding statements", Icon: Users },
  { id: 's5', title: "C-Suite Data Hygiene System", price: "$79", subtitle: "Executive Personal Protection", stack: "Family device hardening • Footprint scrub", Icon: Lock }
];

const LICENSING = [
  { id: 'l1', title: "The Enterprise Audit Core", price: "$997", subtitle: "Site License / Internal Framework", stack: "Unlimited internal use • Editable source files • Training video assets" },
  { id: 'l2', title: "Consultant’s Risk Workshop Framework", price: "$499", subtitle: "Client Advisory System", stack: "Workshop slide deck • Discovery questionnaires • Client report templates" }
];

const BUNDLES = [
  { id: 'bun1', title: "The Analyst Core", price: "$299", subtitle: "Situational Awareness", includes: ["The 2030 Smart Grid Outlook", "Enterprise AI Risk Report", "C-Suite Data Hygiene"], target: "Senior Analysts", cta: "Acquire Core Intelligence" },
  { id: 'bun2', title: "The CSO Stack", price: "$649", subtitle: "Operational Defense", includes: ["ALL System Protocols (x5)", "Zero Trust Handbook", "Incident Response Deck"], target: "Security Directors", cta: "Deploy Security Systems", highlight: false },
  { id: 'bun3', title: "Authority Suite", price: "$997", subtitle: "Flagship Access", includes: ["Everything in Sections A & B", "Consultant Workshop Framework", "1-Year Directory Verification"], target: "Enterprise Teams", cta: "Access Full Armory", highlight: true }
];

const DIRECTORY_TIERS = [
  { name: "Basic", price: "$99/mo", sub: "Approval Required", benefits: ["Directory Placement"] },
  { name: "Verified", price: "$249/mo", sub: "Approval Required", benefits: ["Directory Placement", "Case Study Uploads"] },
  { name: "Signature", price: "$499/mo", sub: "Approval Required", benefits: ["Directory Placement", "Case Study Uploads", "Homepage Rotation"] }
];

const PARTNER_TIERS = [
  { name: "Editorial Partner", price: "$5k/yr", highlight: false, benefits: ["Research Access"] },
  { name: "Strategic Partner", price: "$12k/yr", highlight: true, benefits: ["Research Access", "Editorial Credit"] },
  { name: "Presenting Partner", price: "$25k/yr", highlight: false, benefits: ["Research Access", "Editorial Credit", "Advisory Seat"] }
];

// --- GLOBAL STYLES ---

const GlobalStyles = () => (
  <style dangerouslySetInnerHTML={{__html: `
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Tulpen+One&display=swap');
    .font-tulpen { font-family: 'Tulpen One', cursive; font-weight: 400; letter-spacing: 0.02em; }
    .font-poppins { font-family: 'Poppins', sans-serif; }
    
    @keyframes marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .animate-marquee {
      display: flex;
      width: max-content;
      animation: marquee 30s linear infinite;
    }
    .animate-marquee:hover {
      animation-play-state: paused;
    }
  `}} />
);

// --- NAVIGATION COMPONENTS ---

const TopBanner = ({ setPage }) => (
  <header className="fixed top-0 left-0 right-0 z-50 h-20 bg-[#24212e]/90 backdrop-blur-md border-b border-[#3d3262] flex items-center px-4 sm:px-8">
    <div className="max-w-7xl mx-auto w-full flex items-center">
      <div className="flex-shrink-0 cursor-pointer flex items-center gap-3" onClick={() => setPage('home')}>
        <div className="w-8 h-8 bg-gradient-to-tr from-[#e7d397] to-[#786c9d] rounded-full flex items-center justify-center shadow-lg">
           <div className="w-3 h-3 bg-[#fefcf9] rounded-full" />
        </div>
        <span className={`text-xl font-bold tracking-widest ${BRAND.text} font-poppins uppercase mt-1`}>
          Sky Tower <span className={BRAND.accent}>Intell</span>
        </span>
      </div>
    </div>
  </header>
);

const FloatingBottomNav = ({ setPage, activePage }) => (
  <nav className="fixed bottom-6 left-0 right-0 z-50 px-4 sm:px-6 pointer-events-none transition-all duration-300">
    <div className="max-w-5xl mx-auto pointer-events-auto">
      <div className={`bg-[#24212e]/95 backdrop-blur-xl border-2 border-[#786c9d]/80 rounded-full px-6 py-4 flex items-center justify-between shadow-2xl`}>
        
        <div className="flex items-center justify-start text-[#fefcf9] cursor-pointer hover:text-[#e7d397] transition-colors w-12">
          <Menu className="w-6 h-6" />
        </div>

        <div className="hidden md:flex flex-1 items-center justify-evenly px-4">
          {['Home', 'Briefings', 'Systems', 'Directory', 'Partners'].map((item) => {
             const isActive = activePage === item.toLowerCase() || (activePage === 'editorial' && item === 'Briefings') || (activePage === 'shop' && item === 'Systems');
             return (
               <button
                 key={item}
                 onClick={() => setPage(item.toLowerCase() === 'briefings' ? 'editorial' : item.toLowerCase() === 'systems' ? 'shop' : item.toLowerCase())}
                 className={`relative group text-xs font-poppins font-normal uppercase tracking-[0.2em] transition-colors ${isActive ? 'text-[#e7d397]' : 'text-[#fefcf9]'}`}
               >
                 <span className="relative z-10">{item}</span>
                 <span className={`absolute left-0 -bottom-2 h-[1px] bg-[#e7d397] transition-all duration-300 ${isActive ? 'w-full' : 'w-0 group-hover:w-full'}`}></span>
               </button>
             );
          })}
        </div>

        <div className="flex items-center justify-end text-[#fefcf9] w-12 md:w-auto">
          <div className="relative cursor-pointer group flex items-center gap-3 hover:text-[#e7d397] transition-colors" onClick={() => setPage('shop')}>
            <span className="text-xs font-poppins font-normal uppercase tracking-widest hidden lg:block group-hover:text-[#e7d397]">Library</span>
            <div className="relative">
              <ShoppingBag className="w-6 h-6" />
              <span className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-[#e7d397] rounded-full border border-[#24212e]"></span>
            </div>
          </div>
        </div>

      </div>
    </div>
  </nav>
);

const LuxeHeader = ({ title, subtitle, breadcrumb }) => (
  <div className="bg-[#24212e] border-b border-[#3d3262] pt-40 pb-24">
    <div className="max-w-7xl mx-auto px-4 text-center">
      <div className="flex items-center justify-center gap-2 text-[#e7d397] text-xs font-poppins font-bold uppercase tracking-widest mb-6">
        <span>Sky Tower</span>
        <ChevronRight className="w-3 h-3" />
        <span>{breadcrumb}</span>
      </div>
      <h1 className="font-tulpen text-7xl md:text-9xl text-[#fefcf9] mb-4 tracking-normal leading-none">{title}</h1>
      <p className="text-[#a29b90] text-xl max-w-2xl mx-auto font-light leading-relaxed">
        {subtitle}
      </p>
    </div>
  </div>
);

// --- HOMEPAGE BLOCKS (H01-H08) ---

const HomePage = ({ setPage }) => (
  <div className="animate-in fade-in duration-500 bg-[#24212e] pt-20">
    {/* H01 — HERO FEATURE */}
    <div className="relative w-full min-h-[85vh] flex items-center pt-12">
      <div className="absolute inset-0 w-full h-full">
        <img src="https://bethcorinnek.com/skytowerintel/_assets/media/0b8916ad875bea16f4df896801c0f548.jpg" alt="Sky Tower" className="w-full h-full object-cover opacity-60" />
        <div className="absolute inset-0 bg-gradient-to-r from-[#24212e] via-[#24212e]/90 to-transparent"></div>
        <div className="absolute inset-0 bg-gradient-to-t from-[#24212e] via-transparent to-transparent"></div>
      </div>
      <div className="relative z-10 max-w-7xl mx-auto px-4 w-full">
        <div className="max-w-4xl space-y-6">
          <div className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#3d3262]/80 border ${BRAND.accentBorder} ${BRAND.accent} text-xs font-bold uppercase tracking-widest shadow-lg`}>
            <Activity className="w-3 h-3" /> Intelligence Briefing • 2026.Q1
          </div>
          <h1 className={`font-tulpen text-7xl md:text-[140px] ${BRAND.text} leading-[0.8] tracking-normal mb-8`}>
            The Architecture of <br/><span className={BRAND.accent}>Digital Risk.</span>
          </h1>
          <p className={`text-xl md:text-2xl ${BRAND.textMuted} max-w-2xl font-light leading-relaxed mt-8`}>
            Systems are only as secure as the assumptions behind them. We reveal the blind spots in Enterprise AI and Smart Infrastructure.
          </p>
          <div className="flex flex-wrap gap-4 pt-8">
            <button onClick={() => setPage('shop')} className={`px-8 py-4 bg-[#e7d397] hover:bg-[#fefcf9] text-[#24212e] font-bold rounded-sm flex items-center gap-2 uppercase tracking-widest text-sm transition-colors`}>
              Access Systems <ArrowRight className="w-4 h-4" />
            </button>
            <button onClick={() => setPage('directory')} className={`px-8 py-4 border-2 border-[#786c9d] hover:border-[#e7d397] text-[#fefcf9] font-bold rounded-sm uppercase tracking-widest text-sm transition-colors`}>
              Vendor Directory
            </button>
          </div>
        </div>
      </div>
    </div>

    {/* H02 — EDITORIAL TICKER */}
    <div className={`w-full bg-[#3d3262] border-y border-[#786c9d]/30 py-4 overflow-hidden shadow-inner flex items-center relative`}>
      <div className="w-full overflow-hidden">
        <div className="animate-marquee gap-12 cursor-pointer" onClick={() => setPage('editorial')}>
          {[...EDITORIAL_ARTICLES, ...EDITORIAL_ARTICLES].map((post, i) => (
            <span key={i} className={`text-xl md:text-2xl font-tulpen ${BRAND.text} flex items-center gap-3 whitespace-nowrap hover:text-[#e7d397] transition-colors`}>
              <FileText className="w-4 h-4 text-[#e7d397]" /> 
              {post.title} 
              <span className="text-[#786c9d] ml-6">///</span>
            </span>
          ))}
        </div>
      </div>
    </div>

    {/* H03 — CATEGORY HIGHLIGHTS */}
    <div className={`w-full ${BRAND.bgLight} py-16 border-b border-[#a29b90]/20`}>
      <div className="max-w-7xl mx-auto px-4 grid grid-cols-2 md:grid-cols-4 gap-4">
        {['AI Infrastructure', 'Smart City', 'Cyber Defense', 'Corporate Intel'].map((cat, idx) => (
          <div key={idx} className="p-6 border border-[#a29b90]/20 hover:border-[#3d3262] transition-colors cursor-pointer" onClick={() => setPage('editorial')}>
            <h3 className="font-tulpen text-4xl text-[#24212e]">{cat}</h3>
            <div className="w-8 h-px bg-[#e7d397] mt-2 mb-3"></div>
            <p className="text-xs text-[#a29b90] uppercase font-bold tracking-widest text-xs">Explore &rarr;</p>
          </div>
        ))}
      </div>
    </div>

    {/* H04 — LUXE EDITORIAL GRID */}
    <div className={`w-full ${BRAND.bgLight} py-24 border-b border-[#a29b90]/20`}>
      <div className="max-w-7xl mx-auto px-4 text-center mb-16">
        <h2 className="font-tulpen text-6xl text-[#24212e] leading-none mb-4 uppercase">Latest Intelligence</h2>
        <div className="w-24 h-px bg-[#e7d397] mx-auto"></div>
      </div>
      <div className="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-12">
         {EDITORIAL_ARTICLES.slice(0, 3).map((article, i) => (
           <div key={i} onClick={() => setPage('article')} className="group cursor-pointer">
             <div className="bg-[#a29b90]/20 h-72 mb-6 overflow-hidden relative rounded-sm">
               <img src={article.image} className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 transform group-hover:scale-105" />
               <span className="absolute top-4 left-4 bg-[#24212e] text-[#e7d397] text-[10px] font-bold px-3 py-1.5 uppercase tracking-widest">{article.category}</span>
             </div>
             <h3 className={`font-tulpen text-5xl ${BRAND.textDark} leading-none mb-3 group-hover:text-[#3d3262] transition-colors`}>{article.title}</h3>
             <p className="text-[#a29b90] text-sm line-clamp-2 leading-relaxed">{article.excerpt}</p>
           </div>
         ))}
      </div>
    </div>

    {/* H05 — TRENDING / AUTHORITY SIDEBAR */}
    <div className="bg-[#24212e] py-24 border-b border-[#3d3262]">
      <div className="max-w-7xl mx-auto px-4">
         <div className="flex items-center gap-3 mb-12">
           <TrendingUp className="text-[#e7d397] w-5 h-5" />
           <h3 className="text-sm font-bold uppercase tracking-widest text-[#fefcf9]">Trending Analysis</h3>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
            {EDITORIAL_ARTICLES.slice(1, 5).map((article, i) => (
              <div key={i} className="border-l border-[#3d3262] pl-8 cursor-pointer group" onClick={() => setPage('article')}>
                 <h4 className="font-tulpen text-4xl text-[#fefcf9] leading-tight mb-3 group-hover:text-[#e7d397] transition-colors">{article.title}</h4>
                 <p className="text-[#a29b90] text-xs font-bold uppercase tracking-widest">{article.category}</p>
              </div>
            ))}
         </div>
      </div>
    </div>

    {/* H06 — DIRECTORY PREVIEW */}
    <div className="max-w-7xl mx-auto px-4 py-32">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
        <div>
          <span className="text-[#e7d397] font-poppins text-sm uppercase tracking-widest mb-4 block">Vendor Intelligence</span>
          <h2 className="font-tulpen text-6xl md:text-8xl text-[#fefcf9] mb-6 leading-none tracking-normal">Verified Partners for High-Stakes Infrastructure.</h2>
          <p className="text-[#a29b90] text-xl mb-10 leading-relaxed font-light">
            A curated, audited directory of AI architecture firms, cybersecurity vendors, and smart city consultants.
          </p>
          <button onClick={() => setPage('directory')} className="px-8 py-4 border-2 border-[#e7d397] text-[#e7d397] font-bold uppercase tracking-widest text-sm hover:bg-[#e7d397] hover:text-[#24212e] transition-colors rounded-sm">
            Explore the Directory
          </button>
        </div>
        <div className="grid grid-cols-1 gap-4">
           {["Aegis AI Systems", "UrbanFlow Analytics", "CipherTrust Global"].map((v, i) => (
             <div key={i} className="bg-[#3d3262] p-6 border-l-4 border-[#e7d397] flex justify-between items-center shadow-lg hover:translate-x-2 transition-transform cursor-pointer" onClick={() => setPage('directory')}>
               <div>
                 <h4 className="text-[#fefcf9] font-bold text-lg mb-1">{v}</h4>
                 <span className="text-xs text-[#a29b90] uppercase tracking-widest font-bold">Enterprise Verified</span>
               </div>
               <ArrowRight className="text-[#e7d397] w-5 h-5" />
             </div>
           ))}
        </div>
      </div>
    </div>

    {/* H07 — DIGITAL PRODUCT FEATURE */}
    <div className="w-full bg-[#e7d397] py-24 border-y border-[#3d3262]">
      <div className="max-w-7xl mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-12">
        <div className="text-[#24212e] max-w-2xl">
          <span className="font-bold border-2 border-[#24212e] px-3 py-1 text-xs uppercase mb-6 inline-block tracking-widest rounded-sm">Flagship Access</span>
          <h2 className="font-tulpen text-7xl md:text-9xl mb-4 leading-none tracking-normal uppercase">The Authority Suite</h2>
          <p className="text-[#3d3262] text-xl font-medium">Complete access to all 10 Systems, 5 Briefings, and the Consultant's Workshop Framework.</p>
        </div>
        <div className="text-center md:text-right">
          <div className="text-5xl font-poppins font-bold text-[#24212e] mb-6">$997</div>
          <button onClick={() => setPage('shop')} className="px-10 py-5 bg-[#24212e] text-[#fefcf9] font-bold uppercase tracking-widest text-sm hover:bg-[#3d3262] transition-colors rounded-sm shadow-xl">
            Acquire Suite
          </button>
        </div>
      </div>
    </div>

    {/* H08 — NEWSLETTER CTA */}
    <div className="max-w-3xl mx-auto px-4 py-40 text-center">
      <Mail className={`w-8 h-8 ${BRAND.accent} mx-auto mb-6`} />
      <h2 className={`font-tulpen text-6xl md:text-8xl ${BRAND.text} mb-4 leading-none uppercase`}>The Signal Report</h2>
      <p className={`${BRAND.textMuted} mb-12 text-lg font-light`}>Receive weekly intelligence. Join 25,000+ CTOs securing smart infrastructure.</p>
      <div className="flex flex-col sm:flex-row gap-0 shadow-2xl">
        <input type="email" placeholder="corporate@email.com" className={`flex-1 bg-[#3d3262] border border-[#786c9d]/50 text-[#fefcf9] px-6 py-4 focus:outline-none focus:border-[#e7d397] transition-colors`} />
        <button className={`bg-[#e7d397] text-[#24212e] font-bold px-8 py-4 hover:bg-[#fefcf9] transition-colors uppercase tracking-widest text-xs whitespace-nowrap`}>Subscribe</button>
      </div>
    </div>
  </div>
);

// --- ARTICLE PAGE BLOCKS (S01-S07) ---

const ArticlePage = ({ setPage }) => (
  <div className="animate-in fade-in duration-500 bg-[#fefcf9] pt-20 font-poppins">
    {/* S01 — ARTICLE HERO */}
    <div className="relative w-full h-[70vh]">
      <img src={EDITORIAL_ARTICLES[0].image} className="w-full h-full object-cover" />
      <div className="absolute inset-0 bg-[#24212e]/70 mix-blend-multiply" />
      <div className="absolute bottom-0 left-0 w-full p-8 md:p-16 bg-gradient-to-t from-[#24212e] to-transparent">
        <div className="max-w-4xl mx-auto">
          <button onClick={() => setPage('editorial')} className="flex items-center gap-2 text-[#e7d397] mb-8 uppercase text-xs font-bold tracking-widest hover:text-[#fefcf9] transition-colors">
            <ArrowLeft className="w-4 h-4" /> Back to Intelligence
          </button>
          <h1 className="font-tulpen text-7xl md:text-[120px] text-[#fefcf9] mb-4 leading-none tracking-normal drop-shadow-lg">
            {EDITORIAL_ARTICLES[0].title}
          </h1>
          <p className="text-[#e7d397] font-poppins font-medium uppercase tracking-[0.3em] text-xs">By K. Vance • Nov 24, 2026</p>
        </div>
      </div>
    </div>
    
    <div className={`w-full ${BRAND.bgLight} py-24`}>
      <div className="max-w-4xl mx-auto px-4 prose prose-lg prose-headings:font-tulpen prose-headings:text-[#24212e] text-[#24212e] font-poppins font-light leading-relaxed">
        {/* S02 — DROP CAP INTRO */}
        <p className="lead text-2xl mb-12 text-[#3d3262]">
          <span className="font-tulpen text-[130px] float-left mr-6 mt-[-30px] font-bold text-[#e7d397] leading-none">A</span>
          s decision-making shifts from boards to algorithms, the structure of the corporation is being rewritten. The traditional org chart is dissolving into a dynamic network of autonomous agents.
        </p>
        
        <h2 className="text-6xl mt-16 mb-8 tracking-normal uppercase">The Infrastructure of Trust</h2>
        <p className="mb-8">With autonomous agents executing trades, signing contracts, and hiring freelancers, the concept of "Zero Trust" has moved from cybersecurity to corporate governance. Every digital action is immutably logged.</p>
        
        {/* S03 — FEATURE QUOTE */}
        <blockquote className="my-16 border-l-4 border-[#e7d397] pl-10 py-6 bg-[#24212e]/5">
          <p className="font-tulpen text-5xl text-[#3d3262] italic leading-tight">
            "We don't manage people anymore. We manage the parameters within which the AI manages the people."
          </p>
        </blockquote>

        {/* S04 — MID ARTICLE PRODUCT INSERT */}
        <div className="my-16 p-10 bg-[#24212e] border-l-4 border-[#e7d397] flex flex-col md:flex-row items-center gap-8 shadow-2xl not-prose rounded-sm">
           <div className="flex-1">
              <span className="text-[#e7d397] font-poppins text-xs font-bold uppercase tracking-widest mb-3 block">Need the protocol?</span>
              <h4 className="font-tulpen text-5xl text-[#fefcf9] mb-3 tracking-normal uppercase">Structured. Measurable. Less guesswork.</h4>
              <p className="text-sm text-[#a29b90] font-medium">Download the 200-point AI Infrastructure Audit Checklist used by Fortune 500 CTOs.</p>
           </div>
           <button onClick={() => setPage('shop')} className="px-8 py-4 bg-[#e7d397] text-[#24212e] font-bold uppercase tracking-widest text-xs hover:bg-[#fefcf9] transition-colors whitespace-nowrap rounded-sm shadow-md">
             Acquire Audit Kit ($199)
           </button>
        </div>

        <p className="mb-8">This requires a massive overhaul of physical infrastructure. Latency is the new downtime. Edge computing nodes are now installed in the ceilings of executive suites.</p>
      </div>

      <div className="max-w-7xl mx-auto px-4 mt-32 border-t border-[#a29b90]/20 pt-24">
        {/* S05 — RELATED TOOLS */}
        <h2 className="font-tulpen text-6xl text-[#24212e] mb-12 text-center uppercase tracking-widest">Related Systems</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           {SYSTEMS.slice(0, 3).map(item => {
              const SystemIcon = item.Icon;
              return (
                <div key={item.id} className="bg-white border-2 border-[#a29b90]/20 p-8 hover:-translate-y-2 transition-transform cursor-pointer shadow-sm" onClick={() => setPage('shop')}>
                   <SystemIcon className="w-8 h-8 text-[#e7d397] mb-6" />
                   <h3 className="font-tulpen text-4xl text-[#24212e] mb-3 uppercase leading-none">{item.title}</h3>
                   <p className="text-[#a29b90] text-sm mb-6 font-poppins">{item.subtitle}</p>
                   <span className="text-xl font-poppins text-[#24212e] font-bold">{item.price}</span>
                </div>
              );
           })}
        </div>
        
        {/* S07 — FINAL CTA STACK */}
        <div className="mt-32 bg-[#24212e] p-16 text-center rounded-sm relative overflow-hidden">
          <div className="absolute top-0 right-0 w-64 h-64 bg-[#e7d397]/10 blur-[100px] rounded-full"></div>
          <h2 className="font-tulpen text-6xl md:text-8xl text-[#fefcf9] mb-8 uppercase leading-none">Secure Your Infrastructure</h2>
          <div className="flex justify-center flex-wrap gap-6 relative z-10">
            <button onClick={() => setPage('shop')} className="px-10 py-5 bg-[#e7d397] text-[#24212e] font-bold uppercase tracking-widest text-xs hover:bg-[#fefcf9] transition-all">Access Library</button>
            <button onClick={() => setPage('directory')} className="px-10 py-5 border-2 border-[#e7d397] text-[#e7d397] font-bold uppercase tracking-widest text-xs hover:bg-[#e7d397] hover:text-[#24212e] transition-all">Explore Directory</button>
          </div>
        </div>
      </div>
    </div>
  </div>
);

// --- SHOP PAGE BLOCKS (P01-P04) ---

const ShopPage = ({ setPage }) => (
  <div className="animate-in fade-in duration-500 bg-[#fefcf9] pt-20">
    {/* P01 — SHOP HERO */}
    <LuxeHeader title="Digital Armory" subtitle="Standardized audit frameworks, crisis protocols, and forecast reports." breadcrumb="Systems" />

    <div className={`w-full ${BRAND.bgLight} py-24 pb-48`}>
      <div className="max-w-7xl mx-auto px-4">
        
        {/* P02 — PRODUCT GRID (Coursebooks/Briefings) */}
        <div className="mb-32">
          <div className="border-b border-[#a29b90]/20 pb-6 mb-12">
            <h2 className="font-tulpen text-6xl text-[#24212e] leading-none uppercase">Coursebooks & Briefings</h2>
            <p className="text-xs font-bold uppercase tracking-[0.3em] text-[#a29b90] mt-4 font-poppins">Deep Analysis / PDF Format</p>
          </div>
          <div className="space-y-4">
            {BRIEFINGS.map(item => (
              <div key={item.id} className="bg-[#fefcf9] border-2 border-[#a29b90]/20 p-8 flex flex-col md:flex-row items-center justify-between hover:border-[#3d3262] transition-all shadow-sm rounded-sm group">
                <div className="flex-1">
                  <h3 className="font-tulpen text-5xl text-[#24212e] mb-1 group-hover:text-[#3d3262] uppercase leading-none">{item.title}</h3>
                  <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-4 text-sm mt-3 font-poppins">
                    <span className="font-bold text-[#786c9d] uppercase tracking-widest text-[10px]">{item.subtitle}</span>
                    <span className="text-[#a29b90] font-light">{item.stack}</span>
                  </div>
                </div>
                <div className="flex items-center gap-10 mt-6 md:mt-0 w-full md:w-auto justify-between border-t border-[#a29b90]/20 pt-6 md:border-none md:pt-0">
                  <span className="font-poppins font-bold text-[#24212e] text-3xl tracking-tighter">{item.price}</span>
                  <button className="px-10 py-3 bg-[#3d3262] text-[#fefcf9] font-bold uppercase text-[10px] tracking-widest hover:bg-[#e7d397] hover:text-[#24212e] transition-colors rounded-sm">Acquire</button>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* P02 — SYSTEMS */}
        <div className="mb-32">
          <div className="border-b border-[#a29b90]/20 pb-6 mb-12">
            <h2 className="font-tulpen text-6xl text-[#24212e] leading-none uppercase">Operational Systems</h2>
            <p className="text-xs font-bold uppercase tracking-[0.3em] text-[#a29b90] mt-4 font-poppins">Protocols / Audit Kits / Excel</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {SYSTEMS.map(item => {
              const ItemIcon = item.Icon;
              return (
                <div key={item.id} className="bg-white border-2 border-[#a29b90]/20 p-10 hover:-translate-y-2 transition-transform shadow-sm hover:shadow-xl flex flex-col rounded-sm">
                  <div className="mb-10 w-16 h-16 bg-[#24212e] text-[#e7d397] flex items-center justify-center rounded-sm">
                    <ItemIcon className="w-8 h-8" />
                  </div>
                  <h3 className="font-tulpen text-5xl text-[#24212e] mb-4 uppercase leading-none">{item.title}</h3>
                  <p className="text-[#786c9d] text-xs font-bold uppercase tracking-widest mb-6 font-poppins">{item.subtitle}</p>
                  <p className="text-[#a29b90] text-sm mb-10 flex-1 border-t border-[#a29b90]/10 pt-6 font-poppins font-light leading-relaxed">{item.stack}</p>
                  <div className="flex items-end justify-between mt-auto">
                    <span className="text-3xl font-poppins text-[#24212e] font-bold tracking-tighter">{item.price}</span>
                    <button className="px-6 py-3 border-2 border-[#24212e] text-[#24212e] font-bold uppercase text-[10px] tracking-widest hover:bg-[#24212e] hover:text-[#fefcf9] transition-colors rounded-sm">Access</button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* P02 — LICENSING */}
        <div className="mb-48">
          <div className="bg-[#24212e] p-12 md:p-24 text-center rounded-sm shadow-2xl relative overflow-hidden">
            <h2 className="font-tulpen text-7xl md:text-[100px] text-[#fefcf9] mb-8 uppercase tracking-normal leading-none">Professional Licensing</h2>
            <p className="text-[#a29b90] text-lg mb-16 max-w-2xl mx-auto font-poppins font-light">Unlocked, white-label rights for internal teams or consultants.</p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
              {LICENSING.map(item => (
                <div key={item.id} className="bg-[#3d3262]/50 p-12 text-left border border-[#786c9d]/30 hover:border-[#e7d397] transition-all rounded-sm group">
                  <span className="text-[#e7d397] text-[10px] font-bold uppercase tracking-[0.3em] mb-4 block font-poppins">Enterprise Rights</span>
                  <h3 className="font-tulpen text-5xl text-[#fefcf9] mb-4 uppercase leading-none">{item.title}</h3>
                  <p className="text-[#a29b90] text-sm mb-10 font-poppins font-light leading-relaxed">{item.stack}</p>
                  <div className="flex justify-between items-center pt-8 border-t border-[#786c9d]/20">
                    <span className="text-4xl font-poppins font-bold text-[#e7d397] tracking-tighter">{item.price}</span>
                    <button className="text-[#fefcf9] bg-[#786c9d]/30 px-6 py-2 text-[10px] font-bold uppercase tracking-widest hover:bg-[#e7d397] hover:text-[#24212e] transition-colors rounded-sm">Review License</button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* P04 — BUNDLE GRID */}
        <div className="text-center mb-16">
           <h2 className="font-tulpen text-7xl md:text-9xl text-[#24212e] uppercase leading-none mb-4">Authority Bundles</h2>
           <p className="text-[#a29b90] font-poppins tracking-[0.4em] uppercase text-xs">Value Stacking Intelligence</p>
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 items-start">
           {BUNDLES.map(bundle => (
             <div key={bundle.id} className={`p-12 rounded-sm border-2 ${bundle.highlight ? 'bg-[#24212e] border-[#24212e] text-[#fefcf9] transform md:-translate-y-8 shadow-2xl scale-105' : 'bg-[#fefcf9] border-[#a29b90]/20 text-[#24212e] shadow-xl'}`}>
               <span className={`text-[10px] font-bold uppercase tracking-[0.3em] mb-6 block font-poppins ${bundle.highlight ? 'text-[#e7d397]' : 'text-[#786c9d]'}`}>{bundle.target}</span>
               <h3 className="font-tulpen text-6xl md:text-7xl mb-4 uppercase leading-none tracking-normal">{bundle.title}</h3>
               <p className={`text-xs mb-12 font-poppins font-bold uppercase tracking-widest ${bundle.highlight ? 'text-[#a29b90]' : 'text-[#a29b90]'}`}>{bundle.subtitle}</p>
               <div className={`text-6xl font-poppins font-bold mb-12 pb-12 border-b tracking-tighter ${bundle.highlight ? 'border-[#786c9d]/20' : 'border-[#a29b90]/20'}`}>{bundle.price}</div>
               <ul className="space-y-6 mb-16 text-sm font-poppins font-light">
                 {bundle.includes.map((inc, i) => (
                   <li key={i} className="flex gap-4">
                     <CheckCircle className={`w-5 h-5 flex-shrink-0 ${bundle.highlight ? 'text-[#e7d397]' : 'text-[#3d3262]'}`} />
                     <span className={bundle.highlight ? 'text-[#fefcf9]/80' : 'text-[#24212e]/80'}>{inc}</span>
                   </li>
                 ))}
               </ul>
               <button className={`w-full py-6 font-bold uppercase tracking-[0.2em] text-xs transition-all rounded-sm shadow-md ${bundle.highlight ? 'bg-[#e7d397] text-[#24212e] hover:bg-[#fefcf9]' : 'bg-[#3d3262] text-[#fefcf9] hover:bg-[#24212e]'}`}>
                 {bundle.cta}
               </button>
             </div>
           ))}
        </div>
      </div>
    </div>
  </div>
);

const DirectoryPage = ({ setPage }) => (
  <div className="animate-in fade-in duration-500 pt-20 bg-[#fefcf9]">
    <LuxeHeader title="Global Vendor Database" subtitle="The only audited registry of AI, Cyber, and Smart City partners." breadcrumb="Directory" />
    <div className={`w-full py-32`}>
      <div className="max-w-7xl mx-auto px-4">
        <div className="text-center mb-24">
          <h2 className="font-tulpen text-7xl md:text-9xl text-[#24212e] uppercase mb-8 leading-none">Verification Tiers</h2>
          <p className="text-[#a29b90] text-xl max-w-3xl mx-auto font-poppins font-light leading-relaxed">Position your firm as a trusted entity. Verification requires a 48-hour audit of your business credentials. We maintain strict editorial standards for all listed vendors.</p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {DIRECTORY_TIERS.map((tier, i) => (
            <div key={i} className="bg-white border-2 border-[#a29b90]/20 p-12 text-center hover:border-[#3d3262] transition-all shadow-xl rounded-sm">
              <h3 className="font-tulpen text-6xl text-[#24212e] mb-2 uppercase tracking-normal">{tier.name}</h3>
              <p className="text-[10px] font-bold text-[#786c9d] uppercase tracking-[0.4em] mb-10 font-poppins">{tier.sub}</p>
              <div className="text-5xl font-poppins font-bold text-[#24212e] mb-12 pb-10 border-b border-[#a29b90]/10 tracking-tighter">{tier.price}</div>
              <ul className="space-y-6 mb-12 text-left text-sm text-[#24212e]/70 font-poppins font-light pl-4">
                {tier.benefits.map((b, idx) => (<li key={idx} className="flex gap-4 items-center"><div className="w-1.5 h-1.5 bg-[#e7d397] rounded-full" /> {b}</li>))}
              </ul>
              <button className="w-full py-5 border-2 border-[#24212e] text-[#24212e] font-bold uppercase text-[10px] tracking-[0.2em] hover:bg-[#24212e] hover:text-[#fefcf9] transition-all rounded-sm font-poppins">Apply for Verification</button>
            </div>
          ))}
        </div>
      </div>
    </div>
    <div className="bg-[#24212e] py-40 text-center relative overflow-hidden">
      <h2 className="font-tulpen text-7xl md:text-[140px] text-[#fefcf9] mb-12 uppercase leading-none opacity-10 absolute inset-0 flex items-center justify-center pointer-events-none select-none">DATABASE VAULT</h2>
      <div className="relative z-10 max-w-3xl mx-auto px-4">
        <h3 className="font-tulpen text-7xl text-[#fefcf9] mb-6 uppercase">Access the Full Directory Vault</h3>
        <p className="text-[#a29b90] font-poppins font-light text-lg mb-12">Search thousands of vetted enterprise vendors globally.</p>
        <div className="flex flex-col sm:flex-row gap-0 shadow-2xl">
          <input type="email" placeholder="corporate@email.com" className="flex-1 bg-[#3d3262] border border-[#786c9d]/50 text-[#fefcf9] px-8 py-5 focus:outline-none font-poppins" />
          <button className="bg-[#e7d397] text-[#24212e] font-bold px-12 py-5 uppercase tracking-widest text-xs font-poppins whitespace-nowrap">Access Now</button>
        </div>
      </div>
    </div>
  </div>
);

const PartnersPage = () => (
  <div className="animate-in fade-in duration-500 pt-20 bg-[#fefcf9]">
    <LuxeHeader title="Strategic Partnerships" subtitle="Align your organization with the leading authority in digital risk." breadcrumb="Partners" />
    <div className={`w-full py-40`}>
      <div className="max-w-5xl mx-auto px-4 space-y-48">
        {[
          { title: "The Mandate", head: "Unbiased Intelligence.", body: "We do not accept 'pay for play' editorial coverage. Our research is funded by subscriber revenue. We align only with partners who value the integrity of the data." },
          { title: "The Audience", head: "The Decision Layer.", body: "Our readers control $50B+ in infrastructure and security spending. They are CISOs, City Planners, and Enterprise Architects who read Sky Tower to validate high-stakes decisions." },
          { title: "The Alignment", head: "Long-Term Value.", body: "Partnership is an annual commitment. We integrate your experts into our ecosystem. We provide you with a platform to demonstrate authority, not just display ads." }
        ].map((section, i) => (
          <div key={i} className="text-center md:text-left flex flex-col md:flex-row gap-12 items-start border-b border-[#a29b90]/10 pb-24 last:border-0">
            <div className="md:w-1/3"><span className="text-[#786c9d] font-poppins text-xs font-bold uppercase tracking-[0.4em] block pt-3">{section.title}</span></div>
            <div className="md:w-2/3">
              <h2 className="font-tulpen text-7xl md:text-9xl text-[#24212e] mb-8 leading-none uppercase">{section.head}</h2>
              <p className="text-[#a29b90] text-2xl leading-relaxed font-poppins font-light">{section.body}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
    <div className="bg-[#24212e] py-40">
      <div className="max-w-7xl mx-auto px-4">
        <div className="text-center mb-32">
          <h2 className="font-tulpen text-8xl md:text-[150px] text-[#fefcf9] uppercase mb-8 leading-none">Annual Partnerships</h2>
          <p className="text-[#e7d397] font-poppins tracking-[0.5em] uppercase text-sm">Strictly Limited Entry</p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 items-center">
           {PARTNER_TIERS.map((tier, i) => (
             <div key={i} className={`${tier.highlight ? 'bg-[#3d3262] border-[#e7d397] transform md:-translate-y-8 shadow-2xl scale-105' : 'bg-[#3d3262]/50 border-[#786c9d]/30'} p-16 border-2 hover:border-[#e7d397] transition-all rounded-sm`}>
               <h3 className="font-tulpen text-6xl text-[#fefcf9] mb-4 uppercase leading-none tracking-normal">{tier.name}</h3>
               <div className="text-[#e7d397] font-poppins font-bold text-4xl mb-12 pb-10 border-b border-[#786c9d]/20 tracking-tighter">{tier.price}</div>
               <ul className="space-y-6 mb-16 font-poppins font-light">
                 {tier.benefits.map((b, idx) => (<li key={idx} className="flex gap-5 text-[#fefcf9]/80 text-sm"><CheckCircle className="w-5 h-5 text-[#e7d397] flex-shrink-0" /> {b}</li>))}
               </ul>
               <button className={`w-full py-6 font-bold uppercase tracking-[0.3em] text-[10px] transition-all rounded-sm shadow-lg font-poppins ${tier.highlight ? 'bg-[#e7d397] text-[#24212e] hover:bg-[#fefcf9]' : 'bg-[#24212e] text-[#fefcf9] hover:bg-[#e7d397] hover:text-[#24212e]'}`}>Request Review</button>
             </div>
           ))}
        </div>
      </div>
    </div>
  </div>
);

const EditorialPage = ({ setPage }) => (
  <div className={`animate-in fade-in duration-500 bg-[#fefcf9] pt-20`}>
    <LuxeHeader title="Briefings Archive" subtitle="Deep-dive reporting on urban futurism and corporate risk." breadcrumb="Editorial" />
    <div className="max-w-7xl mx-auto px-4 py-32 grid grid-cols-1 md:grid-cols-3 gap-20">
      {EDITORIAL_ARTICLES.map((article, i) => (
        <div key={i} onClick={() => setPage('article')} className="group cursor-pointer">
          <div className="h-80 mb-8 overflow-hidden bg-[#a29b90]/20 rounded-sm">
            <img src={article.image} className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 transform group-hover:scale-110" />
          </div>
          <span className="text-[#786c9d] text-[10px] font-bold uppercase tracking-[0.3em] mb-4 block font-poppins">Briefing</span>
          <h3 className="font-tulpen text-6xl text-[#24212e] mb-4 group-hover:text-[#3d3262] transition-colors leading-none tracking-normal uppercase">{article.title}</h3>
          <p className="text-[#a29b90] text-lg leading-relaxed font-poppins font-light">{article.excerpt}</p>
        </div>
      ))}
    </div>
  </div>
);

// --- MAIN APP ---

const App = () => {
  const [activePage, setActivePage] = useState('home');
  useEffect(() => { window.scrollTo(0, 0); }, [activePage]);

  return (
    <div className={`min-h-screen bg-[#24212e] text-[#fefcf9] font-poppins selection:bg-[#e7d397] selection:text-[#24212e] relative`}>
      <GlobalStyles />
      <TopBanner setPage={setActivePage} />
      
      <main className="min-h-screen pb-32">
        {activePage === 'home' && <HomePage setPage={setActivePage} />}
        {activePage === 'shop' && <ShopPage setPage={setActivePage} />}
        {activePage === 'directory' && <DirectoryPage setPage={setActivePage} />}
        {activePage === 'partners' && <PartnersPage />}
        {activePage === 'editorial' && <EditorialPage setPage={setActivePage} />}
        {activePage === 'article' && <ArticlePage setPage={setActivePage} />}
      </main>
      
      <FloatingBottomNav setPage={setActivePage} activePage={activePage} />

      <footer className="bg-[#1a1721] border-t border-[#3d3262] pt-32 pb-64 text-center">
        <div className="flex items-center justify-center gap-3 mb-10 cursor-pointer" onClick={() => setActivePage('home')}>
          <div className="w-10 h-10 bg-gradient-to-tr from-[#e7d397] to-[#786c9d] rounded-full flex items-center justify-center shadow-lg">
             <div className="w-4 h-4 bg-[#fefcf9] rounded-full" />
          </div>
          <span className={`text-2xl font-bold tracking-[0.5em] ${BRAND.text} font-poppins uppercase mt-1`}>SKY TOWER</span>
        </div>
        <p className="text-[#a29b90] text-[10px] font-medium tracking-[0.6em] uppercase">KMPG System ID: 492-AX • © 2026 All Rights Reserved.</p>
      </footer>
    </div>
  );
};

export default App;