/* eslint-disable */
// V3 — 4 Countries section, Interactive month calendar, Events grid

// ---------- COUNTRIES ----------
const V3Countries = ({ country, setCountry }) => (
  <section id="countries" className="v3-countries">
    <V3Swirl className="v3-countries-swirl" color="#C8E150" opacity={0.5} rotate={20}/>
    <div className="v3-section-head v3-countries-head">
      <span className="v3-eyebrow">Where we paint</span>
      <h2 className="v3-h2">Painting in <em>4 countries.</em></h2>
      <p>Lisboa to Belfast, York to Dublin. Pick your spot — every venue handpicked for the vibe.</p>
    </div>
    <div className="v3-countries-grid">
      {window.V3_COUNTRIES.map(c => (
        <button key={c.id} onClick={() => setCountry(c.id)}
          className={"v3-country " + (country === c.id ? "active" : "")}>
          <div className="v3-country-map">
            <V3Map kind={c.mapKey}/>
          </div>
          <div className="v3-country-text">
            <h3>{c.name}</h3>
            <span className="v3-country-cities">{c.cities}</span>
            <span className="v3-country-count">{c.count} events this month →</span>
          </div>
        </button>
      ))}
    </div>
  </section>
);

const V3Map = ({ kind }) => {
  const paths = {
    portugal: "M40,8 L52,8 L58,18 L62,32 L60,48 L66,62 L62,78 L58,98 L52,114 L46,118 L42,118 L34,108 L30,92 L28,76 L30,60 L26,46 L28,30 L32,16 Z",
    ireland:  "M22,30 L40,22 L62,24 L78,30 L88,42 L86,56 L80,68 L72,80 L60,86 L42,84 L26,76 L18,62 L14,48 L16,38 Z",
    gb:       "M48,6 L56,4 L64,12 L62,22 L72,28 L70,42 L78,52 L80,66 L74,80 L80,92 L72,104 L62,108 L52,112 L42,112 L36,104 L42,94 L38,86 L34,76 L40,66 L36,58 L42,50 L38,40 L42,30 L36,22 L42,12 Z",
  };
  return (
    <svg viewBox="0 0 100 120" width="100%" height="100%" aria-hidden="true">
      <path d={paths[kind] || paths.portugal} fill="currentColor" opacity="0.9"/>
    </svg>
  );
};

// City tabs come from events-data.js
const V3_CAL_CITIES = window.EE_CITIES || [];
// This block shows OPEN nights only — private and corporate bookings are quote-only.
const V3_CAL_PUBLIC = e => e.type !== "private" && e.type !== "corporate";

