/* eslint-disable */
// V3.1 — Hero, Nav, Sticky CTA, Social Proof — premium spacing, real photo, real paint strokes

// Local CountUp — eases from 0 → `to` over `duration` ms, with an optional start `delay`.
// Self-contained so the hero file doesn't depend on another babel script's scope.
const V3CountUp = ({ to, suffix = "", duration = 2800, delay = 0 }) => {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      setVal(to); return;
    }
    let raf, start, timeoutId;
    const target = to;
    const step = (now) => {
      if (!start) start = now;
      const t = Math.min((now - start) / duration, 1);
      // easeOutCubic — quick rise, gentle settle
      const eased = 1 - Math.pow(1 - t, 3);
      setVal(Math.round(target * eased));
      if (t < 1) raf = requestAnimationFrame(step);
    };
    timeoutId = setTimeout(() => { raf = requestAnimationFrame(step); }, delay);
    return () => { clearTimeout(timeoutId); if (raf) cancelAnimationFrame(raf); };
  }, [to, duration, delay]);
  return <>{val.toLocaleString()}{suffix}</>;
};

const V3TopBar = () => (
  <a className="v3-topbar" href="https://www.timeout.pt/lisboa/pt/noticias/20-planos-um-ano-inteiro-chegou-o-novo-2por1-deluxe-da-time-out-012826" target="_blank" rel="noopener">
    <div className="v3-topbar-track">
      {Array(4).fill(0).map((_, k) => (
        <span key={k}>
          ✦ <b>3,500+ painters</b> since 2022 · Lisbon &amp; Belfast
          <em className="v3-topbar-cta">See what's on →</em>
        </span>
      ))}
    </div>
  </a>
);

const V3Nav = ({ onBook, country, onChangeCountry }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const root = document.querySelector(".ee-artboard-frame") || window;
    const onScroll = () => {
      const y = root === window ? window.scrollY : root.scrollTop;
      setScrolled(y > 40);
    };
    root.addEventListener("scroll", onScroll);
    return () => root.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"v3-nav " + (scrolled ? "scrolled" : "")}>
      <div className="v3-nav-inner">
        <a className="v3-logo" href="index.html" aria-label="Easel Escape home">
          <img src="split-v1/img/logo-lockup-teal.png" alt="" width="38" height="38"/>
          <span>Easel <i>Escape</i></span>
        </a>
        <div className="v3-nav-links">
          <a href="upcoming.html">Upcoming</a>
          <a href="private-events.html">Private events</a>
          <a href="gallery.html">Gallery</a>
          <a href="our-story.html">Our story</a>
        </div>
        <div className="v3-nav-actions">
          <a className="v3-btn v3-btn-primary v3-btn-sm" href="private-events.html#enquiry">
            Get a quote
          </a>
        </div>
      </div>
    </nav>
  );
};

