/* eslint-disable */
// SPLIT V1 — Easel Escape
// Two distinct experiences sharing one brand: Portugal (calendar-led) & UK (private-led).
// On first visit, a Country Splash lets the user pick. Saved to localStorage.
// A small nav toggle lets them switch.

const SPLIT_KEY = "ee.split.country";

// Count-up animation for stat numbers. Skips animation when prefers-reduced-motion.
const CountUp = ({ to, suffix = "", duration = 1400 }) => {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      setVal(to); return;
    }
    let raf, start;
    const target = to;
    const step = (now) => {
      if (!start) start = now;
      const t = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - t, 3);
      setVal(Math.round(target * eased));
      if (t < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [to, duration]);
  return <>{val.toLocaleString()}{suffix}</>;
};

const V3 = () => {
  // null = show splash; "pt" or "uk" = chosen
  const [country, setCountry] = React.useState(() => {
    try { return localStorage.getItem(SPLIT_KEY) || null; } catch (e) { return null; }
  });
  const [type, setType] = React.useState("all");
  const [bookingEvent, setBookingEvent] = React.useState(null);
  const [hoverDay, setHoverDay] = React.useState(null);

  // Persist country choice
  React.useEffect(() => {
    if (country) {
      try { localStorage.setItem(SPLIT_KEY, country); } catch (e) {}
    }
  }, [country]);

  const onBook = (e) => setBookingEvent(e || window.V3_EVENTS[0]);
  const onChangeCountry = (c) => { setCountry(c); window.scrollTo({ top: 0, behavior: "instant" }); };

  if (!country) return <CountrySplash onPick={setCountry}/>;

  return (
    <div className={"v3 v3-mode-" + country}>
      <V3Nav country={country} onChangeCountry={onChangeCountry} onBook={onBook}/>

      {country === "pt" ? (
        <>
          <V3Hero onBook={onBook} country="pt"/>
          <V3AsSeenOn/>
          <V3WhoWeAre/>
          <V3Testimonials/>
          <V3Calendar country={country} setCountry={() => {}} type={type} setType={setType}
            hoverDay={hoverDay} setHoverDay={setHoverDay} onBook={setBookingEvent} hideCountryPicker/>
          <V3HowItWorks/>
          <V3Partners/>
          <V3Venues/>
          <V3Canvases/>
          <V3Arty/>
          <V3FinalCTA/>
        </>
      ) : (
        <>
          <UKHero onBook={onBook}/>
          <UKOccasions/>
          <UKFeaturedPublic onBook={setBookingEvent}/>
          <UKAvailability/>
          <UKVenues/>
          <V3Partners/>
          <V3Testimonials/>
          <UKQuote/>
          <V3Story/>
          <V3Press/>
          <V3FAQ/>
        </>
      )}

      <V3Footer/>
      {country === "pt" && <V3PracticeTab/>}
      {bookingEvent && <V3BookingModal event={bookingEvent} onClose={() => setBookingEvent(null)}/>}
    </div>
  );
};

// ============================================================
// COUNTRY SPLASH (first-visit picker)
// ============================================================
const CountrySplash = ({ onPick }) => (
  <div className="splash">
    <div className="splash-bg">
      <img src="split-v1/img/sunset-easels.jpg" alt="" className="splash-bg-img splash-bg-pt"/>
      <img src="split-v1/img/kpmg-belfast.jpg" alt="" className="splash-bg-img splash-bg-uk"/>
      <div className="splash-tint"/>
      <V3Swirl className="splash-swirl-1" color="#d3eb5a" rotate={-12} variant="loop" opacity={0.18}/>
      <V3Swirl className="splash-swirl-2" color="#d3eb5a" rotate={160} variant="streak" opacity={0.13}/>
    </div>
    <header className="splash-header">
      <a className="splash-logo" href="#">
        <img src="split-v1/img/logo-mark-white.png" alt="" width="40" height="40"/>
        <span>Easel <i>Escape</i></span>
      </a>
      <a className="splash-login" href="#">Sign in →</a>
    </header>
    <div className="splash-inner">
      <span className="splash-eyebrow">
        <span className="v3-pulse"/> Welcome — choose your destination
      </span>
      <h1 className="splash-h1">Where would<br/>you like to <em>paint?</em></h1>

      <div className="splash-grid">
        <button className="splash-card splash-pt" onClick={() => onPick("pt")}>
          <div className="splash-card-img" style={{ backgroundImage: "url(split-v1/img/sunset-easels.jpg)" }}/>
          <div className="splash-card-body">
            <div className="splash-card-head">
              <span className="splash-flag">🇵🇹</span>
              <div className="splash-card-pills">
                <span className="splash-card-pill">Private bookings</span>
                <span className="splash-card-pill splash-card-pill-alt">Open calendar</span>
              </div>
              <h2>Portugal</h2>
            </div>
            <p>Weekly public paint nights in Lisboa — plus bachelorette parties, birthday celebrations &amp; corporate / team-building events.</p>
            <div className="splash-card-stats">
              <div><b><CountUp to={14}/></b><span>events this month</span></div>
              <div><b><CountUp to={6}/></b><span>different venues</span></div>
              <div><b><CountUp to={2000}/>+</b><span>painters hosted</span></div>
            </div>
            <span className="splash-cta">Take me to Portugal →</span>
          </div>
        </button>

        <button className="splash-card splash-uk" onClick={() => onPick("uk")}>
          <div className="splash-card-img" style={{ backgroundImage: "url(split-v1/img/kpmg-belfast.jpg)" }}/>
          <div className="splash-card-body">
            <div className="splash-card-head">
              <span className="splash-flag">🇬🇧</span>
              <div className="splash-card-pills">
                <span className="splash-card-pill">Private bookings</span>
                <span className="splash-card-pill splash-card-pill-alt">Hand-picked dates</span>
              </div>
              <h2>UK &amp; N. Ireland</h2>
            </div>
            <p>Hens, birthdays, corporate &amp; hand-picked public dates across the UK &amp; Northern Ireland.</p>
            <div className="splash-card-stats">
              <div><b><CountUp to={340}/>+</b><span>previous events</span></div>
              <div><b>6-80</b><span>group size</span></div>
              <div><b><CountUp to={4}/></b><span>years of hosting</span></div>
            </div>
            <span className="splash-cta">Take me to the UK →</span>
          </div>
        </button>
      </div>

      <a className="splash-skip" onClick={(e) => { e.preventDefault(); onPick("pt"); }} href="#">Skip — show me both</a>
    </div>
  </div>
);

window.V3 = V3;
window.CountrySplash = CountrySplash;