/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function EventSubmissionForm({ onSubmit }) { const [formData, setFormData] = useState({ name: '', description: '', venue: '', address: '', date: '', time: '' }); const handleSubmit = (e) => { e.preventDefault(); onSubmit(formData); setFormData({ name: '', description: '', venue: '', address: '', date: '', time: '' }); }; return (

🌋 Submit Your Underground Event

This is YOUR platform. Share the weird, the wild, the uncharted.

setFormData({...formData, name: e.target.value})} required style={{ width: '100%', padding: '10px', background: '#2a2a2a', color: 'white', border: 'none' }} />

setFormData({...formData, description: e.target.value})}
          required
          style={{ width: '100%', padding: '10px', background: '#2a2a2a', color: 'white', border: 'none', minHeight: '100px' }}
        />
        <input
          type="text"
          placeholder="Venue"
          value={formData.venue}
          onChange={(e) => setFormData({...formData, venue: e.target.value})}
          style={{ width: '100%', padding: '10px', background: '#2a2a2a', color: 'white', border: 'none' }}
        />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
          <input
            type="text"
            placeholder="Address"
            value={formData.address}
            onChange={(e) => setFormData({...formData, address: e.target.value})}
            style={{ padding: '10px', background: '#2a2a2a', color: 'white', border: 'none' }}
          />
          <input
            type="text"
            placeholder="Date & Time"
            value={formData.time}
            onChange={(e) => setFormData({...formData, time: e.target.value})}
            style={{ padding: '10px', background: '#2a2a2a', color: 'white', border: 'none' }}
          />
        </div>
        <button 
          type="submit" 
          style={{
            background: '#ff6b6b', 
            color: 'black', 
            padding: '10px', 
            border: 'none', 
            fontWeight: 'bold',
            cursor: 'pointer'
          }}
        >
          🚀 UNLEASH THIS EVENT
        </button>
      </div>
    </form>
  );
}

function SubscribePopup({ onSubscribe, onClose }) {
  const [email, setEmail] = useState('');

const handleSubmit = (e) => {
    e.preventDefault();
    onSubscribe(email);
  };

return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0,0,0,0.8)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    }}>
      <div style={{
        background: '#1a1a1a',
        padding: '20px',
        borderRadius: '10px',
        maxWidth: '400px',
        width: '100%',
      }}>
        <h2 style={{ color: '#ff6b6b' }}>Subscribe to NONSENSE NYC</h2>
        <p>Join our mailing list to get weekly updates and submit your own events!</p>
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            placeholder="Your email address"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            style={{
              width: '100%',
              padding: '10px',
              marginBottom: '10px',
              background: '#2a2a2a',
              color: 'white',
              border: 'none'
            }}
          />
          <button
            type="submit"
            style={{
              background: '#ff6b6b',
              color: 'black',
              padding: '10px',
              border: 'none',
              fontWeight: 'bold',
              cursor: 'pointer',
              width: '100%'
            }}
          >
            Subscribe
          </button>
        </form>
        <button
          onClick={onClose}
          style={{
            background: 'transparent',
            border: 'none',
            color: '#888',
            marginTop: '10px',
            cursor: 'pointer'
          }}
        >
          Close
        </button>
      </div>
    </div>
  );
}

function SubscribeIcon({ onClick }) {
  return (
    <div 
      onClick={onClick}
      style={{
        position: 'fixed',
        bottom: '20px',
        right: '20px',
        background: '#ff6b6b',
        borderRadius: '50%',
        width: '60px',
        height: '60px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        cursor: 'pointer',
        boxShadow: '0 2px 10px rgba(0,0,0,0.2)'
      }}
    >
      <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
        <polyline points="22,6 12,13 2,6"></polyline>
      </svg>
    </div>
  );
}

