/* eslint-disable */
// SPLIT V1 — UK-MODE sections + shared V3Venues
// (V3Swirl, Reveal, useReveal defined in v3-brush.jsx)

// ============================================================
// UK HERO — private-led, no live spot count
// ============================================================
const UKHero = ({ onBook }) => (
  <section className="v3-hero uk-hero">
    <div className="v3-hero-bg">
      <img className="v3-hero-photo" src="split-v1/img/kpmg-belfast.jpg" alt=""/>
      <div className="v3-hero-tint"/>
    </div>
    <V3Swirl className="v3-hero-brush-1" color="#C8E150" rotate={-8} variant="swoop" opacity={0.4}/>
    <V3Swirl className="v3-hero-brush-2" color="#FF8FAE" rotate={150} variant="streak" opacity={0.28}/>

    <div className="v3-hero-inner uk-hero-inner">
      <div className="v3-hero-text">
        <span className="v3-hero-eyebrow">
          <span className="v3-pulse"/> Belfast · York · Manchester · London
        </span>
        <h1 className="v3-hero-h1">
          Throw the best<br/>
          <em>hen, birthday</em><br/>
          or off-site of the year.
        </h1>
        <p className="v3-hero-sub">
          We design painting experiences for private groups across the UK &amp; Northern Ireland — and we run a handful of unmissable public dates each year (Mother's Day, Easter, Halloween, Christmas).
        </p>
        <div className="v3-hero-cta">
          <button className="v3-btn v3-btn-lime v3-btn-lg" onClick={() => document.getElementById("quote")?.scrollIntoView({ behavior: "smooth" })}>
            Get a private quote →
          </button>
          <a className="v3-btn v3-btn-ghost-light v3-btn-lg" href="#public">See our public dates</a>
        </div>
        <div className="v3-hero-trust">
          <div className="v3-stars">
            {"★★★★★".split("").map((s, i) => <span key={i}>{s}</span>)}
            <b>4.9</b><i>· 247 Google reviews</i>
          </div>
          <div className="v3-hero-counts">
            <span><b>1,600+</b> guests hosted</span>
            <span className="v3-hero-counts-sep">·</span>
            <span><b>240+</b> private bookings</span>
            <span className="v3-hero-counts-sep">·</span>
            <span><b>4-hour</b> quote turnaround</span>
          </div>
        </div>
      </div>

      <div className="v3-hero-card uk-hero-card">
        <div className="v3-hero-card-stamp">Live</div>
        <div className="v3-hero-card-img" style={{ backgroundImage: "url(split-v1/img/hippo-painter.jpg)" }}/>
        <div className="v3-hero-card-body">
          <span className="v3-eyebrow-sm">This Saturday · Belfast</span>
          <h3>Hen Party · Bullitt Hotel</h3>
          <p>Private booking · 14 painters · custom bride canvas. We bring everything.</p>
          <div className="v3-hero-card-meta">
            <span>👥 6 – 80 guests</span>
            <span>⏱ <b>4-hour quote</b> turnaround</span>
          </div>
          <div className="v3-hero-card-foot">
            <span className="v3-hero-card-price"><b>From £32</b><i>/ person · all materials</i></span>
            <button className="v3-btn v3-btn-primary" onClick={() => document.getElementById("quote")?.scrollIntoView({ behavior: "smooth" })}>Get quote →</button>
          </div>
        </div>
      </div>
    </div>

    <div className="v3-hero-marquee">
      <div className="v3-marquee-track">
        {Array(2).fill(0).map((_, k) => (
          <span key={k}>
            {["HEN PARTIES", "BIRTHDAYS", "CORPORATE", "CHARITY", "BACHELORETTE", "BABY SHOWERS", "WORKSHOPS", "OFF-SITES"].map(c => (
              <em key={c}>★ {c}</em>
            ))}
          </span>
        ))}
      </div>
    </div>
  </section>
);

// ============================================================
// UK OCCASIONS — Hen / Birthday / Corporate (three big hooks)
// ============================================================
const UKOccasions = () => {
  const items = window.UK_OCCASIONS;
  return (
    <section id="occasions" className="uk-occasions">
      <Reveal className="v3-section-head">
        <span className="v3-eyebrow">What we do</span>
        <h2 className="v3-h2">Three things, <em>done brilliantly.</em></h2>
        <p>We don't try to be everything. We host three kinds of private group — and we obsess over each.</p>
      </Reveal>
      <div className="uk-occ-grid">
        {items.map((o, i) => (
          <Reveal key={o.id} as="article" className="uk-occ-card" delay={i * 80}>
            <div className="uk-occ-img" style={{ backgroundImage: `url(${o.img})` }}>
              <span className="uk-occ-tag">{o.tag}</span>
            </div>
            <div className="uk-occ-body">
              <h3>{o.name}</h3>
              <p>{o.blurb}</p>
              <dl className="uk-occ-spec">
                <div><dt>From</dt><dd>{o.from}</dd></div>
                <div><dt>Group size</dt><dd>{o.groupSize}</dd></div>
                <div><dt>Duration</dt><dd>{o.duration}</dd></div>
              </dl>
              <a href="#quote" className="v3-btn v3-btn-primary v3-btn-block">Get a quote →</a>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// ============================================================
// UK FEATURED PUBLIC DATES — the few open events of the year
// ============================================================
const UKFeaturedPublic = ({ onBook }) => {
  const dates = window.UK_PUBLIC_DATES;
  return (
    <section id="public" className="uk-public">
      <Reveal className="v3-section-head">
        <span className="v3-eyebrow">Public dates · limited</span>
        <h2 className="v3-h2">Mark the calendar.</h2>
        <p>We only open public seats four times a year — Mother's Day, Easter, Halloween, and Christmas. They sell out, every time.</p>
      </Reveal>
      <div className="uk-public-grid">
        {dates.map((d, i) => {
          const sold = d.totalSpots - d.spotsLeft;
          const pct = Math.round((sold / d.totalSpots) * 100);
          const low = d.spotsLeft <= 8;
          return (
            <Reveal key={d.id} as="article" className="uk-public-card" delay={i * 70}>
              <div className="uk-public-img" style={{ backgroundImage: `url(${d.img})` }}>
                <span className="uk-public-occ">{d.occasion}</span>
                {low && <span className="v3-badge v3-badge-warn">Only {d.spotsLeft} left</span>}
              </div>
              <div className="uk-public-body">
                <h3>{d.title}</h3>
                <div className="uk-public-meta">
                  <span>📅 {d.date}</span>
                  <span>📍 {d.venue} · {d.city}</span>
                </div>
                <div className="v3-event-spots">
                  <div className="v3-spot-bar"><i style={{ width: pct + "%", background: low ? "var(--coral)" : "var(--teal)" }}/></div>
                  <span className={low ? "warn" : ""}>{d.spotsLeft} of {d.totalSpots} seats remaining</span>
                </div>
                <button className="v3-btn v3-btn-primary v3-btn-block" onClick={() => onBook({
                  id: d.id, city: d.city, title: d.title, subtitle: d.occasion + " · " + d.venue,
                  date: d.date, time: "7:00 pm", duration: "2h 30m",
                  price: "£36", spotsLeft: d.spotsLeft, totalSpots: d.totalSpots,
                  img: d.img,
                })}>Reserve a seat →</button>
              </div>
            </Reveal>
          );
        })}
      </div>
    </section>
  );
};

// ============================================================
// UK PRIVATE AVAILABILITY — next 8 Saturdays open for private booking
// ============================================================
const UKAvailability = () => {
  const slots = window.UK_AVAILABILITY;
  return (
    <section id="availability" className="uk-avail">
      <Reveal className="v3-section-head">
        <span className="v3-eyebrow">Live availability</span>
        <h2 className="v3-h2">When can you have us?</h2>
        <p>Saturday slots, the next eight weeks. Hold a date by submitting a quote — no payment until we lock it in.</p>
      </Reveal>
      <Reveal className="uk-avail-card" delay={120}>
        <div className="uk-avail-row uk-avail-head">
          <span>Date</span>
          <span>Status</span>
          <span>Notes</span>
          <span></span>
        </div>
        {slots.map(s => (
          <div key={s.date} className={"uk-avail-row uk-avail-" + s.status}>
            <span className="uk-avail-date">{s.date}</span>
            <span className="uk-avail-status">
              <i/>
              {s.status === "open"    && "Open · multiple slots"}
              {s.status === "limited" && "Limited"}
              {s.status === "booked"  && "Fully booked"}
            </span>
            <span className="uk-avail-note">{s.note}</span>
            <span className="uk-avail-cta">
              {s.status !== "booked" && <a href="#quote" className="v3-link-arrow">Hold this date →</a>}
            </span>
          </div>
        ))}
      </Reveal>
      <Reveal className="uk-avail-foot" delay={300}>
        Need a date outside this window? <a href="#quote" className="v3-link-arrow">Get a custom quote →</a>
      </Reveal>
    </section>
  );
};

// ============================================================
// VENUES (shared — filtered by country)
// ============================================================
const V3Venues = ({ country }) => {
  const all = window.V3_VENUES;
  const venues = country ? all.filter(v => v.country === country.toUpperCase()) : all;
  return (
    <section id="venues" className="uk-venues">
      <Reveal className="v3-section-head">
        <span className="v3-eyebrow">Where it happens</span>
        <h2 className="v3-h2">Our <em>handpicked</em> venues.</h2>
        <p>We don't paint just anywhere. Every venue is chosen for the light, the drinks list, the energy — and how it makes you feel walking in.</p>
      </Reveal>
      <div className="uk-venues-grid">
        {venues.map((v, i) => (
          <Reveal key={v.name} as="article" className="uk-venue-card" delay={i * 60}>
            <div className="uk-venue-img" style={{ backgroundImage: `url(${v.img})` }}>
              <span className="uk-venue-city">{v.city}</span>
            </div>
            <div className="uk-venue-body">
              <h3>{v.name}</h3>
              <p>{v.blurb}</p>
              <div className="uk-venue-foot">
                <span className="uk-venue-cap">{v.capacity}</span>
                <a className="v3-link-arrow" href="#quote">Book this venue →</a>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// ============================================================
// UK QUOTE FORM — the page's primary conversion
// ============================================================
const UKQuote = () => {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({
    name: "", email: "", phone: "",
    occasion: "Hen Party", city: "Belfast",
    guests: "", date: "", venue: "", brief: "",
  });
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  if (sent) return (
    <section id="quote" className="uk-quote">
      <V3Swirl className="uk-quote-swirl" color="#C8E150" opacity={0.5} rotate={12} variant="loop"/>
      <Reveal className="uk-quote-card uk-quote-sent">
        <span className="uk-quote-tick">✓</span>
        <h2 className="v3-h2 v3-h2-light">Brief received.</h2>
        <p>We've got it. Expect a tailored quote in your inbox within four working hours — usually faster.</p>
        <span className="v3-eyebrow v3-eyebrow-light">Question? hayley@easelescape.com</span>
      </Reveal>
    </section>
  );

  return (
    <section id="quote" className="uk-quote">
      <V3Swirl className="uk-quote-swirl" color="#C8E150" opacity={0.5} rotate={12} variant="loop"/>
      <div className="uk-quote-inner">
        <Reveal className="uk-quote-side">
          <span className="v3-eyebrow v3-eyebrow-light">Plan your event</span>
          <h2 className="v3-h2 v3-h2-light">Tell us the basics.<br/>Quote in <em>four hours.</em></h2>
          <p>One short form. We'll come back with a tailored quote (venue, materials, host, prompt — all included), no obligation.</p>
          <ul className="uk-quote-bullets">
            <li><span>✓</span> 4-hour quote turnaround</li>
            <li><span>✓</span> No deposit to receive a quote</li>
            <li><span>✓</span> Free date hold for 48 hours</li>
            <li><span>✓</span> Easels, paint, host, custom prompt — all included</li>
          </ul>
        </Reveal>

        <Reveal as="form" className="uk-quote-form" delay={120}
          onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
          <div className="uk-quote-row">
            <label>Occasion
              <select value={form.occasion} onChange={upd("occasion")}>
                <option>Hen Party</option><option>Birthday</option><option>Corporate</option>
                <option>Charity</option><option>Baby Shower</option><option>Something else</option>
              </select>
            </label>
            <label>City
              <select value={form.city} onChange={upd("city")}>
                <option>Belfast</option><option>York</option><option>Manchester</option><option>London</option>
                <option>Your venue</option>
              </select>
            </label>
          </div>
          <div className="uk-quote-row">
            <label>Date<input type="date" value={form.date} onChange={upd("date")}/></label>
            <label>Number of guests<input type="number" min="6" max="80" value={form.guests} onChange={upd("guests")} placeholder="e.g. 14"/></label>
          </div>
          <label>Your name<input value={form.name} onChange={upd("name")} placeholder="Hayley O'Donnell"/></label>
          <div className="uk-quote-row">
            <label>Email<input type="email" required value={form.email} onChange={upd("email")} placeholder="you@example.com"/></label>
            <label>Phone<input type="tel" value={form.phone} onChange={upd("phone")} placeholder="(optional)"/></label>
          </div>
          <label>Venue (if you have one)
            <input value={form.venue} onChange={upd("venue")} placeholder="e.g. our office, a hotel suite, the bride's flat..."/>
          </label>
          <label>Tell us about the occasion
            <textarea rows="3" value={form.brief} onChange={upd("brief")} placeholder="The vibe, the guest of honour, the dietary stuff, anything we should know."/>
          </label>
          <button type="submit" className="v3-btn v3-btn-lime v3-btn-lg v3-btn-block">Send my brief →</button>
          <span className="uk-quote-fine">No obligation. We'll come back within 4 working hours.</span>
        </Reveal>
      </div>
    </section>
  );
};

window.UKHero = UKHero;
window.UKOccasions = UKOccasions;
window.UKFeaturedPublic = UKFeaturedPublic;
window.UKAvailability = UKAvailability;
window.UKVenues = V3Venues; // same component
window.UKQuote = UKQuote;
window.V3Venues = V3Venues;
