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

function ValueProp({ icon, title, desc }) {
  return (
    <div className="value">
      <div className="value-icon"><Icon name={icon} size={44} stroke={1.4} /></div>
      <div className="value-title">{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}>
      <div className="event-poster" style={borderStyle.borderRadius ? { borderRadius: `${borderStyle.borderRadius}px ${borderStyle.borderRadius}px 0 0` } : {}}>
        {availabilityLabel && (
          <span className={`event-badge ${event.availability}`}>{availabilityLabel}</span>
        )}
        {event.photo
          ? <img className="event-photo" src={event.photo} alt={event.title} />
          : <EventPosterPlaceholder style={event.posterStyle} title={event.title} />}
        <div className="event-date">
          <div className="month">{event.date.month}</div>
          <div className="day">{event.date.day}</div>
        </div>
      </div>
      <div className="event-body">
        {skillMeta && (
          <div className="skill-chip" style={{ color: skillMeta.color }}>
            <span className="skill-dot" style={{ background: skillMeta.color }}></span>
            {skillMeta.label}
          </div>
        )}
        <div className="event-meta">{event.dow} · {event.time}</div>
        <h3 className="event-title">{event.title}</h3>
        <p className="event-venue">{event.venue}</p>
        <button className="event-cta" onClick={() => onClick(event)}>Get Tickets Now</button>
      </div>
    </article>
  );
}

function Hero({ onCta, variant = 'classic' }) {
  return (
    <section className="hero">
      <div className="hero-bg"><HeroStagePlaceholder /></div>
      <div className="container hero-inner">
        {variant === 'eyebrow' && <div className="eyebrow hero-eyebrow">Live in The Villages</div>}
        <h1 className="hero-title">
          Amazing
          <span className="script">Entertainment.</span>
        </h1>
        <div className="hero-sub">Unforgettable Moments.</div>
        <p className="hero-copy">
          Bringing the best comedians, hypnotists, magicians &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 hand-select the best in comedy, magic, hypnosis & more.' },
  { icon: 'masks',  title: 'Epic Theaters',        desc: 'World-class venues right here in The Villages.' },
  { icon: 'users',  title: 'Unforgettable Fun',    desc: 'Shows that entertain, engage and leave you talking for weeks.' },
  { icon: 'ticket', title: 'Easy Ticketing',       desc: 'Hassle-free online ticketing and great seats.' },
  { icon: 'heart',  title: 'Community Focused',    desc: 'Proud to bring exceptional live entertainment to our community.' },
];

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">
            <PhotoPlaceholder label="Who We Are — One Large Image" h={440} accent="#E0B656" />
          </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>
          <button className="btn btn-outline-gold" onClick={() => navigate('/events')}>
            View All Events <Icon name="chevronRight" size={14} stroke={2.4} />
          </button>
        </div>
        <div className="events-grid">
          {events.slice(0, 5).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 }}>Savannah</span>
              <span style={{ marginTop: -4 }}>Center</span>
            </div>
            <div className="venue-mark">
              <Icon name="pavilion" size={56} stroke={1.2} />
              <span style={{ marginTop: 16 }}>Lake Sumter</span>
              <span style={{ marginTop: -4 }}>Landing</span>
              <span className="sub">Market Square</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} />
      <ValueStrip items={VALUE_ITEMS} />
      <WhoWeAre />
      <UpcomingEvents events={events} onCardClick={onCardClick} layout={layout} />
      <VenuesBand />
      <Testimonials items={data.testimonials} />
    </main>
  );
}

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