const V3Hero = ({ onBook }) => {
  return (
    <section className="v3-hero">
      <div className="v3-hero-bg">
        <img className="v3-hero-photo v3-hero-single" src="media/hero/spicy-marg-mural-group-wide.jpg" alt="A large hen party holding up their Spicy Marg canvases in a mural courtyard"/>
        <div className="v3-hero-tint"/>
        <div className="ee-hero-swirls" aria-hidden="true">
          <V3Swirl className="ee-hs ee-hs-1" color="#032F48" opacity={0.5} rotate={-14} variant="loop" duration={22}/>
          <V3Swirl className="ee-hs ee-hs-2" color="#032F48" opacity={0.5} rotate={9} variant="swoop" duration={27}/>
          <V3Swirl className="ee-hs ee-hs-3" color="#032F48" opacity={0.5} rotate={-5} variant="streak" duration={32}/>
        </div>
      </div>

      <div className="v3-hero-inner v3-hero-inner-center">
        <div className="v3-hero-text v3-hero-text-center">
          <h1 className="v3-hero-h1">
            Unique Painting Experiences.
          </h1>
          <p className="v3-hero-sub">
            Designed around <em>you.</em>
          </p>
          <p className="ee-hero-kicker">
            Paint nights, private parties &amp; creative socials — no experience needed.
          </p>
          <div className="v3-hero-cta">
            <a className="v3-btn v3-btn-lime v3-btn-lg" href="private-events.html">
              Plan a private event
            </a>
            <a className="v3-btn v3-btn-ghost-light v3-btn-lg" href="upcoming.html">Upcoming events</a>
          </div>

          <div className="v3-hero-trust ee-hero-stats">
            <div className="v3-stars">
              {"★★★★★".split("").map((s, i) => <span key={i}>{s}</span>)}
            </div>
            <div className="v3-hero-counts">
              <span><b>3,500+</b> painters</span>
              <span className="v3-hero-counts-sep">·</span>
              <span><b>97%</b> recommend us</span>
              <span className="v3-hero-counts-sep">·</span>
              <span>Painting since <b>2022</b></span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const V3AsSeenOn = () => (
  <div className="ee-seenon">
    <div className="ee-seenon-inner">
      <span className="ee-seenon-label">As seen on</span>
      <span className="ee-seenon-items">
        <span>Google Reviews <b>★ 4.9</b></span>
        <span className="ee-seenon-dot">·</span>
        <span>GetYourGuide</span>
      </span>
    </div>
  </div>
);

const V3SocialProof = () => (
  <section className="v3-socialproof">
    <div className="v3-sp-inner">
      <div className="v3-sp-stat">
        <b>4.9★</b>
        <span>247 Google reviews</span>
      </div>
      <div className="v3-sp-divider"/>
      <div className="v3-sp-stat">
        <b>1,600+</b>
        <span>painters hosted</span>
      </div>
      <div className="v3-sp-divider"/>
      <div className="v3-sp-stat">
        <b>4</b>
        <span>countries · 8 cities</span>
      </div>
      <div className="v3-sp-divider"/>
      <div className="v3-sp-stat">
        <b>92%</b>
        <span>book again within 6 months</span>
      </div>
    </div>
  </section>
);

const V3StickyBook = ({ spots, onBook }) => {
  const sangria = (window.EE_EVENTS || []).find(e => e.id === "lis-sangria") || {};
  const nextDate = ((sangria.occurrences || []).find(d => !d.past && !d.soldOut) || {}).label || "";
  const price = sangria.price || "€35";
  const [show, setShow] = React.useState(false);
  const [mini, setMini] = React.useState(() => {
    try { return localStorage.getItem("ee.sticky.minimized") === "1"; } catch (e) { return false; }
  });
  const toggleMini = (e) => {
    e.stopPropagation();
    setMini(m => {
      const next = !m;
      try { localStorage.setItem("ee.sticky.minimized", next ? "1" : "0"); } catch (err) {}
      return next;
    });
  };
  React.useEffect(() => {
    const root = document.querySelector(".ee-artboard-frame") || window;
    const onScroll = () => {
      const y = root === window ? window.scrollY : root.scrollTop;
      setShow(y > 800);
    };
    root.addEventListener("scroll", onScroll);
    return () => root.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={"v3-sticky " + (show ? "show" : "") + (mini ? " minimized" : "")}>
      <div className="v3-sticky-inner">
        <div className="v3-sticky-img" style={{ backgroundImage: "url(split-v1/img/sunset-easels.jpg)" }}/>
        <div className="v3-sticky-text">
          <b>Sangria Sunset · Lisboa rooftop</b>
          <span><span className="v3-pulse"/> Next date {nextDate} · 7:00 – 9:30 pm</span>
        </div>
        <span className="v3-sticky-mini-label" onClick={toggleMini}><span className="v3-pulse"/> {nextDate} · {price}</span>
        <div className="v3-sticky-actions">
          <span className="v3-sticky-price">{price}</span>
          <button className="v3-btn v3-btn-primary" onClick={() => onBook(sangria)}>Reserve →</button>
        </div>
        <button className="v3-sticky-min" onClick={toggleMini} aria-label={mini ? "Expand" : "Minimize"} type="button">{mini ? "+" : "–"}</button>
      </div>
    </div>
  );
};

window.V3Nav = V3Nav;
window.V3Hero = V3Hero;
window.V3SocialProof = V3SocialProof;
window.V3AsSeenOn = V3AsSeenOn;
window.V3StickyBook = V3StickyBook;
window.V3TopBar = V3TopBar;