// ---------- INTERACTIVE MONTH CALENDAR ----------
const V3Calendar = ({ country, setCountry, type, setType, hoverDay, setHoverDay, onBook, hideCountryPicker, full }) => {
  const [calCity, setCalCity] = React.useState("lisboa");
  const [view, setView] = React.useState(full ? "calendar" : "card");
  const [activeMonth, setActiveMonth] = React.useState(window.EE_MONTHS?.[0] || "May 2026");
  const events = window.EE_EVENTS.filter(e =>
    (country === "all" || e.country === country) &&
    (type === "all" || e.type === type)
  );

  // Map events onto specific dates of May 2026
  // Calendar placement comes from each event's calendarDay in events-data.js
  const eventByDay = {};
  window.EE_EVENTS.forEach(e => { if (e.calendarDay) eventByDay[e.calendarDay] = e; });

  const firstDayOffset = 4;
  const cells = [];
  for (let i = 0; i < firstDayOffset; i++) cells.push(null);
  for (let d = 1; d <= 31; d++) cells.push(d);
  while (cells.length % 7 !== 0) cells.push(null);

  const today = 7;
  const hoveredEvent = hoverDay ? eventByDay[hoverDay] : null;
  const featuredEvent = events[0] || null;
  const displayEvent = hoveredEvent || featuredEvent;

  // Compact landing-page version (cards only)
  if (!full) {
    const cityTab = V3_CAL_CITIES.find(c => c.id === calCity) || V3_CAL_CITIES[0];
    const cityEvents = calCity === "belfast" ? [] : (window.EE_EVENTS || []).filter(e => e.country === cityTab.country && V3_CAL_PUBLIC(e)).slice(0, 3);
    return (
      <section id="calendar" className="v3-calendar-sec">
        <V3Swirl className="ee-cal-swirl" color="#FF8FAE" opacity={0.4} variant="loop" rotate={-12} duration={28}/>
        <Reveal className="v3-section-head">
          <span className="v3-eyebrow">Live availability</span>
          <h2 className="v3-h2">What's on this month <em className={calCity === "belfast" ? "cal-em-uk" : ""}>in {cityTab.label}.</em></h2>
          <p>{cityEvents.length ? "The next three " + cityTab.label + " paint nights. Tap a card to book — the full calendar lives on the upcoming events page." : "No public dates on sale in " + cityTab.label + " right now."}</p>
          <div className="cal-city-tabs" role="tablist" aria-label="City">
            {V3_CAL_CITIES.map(c => (
              <button key={c.id} type="button" role="tab" aria-selected={calCity === c.id}
                      className={"cal-city-tab" + (calCity === c.id ? " on" : "")}
                      onClick={() => setCalCity(c.id)}>{c.label}</button>
            ))}
          </div>
        </Reveal>
        <Reveal className="v3-cal-cards-stage v3-cal-cards-stage-clean" delay={180}>
          {!cityEvents.length ? (
            <div className="ee-cal-empty">
              <h3>No public events in {cityTab.label} <em>just yet.</em></h3>
              <p>New {cityTab.label} dates are released a few weeks ahead. Get on the list and you'll hear first — or book a private night for your own group, any date you like.</p>
              <div className="ee-cal-empty-actions">
                <a className="v3-btn v3-btn-primary" href="private-events.html">Book a private event →</a>
                <a className="v3-btn v3-btn-outline" href="#arty">Keep me updated</a>
              </div>
            </div>
          ) : (<>
          <div className="v3-cal-cards-grid">
            {cityEvents.map(ev => (
              <article key={ev.id} className={"v3-cal-card" + (ev.soldOut ? " is-sold" : "")} onClick={() => !ev.soldOut && onBook(ev)}>
                <div className="v3-cal-card-img" style={{ backgroundImage: `url(${ev.image})` }}>
                  <div className="v3-cal-card-badges">
                    {ev.badge && <span className={"v3-badge v3-badge-" + (ev.badgeKind || "new")}>{ev.badge}</span>}
                  </div>
                </div>
                <div className="v3-cal-card-body">
                  <h3>{ev.title}</h3>
                  <div className="v3-cal-card-meta">
                    <span>📅 {ev.date}</span>
                    <span>🕐 {ev.time}</span>
                    <span>📍 {ev.city} · {ev.venue}</span>
                  </div>
                  {ev.soldOut
                    ? <div className="ee-card-sold">Sold out</div>
                    : <button className="v3-btn v3-btn-primary v3-btn-block">Book now · {ev.price} →</button>}
                </div>
              </article>
            ))}
          </div>
          <div className="v3-cal-cards-more">
            <a href="upcoming.html" className="v3-btn v3-btn-outline v3-btn-lg">View more events →</a>
          </div>
          </>)}
        </Reveal>
      </section>
    );
  }

  // Full calendar — for the Upcoming Events page
  return (
    <section id="calendar" className="v3-calendar-sec">
      <Reveal className="v3-section-head v3-cal-full-head">
        <span className="v3-eyebrow">Live availability</span>
        <h2 className="v3-h2">All the upcoming <em>paint nights.</em></h2>
        <p>Filter by city, theme or month. Tap any date to book.</p>
      </Reveal>
      <Reveal className="v3-cal-toolbar" delay={120}>
        <div className="v3-cal-viewtoggle" role="tablist" aria-label="View">
          <button className={view === "calendar" ? "active" : ""} onClick={() => setView("calendar")}>Calendar view</button>
          <button className={view === "card" ? "active" : ""} onClick={() => setView("card")}>Card view</button>
        </div>
        {view === "calendar" ? (
          <div className="v3-cal-month">
            <button aria-label="Previous month">‹</button>
            <h3>May <span>2026</span></h3>
            <button aria-label="Next month">›</button>
          </div>
        ) : (
          <div className="v3-cal-months">
            {(window.EE_MONTHS || []).map(m => (
              <button key={m} onClick={() => setActiveMonth(m)}
                className={"v3-cal-mtab " + (activeMonth === m ? "active" : "")}>{m}</button>
            ))}
          </div>
        )}
        <div className="v3-cal-types">
          {window.EE_TYPES.map(t => (
            <button key={t.id} onClick={() => setType(t.id)}
              className={"v3-cal-type " + (type === t.id ? "active" : "")}>{t.label}</button>
          ))}
        </div>
      </Reveal>

      {view === "card" ? (
        <Reveal className="v3-cal-cards-stage" delay={180}>
          <h4 className="v3-cal-cards-month">{activeMonth}</h4>
          <div className="v3-cal-cards-grid">
            {(window.EE_RECURRING || []).map(rc => (
              <article key={rc.id} className="v3-cal-card" onClick={() => onBook(window.EE_EVENTS.find(e => e.id === rc.linkedEventId) || window.EE_EVENTS[0])}>
                <div className="v3-cal-card-img" style={{ backgroundImage: `url(${rc.image})` }}>
                  <div className="v3-cal-card-badges">
                    {rc.badges.map((b, i) => <span key={i} className={"v3-badge v3-badge-" + b.kind}>{b.text}</span>)}
                  </div>
                </div>
                <div className="v3-cal-card-body">
                  <h3>{rc.title}</h3>
                  <div className="v3-cal-card-meta">
                    <span>📅 {activeMonth}</span>
                    <span>🕐 {rc.time}</span>
                    <span>📍 {rc.venue}</span>
                  </div>
                  <button className="v3-btn v3-btn-primary v3-btn-block">Book now →</button>
                </div>
              </article>
            ))}
          </div>
        </Reveal>
      ) : (
        <Reveal className="v3-cal-stage" delay={200}>
          <div className="v3-cal-grid">
            <div className="v3-cal-dow">
              {["Mon","Tue","Wed","Thu","Fri","Sat","Sun"].map(d => <span key={d}>{d}</span>)}
            </div>
            <div className="v3-cal-cells">
              {cells.map((d, i) => {
                const ev = d ? eventByDay[d] : null;
                const inFilter = ev && events.some(e => e.id === ev.id);
                const isToday = d === today;
                const isHover = d && hoverDay === d;
                return (
                  <div key={i}
                    className={"v3-cal-cell" + (d ? "" : " empty") + (ev ? " has-event" : "") + (inFilter ? "" : ev ? " out" : "") + (isToday ? " today" : "") + (isHover ? " hover" : "")}
                    onMouseEnter={() => d && ev && inFilter && setHoverDay(d)}
                    onMouseLeave={() => setHoverDay(null)}
                    onClick={() => ev && inFilter && onBook(ev)}
                    style={ev && inFilter ? { "--hue": ev.hue } : {}}>
                    {d && <span className="v3-cal-num">{d}</span>}
                    {ev && inFilter && (
                      <div className="v3-cal-event">
                        <span className="v3-cal-event-time">{ev.time}</span>
                        <span className="v3-cal-event-title">{ev.title}</span>
                        <span className="v3-cal-event-spots">
                          {ev.spotsLeft <= 5 ? <em className="warn">⚠ {ev.spotsLeft} left</em> : <em>{ev.spotsLeft} seats</em>}
                        </span>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>

          <aside className="v3-cal-preview">
            {displayEvent ? (
              <div className="v3-cal-preview-card">
                <div className="v3-cal-preview-img" style={{ backgroundImage: `url(${displayEvent.image})` }}>
                  {!hoveredEvent && <span className="v3-badge v3-badge-new">Featured</span>}
                  {hoveredEvent && displayEvent.badge && <span className={"v3-badge v3-badge-" + displayEvent.badgeKind}>{displayEvent.badge}</span>}
                </div>
                <div className="v3-cal-preview-body">
                  <span className="v3-eyebrow-sm">{displayEvent.city} · {displayEvent.venue}</span>
                  <h4>{displayEvent.title}</h4>
                  <div className="v3-cal-preview-meta">
                    <span>📅 {displayEvent.date}, {displayEvent.time}</span>
                    <span>⏱ {displayEvent.duration}</span>
                    <span className={displayEvent.spotsLeft <= 5 ? "warn" : ""}>
                      🪑 {displayEvent.spotsLeft} of {displayEvent.totalSpots} seats left
                    </span>
                  </div>
                  <div className="v3-cal-preview-foot">
                    <span className="v3-cal-preview-price"><b>{displayEvent.price}</b></span>
                    <button className="v3-btn v3-btn-primary" onClick={() => onBook(displayEvent)}>Reserve a seat →</button>
                  </div>
                </div>
              </div>
            ) : (
              <div className="v3-cal-preview-empty">
                <V3Swirl color="#0F6B7A" opacity={0.12}/>
                <h4>No events for this filter</h4>
                <p>Try "All events" to see everything on this month.</p>
              </div>
            )}
          </aside>
        </Reveal>
      )}
    </section>
  );
};

// ---------- EVENTS GRID ----------
const V3Events = ({ country, onBook }) => {
  const events = window.EE_EVENTS.filter(e => country === "all" || e.country === country);
  return (
    <section className="v3-events">
      <div className="v3-section-head v3-events-head">
        <div>
          <span className="v3-eyebrow">All upcoming</span>
          <h2 className="v3-h2">Featured nights.</h2>
        </div>
      </div>
      <div className="v3-events-grid">
        {events.slice(0, 3).map(e => (
          <article key={e.id} className="v3-event">
            <div className="v3-event-img" style={{ backgroundImage: `url(${e.image})` }}>
              {e.badge && <span className={"v3-badge v3-badge-" + e.badgeKind}>{e.badge}</span>}
              <span className="v3-event-tag">{e.typeLabel}</span>
            </div>
            <div className="v3-event-body">
              <span className="v3-eyebrow-sm">{e.city} · {e.venue}</span>
              <h3>{e.title}</h3>
              <div className="v3-event-meta">
                <span>📅 {e.date}, {e.time}</span>
                <span>⏱ {e.duration}</span>
              </div>
              <div className="v3-event-foot">
                <div className="v3-event-spots">
                  <div className="v3-spot-bar">
                    <i style={{ width: `${100 - (e.spotsLeft / e.totalSpots) * 100}%` }}/>
                  </div>
                  <span className={e.spotsLeft <= 5 ? "warn" : ""}>
                    {e.spotsLeft <= 5 ? `⚠ Only ${e.spotsLeft} left` : `${e.spotsLeft} of ${e.totalSpots} seats`}
                  </span>
                </div>
                <div className="v3-event-buy">
                  <span className="v3-event-price">{e.price}</span>
                  <button className="v3-btn v3-btn-primary v3-btn-sm" onClick={() => onBook(e)}>Reserve →</button>
                </div>
              </div>
            </div>
          </article>
        ))}
      </div>
      <div className="v3-events-more">
        <a href="#upcoming-events" className="v3-btn v3-btn-primary v3-btn-lg">Load more →</a>
      </div>
    </section>
  );
};

window.V3Countries = V3Countries;
window.V3Calendar = V3Calendar;
window.V3Events = V3Events;
window.V3Map = V3Map;

// ---------- FIRST DIBS — new dates drop every Sunday ----------
const V3Arty = () => {
  const [mode, setMode] = React.useState("email");
  const [val, setVal] = React.useState("");
  const [region, setRegion] = React.useState("pt");
  const [sent, setSent] = React.useState(false);
  return (
    <section id="arty" className="v3-arty">
      <V3Swirl className="ee-pink-swirl ee-swirl-dibs" color="#FF8FAE" opacity={0.4} rotate={14} variant="loop" duration={23}/>
      <Reveal className="v3-cal-request ee-dibs">
        <div className="v3-cal-request-text">
          <span className="v3-eyebrow v3-eyebrow-oneline">First dibs</span>
          <h3>Keep updated<br/><em>every Sunday.</em></h3>
          <p>One message a week with new dates — pick your region and how you'd like to hear.</p>
        </div>
        <form className="ee-dibs-form" onSubmit={e => { e.preventDefault(); if (val.trim()) setSent(true); }}>
          <div className="ee-dibs-controls">
          <div className="ee-dibs-toggle" role="tablist" aria-label="How to hear about new dates">
            <button type="button" role="tab" aria-selected={mode === "email"} className={mode === "email" ? "on" : ""} onClick={() => { setMode("email"); setSent(false); }}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
              Email
            </button>
            <button type="button" role="tab" aria-selected={mode === "whatsapp"} className={mode === "whatsapp" ? "on" : ""} onClick={() => { setMode("whatsapp"); setSent(false); }}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M20 12a8 8 0 1 1-3.2-6.4"/><path d="M21 3v5h-5"/><path d="M9 10c.6 2 2 3.4 4 4l1-1.4 2 .8-.6 1.8c-2.6.3-6-2-6.8-4.6L10.4 9 9 10z" fill="currentColor" stroke="none"/></svg>
              WhatsApp
            </button>
          </div>
          <div className="ee-dibs-region">
            <label htmlFor="ee-dibs-region" className="ee-sr">Which events?</label>
            <select id="ee-dibs-region" value={region} onChange={e => { setRegion(e.target.value); setSent(false); }}>
              <option value="pt">Portugal · Lisbon</option>
              <option value="uk">UK · Belfast</option>
              <option value="both">Both — send me everything</option>
            </select>
          </div>
          </div>
          <div className="ee-dibs-row">
            <input type={mode === "email" ? "email" : "tel"} value={val} onChange={e => setVal(e.target.value)}
              placeholder={mode === "email" ? "hayley@example.com" : "+351 900 000 000"}
              aria-label={mode === "email" ? "Your email" : "Your WhatsApp number"} required/>
            <button type="submit" className="v3-btn">{sent ? "You're in ✓" : "Notify me →"}</button>
          </div>
          <small>{mode === "email" ? "One message per Sunday · unsubscribe with one click." : "One WhatsApp per Sunday · leave the group any time."}</small>
        </form>
      </Reveal>
    </section>
  );
};

window.V3Arty = V3Arty;