/* 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, inline }) {
  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 className={inline ? 'ph-inline' : ''}>
          {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'];
const VENUE_FILTERS = ['All Venues', 'Epic Theater', 'Old Mill Playhouse'];

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}
              </button>
            ))}
          </div>
          <div className="events-grid">
            {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 }) {
  if (venue.image) {
    return (
      <div className="venue-map">
        <img src={venue.image} alt={venue.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(11,18,40,0) 45%, rgba(11,18,40,0.82) 100%)', pointerEvents: 'none' }}></div>
        <div style={{ position: 'absolute', bottom: 14, left: 16, right: 16, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 12.5, color: 'rgba(245,238,220,0.95)', maxWidth: 210, lineHeight: 1.4, fontWeight: 600 }}>{venue.address}</span>
          <a
            className="btn btn-outline-gold"
            href={`https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(venue.address)}`}
            target="_blank"
            rel="noopener noreferrer"
            style={{ fontSize: 13, letterSpacing: '0.12em', whiteSpace: 'nowrap' }}
          >
            <Icon name="pin" size={12} /> Get Directions
          </a>
        </div>
      </div>
    );
  }
  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>
      <div style={{ position: 'absolute', bottom: 14, left: 16, right: 16, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
        <span style={{ fontSize: 12.5, color: 'rgba(245,238,220,0.9)', maxWidth: 210, lineHeight: 1.4, fontWeight: 500 }}>{venue.address}</span>
        <a
          className="btn btn-outline-gold"
          href={`https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(venue.address)}`}
          target="_blank"
          rel="noopener noreferrer"
          style={{ fontSize: 13, letterSpacing: '0.12em', whiteSpace: 'nowrap' }}
        >
          <Icon name="pin" size={12} /> Get Directions
        </a>
      </div>
    </div>
  );
}

function VenuesPage() {
  return (
    <main>
      <PageHero eyebrow="Where The Magic Happens" title="Our " script="Venue" inline />
      <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: 20, flexWrap: 'wrap', alignItems: 'center', color: 'var(--fg-muted)', fontSize: 15.5 }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon name="pin" size={16} /> {v.address}</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon name="phone" size={16} /> {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">admin@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 Policy ============ */
