/* Home page — pixel-faithful to the supplied screenshot */
const { useState: useStateHome } = React;
const {
  Icon, HeroStagePlaceholder, TheaterAudiencePlaceholder,
  PolaroidPlaceholder, EventPosterPlaceholder, PhotoPlaceholder, SparkleDecoration
} = window;

const DOW_FULL = { SUN: 'Sunday', MON: 'Monday', TUE: 'Tuesday', WED: 'Wednesday', THU: 'Thursday', FRI: 'Friday', SAT: 'Saturday' };

function ValueProp({ icon, title, desc, c1, c2, ink }) {
  return (
    <div className="value">
      <div className="value-icon" style={{ background: `linear-gradient(145deg, ${c1}, ${c2})` }}>
        <Icon name={icon} size={31} stroke={1.9} />
      </div>
      <div className="value-title" style={{ color: ink }}>{title}</div>
      <p className="value-desc">{desc}</p>
    </div>);

}

function EventCard({ event, onClick, layout = 'classic' }) {
  const availabilityLabel = {
    'few-left': 'Few Seats Left',
    'selling-fast': 'Selling Fast',
    'good': null
  }[event.availability];

  const skillMeta = window.SKILL_META && window.SKILL_META[event.skill || event.type] || null;

  const borderStyle = layout === 'rounded' ? { borderRadius: 18 } :
  layout === 'sharp' ? { borderRadius: 2 } : {};

  return (
    <article className="event-card" style={borderStyle} onClick={() => onClick(event)} role="button" tabIndex={0}
    onKeyDown={(e) => {if (e.key === 'Enter' || e.key === ' ') {e.preventDefault();onClick(event);}}}>
      <div className="event-poster">
        <div className="event-media">
          {event.photo ?
          <img className="event-photo" src={event.photo} alt={event.title} /> :
          <EventPosterPlaceholder style={event.posterStyle} title={event.title} />}
          <div className="event-hover" aria-hidden="true">
            <span className="event-hover-label">View Details <Icon name="chevronRight" size={17} stroke={2.6} /></span>
          </div>
        </div>
      </div>
      <div className="event-body">
        {(skillMeta || availabilityLabel) && (
        <div className="event-toprow">
          {skillMeta &&
          <div className="skill-chip" style={{ color: skillMeta.color }}>
              <span className="skill-dot" style={{ background: skillMeta.color }}></span>
              {skillMeta.label}
            </div>
          }
          {availabilityLabel &&
          <span className={`avail-pill ${event.availability}`}>{availabilityLabel}</span>
          }
        </div>
        )}
        <div className="event-datetime">
          <span className="cal-block">
            <span className="cal-month">{event.date.month}</span>
            <span className="cal-day">{event.date.day}</span>
          </span>
          <span className="cal-when">
            <span className="cal-dow">{DOW_FULL[event.dow] || event.dow}</span>
            <span className="cal-time"><Icon name="clock" size={18} /> {event.time}</span>
          </span>
        </div>
        {/* Title text intentionally omitted on the card — the poster already
            names the show. Kept in event.title for the img alt (SEO / a11y)
            and the detail view. MCA 2026-08-06. */}
        <p className="event-venue"><Icon name="pin" size={20} /> {event.venue}</p>
        <button className="event-cta" onClick={(e) => {e.stopPropagation(); if (event.ticketUrl) { window.open(event.ticketUrl, '_blank', 'noopener'); } else { onClick(event); }}}>Get Tickets Now</button>
      </div>
    </article>);

}

