/* Inner pages: About, Events list, Venues, Gallery, FAQ, Contact */
const { useState: useStatePages } = React;
const {
  Icon, EventCard, PhotoPlaceholder, PolaroidPlaceholder, SparkleDecoration,
} = window;

function PageHero({ eyebrow, title, script }) {
  return (
    <section className="page-hero">
      <SparkleDecoration size={20} top={28} left={'14%'} />
      <SparkleDecoration size={28} bottom={36} right={'14%'} />
      <div className="container">
        {eyebrow && <div className="eyebrow">{eyebrow}</div>}
        <h1>
          {title}
          {script && <span className="script">{script}</span>}
        </h1>
      </div>
    </section>
  );
}

/* ============ About ============ */
function AboutPage() {
  return (
    <main>
      <PageHero eyebrow="About Us" title="Bringing Magic to" script="The Villages." />
      <section className="page">
        <div className="container">
          <div className="about-grid">
            <div>
              <div className="eyebrow">Our Story</div>
              <h2 className="h-display" style={{ fontSize: 38, marginTop: 14, marginBottom: 20 }}>
                Built by entertainers, for the community we call home.
              </h2>
              <p style={{ color: 'var(--fg-muted)', lineHeight: 1.75, fontSize: 15.5 }}>
                WAND Presents started with a simple idea: world-class entertainment shouldn't require a road trip.
                Our team of producers, talent buyers, and venue partners works year-round to bring the best
                comedians, magicians, hypnotists, and game shows directly to The Villages.
              </p>
              <p style={{ color: 'var(--fg-muted)', lineHeight: 1.75, fontSize: 15.5, marginTop: 14 }}>
                We curate every show with one question in mind — would we bring our own friends and family?
                If the answer isn't an immediate yes, it doesn't make our calendar.
              </p>
            </div>
            <div style={{ borderRadius: 14, overflow: 'hidden', boxShadow: '0 20px 60px -20px rgba(0,0,0,0.5)', minHeight: 380 }}>
              <PhotoPlaceholder label="Founders / Behind The Scenes" h={380} />
            </div>
          </div>

          <div className="stat-row">
            <div className="stat"><div className="stat-num">120+</div><div className="stat-label">Shows Per Year</div></div>
            <div className="stat"><div className="stat-num">35k</div><div className="stat-label">Tickets Sold</div></div>
            <div className="stat"><div className="stat-num">4.9★</div><div className="stat-label">Guest Rating</div></div>
          </div>

          <div className="about-grid" style={{ marginTop: 48 }}>
            <div style={{ borderRadius: 14, overflow: 'hidden', minHeight: 360, order: -1 }}>
              <PhotoPlaceholder label="Show in Progress" h={360} accent="#C77CE2" />
            </div>
            <div>
              <div className="eyebrow">Our Mission</div>
              <h2 className="h-display" style={{ fontSize: 38, marginTop: 14, marginBottom: 20 }}>
                Great shows. Good times. Lasting memories.
              </h2>
              <ul style={{ paddingLeft: 0, listStyle: 'none', display: 'grid', gap: 16 }}>
                {[
                  { t: 'Talent that travels', d: 'Touring acts you\'d normally see in Vegas, New York, or LA.' },
                  { t: 'Comfortable venues', d: 'Climate-controlled, accessible, and minutes from your door.' },
                  { t: 'Fair pricing', d: 'No surprise fees. No dynamic pricing tricks. Just honest tickets.' },
                ].map((b, i) => (
                  <li key={i} style={{ display: 'flex', gap: 14 }}>
                    <div style={{ flex: '0 0 auto', width: 32, height: 32, borderRadius: 999, background: 'var(--accent)', color: 'var(--navy-900)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon name="check" size={18} stroke={2.6} />
                    </div>
                    <div>
                      <div style={{ fontFamily: 'var(--f-display)', fontSize: 19, color: 'var(--fg)', marginBottom: 4 }}>{b.t}</div>
                      <div style={{ color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.6 }}>{b.d}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============ Events list ============ */
const EVENT_TYPES = ['All', 'Comedy', 'Magic', 'Hypnosis', 'Game Show', 'Family'];
const VENUE_FILTERS = ['All Venues', 'Savannah Center', 'Lake Sumter Landing Market Square'];

function EventsPage({ events: allEvents, onCardClick, layout }) {
  const [type, setType] = useStatePages('All');
  const [venue, setVenue] = useStatePages('All Venues');
  const source = allEvents || [];
  const events = source.filter((e) =>
    (type === 'All' || e.type === type) && (venue === 'All Venues' || e.venue === venue)
  );

  return (
    <main>
      <PageHero eyebrow="What's Coming Up" title="All " script="Upcoming Events" />
      <section className="page" style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="filter-bar">
            <span className="filter-label">Type</span>
            {EVENT_TYPES.map((t) => (
              <button key={t} className={`filter-chip ${t === type ? 'active' : ''}`} onClick={() => setType(t)}>{t}</button>
            ))}
            <span style={{ width: 1, height: 22, background: 'rgba(245,238,220,0.15)', margin: '0 8px' }} />
            <span className="filter-label">Venue</span>
            {VENUE_FILTERS.map((v) => (
              <button key={v} className={`filter-chip ${v === venue ? 'active' : ''}`} onClick={() => setVenue(v)}>
                {v === 'Lake Sumter Landing Market Square' ? 'Lake Sumter' : v}
              </button>
            ))}
          </div>
          <div className="events-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
            {events.map((ev) => <EventCard key={ev.id} event={ev} onClick={onCardClick} layout={layout} />)}
          </div>
          {events.length === 0 && (
            <div style={{ textAlign: 'center', padding: '60px 0', color: 'var(--fg-muted)' }}>
              No shows match those filters. <a href="#" onClick={(e) => { e.preventDefault(); setType('All'); setVenue('All Venues'); }} style={{ color: 'var(--accent)' }}>Reset filters</a>.
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

/* ============ Venues ============ */
function VenueMapPlaceholder({ venue }) {
  return (
    <div className="venue-map">
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
        <defs>
          <linearGradient id={`map-${venue.id}`} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#18295A" />
            <stop offset="100%" stopColor="#0B1635" />
          </linearGradient>
        </defs>
        <rect width="400" height="300" fill={`url(#map-${venue.id})`} />
        {/* fake road grid */}
        <g stroke="rgba(212,166,66,0.18)" strokeWidth="1.2">
          <line x1="0" y1="80" x2="400" y2="80" />
          <line x1="0" y1="160" x2="400" y2="160" />
          <line x1="0" y1="220" x2="400" y2="220" />
          <line x1="100" y1="0" x2="100" y2="300" />
          <line x1="220" y1="0" x2="220" y2="300" />
          <line x1="320" y1="0" x2="320" y2="300" />
        </g>
        <g stroke="rgba(212,166,66,0.35)" strokeWidth="2.5">
          <path d="M0 130 Q150 140 220 80 T 400 60" fill="none" />
        </g>
        {venue.id === 'lake-sumter' && (
          <ellipse cx="280" cy="200" rx="110" ry="50" fill="#1F3370" opacity="0.6" />
        )}
        {/* pin */}
        <g transform="translate(200 150)">
          <circle r="18" fill="var(--accent)" opacity="0.25" />
          <circle r="9" fill="var(--accent)" />
          <path d="M0 -24 L7 0 L-7 0 Z" fill="var(--accent)" />
        </g>
        <text x="200" y="200" textAnchor="middle" fontSize="11" fontFamily="Manrope" fontWeight="700" letterSpacing="2" fill="rgba(245,238,220,0.6)">
          {venue.name.toUpperCase()}
        </text>
      </svg>
      <button className="btn btn-outline-gold" style={{ position: 'absolute', bottom: 14, right: 14, fontSize: 10 }}>
        <Icon name="pin" size={12} /> Get Directions
      </button>
    </div>
  );
}

function VenuesPage() {
  return (
    <main>
      <PageHero eyebrow="Where The Magic Happens" title="Our " script="Venues" />
      <section className="page" style={{ paddingTop: 40 }}>
        <div className="container">
          {window.WAND_DATA.venues.map((v) => (
            <div className="venue-card" key={v.id}>
              <div className="venue-card-body">
                <div className="eyebrow">Premier Venue</div>
                <h3>{v.name}</h3>
                <div className="meta">{v.meta}</div>
                <p>{v.description}</p>
                <div className="venue-amenities">
                  {v.amenities.map((a) => <span className="amenity" key={a}>{a}</span>)}
                </div>
                <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center', color: 'var(--fg-muted)', fontSize: 13.5 }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon name="pin" size={14} /> {v.address}</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon name="phone" size={14} /> {v.phone}</span>
                </div>
              </div>
              <VenueMapPlaceholder venue={v} />
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

/* ============ Gallery ============ */
function GalleryPage() {
  const tiles = [
    { k: 'comedian',  size: 's6', label: 'Stand-Up Comedy' },
    { k: 'magician',  size: 's3', label: 'Magic Show' },
    { k: 'gameShow',  size: 's3', label: 'Game Show' },
    { k: 'audience',  size: 's4', label: 'Audience' },
    { k: 'hypnotist', size: 's4', label: 'Hypnosis' },
    { k: 'comedian',  size: 's4', label: 'Comedy Night' },
    { k: 'audience',  size: 's8', label: 'Sold-Out Crowd' },
    { k: 'magician',  size: 's4', label: 'Sleight of Hand' },
    { k: 'gameShow',  size: 's6', label: 'Name That Tune' },
    { k: 'comedian',  size: 's6', label: 'Backstage' },
  ];

  return (
    <main>
      <PageHero eyebrow="Past Shows" title="Moments to" script="Remember" />
      <section className="page" style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="gallery-grid">
            {tiles.map((t, i) => (
              <div key={i} className={`gallery-tile ${t.size}`}>
                <PolaroidPlaceholder kind={t.k} label={t.label} />
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============ FAQ ============ */
function FAQPage() {
  const [open, setOpen] = useStatePages(0);
  return (
    <main>
      <PageHero eyebrow="Got Questions?" title="Frequently Asked " script="Questions" />
      <section className="page" style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="faq">
            {window.WAND_DATA.faqs.map((f, i) => (
              <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{f.q}</span>
                  <span className="plus">+</span>
                </button>
                <div className="faq-a">{f.a}</div>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 56 }}>
            <p style={{ color: 'var(--fg-muted)' }}>Don't see your question?</p>
            <a href="#/contact" className="btn btn-outline-gold" style={{ marginTop: 12 }}>Contact Us</a>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============ Contact ============ */
function ContactPage() {
  const [sent, setSent] = useStatePages(false);
  const [form, setForm] = useStatePages({ name: '', email: '', subject: 'General Inquiry', message: '' });
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 5000);
    setForm({ name: '', email: '', subject: 'General Inquiry', message: '' });
  };

  return (
    <main>
      <PageHero eyebrow="Let's Talk" title="Get in" script="Touch" />
      <section className="page" style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="contact-grid">
            <form className="contact-form" onSubmit={submit}>
              <div>
                <label>Your Name</label>
                <input type="text" required value={form.name} onChange={update('name')} placeholder="Jane Smith" />
              </div>
              <div>
                <label>Email</label>
                <input type="email" required value={form.email} onChange={update('email')} placeholder="you@example.com" />
              </div>
              <div>
                <label>Subject</label>
                <select value={form.subject} onChange={update('subject')}>
                  <option>General Inquiry</option>
                  <option>Group / VIP Booking</option>
                  <option>Ticketing Help</option>
                  <option>Accessibility</option>
                  <option>Press / Partnerships</option>
                </select>
              </div>
              <div>
                <label>Message</label>
                <textarea required value={form.message} onChange={update('message')} placeholder="How can we help you?" />
              </div>
              <button type="submit" className="btn btn-primary" style={{ justifySelf: 'flex-start' }}>
                {sent ? '✓ Message Sent' : 'Send Message'}
              </button>
            </form>

            <aside className="contact-info">
              <h3>Box Office</h3>
              <div className="contact-row">
                <Icon name="phone" size={18} className="ico" />
                <div><div className="lbl">Phone</div><div className="val">(352) 414-2857</div></div>
              </div>
              <div className="contact-row">
                <Icon name="mail" size={18} className="ico" />
                <div><div className="lbl">Email</div><div className="val">info@wandpresents.com</div></div>
              </div>
              <div className="contact-row">
                <Icon name="clock" size={18} className="ico" />
                <div><div className="lbl">Hours</div><div className="val">Mon–Fri 9am–6pm<br />Sat 10am–4pm</div></div>
              </div>
              <div className="contact-row">
                <Icon name="pin" size={18} className="ico" />
                <div><div className="lbl">Mailing</div><div className="val">PO Box 8120<br />The Villages, FL 32158</div></div>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============ Privacy stub ============ */
function PrivacyPage() {
  return (
    <main>
      <PageHero eyebrow="Legal" title="Privacy " script="Policy" />
      <section className="page" style={{ paddingTop: 40 }}>
        <div className="container" style={{ maxWidth: 760, color: 'var(--fg-muted)', lineHeight: 1.8 }}>
          <p>WAND Presents respects your privacy. This page is a placeholder — please replace with your full privacy policy.</p>
          <p>We collect only the information needed to process ticket purchases, deliver receipts, and send the marketing emails you opt into. We never sell your data.</p>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { AboutPage, EventsPage, VenuesPage, GalleryPage, FAQPage, ContactPage, PrivacyPage });