function PrivacyPage() {
  return (
    <main>
      <PageHero eyebrow="Legal" title="Privacy " script="Policy" />
      <section className="page" style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="legal">
            <div className="legal-updated">Last updated: August 13, 2026</div>
            <p className="legal-lead">
              WAND Presents ("WAND Presents," "we," "us," or "our") respects your privacy and is
              committed to protecting the personal information you share with us. This Privacy Policy
              explains what we collect when you visit wandpresents.com or interact with us, how we use
              it, and the choices you have.
            </p>

            <h2>1. Who We Are</h2>
            <p>
              WAND Presents is a live-entertainment presenter serving The Villages, Florida, and a
              division of Wand Enterprises. You can reach us any time at{' '}
              <a href="mailto:admin@wandpresents.com">admin@wandpresents.com</a> or (352) 414-2857.
            </p>

            <h2>2. Information We Collect</h2>
            <h3>Information you give us</h3>
            <ul>
              <li><strong>Contact requests</strong> — when you use our contact form or email us, we receive your name, email address, and the details of your message.</li>
              <li><strong>Newsletter sign-ups</strong> — if you join our VIP list, we collect your first name, last name (optional), and email address.</li>
              <li><strong>Group and booking inquiries</strong> — any details you choose to share when arranging group seating or special accommodations.</li>
            </ul>
            <h3>Information collected automatically</h3>
            <ul>
              <li>Basic technical data such as your device type, browser, and IP address, gathered by our hosting provider to keep the site secure and running.</li>
              <li>Small amounts of information stored in your browser (for example, remembering that you've already seen our newsletter invitation) so the site works as expected.</li>
            </ul>

            <h2>3. How We Use Your Information</h2>
            <ul>
              <li>To respond to your questions, booking requests, and accessibility needs.</li>
              <li>To send you show announcements, ticket releases, and special offers — only if you've opted in.</li>
              <li>To operate, maintain, secure, and improve our website.</li>
              <li>To comply with the law and protect our rights and our guests.</li>
            </ul>

            <h2>4. Ticket Purchases</h2>
            <p>
              Tickets to WAND Presents shows are sold and processed by{' '}
              <strong>The Villages Entertainment</strong>, which acts as the ticket seller. When you
              buy tickets, your payment and order details are handled on their systems under their
              terms and privacy policy. <strong>We do not collect or store your credit card or
              payment information on this website.</strong>
            </p>

            <h2>5. Email &amp; Marketing</h2>
            <p>
              We send marketing emails only to people who have signed up to receive them. Our email
              is delivered through <strong>Brevo</strong>, our email service provider, who processes
              your name and email address on our behalf solely to send these messages. Every email
              includes an unsubscribe link, and you can opt out at any time — or email us and we'll
              remove you.
            </p>

            <h2>6. Cookies &amp; Similar Technologies</h2>
            <p>
              We use cookies and similar technologies for two purposes: to make the site work and
              remember basic preferences, and for advertising and measurement. Our pages also load
              fonts from a third-party provider so they display correctly.
            </p>
            <p>
              For advertising, our site uses the <strong>Meta Pixel</strong> (from Meta, the company
              behind Facebook and Instagram). It places cookies and collects information about your
              visit — such as the pages you view and the actions you take on our site — which is
              shared with Meta. We use this to measure how our ads perform, to show relevant ads to
              people who have visited our site, and to reach audiences of similar people.
            </p>
            <p>
              We do <strong>not</strong> sell your personal information. You can block or delete
              cookies in your browser settings, adjust ad personalization in your Meta (Facebook)
              account settings, and use industry opt-out tools such as the Digital Advertising
              Alliance (<a href="https://optout.aboutads.info" target="_blank" rel="noopener noreferrer">optout.aboutads.info</a>).
            </p>

            <h2>7. How We Share Information</h2>
            <p>
              We <strong>do not sell or rent</strong> your personal information. We share it only in
              these limited situations:
            </p>
            <ul>
              <li><strong>Service providers &amp; advertising partners</strong> who help us run and promote our shows — such as our website host (Cloudflare), our email provider (Brevo), our ticketing partner (The Villages Entertainment), and <strong>Meta</strong> (Facebook &amp; Instagram, for the ad measurement and audiences described in Section 6) — and only as needed for their service.</li>
              <li><strong>Legal reasons</strong> — if required by law, or to protect the safety, rights, or property of our guests, our staff, or WAND Presents.</li>
            </ul>

            <h2>8. Data Retention</h2>
            <p>
              We keep your information only as long as it's needed for the purposes described here —
              for example, to keep you on our newsletter until you unsubscribe, or to maintain records
              of your inquiries — and then delete or de-identify it.
            </p>

            <h2>9. Your Choices &amp; Rights</h2>
            <p>
              You may ask us to access, correct, or delete the personal information we hold about you,
              and you can unsubscribe from marketing emails at any time. To make a request, email{' '}
              <a href="mailto:admin@wandpresents.com">admin@wandpresents.com</a>. Depending on where you
              live, you may have additional rights under applicable privacy laws; we honor those rights
              where they apply.
            </p>

            <h2>10. Children's Privacy</h2>
            <p>
              Our website is intended for a general, adult audience and is not directed to children
              under 13. We do not knowingly collect personal information from children. If you believe
              a child has provided us information, please contact us and we will delete it.
            </p>

            <h2>11. Data Security</h2>
            <p>
              We take reasonable measures to protect your information, and our site is served over a
              secure (HTTPS) connection. However, no method of transmission or storage is completely
              secure, and we cannot guarantee absolute security.
            </p>

            <h2>12. Third-Party Links</h2>
            <p>
              Our site may link to other websites — such as our ticketing partner or social media
              pages. We are not responsible for the privacy practices of those sites, and we encourage
              you to review their policies.
            </p>

            <h2>13. Changes to This Policy</h2>
            <p>
              We may update this Privacy Policy from time to time. When we do, we'll revise the "Last
              updated" date at the top of this page. Significant changes may be highlighted on our site.
            </p>

            <h2>14. Contact Us</h2>
            <div className="legal-contact">
              <p style={{ margin: 0 }}>
                <strong>WAND Presents</strong>, a Division of Wand Enterprises<br />
                Email: <a href="mailto:admin@wandpresents.com">admin@wandpresents.com</a><br />
                Phone: (352) 414-2857<br />
                Mail: PO Box 8120, The Villages, FL 32158
              </p>
            </div>
          </div>
        </div>
      </section>

      <style dangerouslySetInnerHTML={{ __html: `
        .legal { max-width: 820px; margin: 0 auto; color: var(--fg-muted); line-height: 1.8; font-size: 16px; }
        .legal .legal-updated { color: var(--accent); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
        .legal .legal-lead { color: var(--fg); font-size: 18px; line-height: 1.75; margin: 0 0 8px; }
        .legal h2 { font-family: var(--f-display); color: var(--fg); font-size: 23px; font-weight: 600; margin: 38px 0 12px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); }
        .legal h3 { color: var(--fg); font-size: 16px; font-weight: 700; margin: 22px 0 8px; }
        .legal p { margin: 0 0 14px; }
        .legal ul { margin: 0 0 16px; padding-left: 20px; }
        .legal li { margin: 0 0 9px; padding-left: 4px; }
        .legal a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(248,171,47,.4); }
        .legal a:hover { border-bottom-color: var(--accent); }
        .legal strong { color: var(--fg); font-weight: 700; }
        .legal .legal-contact { margin-top: 18px; padding: 22px 24px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.03); line-height: 1.9; }
        @media (max-width: 640px) { .legal { font-size: 15.5px; } .legal h2 { font-size: 21px; } }
      ` }} />
    </main>
  );
}

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