PandaWhoCodes · February 12, 2026 19:59
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Things to Do in Chennai — 80+ Activities Guide</title>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
 <script>
 tailwind.config = {
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: { sans: ['Inter', 'sans-serif'] },
      colors: {
        coral: { 50:'#fff5f2', 100:'#ffe8e0', 200:'#ffd0c0', 300:'#ffab8f', 400:'#ff7f5c', 500:'#ff5a36', 600:'#e63e1a', 700:'#c02e10', 800:'#9a2712', 900:'#7e2314' },
        navy: { 50:'#f0f4f8', 100:'#d9e2ec', 200:'#bcccdc', 300:'#9fb3c8', 400:'#7b8fad', 500:'#546a83', 600:'#3d5066', 700:'#2d3b4f', 800:'#1f2937', 900:'#121b27', 950:'#0a1019' }
      }
    }
  }
 }
 </script>
 <style>
 * { scrollbar-width: thin; scrollbar-color: #ff5a36 transparent; }
 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-thumb { background: #ff5a36; border-radius: 3px; }
 .card-enter { opacity: 0; transform: translateY(40px); }
 .modal-overlay { backdrop-filter: blur(8px); }
 .pill-active { background: linear-gradient(135deg, #ff5a36, #ff7f5c); color: white; box-shadow: 0 4px 15px rgba(255,90,54,0.4); }
 .dark .pill-active { box-shadow: 0 4px 15px rgba(255,90,54,0.3); }
 .hero-gradient { background: linear-gradient(135deg, #1f2937 0%, #121b27 40%, #2d1a0e 70%, #ff5a36 150%); }
 .dark .card-bg { background: #1a2332; border-color: #2d3b4f; }
 .light .card-bg { background: white; border-color: #e5e7eb; }
 </style>
 </head>
 <body class="font-sans bg-navy-50 dark:bg-navy-950 text-navy-800 dark:text-navy-100 transition-colors duration-300">

 <!-- Hero -->
 <section class="hero-gradient min-h-[60vh] md:min-h-[70vh] flex flex-col justify-center items-center text-center px-6 relative overflow-hidden">
  <div class="absolute inset-0 opacity-10">
    <div class="absolute top-20 left-10 w-72 h-72 bg-coral-500 rounded-full blur-[120px]"></div>
    <div class="absolute bottom-10 right-10 w-96 h-96 bg-coral-400 rounded-full blur-[150px]"></div>
  </div>
  <p id="hero-sub" class="text-coral-300 text-sm md:text-base font-medium tracking-[0.2em] uppercase mb-4 opacity-0">Discover 80+ experiences</p>
  <h1 id="hero-title" class="text-4xl md:text-6xl lg:text-7xl font-900 text-white leading-tight mb-6 opacity-0">
    Things to Do in<br><span class="bg-gradient-to-r from-coral-400 to-coral-500 bg-clip-text text-transparent">Chennai</span>
  </h1>
  <p id="hero-desc" class="text-navy-300 text-base md:text-lg max-w-xl mb-8 opacity-0">From surfing at Covelong to Chettinad cooking classes — the ultimate curated guide to the best activities in Madras.</p>
  <a href="#activities" id="hero-btn" class="bg-coral-500 hover:bg-coral-600 text-white px-8 py-3.5 rounded-full font-semibold text-sm tracking-wide transition-all hover:shadow-lg hover:shadow-coral-500/30 opacity-0">Explore Activities ↓</a>
  <!-- Dark mode toggle -->
  <button id="darkToggle" class="absolute top-6 right-6 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-all" title="Toggle dark mode">🌙</button>
 </section>

 <!-- Activities Section -->
 <section id="activities" class="max-w-7xl mx-auto px-4 md:px-6 py-12 md:py-16">
  <!-- Search -->
  <div class="mb-8">
    <div class="relative max-w-xl mx-auto">
      <input id="searchInput" type="text" placeholder="Search activities, areas, keywords..." class="w-full pl-12 pr-4 py-3.5 rounded-2xl bg-white dark:bg-navy-800 border border-navy-200 dark:border-navy-700 text-navy-800 dark:text-navy-100 placeholder-navy-400 dark:placeholder-navy-500 focus:outline-none focus:ring-2 focus:ring-coral-500/50 focus:border-coral-500 transition-all shadow-sm text-sm">
      <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-navy-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
    </div>
  </div>

  <!-- Filter Pills -->
  <div id="filterPills" class="flex flex-wrap justify-center gap-2 mb-10"></div>

  <!-- Count -->
  <p id="countText" class="text-center text-sm text-navy-500 dark:text-navy-400 mb-8"></p>

  <!-- Grid -->
  <div id="grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5"></div>
 </section>

 <!-- Modal -->
 <div id="modal" class="fixed inset-0 z-50 hidden">
  <div class="modal-overlay absolute inset-0 bg-navy-950/60" onclick="closeModal()"></div>
  <div class="absolute inset-4 md:inset-auto md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:w-full md:max-w-lg bg-white dark:bg-navy-800 rounded-3xl shadow-2xl overflow-y-auto max-h-[90vh] z-10">
    <div id="modalContent" class="p-6 md:p-8"></div>
  </div>
 </div>

 <!-- Footer -->
 <footer class="text-center py-8 text-sm text-navy-400 dark:text-navy-600 border-t border-navy-200 dark:border-navy-800">
  Built with ❤️ by Claw 🐾 · 80+ activities · Feb 2026
 </footer>

 <script>
 const activities = [
  // 🏄 WATER SPORTS & BEACH
  {name:"Surfing",sub:"Covelong Point / Surf Turf",cat:"Water Sports",emoji:"🏄",area:"Kovalam, ECR",price:"₹1,500-2,500/hr",desc:"Learn surfing at India's best urban surf spot",details:"Even beginners stand up on first session. Book direct via Instagram @surfturf.in",rating:"4.5/5",map:"https://maps.google.com/?q=12.7862,80.2543"},
  {name:"Stand-Up Paddleboarding",sub:"Bay of Life",cat:"Water Sports",emoji:"🚣",area:"Kovalam Beach, ECR",price:"₹1,000-2,000",desc:"SUP & kayaking on calm waters",details:"Book via TripAdvisor — Bay of Life Surf & SUP",map:"https://maps.google.com/?q=12.7956,80.2446"},
  {name:"Kayaking",cat:"Water Sports",emoji:"🛶",area:"Muttukadu / Mudaliyar Kuppam",price:"₹500-1,500",desc:"Backwater kayaking through serene waterways",details:"Skip crowded TTDC — go to Mudaliyar Kuppam (Reddit Jan 2026 tip)",map:"https://maps.google.com/?q=12.8058,80.2420"},
  {name:"Jet Skiing & Parasailing",cat:"Water Sports",emoji:"🚤",area:"ECR",price:"₹800-2,000",desc:"Speed thrills on the water",details:"Jet ski ₹800-1,500 | Parasailing ₹1,000-2,000. Multiple ECR operators.",map:"https://maps.google.com/?q=12.8500,80.2450"},
  {name:"Catamaran Ride",cat:"Water Sports",emoji:"⛵",area:"Covelong / Kovalam",price:"₹500-1,500",desc:"Traditional fishing catamaran on the sea",details:"Also available at Pulicat Lake for flamingo spotting",map:"https://maps.google.com/?q=12.7862,80.2543"},
  {name:"Sailing",sub:"Royal Madras Yacht Club",cat:"Water Sports",emoji:"⛵",area:"Chennai Port",price:"₹2,000+",desc:"Yacht rides on the Bay of Bengal (est. 1911)",details:"Guest sessions available from ₹2,000",map:"https://maps.google.com/?q=13.0918,80.2957"},
  {name:"Ocean Swimming",sub:"Wild Swim Club",cat:"Water Sports",emoji:"🏊",area:"Various beaches",price:"Free-₹500",desc:"Guided open water swimming sessions",details:"Instagram @wild.swimclub | Coach @sharathmukundan. Also: Chennai Ocean Swimmers Facebook group",map:""},
  {name:"Muttukadu Boat House",sub:"TTDC",cat:"Water Sports",emoji:"🚢",area:"Muttukadu, ECR",price:"₹200-500",desc:"Speed boats, rowing, pedal boats on backwaters",details:"Government-run boat house. Budget-friendly option.",map:"https://maps.google.com/?q=12.8058,80.2420"},

  // 🎯 ADVENTURE & THRILLS
  {name:"Bouldering & Rock Climbing",sub:"FitRock Arena",cat:"Adventure",emoji:"🧗",area:"Chetpet & Pallikaranai",price:"₹500-800",desc:"Chennai's first indoor climbing gym",details:"Bouldering walls + climbing routes. Instagram @fitrockarena | Sam: +91 9566895306",map:"https://maps.google.com/?q=13.0766,80.2410"},
  {name:"Go-Karting",sub:"Smaaash",cat:"Adventure",emoji:"🏎️",area:"Express Avenue / Phoenix Mall",price:"₹300-600",desc:"Indoor go-kart racing + VR + bowling",details:"Multiple entertainment options under one roof",map:"https://maps.google.com/?q=13.0590,80.2630"},
  {name:"Off-Road Motorsports",sub:"ORS",cat:"Adventure",emoji:"🏍️",area:"Pattipulam, ECR",price:"₹500-2,000",desc:"ATV rides, dirt biking on off-road tracks",details:"90cc to 1000cc RZRs. Book at offroadecr.com",map:"https://maps.google.com/?q=12.6816,80.2146"},
  {name:"Olympic Shooting",sub:"Ace Shooters Club",cat:"Adventure",emoji:"🎯",area:"Kilpauk & Anna Nagar",price:"₹850+",desc:"Air pistol & rifle shooting range",details:"Professional instructors. 20-40 shots per session. aceshooters.club",map:"https://maps.google.com/?q=13.0822,80.2371"},
  {name:"Archery",cat:"Adventure",emoji:"🏹",area:"Anna Nagar West",price:"₹500-800",desc:"Bullseye sessions with expert coaches",details:"Book through Ace Shooters or search 'archery Chennai' on Google Maps",map:"https://maps.google.com/?q=13.0850,80.2101"},
  {name:"Paintball",cat:"Adventure",emoji:"🔫",area:"ECR / Outskirts",price:"₹500-1,000",desc:"Outdoor team paintball battles",details:"Multiple operators along ECR",map:"https://maps.google.com/?q=12.8500,80.2450"},
  {name:"Laser Tag",cat:"Adventure",emoji:"🔦",area:"Phoenix MarketCity",price:"₹300-500",desc:"Indoor laser tag arena",details:"Available at Smaaash entertainment zones",map:"https://maps.google.com/?q=13.0590,80.2630"},
  {name:"Escape Rooms",sub:"Mystery Rooms",cat:"Adventure",emoji:"🔐",area:"Nungambakkam",price:"₹500-800",desc:"Multiple themed puzzle rooms",details:"Rated 4.5/5 on TripAdvisor. Great for groups!",rating:"4.5/5",map:"https://maps.google.com/?q=13.0678,80.2472"},
  {name:"Ice Skating",sub:"VGP Wonder Ice Rink",cat:"Adventure",emoji:"⛸️",area:"ECR, Injambakkam",price:"₹500-700",desc:"One of the few ice rinks in South India",details:"Part of VGP Universal Kingdom complex",map:"https://maps.google.com/?q=12.9127,80.2501"},
  {name:"Trampoline Park",sub:"Airborne",cat:"Adventure",emoji:"🤸",area:"Marina Mall, OMR",price:"₹500-800",desc:"Trampolines, obstacle courses, foam pits",details:"Also at KNK Road, La Rue 18, Citi Centre. Facebook @Airbornechennai",map:"https://maps.google.com/?q=12.8361,80.2295"},
  {name:"Bowling",cat:"Adventure",emoji:"🎳",area:"Express Avenue",price:"₹250-400",desc:"Multiple lanes at entertainment zones",details:"Available at Smaaash and other venues",map:"https://maps.google.com/?q=13.0590,80.2630"},
  {name:"VR Gaming",cat:"Adventure",emoji:"🥽",area:"Multiple locations",price:"₹300-600",desc:"Virtual reality gaming experiences",details:"Available at Smaaash + multiple locations across Chennai",map:"https://maps.google.com/?q=13.0590,80.2630"},
  {name:"RC Car Racing",sub:"RC Arena",cat:"Adventure",emoji:"🏎️",area:"Nungambakkam",price:"₹300-500/hr",desc:"Chennai's first RC car racing arena!",details:"₹300/30 min | ₹500/hr. Instagram @rc_arena_",map:"https://maps.google.com/?q=13.0610,80.2476"},

  // 🏌️ SPORTS & FITNESS
  {name:"Indoor Golf Simulator",sub:"Golfer's Edge",cat:"Sports & Fitness",emoji:"⛳",area:"Alwarpet",price:"₹1,000-2,000",desc:"Ultra-realistic HD virtual golf + putting green",details:"170 sqft putting green. golfers-edge.com",map:"https://maps.google.com/?q=13.0384,80.2554"},
  {name:"Bungee Fitness",sub:"S Fusion Studio",cat:"Sports & Fitness",emoji:"🤸",area:"Ayanavaram",price:"Free trial!",desc:"Chennai's FIRST bungee fitness studio!",details:"High-energy, low-impact workout with harness & bungee cords. FREE trial session! Instagram @sfusionstudio | +91 7845884470",map:"https://maps.google.com/?q=13.0977,80.2389"},
  {name:"Aerial Yoga",cat:"Sports & Fitness",emoji:"🧘",area:"Ayanavaram",price:"₹500-1,000",desc:"Yoga in silk hammocks — inversions & stretches",details:"At S Fusion Studio. Also offers Zumba & dance.",map:"https://maps.google.com/?q=13.0977,80.2389"},
  {name:"Brazilian Jiu-Jitsu",cat:"Sports & Fitness",emoji:"🥋",area:"Multiple gyms",price:"₹500-1,000",desc:"Learn BJJ fundamentals",details:"Multiple gyms across Chennai offer BJJ classes",map:""},
  {name:"Horse Riding",cat:"Sports & Fitness",emoji:"🐴",area:"Sholinganallur, OMR",price:"₹500-1,500",desc:"Equestrian sessions with instructors",details:"Instagram @chennaieqcentre",map:"https://maps.google.com/?q=12.8951,80.2279"},
  {name:"Cryotherapy",sub:"Cryo2",cat:"Sports & Fitness",emoji:"🧊",area:"Nungambakkam",price:"₹1,500-3,000",desc:"Whole body cryotherapy chamber experience",details:"cryo2.in — cutting-edge recovery",map:"https://maps.google.com/?q=13.0587,80.2476"},

  // 💃 DANCE
  {name:"Salsa, Bachata & Kizomba",sub:"Salsa Madras",cat:"Dance",emoji:"💃",area:"Teynampet",price:"₹500-2,000",desc:"Latin dance classes and private sessions",details:"Instructor: Arun S Pauer. salsamadras.com — also offers e-learning courses",map:"https://maps.google.com/?q=13.0396,80.2540"},

  // 🎨 ART & CREATIVE
  {name:"Tufting Workshop",cat:"Art & Creative",emoji:"🧶",area:"Chetpet",price:"₹2,000-4,000",desc:"Make your own custom rug with a tufting gun",details:"Search 'tufting Chennai' on Instagram. Skip SceneBooking middleman!",map:"https://maps.google.com/?q=13.0766,80.2410"},
  {name:"Pottery",cat:"Art & Creative",emoji:"🏺",area:"Adyar / Chetpet / Anna Nagar",price:"₹800-2,000",desc:"Wheel throwing, hand-building, ceramic painting",details:"Multiple studios across Chennai. Search on Instagram/Google Maps.",map:"https://maps.google.com/?q=13.0012,80.2565"},
  {name:"Resin Art Workshop",cat:"Art & Creative",emoji:"✨",area:"Besant Nagar",price:"₹1,500-3,000",desc:"Create resin art — mirrors, seascapes, coasters",details:"Various operators in Besant Nagar area",map:"https://maps.google.com/?q=13.0003,80.2667"},
  {name:"Fluid Art / Neon Paint",cat:"Art & Creative",emoji:"🎨",area:"Adyar / Anna Nagar",price:"₹1,000-2,000",desc:"Pour painting — mesmerizing abstract art",details:"Available at multiple studios across Chennai",map:"https://maps.google.com/?q=13.0012,80.2565"},
  {name:"Texture Art / Knife Painting",cat:"Art & Creative",emoji:"🖌️",area:"Kilpauk / Tambaram",price:"₹1,000-2,000",desc:"Textured paintings using palette knives",details:"Create stunning textured artwork",map:"https://maps.google.com/?q=13.0828,80.2417"},
  {name:"Sip & Paint Party",cat:"Art & Creative",emoji:"🍷",area:"Nungambakkam",price:"₹1,500-2,500",desc:"Painting + drinks = fun group activity",details:"Great for dates and group hangouts",map:"https://maps.google.com/?q=13.0569,80.2425"},
  {name:"Candle Making",cat:"Art & Creative",emoji:"🕯️",area:"Anna Nagar / OMR",price:"₹800-1,500",desc:"Craft candles including dessert-themed ones",details:"Trendy dessert candle workshops available",map:"https://maps.google.com/?q=13.0850,80.2101"},
  {name:"Terrarium Making",cat:"Art & Creative",emoji:"🌿",area:"Chetpet",price:"₹1,200-2,000",desc:"Build miniature gardens in glass",details:"Create your own living art piece",map:"https://maps.google.com/?q=13.0714,80.2417"},
  {name:"Macramé Workshop",cat:"Art & Creative",emoji:"🪢",area:"Chetpet",price:"₹1,600+",desc:"Knot-tying art — wall hangings, plant hangers",details:"Learn traditional macramé techniques",map:"https://maps.google.com/?q=13.0714,80.2417"},
  {name:"Stained Glass Art",cat:"Art & Creative",emoji:"🪟",area:"Nungambakkam",price:"₹2,100+",desc:"Create mosaic/stained glass pieces",details:"Beautiful decorative art workshop",map:"https://maps.google.com/?q=13.0569,80.2425"},
  {name:"Calligraphy",cat:"Art & Creative",emoji:"✒️",area:"Anna Nagar / Tambaram",price:"₹800-1,500",desc:"Modern calligraphy & brush pen lettering",details:"Learn various lettering styles",map:"https://maps.google.com/?q=13.0850,80.2101"},
  {name:"Lippan Art",cat:"Art & Creative",emoji:"🪞",area:"Thoraipakkam",price:"₹1,200-2,000",desc:"Traditional Kutchi mud mirror art on clay",details:"Beautiful traditional craft from Gujarat",map:"https://maps.google.com/?q=12.9416,80.2362"},
  {name:"Punch Needle Embroidery",cat:"Art & Creative",emoji:"🧵",area:"Alwarpet / Anna Nagar",price:"₹1,000-2,000",desc:"Trendy embroidery technique",details:"Create beautiful textile art",map:"https://maps.google.com/?q=13.0335,80.2531"},
  {name:"Tapestry Weaving",cat:"Art & Creative",emoji:"🧶",area:"Kilpauk",price:"₹1,500-2,500",desc:"Loom weaving workshop",details:"Create woven art on a loom",map:"https://maps.google.com/?q=13.0828,80.2417"},
  {name:"Watercolor Workshop",cat:"Art & Creative",emoji:"🎨",area:"Chetpet",price:"₹1,000-2,000",desc:"Learn watercolor painting techniques",details:"Various skill levels welcome",map:"https://maps.google.com/?q=13.0714,80.2417"},
  {name:"Stone Carving",cat:"Art & Creative",emoji:"🗿",area:"Mahabalipuram",price:"Varies",desc:"Learn traditional stone carving at sculptor's village",details:"Govt College of Architecture & Sculpture — some sculptors offer workshops",map:"https://maps.google.com/?q=12.6172,80.1927"},
  {name:"Mandala Art",cat:"Art & Creative",emoji:"🔵",area:"Various studios",price:"₹800-1,500",desc:"Create intricate mandala designs",details:"Pen, watercolor & dot mandala techniques",map:""},
  {name:"String Art",cat:"Art & Creative",emoji:"🧵",area:"Anna Nagar",price:"₹800-1,500",desc:"Nail & thread art on wood boards",details:"Create geometric string art patterns",map:"https://maps.google.com/?q=13.0850,80.2101"},

  // 🍳 FOOD & DRINK WORKSHOPS
  {name:"South Indian Cooking Class",sub:"Cook With SundariKrishna",cat:"Food & Drink",emoji:"🍛",area:"Adyar",price:"₹2,000-3,500",desc:"Authentic Chettinad cooking in a local home",details:"Rated 5.0/5 on TripAdvisor! One of Chennai's best experiences.",rating:"5.0/5",map:"https://maps.google.com/?q=12.9990,80.2617"},
  {name:"Pizza Making Workshop",cat:"Food & Drink",emoji:"🍕",area:"Anna Nagar",price:"₹1,000-2,000",desc:"Hands-on pizza making class",details:"Instagram @piyusarya — fun and delicious!",map:"https://maps.google.com/?q=13.0850,80.2101"},
  {name:"Baking Date",cat:"Food & Drink",emoji:"🧁",area:"Anna Nagar",price:"₹1,500-3,000",desc:"Couple/group baking — cupcakes & cakes",details:"Perfect for date nights!",map:"https://maps.google.com/?q=13.0850,80.2101"},
  {name:"Chocolate Making",cat:"Food & Drink",emoji:"🍫",area:"Various studios",price:"₹1,200-2,000",desc:"Craft artisan chocolates",details:"Rotating workshop locations across Chennai",map:""},
  {name:"Kombucha Making",cat:"Food & Drink",emoji:"🍵",area:"Chetpet",price:"₹1,000-1,500",desc:"Learn to brew your own kombucha",details:"Health-conscious fermentation workshop",map:""},
  {name:"Bouquet Making",cat:"Food & Drink",emoji:"💐",area:"Various studios",price:"₹1,500-2,500",desc:"Create flower bouquets & arrangements",details:"Beautiful floral design workshop",map:""},

  // 🍴 FOOD EXPERIENCES
  {name:"Sowcarpet Street Food Tour",cat:"Food Experiences",emoji:"🥘",area:"Sowcarpet",price:"₹1,200-1,800",desc:"2-hr walk through Chennai's wildest food district",details:"Rated 4.8/5. Also available as FREE self-guided tour!",rating:"4.8/5",map:"https://maps.google.com/?q=13.0975,80.2808"},
  {name:"Gods of Mylapore Tour",cat:"Food Experiences",emoji:"🛕",area:"Mylapore",price:"~₹1,500",desc:"Heritage + food walk — temples, culture, filter coffee",details:"5.0/5 with 265 reviews! An absolute must-do.",rating:"5.0/5",map:"https://maps.google.com/?q=13.0339,80.2707"},
  {name:"Firo Restaurant",cat:"Food Experiences",emoji:"🍽️",area:"Chennai",price:"Fine dining",desc:"Chennai's best new restaurant of 2025",details:"Per Ashwin Rajagopalan. Instagram @firo.chennai",map:""},
  {name:"Chettinad Canteen",cat:"Food Experiences",emoji:"🍲",area:"Teynampet",price:"Pre-set menu",desc:"Rotating Chettinad fine dining menus",details:"Unique pre-set menu concept with authentic Chettinad cuisine",map:"https://maps.google.com/?q=13.0372,80.2526"},
  {name:"Beachville Coffee",cat:"Food Experiences",emoji:"☕",area:"Alwarpet",price:"₹200-500",desc:"Specialty brew bar (New Dec 2025)",details:"Instagram @beachvillecoffee — specialty coffee lovers' paradise",map:"https://maps.google.com/?q=13.0292,80.2555"},

  // 🎬 ENTERTAINMENT
  {name:"Private Movie Screening",sub:"The Big Screen",cat:"Entertainment",emoji:"🎬",area:"Mogappair / Velachery",price:"₹2,499+",desc:"Private theatre for dates & celebrations",details:"Instagram @thebig_.screen | 📱 8939264777. Also: Luxe Prime in Nolambur",map:"https://maps.google.com/?q=13.0810,80.1653"},
  {name:"Stand-Up Comedy",cat:"Entertainment",emoji:"🎤",area:"Various venues",price:"₹300-1,500",desc:"Regular comedy shows across the city",details:"Watch for: Jagan Krishnan, Praveen Kumar, Alexander Babu. Book via BookMyShow.",map:""},
  {name:"Babylon Brewery",cat:"Entertainment",emoji:"🍸",area:"Chennai",price:"₹₹₹",desc:"Conceptual cocktail library bar (New 2025)",details:"Instagram @babylon.brewery — unique cocktail experience",map:""},
  {name:"Board Games Cafe",sub:"Untangle",cat:"Entertainment",emoji:"🎲",area:"Thoraipakkam",price:"₹150-300/hr",desc:"400+ board games! Blood on the Clocktower nights!",details:"Pay by time. Instagram @untangleindia",map:"https://maps.google.com/?q=12.9500,80.2362"},

  // 💑 DATE IDEAS
  {name:"Picnic Date Setup",cat:"Date Ideas",emoji:"🧺",area:"Chetpet Eco Park / ECR",price:"₹3,000-6,000",desc:"Curated picnic setup on beach or gardens",details:"Search 'picnic date Chennai' on Instagram for operators",map:"https://maps.google.com/?q=13.0766,80.2410"},
  {name:"Art Date",cat:"Date Ideas",emoji:"🎨",area:"Adyar / Nungambakkam",price:"₹2,000-4,000",desc:"Couples painting session in a studio",details:"Available at multiple art studios across Chennai",map:"https://maps.google.com/?q=13.0012,80.2565"},
  {name:"Private Beach Dinner",cat:"Date Ideas",emoji:"🌅",area:"ECR",price:"₹5,000+",desc:"Beach dining setups for special occasions",details:"Instagram @seathrudiner.ecr — romantic beachside dining",map:""},

  // 🏛️ MUSEUMS & CULTURE
  {name:"Government Museum",cat:"Museums & Culture",emoji:"🏛️",area:"Egmore",price:"₹50",desc:"6 buildings, 50 galleries. World-class Chola bronzes!",details:"The Chola bronze gallery alone is worth the visit. National Art Gallery included.",map:"https://maps.google.com/?q=13.0694,80.2570"},
  {name:"Fort St. George",cat:"Museums & Culture",emoji:"🏰",area:"George Town",price:"₹25",desc:"India's first English fortress (1644)",details:"Colonial-era artifacts and military history since 1644",map:"https://maps.google.com/?q=13.0798,80.2871"},
  {name:"AVM Heritage Museum",cat:"Museums & Culture",emoji:"🚗",area:"Vadapalani",price:"~₹100",desc:"Vintage cars + cinema at legendary AVM Studios",details:"Must visit for vintage car enthusiasts (Reddit May 2025)",map:"https://maps.google.com/?q=13.0462,80.2044"},
  {name:"DakshinaChitra",cat:"Museums & Culture",emoji:"🏠",area:"Muttukadu, ECR",price:"₹200",desc:"Open-air museum — traditional homes from 4 states",details:"Heritage museum showcasing South Indian architecture and culture",map:"https://maps.google.com/?q=12.8234,80.2418"},
  {name:"Cholamandal Artists' Village",cat:"Museums & Culture",emoji:"🎭",area:"Injambakkam, ECR",price:"₹50",desc:"India's largest self-supporting artists' village (1966)",details:"A living, working artists' community since 1966",map:"https://maps.google.com/?q=12.9236,80.2558"},
  {name:"VGP Marine Kingdom",cat:"Museums & Culture",emoji:"🦈",area:"ECR, Injambakkam",price:"₹500-900",desc:"India's largest walk-through aquarium",details:"Tunnel with sharks & rays. vgpmarinekingdom.in",map:"https://maps.google.com/?q=12.9121,80.2503"},
  {name:"B.M. Birla Planetarium",cat:"Museums & Culture",emoji:"🔭",area:"Kotturpuram",price:"₹30-75",desc:"Sky theatre + Periyar Science Centre",details:"8 science galleries + planetarium shows",map:"https://maps.google.com/?q=13.0119,80.2440"},

  // 🦩 NATURE & WILDLIFE
  {name:"Pulicat Lake Flamingos",cat:"Nature & Wildlife",emoji:"🦩",area:"60km north",price:"₹500-1,500",desc:"Thousands of Greater Flamingos (Oct-Mar)",details:"Ask for boatman Yuvaraj (highly reviewed). Peak Dec-Feb.",map:"https://maps.google.com/?q=13.4167,80.3167"},
  {name:"Vedanthangal Bird Sanctuary",cat:"Nature & Wildlife",emoji:"🐦",area:"85km south",price:"₹25",desc:"India's oldest bird sanctuary. 20+ species.",details:"Go 6-7am — by 9am birds leave. Active 2025-26 season confirmed.",map:"https://maps.google.com/?q=12.5458,79.8487"},
  {name:"Madras Crocodile Bank",cat:"Nature & Wildlife",emoji:"🐊",area:"Near Mahabalipuram, ECR",price:"₹50",desc:"2,000+ crocs, alligators, gharials",details:"Volunteer options available. madrascrocodilebank.org",map:"https://maps.google.com/?q=12.7435,80.2385"},
  {name:"Guindy National Park",cat:"Nature & Wildlife",emoji:"🦌",area:"Guindy",price:"₹15-45",desc:"National park INSIDE the city + Snake Park",details:"Blackbuck, deer, jackals. King cobras at the Snake Park.",map:"https://maps.google.com/?q=13.0037,80.2293"},
  {name:"Chetpet Eco Park",cat:"Nature & Wildlife",emoji:"🦋",area:"Chetpet",price:"Free",desc:"Restored urban lake with walking trails",details:"Butterflies, birds, serene walking paths. Great for morning jogs.",map:"https://maps.google.com/?q=13.0766,80.2410"},

  // 🎢 AMUSEMENT
  {name:"Queensland Amusement Park",cat:"Amusement",emoji:"🎢",area:"Chembarambakkam",price:"₹450+",desc:"Best rides among Chennai parks",details:"queenslandamusementpark.com — Reddit's top pick (Oct 2025)",map:"https://maps.google.com/?q=13.0300,80.0276"},
  {name:"MGM Dizzee World",cat:"Amusement",emoji:"🎠",area:"Muttukadu, ECR",price:"₹600-900",desc:"Classic amusement + water park",details:"Long-running Chennai favorite on ECR",map:"https://maps.google.com/?q=12.8268,80.2405"},
  {name:"VGP Universal Kingdom",cat:"Amusement",emoji:"🎡",area:"ECR, Injambakkam",price:"₹800-1,500",desc:"Rides + Aquarium + Ice Rink combo",details:"Combined ticket options available for best value",map:"https://maps.google.com/?q=12.9142,80.2505"},

  // 📚 CHILL
  {name:"Writers Cafe",cat:"Chill Spots",emoji:"📚",area:"Gopalapuram + more",price:"₹200-500",desc:"Book-themed cafe for reading & working",details:"Multiple locations across Chennai",map:"https://maps.google.com/?q=13.0541,80.2575"},
  {name:"Anna Centenary Library",cat:"Chill Spots",emoji:"📖",area:"Kotturpuram",price:"Free",desc:"Asia's largest library. Stunning architecture.",details:"Free entry. Amazing place to spend a quiet afternoon.",map:"https://maps.google.com/?q=13.0171,80.2400"},

  // 🧘 WELLNESS
  {name:"Mazaya Spa",cat:"Wellness",emoji:"🧖",area:"Anna Nagar",price:"₹₹₹",desc:"Chennai's 1st family spa — forest-themed (New 2025)",details:"📞 9080911750 for bookings",map:"https://maps.google.com/?q=13.0880,80.2179"},

  // 🚲 HERITAGE
  {name:"Heritage Bicycle Tour",cat:"Heritage",emoji:"🚲",area:"George Town",price:"₹1,500-2,500",desc:"Cycling through colonial-era Chennai at dawn",details:"Early morning 6-8am. Experience old Madras by bicycle.",map:"https://maps.google.com/?q=13.0837,80.2863"},
  {name:"Cordelia Cruise",cat:"Heritage",emoji:"🚢",area:"Chennai Port",price:"₹15,000+",desc:"Luxury cruise to Sri Lanka, Lakshadweep",details:"cordeliacruises.com — premium cruise experiences",map:"https://maps.google.com/?q=13.0927,80.2947"},

  // 🗺️ DAY TRIPS
  {name:"Mahabalipuram",cat:"Day Trips",emoji:"🗿",area:"60 km south",price:"₹50-500",desc:"Shore Temple, Pancha Rathas + rock climbing",details:"UNESCO World Heritage Site. Great for a day trip.",map:"https://maps.google.com/?q=12.6172,80.1927"},
  {name:"Pondicherry",cat:"Day Trips",emoji:"🇫🇷",area:"150 km south",price:"Varies",desc:"French Quarter, Auroville, cafes",details:"Perfect weekend getaway from Chennai",map:"https://maps.google.com/?q=11.9416,79.8083"},
  {name:"Kanchipuram",cat:"Day Trips",emoji:"🛕",area:"75 km west",price:"Varies",desc:"Ancient temples, silk sarees",details:"Temple town famous for Kanchipuram silk",map:"https://maps.google.com/?q=12.8342,79.7036"},
  {name:"Pichavaram Mangroves",cat:"Day Trips",emoji:"🌊",area:"200 km south",price:"₹200-500",desc:"World's 2nd largest mangrove — kayak through tunnels",details:"Incredible mangrove forest boat/kayak experience",map:"https://maps.google.com/?q=11.4300,79.7900"}
 ];

 // Categories
 const categories = [...new Set(activities.map(a => a.cat))];
 const catEmojis = {"Water Sports":"🏄","Adventure":"🎯","Sports & Fitness":"🏌️","Dance":"💃","Art & Creative":"🎨","Food & Drink":"🍳","Food Experiences":"🍴","Entertainment":"🎬","Date Ideas":"💑","Museums & Culture":"🏛️","Nature & Wildlife":"🦩","Amusement":"🎢","Chill Spots":"📚","Wellness":"🧘","Heritage":"🚲","Day Trips":"🗺️"};

 let activeCategory = 'All';
 let searchQuery = '';

 // Dark mode
 const html = document.documentElement;
 const darkBtn = document.getElementById('darkToggle');
 if (localStorage.getItem('dark') === 'true' || (!localStorage.getItem('dark') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  html.classList.add('dark'); darkBtn.textContent = '☀️';
 } else { html.classList.add('light'); }
 darkBtn.onclick = () => {
  html.classList.toggle('dark'); html.classList.toggle('light');
  const isDark = html.classList.contains('dark');
  localStorage.setItem('dark', isDark);
  darkBtn.textContent = isDark ? '☀️' : '🌙';
 };

 // Render pills
 function renderPills() {
  const c = document.getElementById('filterPills');
  c.innerHTML = `<button class="pill px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 ${activeCategory==='All'?'pill-active':'bg-white dark:bg-navy-800 text-navy-600 dark:text-navy-300 hover:bg-coral-50 dark:hover:bg-navy-700 border border-navy-200 dark:border-navy-700'}" data-cat="All">✨ All</button>`;
  categories.forEach(cat => {
    c.innerHTML += `<button class="pill px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 ${activeCategory===cat?'pill-active':'bg-white dark:bg-navy-800 text-navy-600 dark:text-navy-300 hover:bg-coral-50 dark:hover:bg-navy-700 border border-navy-200 dark:border-navy-700'}" data-cat="${cat}">${catEmojis[cat]||''} ${cat}</button>`;
  });
  c.querySelectorAll('.pill').forEach(b => b.onclick = () => {
    activeCategory = b.dataset.cat;
    renderPills(); renderGrid();
  });
 }

 // Filter
 function getFiltered() {
  return activities.filter(a => {
    const catMatch = activeCategory === 'All' || a.cat === activeCategory;
    const q = searchQuery.toLowerCase();
    const searchMatch = !q || [a.name,a.sub,a.cat,a.area,a.desc,a.details,a.price].filter(Boolean).join(' ').toLowerCase().includes(q);
    return catMatch && searchMatch;
  });
 }

 // Render grid
 function renderGrid() {
  const filtered = getFiltered();
  const grid = document.getElementById('grid');
  document.getElementById('countText').textContent = `Showing ${filtered.length} of ${activities.length} activities`;

  grid.innerHTML = filtered.map((a, i) => `
    <div class="activity-card card-enter card-bg border rounded-2xl p-5 cursor-pointer hover:shadow-xl hover:shadow-coral-500/5 dark:hover:shadow-coral-500/10 transition-shadow duration-300 group" data-idx="${activities.indexOf(a)}">
      <div class="flex items-start justify-between mb-3">
        <span class="text-3xl">${a.emoji}</span>
        <span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-coral-50 dark:bg-coral-500/10 text-coral-600 dark:text-coral-400">${a.price||'Free'}</span>
      </div>
      <h3 class="font-bold text-base text-navy-900 dark:text-white mb-1 group-hover:text-coral-500 transition-colors">${a.name}</h3>
      ${a.sub?`<p class="text-xs text-navy-500 dark:text-navy-400 mb-2">${a.sub}</p>`:''}
      <p class="text-sm text-navy-600 dark:text-navy-300 mb-3 line-clamp-2">${a.desc}</p>
      <div class="flex items-center justify-between">
        <span class="text-xs text-navy-400 dark:text-navy-500">📍 ${a.area}</span>
        ${a.rating?`<span class="text-xs font-medium text-amber-600 dark:text-amber-400">⭐ ${a.rating}</span>`:''}
      </div>
    </div>
  `).join('');

  // Animate cards
  gsap.fromTo('.activity-card', {opacity:0, y:40}, {opacity:1, y:0, duration:0.5, stagger:0.04, ease:'power2.out', clearProps:'all'});

  // Click handlers
  grid.querySelectorAll('.activity-card').forEach(card => {
    card.onclick = () => openModal(activities[+card.dataset.idx]);
  });
 }

 // Modal
 function openModal(a) {
  const m = document.getElementById('modal');
  document.getElementById('modalContent').innerHTML = `
    <div class="flex justify-between items-start mb-4">
      <span class="text-5xl">${a.emoji}</span>
      <button onclick="closeModal()" class="w-8 h-8 rounded-full bg-navy-100 dark:bg-navy-700 flex items-center justify-center text-navy-500 hover:bg-navy-200 dark:hover:bg-navy-600 transition-colors">✕</button>
    </div>
    <h2 class="text-2xl font-bold text-navy-900 dark:text-white mb-1">${a.name}</h2>
    ${a.sub?`<p class="text-sm text-navy-500 dark:text-navy-400 mb-3">${a.sub}</p>`:''}
    <div class="flex flex-wrap gap-2 mb-4">
      <span class="px-3 py-1 rounded-full text-xs font-medium bg-coral-50 dark:bg-coral-500/10 text-coral-600 dark:text-coral-400">${a.price||'Free'}</span>
      <span class="px-3 py-1 rounded-full text-xs font-medium bg-navy-100 dark:bg-navy-700 text-navy-600 dark:text-navy-300">${catEmojis[a.cat]||''} ${a.cat}</span>
      ${a.rating?`<span class="px-3 py-1 rounded-full text-xs font-medium bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400">⭐ ${a.rating}</span>`:''}
    </div>
    <p class="text-navy-700 dark:text-navy-200 mb-3">${a.desc}</p>
    <p class="text-sm text-navy-600 dark:text-navy-300 mb-4">${a.details||''}</p>
    <div class="flex items-center text-sm text-navy-500 dark:text-navy-400 mb-5">📍 ${a.area}</div>
    ${a.map?`<a href="${a.map}" target="_blank" rel="noopener" class="inline-flex items-center gap-2 bg-coral-500 hover:bg-coral-600 text-white px-5 py-2.5 rounded-full font-semibold text-sm transition-all hover:shadow-lg hover:shadow-coral-500/30">📍 Open in Google Maps →</a>`:''}
  `;
  m.classList.remove('hidden');
  gsap.fromTo(m.querySelector('.z-10'), {opacity:0, scale:0.9, y:30}, {opacity:1, scale:1, y:0, duration:0.35, ease:'back.out(1.5)'});
  document.body.style.overflow = 'hidden';
 }
 function closeModal() {
  document.getElementById('modal').classList.add('hidden');
  document.body.style.overflow = '';
 }
 document.addEventListener('keydown', e => { if(e.key==='Escape') closeModal(); });

 // Search
 document.getElementById('searchInput').addEventListener('input', e => {
  searchQuery = e.target.value;
  renderGrid();
 });

 // Init
 renderPills();
 renderGrid();

 // Hero animations
 gsap.to('#hero-sub', {opacity:1, y:0, duration:0.8, delay:0.2});
 gsap.fromTo('#hero-title', {opacity:0, y:30}, {opacity:1, y:0, duration:1, delay:0.4});
 gsap.to('#hero-desc', {opacity:1, y:0, duration:0.8, delay:0.7});
 gsap.to('#hero-btn', {opacity:1, y:0, duration:0.8, delay:0.9});
 </script>
 </body>
 </html>
No results found