// Gold sparkles drifting over the collage (right side of the hero). Hand-placed
// so they cluster around the stage-light glow, not the text. Purely decorative.
const HERO_SPARKS = [
  // Placed only on the DARK areas — the top stage-light band and the dark
  // corners/edges — so they never sit on a performer's face. Weighted to the top.
  { left: '61%', top: '2%',   s: 9,  delay: '0.0s', dur: '3.0s' },
  { left: '69%', top: '0.5%', s: 7,  delay: '1.0s', dur: '3.6s' },
  { left: '77%', top: '3%',   s: 12, delay: '0.4s', dur: '3.2s' },
  { left: '84%', top: '1%',   s: 8,  delay: '1.6s', dur: '3.8s' },
  { left: '52%', top: '6%',   s: 8,  delay: '0.7s', dur: '3.4s' },
  { left: '55%', top: '13%',  s: 12, delay: '2.1s', dur: '4.0s' },
  { left: '90%', top: '5%',   s: 9,  delay: '0.2s', dur: '3.5s' },
  { left: '94%', top: '11%',  s: 12, delay: '1.3s', dur: '3.3s' },
  { left: '59%', top: '8%',   s: 6,  delay: '2.5s', dur: '3.9s' },
  { left: '49%', top: '21%',  s: 6,  delay: '0.9s', dur: '3.7s' },
  { left: '92%', top: '20%',  s: 7,  delay: '1.9s', dur: '4.1s' },
  { left: '97%', top: '33%',  s: 7,  delay: '0.5s', dur: '3.1s' },
  { left: '47%', top: '35%',  s: 6,  delay: '2.8s', dur: '3.8s' },
];

function Hero({ onCta, variant = 'classic' }) {
  return (
    <section className="hero">
      <div className="hero-bg" aria-hidden="true"></div>
      <img className="hero-performers" src="assets/hero-performers.png" alt="Wand Presents performers — comedians, tribute artists and musicians" />
      <div className="hero-veil-r" aria-hidden="true"></div>
      <div className="hero-sparkles" aria-hidden="true">
        {HERO_SPARKS.map((sp, i) => (
          <span key={i} className="spark" style={{ left: sp.left, top: sp.top, width: sp.s, height: sp.s, animationDelay: sp.delay, animationDuration: sp.dur }} />
        ))}
      </div>
      <div className="container hero-inner">
        {variant === 'eyebrow' && <div className="eyebrow hero-eyebrow">Live in The Villages</div>}
        <h1 className="hero-title">
          <span className="hero-line">Amazing</span>
          <span className="script">Entertainment</span>
        </h1>
        <div className="hero-sub">in The Villages.</div>
        <p className="hero-copy">
          Bringing the best comedians, magicians, impersonators, hypnotists &amp; game shows to <span className="place">The Villages, Florida.</span>
        </p>
        <div className="hero-cta">
          <button className="btn btn-primary" onClick={onCta}>
            See Upcoming Events <Icon name="chevronRight" size={14} stroke={2.4} />
          </button>
        </div>
      </div>
    </section>);

}

function ValueStrip({ items }) {
  return (
    <section className="values">
      <div className="container">
        <div className="values-grid">
          {items.map((v) => <ValueProp key={v.title} {...v} />)}
        </div>
      </div>
    </section>);

}

const VALUE_ITEMS = [
{ icon: 'star', title: 'Top Entertainers', desc: 'We select the best in entertainment, custom for The Villages.', c1: '#F8AB2F', c2: '#E0921F', ink: '#9A6410' },
{ icon: 'users', title: 'Unforgettable Fun', desc: 'Shows that entertain, engage and leave you talking for weeks.', c1: '#E44C5F', c2: '#C4324A', ink: '#A62A3C' },
{ icon: 'ticket', title: 'Easy Ticketing', desc: 'Hassle-free online ticketing.', c1: '#3E86C8', c2: '#2A5E9A', ink: '#245A96' },
{ icon: 'heart', title: 'Community Focused', desc: 'Proud to bring exceptional live entertainment to our community.', c1: '#9B5CB0', c2: '#7E3F95', ink: '#6E3E86' }];