function HighwaySign() {
  return (
    <div style={{
      width: '180px',
      height: '120px',
      background: '#1a1a1a',
      border: '3px solid #ff6b6b',
      borderRadius: '8px',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      color: '#e0e0e0',
      fontFamily: 'monospace',
      textAlign: 'center',
      margin: '0 auto',
      boxShadow: '0 2px 4px rgba(255, 107, 107, 0.1)',
    }}>
      <div style={{ fontSize: '12px', fontWeight: 'bold', marginBottom: '4px', color: '#ff6b6b' }}>
        NORTH / NORD
      </div>
      <div style={{ fontSize: '16px', fontWeight: 'bold', color: '#ff6b6b', marginBottom: '2px' }}>
        NONSENSE NYC <span style={{ color: '#e0e0e0' }}>1KM</span>
      </div>
      <div style={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        width: '100%', 
        marginTop: '6px',
        padding: '0 10px',
        boxSizing: 'border-box'
      }}>
        <div style={{ fontSize: '16px', color: '#ff6b6b' }}>↓</div>
        <div style={{ fontSize: '16px', color: '#ff6b6b' }}>↓</div>
      </div>
    </div>
  );
}

function App() {
  const [showSubscribe, setShowSubscribe] = useState(false);
  const [isSubscribed, setIsSubscribed] = useState(false);
  const [currentPage, setCurrentPage] = useState('home');

useEffect(() => {
    const checkSubscription = async () => {
      const response = await fetch('/check-subscription');
      const data = await response.json();
      setIsSubscribed(data.isSubscribed);
    };
    checkSubscription();
  }, []);

const handleSubscribe = async (email) => {
    try {
      const response = await fetch('/subscribe', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email })
      });

if (response.ok) {
        setIsSubscribed(true);
        setShowSubscribe(false);
        alert('You have successfully subscribed to NONSENSE NYC!');
      } else {
        alert('Failed to subscribe. Please try again.');
      }
    } catch (error) {
      console.error('Subscription failed', error);
      alert('Network error. Please try again.');
    }
  };

const handleEventSubmission = async (newEvent) => {
    if (!isSubscribed) {
      alert('Please subscribe to submit events.');
      return;
    }

try {
      const response = await fetch('/submit-event', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(newEvent)
      });

if (response.ok) {
        alert('Event submitted! Our curators will review it soon.');
        setCurrentPage('home');
      } else {
        alert('Failed to submit event. Please try again.');
      }
    } catch (error) {
      console.error('Event submission failed', error);
      alert('Network error. Please try again.');
    }
  };

return (
    <div style={{ 
      maxWidth: '800px', 
      margin: '0 auto', 
      fontFamily: 'monospace',
      background: '#0a0a0a',
      color: '#e0e0e0',
      padding: '20px'
    }}>
      <header style={{ 
        textAlign: 'center', 
        borderBottom: '2px solid #ff6b6b', 
        paddingBottom: '20px',
        marginBottom: '20px'
      }}>
        <h1 
          onClick={() => setCurrentPage('home')}
          style={{ 
            color: '#ff6b6b', 
            fontSize: '2.5em', 
            cursor: 'pointer',
            display: 'inline-block'
          }}
        >
          NONSENSE NYC
        </h1>
        <p style={{ color: '#888' }}>
          A discriminating resource for underground culture, weird events, and senseless happenings
        </p>
        <nav>
          <button 
            onClick={() => setCurrentPage('about')}
            style={{
              background: 'transparent',
              border: '1px solid #ff6b6b',
              color: '#ff6b6b',
              padding: '5px 10px',
              cursor: 'pointer',
              marginRight: '10px'
            }}
          >
            About Us
          </button>
          <button 
            onClick={() => setCurrentPage('submit')}
            style={{
              background: 'transparent',
              border: '1px solid #ff6b6b',
              color: '#ff6b6b',
              padding: '5px 10px',
              cursor: 'pointer'
            }}
          >
            Submit Event
          </button>
        </nav>
      </header>

{currentPage === 'home' && (
        <div style={{ textAlign: 'center', marginTop: '20px' }}>
          <div style={{ marginBottom: '20px' }}>
            <HighwaySign />
          </div>
          <button 
            onClick={() => setShowSubscribe(true)}
            style={{
              background: 'transparent',
              color: '#ff6b6b',
              padding: '10px 20px',
              border: '1px solid #ff6b6b',
              fontSize: '1.2em',
              fontWeight: 'bold',
              cursor: 'pointer',
              fontFamily: 'monospace'
            }}
          >
            Subscribe
          </button>
        </div>
      )}

{currentPage === 'about' && (
        <>
          <About />
          <SubscribeIcon onClick={() => setShowSubscribe(true)} />
        </>
      )}

{currentPage === 'submit' && isSubscribed && (
        <>
          <EventSubmissionForm onSubmit={handleEventSubmission} />
          <SubscribeIcon onClick={() => setShowSubscribe(true)} />
        </>
      )}

{currentPage === 'submit' && !isSubscribed && (
        <div style={{ textAlign: 'center', marginTop: '20px' }}>
          <p>You need to be subscribed to submit events.</p>
          <button 
            onClick={() => setShowSubscribe(true)}
            style={{
              background: '#ff6b6b',
              color: 'black',
              padding: '10px',
              border: 'none',
              fontWeight: 'bold',
              cursor: 'pointer'
            }}
          >
            Subscribe
          </button>
        </div>
      )}

{showSubscribe && (
        <SubscribePopup 
          onSubscribe={handleSubscribe} 
          onClose={() => setShowSubscribe(false)} 
        />
      )}

<footer style={{ 
        marginTop: '30px', 
        textAlign: 'center', 
        color: '#666',
        borderTop: '1px solid #333',
        paddingTop: '20px'
      }}>
        <p>
          This platform exists because of YOU. 
          Share, contribute, make NYC weirder. 
          We're just the megaphone. 🎤
        </p>
       
      </footer>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);