function WhoWeAre() {
  return (
    <section className="who">
      <SparkleDecoration size={32} top={40} right={'8%'} opacity={0.85} />
      <SparkleDecoration size={18} bottom={50} left={'45%'} opacity={0.9} />
      <SparkleDecoration size={24} bottom={20} right={'12%'} opacity={0.8} />
      <div className="container">
        <div className="who-grid">
          <div>
            <div className="eyebrow-ink">Who We Are</div>
            <h2>WAND Presents brings world-class entertainment to the heart of The Villages.</h2>
            <p>
              We're passionate about creating extraordinary live experiences that bring our community
              together. From side-splitting comedians and incredible magicians to mind-bending hypnotists
              and nostalgic game shows, our mission is simple: deliver amazing shows you'll love and remember.
            </p>
            <div className="who-sig">Great Shows. Good Times. <em style={{ textDecoration: 'underline', textDecorationStyle: 'solid', textUnderlineOffset: 6 }}>Lasting Memories.</em></div>
          </div>
          <div className="who-feature">
            <img src="assets/who-we-are.png" alt="WAND Presents" style={{ width: '100%', height: 'auto', borderRadius: 16, display: 'block', boxShadow: '0 30px 70px -30px rgba(0,0,0,0.7)' }} />
          </div>
        </div>
      </div>
    </section>);

}

function UpcomingEvents({ events, onCardClick, layout = 'classic' }) {
  const navigate = (route) => {window.location.hash = route;};
  return (
    <section className="events" id="upcoming">
      <div className="container">
        <div className="events-header">
          <div>
            <div className="eyebrow">Upcoming Events</div>
            <h2>Don't Miss What's Next!</h2>
            <p className="sub">Incredible shows. Unforgettable nights.</p>
          </div>
        </div>
        <div className="events-grid">
          {events.map((ev) =>
          <EventCard key={ev.id} event={ev} onClick={onCardClick} layout={layout} />
          )}
        </div>
        <div className="events-footer">More amazing shows added regularly!</div>
      </div>
    </section>);

}

function VenuesBand() {
  const navigate = (route) => {window.location.hash = route;};
  return (
    <section className="venues-band">
      <div className="venues-band-bg"><TheaterAudiencePlaceholder /></div>
      <div className="container">
        <div className="venues-band-inner">
          <div>
            <h2>The Best Seats.<br />The Best Shows.<br />Right Here at Home.</h2>
            <p>We partner with The Villages' premier venues to bring you top-tier entertainment close to where you live and love.</p>
            <button className="btn btn-outline-gold" onClick={() => navigate('/venues')}>Our Venues</button>
          </div>
          <div className="venue-marks">
            <div className="venue-mark">
              <Icon name="columns" size={56} stroke={1.2} />
              <span style={{ marginTop: 16 }}>Epic</span>
              <span style={{ marginTop: -4 }}>Theatres</span>
            </div>
            <div className="venue-mark">
              <Icon name="columns" size={56} stroke={1.2} />
              <span style={{ marginTop: 16 }}>Old Mill</span>
              <span style={{ marginTop: -4 }}>Playhouse</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Testimonials({ items }) {
  return (
    <section className="testimonials">
      <SparkleDecoration size={24} top={40} left={'4%'} />
      <SparkleDecoration size={36} bottom={50} right={'4%'} />
      <SparkleDecoration size={18} bottom={30} right={'2%'} opacity={0.8} />
      <div className="container">
        <div className="testimonials-grid">
          <div className="testimonials-intro">
            <div className="eyebrow-ink">What Our Guests Are Saying</div>
            <div className="script">Thank You!</div>
          </div>
          {items.slice(0, 3).map((t, i) =>
          <article key={i} className="testimonial">
              <div className="stars">★ ★ ★ ★ ★</div>
              <p className="testimonial-quote">"{t.quote}"</p>
              <div className="testimonial-author">– {t.author}</div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function HomePage({ events, onCardClick, layout }) {
  const data = window.WAND_DATA;
  const goToEvents = () => {document.querySelector('#upcoming')?.scrollIntoView({ behavior: 'smooth' });};
  return (
    <main>
      <Hero onCta={goToEvents} />
      <UpcomingEvents events={events} onCardClick={onCardClick} layout={layout} />
      <WhoWeAre />
      <VenuesBand />
      <Testimonials items={data.testimonials} />
    </main>);

}

Object.assign(window, { HomePage, EventCard, Hero, ValueStrip, WhoWeAre, UpcomingEvents, VenuesBand, Testimonials });