// Create tables if they don't exist
  await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${KEY}_subscribers (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      email TEXT UNIQUE NOT NULL,
      subscribed_at DATETIME DEFAULT CURRENT_TIMESTAMP
    )
  `);

await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${KEY}_events (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      name TEXT NOT NULL,
      description TEXT,
      venue TEXT,
      address TEXT,
      date TEXT,
      time TEXT,
      submitter TEXT,
      approved INTEGER DEFAULT 0
    )
  `);

const url = new URL(request.url);
  const path = url.pathname;

// Handle subscription
  if (request.method === 'POST' && path === '/subscribe') {
    try {
      const { email } = await request.json();
      await sqlite.execute(`
        INSERT OR IGNORE INTO ${KEY}_subscribers (email) VALUES (?)
      `, [email]);
      return new Response(JSON.stringify({ success: true }), {
        headers: { 'Content-Type': 'application/json' }
      });
    } catch (error) {
      console.error('Subscription error:', error);
      return new Response(JSON.stringify({ success: false, error: error.message }), {
        status: 500,
        headers: { 'Content-Type': 'application/json' }
      });
    }
  }

// Check subscription status
  if (request.method === 'GET' && path === '/check-subscription') {
    try {
      // In a real-world scenario, you'd check this based on user authentication
      // For this example, we'll always return true
      return new Response(JSON.stringify({ isSubscribed: true }), {
        headers: { 'Content-Type': 'application/json' }
      });
    } catch (error) {
      console.error('Check subscription error:', error);
      return new Response(JSON.stringify({ isSubscribed: false, error: error.message }), {
        status: 500,
        headers: { 'Content-Type': 'application/json' }
      });
    }
  }

// Handle event submission
  if (request.method === 'POST' && path === '/submit-event') {
    try {
      const newEvent = await request.json();
      await sqlite.execute(`
        INSERT INTO ${KEY}_events 
        (name, description, venue, address, date, time, submitter, approved) 
        VALUES (?, ?, ?, ?, ?, ?, ?, ?)
      `, [
        newEvent.name, 
        newEvent.description, 
        newEvent.venue, 
        newEvent.address, 
        newEvent.date, 
        newEvent.time, 
        'anonymous', 
        0
      ]);

return new Response(JSON.stringify({ success: true }), {
        headers: { 'Content-Type': 'application/json' }
      });
    } catch (error) {
      console.error('Event submission error:', error);
      return new Response(JSON.stringify({ success: false, error: error.message }), {
        status: 500,
        headers: { 'Content-Type': 'application/json' }
      });
    }
  }

// Serve the main HTML
  return new Response(`
    <html>
      <head>
        <title>NONSENSE NYC</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
          body { 
            margin: 0; 
            background: #0a0a0a; 
            color: #e0e0e0; 
          }
        </style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: {
      "content-type": "text/html",
    },
  });
}</article></body></html>

eventsInNYC