/* eslint-disable */
// V3 — Portuguese homepage additions per CRO framework:
//   Membership · How It Works · Instagram Gallery · Final CTA · WhatsApp floater

const V3_PRIVATE_EVENTS = [
  { name: "Bachelorettes", tag: "Most booked", img: "media/hen-parties/lisbon/green-room-group.jpg",
    copy: "Bride-themed prompts, prosecco on arrival, and a custom canvas for the bride." },
  { name: "Birthdays", img: "media/community/lisbon/purple-hippo-laugh.jpg",
    copy: "A prompt written for the guest of honour. We deliver, set up, host and clear away." },
  { name: "Team building", tag: "UK favourite", img: "media/corporate/belfast/kpmg-group-arch.jpg",
    copy: "Doesn't feel like team building. KPMG, Nestl\u00e9, Cloudflare and Kingspan have all had a go." },
  { name: "Christmas parties", tag: "Now booking", img: "media/corporate-christmas/belfast/grinch-reindeer-cocoa-trio.jpg",
    copy: "Christmas bookings are now open \u2014 December dates go first. Festive prompts, 10 to 120 painters." },
  { name: "Community building", img: "media/community/lisbon/two-painters-floral-canvas.jpg",
    copy: "Charity nights, support groups and youth projects. A quarter of our calendar, and the part we're proudest of." },
  { name: "PR & brand events", img: "media/community/belfast/shloer-pr-event-decorated-bottle.jpg",
    copy: "Launches, press days and influencer evenings \u2014 a branded canvas guests actually take home." },
];

// Scroll-linked progress (0 → 1) written to --p on the returned element
const useScrollProgress = (start = 0.92, span = 0.5) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf = 0;
    const update = () => {
      raf = 0;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || 800;
      const p = Math.min(1, Math.max(0, (vh * start - r.top) / (vh * span)));
      el.style.setProperty("--p", p.toFixed(3));
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [start, span]);
  return ref;
};

const PaintSplash = () => (
  <svg className="pe-best-splash" viewBox="0 0 320 170" aria-hidden="true">
    <g className="pe-splash-blob" fill="#FF8FAE">
      <ellipse cx="160" cy="88" rx="126" ry="52"/>
      <ellipse cx="104" cy="70" rx="74" ry="44"/>
      <ellipse cx="214" cy="104" rx="82" ry="46"/>
      <ellipse cx="188" cy="58" rx="52" ry="32"/>
      <circle cx="46" cy="120" r="20"/>
      <circle cx="286" cy="56" r="15"/>
    </g>
    <g className="pe-splash-drips" fill="#FF8FAE">
      <circle cx="92" cy="140" r="11"/>
      <circle cx="178" cy="152" r="8"/>
      <circle cx="248" cy="142" r="6"/>
    </g>
  </svg>
);

const V3WhoWeAre = () => {
  const [quote, setQuote] = React.useState(null);
  const occasionFor = name => ({
    "Bachelorettes": "Bachelorette Party",
    "Team building": "Corporate/Team Building",
    "Birthdays": "Birthday Event",
  })[name] || "Other";
  return (
  <section id="who" className="v3-who v3-who-cards">
    <V3Swirl className="pe-swirl" color="#FF8FAE" opacity={0.44} rotate={-14} variant="loop" duration={17}/>
    <Reveal className="v3-section-head">
      <span className="v3-eyebrow">Private and group bookings</span>
      <h2 className="v3-h2">What we do <em>best.</em></h2>
      <div className="ee-who-cities"><span>Belfast</span><span>Lisbon</span><span>York</span></div>
      <p className="pe-lede">Most of what we do is private. Tell us the date and rough numbers and you'll have a tailored quote within four hours.</p>
    </Reveal>
    <div className="pe-grid">
      {V3_PRIVATE_EVENTS.map((p, i) => (
        <Reveal key={p.name} as="a" className="pe-card" href="private-events.html#enquiry" delay={i * 60}
          onClick={e => { e.preventDefault(); setQuote(occasionFor(p.name)); }}>
          <div className="pe-img">
            {p.tag && <span className="pe-tag">{p.tag}</span>}
            <img src={p.img} alt={p.name} loading="lazy"/>
          </div>
          <div className="pe-body">
            <b>{p.name}</b>
            <span className="pe-cta"><i className="pe-arrow" aria-hidden="true">→</i>Get a quote</span>
          </div>
        </Reveal>
      ))}
    </div>
    <V3QuoteModal open={!!quote} occasion={quote} onClose={() => setQuote(null)}/>
  </section>
  );
};

const V3_VENUE_SHOTS = [
  { img: "split-v1/img/venues/sunset-destination.jpg", alt: "Easels on a rooftop terrace at sunset over the river" },
  { img: "media/hen-parties/belfast/starry-night-deck-group.jpg", alt: "A group on a lakeside deck holding up starry-night canvases" },
  { img: "media/hen-parties/belfast/cocktail-canvases-bar.jpg", alt: "Painters in a bar holding up cocktail canvases" },
  { img: "media/corporate/belfast/kpmg-big-group-canvases-arch.jpg", alt: "A large corporate group under a stone arch holding up their Belfast canvases" },
  { img: "media/hen-parties/lisbon/mural-courtyard-group.jpg", alt: "A group under white sails in a painted mural courtyard" },
  { img: "media/hen-parties/belfast/garden-hands-up.jpg", alt: "A group in a garden at dusk with their canvases" },
];

const V3Venues = () => (
  <section id="venues" className="ee-venues-band">
    <V3Swirl className="ee-venues-swirl" color="#C8E150" opacity={0.16} rotate={16} variant="loop" duration={30}/>
    <Reveal className="ee-venues-inner">
      <div className="ee-venues-text">
        <span className="v3-eyebrow ee-venues-pill">Venues &amp; locations</span>
        <h2 className="v3-h2">Some of our wonderful venues <em>and locations.</em></h2>
        <p>Rooftops over the Tejo, a converted distillery, a Cathedral Quarter bar, a lakeside deck. Indoors, outdoors, or your own place — every room has its own themes, group sizes and pricing.</p>
        <a className="ee-venues-cta" href="#venues">See where we're based →</a>
      </div>
      <div className="ee-venues-grid">
        {V3_VENUE_SHOTS.map((v, i) => (
          <div key={i} className="ee-venues-shot"><img src={v.img} alt={v.alt} loading="lazy"/></div>
        ))}
      </div>
    </Reveal>
  </section>
);

const V3Canvases = () => {
  const canvases = [
    { src: "media/paintings-of-the-week/lisbon/two-ducks-rooftop-night.jpg", name: "Sofia", note: "Sangria Sunset" },
    { src: "media/paintings-of-the-week/lisbon/peacock-easel-studio.jpg",  name: "Ines",  note: "Paint & Wine" },
    { src: "media/paintings-of-the-week/lisbon/monstera-orange-sunset.jpg",  name: "Diego", note: "Pizza Night" },
    { src: "media/paintings-of-the-week/lisbon/poppy-meadow-festoon.jpg",    name: "Ana & T", note: "Date night" },
    { src: "media/paintings-of-the-week/lisbon/macaw-bold-brushwork.jpg",name: "Marco", note: "Sangria Sunset" },
    { src: "media/paintings-of-the-week/lisbon/three-ducklings-lilypad.jpg",   name: "Beatriz", note: "Birthday" },
  ];
  return (
    <section id="canvases" className="v3-canvases">
      <V3Swirl className="ee-pink-swirl ee-swirl-canvases" color="#FF8FAE" opacity={0.36} rotate={-16} variant="loop" duration={26}/>
      <Reveal className="v3-section-head">
        <span className="v3-eyebrow">From last week's nights</span>
        <h2 className="v3-h2">Paintings <em>of the week.</em></h2>
        <p>Tagged by our painters in Lisbon. Real first-timers, real Friday nights — no filters.</p>
      </Reveal>
      <div className="v3-canvases-rail">
        {canvases.map((c, i) => (
          <Reveal key={i} as="article" className="v3-canvas-card" delay={i * 60} style={{ "--rot": `${(i % 3 - 1) * 1.6}deg` }}>
            <div className="v3-canvas-img"><img src={c.src} alt={`${c.name}'s painting`} loading="lazy"/></div>
            <div className="v3-canvas-cap">
              <b>{c.name}</b>
              <span>{c.note}</span>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

const V3Membership = () => (
  <section id="membership" className="v3-membership">
    <div className="v3-membership-wrap">
      <V3Swirl className="v3-mem-swirl" color="#C8E150" opacity={0.18} rotate={20} variant="loop"/>
      <div className="v3-mem-inner">
        <Reveal className="v3-mem-text">
          <span className="v3-eyebrow v3-eyebrow-light">Members club</span>
          <h2 className="v3-h2 v3-h2-light">Paint <em>more,</em> pay <em>less.</em></h2>
          <p>Two tiers. One subscription. Turn paint nights into a habit and unlock priority access to every session in Lisbon.</p>
        </Reveal>
        <Reveal className="v3-mem-cards" delay={150}>
          <article className="v3-mem-card v3-mem-card-featured">
            <span className="v3-mem-card-tag">Most popular</span>
            <div className="v3-mem-card-head">
              <h3>The Lisbon Pass</h3>
              <span className="v3-mem-card-offer">Unlimited classes / month</span>
            </div>
            <div className="v3-mem-card-price">
              <span className="v3-mem-cur">€</span>
              <span className="v3-mem-amt">100</span>
              <span className="v3-mem-per">/ month</span>
            </div>
            <span className="v3-mem-card-sub2">12 current members</span>
            <ul className="v3-mem-perks">
              <li><span>✓</span> Priority booking 48 hours before public release</li>
              <li><span>✓</span> Bring-a-friend 20% discount on every event</li>
              <li><span>✓</span> Cancel anytime — no contracts</li>
            </ul>
            <a className="v3-btn v3-btn-lime v3-btn-block" href="#join">Become a Member →</a>
          </article>
          <article className="v3-mem-card">
            <div className="v3-mem-card-head">
              <h3>The Lisbon Club</h3>
              <span className="v3-mem-card-offer">2 classes / month</span>
            </div>
            <div className="v3-mem-card-price">
              <span className="v3-mem-cur">€</span>
              <span className="v3-mem-amt">50</span>
              <span className="v3-mem-per">/ month</span>
            </div>
            <span className="v3-mem-card-sub2">7 current members</span>
            <ul className="v3-mem-perks">
              <li><span>✓</span> Priority booking 48 hours before public release</li>
              <li><span>✓</span> Bring-a-friend 10% discount on every event</li>
              <li><span>✓</span> 3-month minimum commitment</li>
            </ul>
            <a className="v3-btn v3-btn-outline v3-btn-block" href="#join">Join the Club →</a>
          </article>
        </Reveal>
      </div>
    </div>
  </section>
);

const V3HowItWorks = () => {
  const steps = [
    {
      n: "01", t: "Pick a date", b: "Browse the calendar, pick a session that suits — solo, with friends, or a date night.",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="5" width="18" height="16" rx="2"/>
          <path d="M16 3v4M8 3v4M3 10h18"/>
          <circle cx="12" cy="15" r="1.2" fill="currentColor"/>
        </svg>
      ),
    },
    {
      n: "02", t: "Show up", b: "Walk into a venue we've already set up. Easel, canvas, paints, apron — ready for you.",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 21V10l9-7 9 7v11"/>
          <path d="M9 21v-7h6v7"/>
        </svg>
      ),
    },
    {
      n: "03", t: "Paint, sip, relax", b: "Loosely guided by an artist host. Leave with a canvas and (probably) plans for next week.",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 14c0-3.3 3.6-6 8-6s8 2.7 8 6c0 1.7-.9 2-2 2h-2.5c-.8 0-1.5.7-1.5 1.5 0 .5.2.9.5 1.3.4.5.5 1.1.2 1.7-.3.5-1 .8-1.7.7-3.4-.4-9-2.6-9-7.2z"/>
          <circle cx="8" cy="12" r="1" fill="currentColor"/>
          <circle cx="12" cy="10" r="1" fill="currentColor"/>
          <circle cx="16" cy="12" r="1" fill="currentColor"/>
          <path d="M14 18l4-7"/>
          <path d="M17 12l3-6 1 1-3 6"/>
        </svg>
      ),
    },
  ];
  return (
    <section id="how" className="v3-how">
      <V3Swirl className="ee-pink-swirl ee-swirl-how" color="#C8E150" opacity={0.3} rotate={12} variant="loop" duration={22}/>
      <Reveal className="v3-section-head">
        <span className="v3-eyebrow">Your first night</span>
        <h2 className="v3-h2">How it <em>works.</em></h2>
        <p>Easier than ordering dinner. We bring everything, you bring yourself.</p>
      </Reveal>
      <div className="v3-how-grid">
        {steps.map((s, i) => (
          <Reveal key={s.n} as="article" className="v3-how-card" delay={i * 90}>
            <span className="v3-how-icon">{s.icon}</span>
            <h3>{s.t}</h3>
            <span className="v3-how-stage">Stage {i + 1}</span>
            <p>{s.b}</p>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

const V3Insta = () => {
  const tiles = [
    "split-v1/img/sunset-easels.jpg",
    "split-v1/img/group-canvases.jpg",
    "split-v1/img/host-students.jpg",
    "split-v1/img/couple-kiss.jpg",
    "split-v1/img/portrait-couple.jpg",
    "split-v1/img/hippo-painter.jpg",
    "split-v1/img/group-aprons.jpg",
    "split-v1/img/night-tongue.jpg",
  ];
  return (
    <section id="gallery" className="v3-insta">
      <V3Swirl className="ee-pink-swirl ee-swirl-insta-a" color="#FF8FAE" opacity={0.34} rotate={-8} variant="loop" duration={24}/>
      <V3Swirl className="ee-pink-swirl ee-swirl-insta-b" color="#C8E150" opacity={0.22} rotate={18} variant="loop" duration={30}/>
      <Reveal className="v3-section-head">
        <span className="v3-eyebrow">Real nights, real painters</span>
        <h2 className="v3-h2">Follow us on <em>@easel.escape</em></h2>
        <p>Tagged by our community in Lisbon. Tag yours after the night and we'll repost.</p>
      </Reveal>
      <div className="v3-insta-grid">
        {tiles.map((src, i) => (
          <a key={i} href="https://instagram.com/easel.escape" target="_blank" rel="noopener" className="v3-insta-tile">
            <img src={src} alt="" loading="lazy"/>
            <span className="v3-insta-hover">View on Instagram →</span>
          </a>
        ))}
      </div>
      <Reveal className="v3-insta-foot" delay={250}>
      </Reveal>
    </section>
  );
};

const V3MiniFAQ = () => {
  const items = [
    { q: "Do I need any painting experience?",
      a: "Zero. Most people walking in haven't picked up a brush since school. Our hosts walk the whole room through every step — you'll leave with something you're proud to hang." },
    { q: "Is it OK to come alone?",
      a: "Absolutely — roughly a third of our painters book solo. The host introduces everyone and tables are arranged so it's easy to chat. Most solo painters leave with new friends." },
    { q: "What's included in the price?",
      a: "Easel, 30×40 cm canvas, paints, brushes, an Easel Escape apron, one welcome drink, and 2h 30m of guided painting with a working artist. From €42 per person." },
  ];
  return (
    <section id="mini-faq" className="v3-mini-faq">
      <Reveal className="v3-section-head">
        <span className="v3-eyebrow">Before you book</span>
        <h2 className="v3-h2">Quick <em>answers.</em></h2>
        <p>The three things first-timers always ask.</p>
      </Reveal>
      <div className="v3-mini-faq-grid">
        {items.map((it, i) => (
          <Reveal key={i} as="article" className="v3-mini-faq-card" delay={i * 80}>
            <h4>{it.q}</h4>
            <p>{it.a}</p>
          </Reveal>
        ))}
      </div>
      <Reveal className="v3-mini-faq-more" delay={300}>
        <a className="v3-link-arrow" href="faq.html">See all questions →</a>
      </Reveal>
    </section>
  );
};

const V3FinalCTA = () => (
  <section id="join" className="v3-finalcta">
    <V3Swirl className="v3-fcta-swirl" color="#C8E150" opacity={0.5} rotate={-10} variant="loop"/>
    <Reveal className="v3-fcta-inner">
      <span className="v3-eyebrow v3-eyebrow-light">Two ways to join</span>
      <h2 className="v3-h2 v3-h2-light">See you at the <em>easel.</em></h2>
      <p>Pick the next available date, or skip the queue and join the membership for unlimited paint nights.</p>
      <div className="v3-fcta-actions">
        <a className="v3-btn v3-btn-lime v3-btn-lg" href="private-events.html#enquiry">Book a private event →</a>
        <a className="v3-btn v3-btn-ghost-light v3-btn-lg" href="#arty">Become a Member</a>
      </div>
    </Reveal>
  </section>
);

const V3WhatsApp = () => {
  const [mini, setMini] = React.useState(() => {
    try { return localStorage.getItem("ee.whatsapp.minimized") === "1"; } catch (e) { return false; }
  });
  const toggle = (e) => {
    e.preventDefault(); e.stopPropagation();
    setMini(m => {
      const next = !m;
      try { localStorage.setItem("ee.whatsapp.minimized", next ? "1" : "0"); } catch (err) {}
      return next;
    });
  };
  return (
    <a className={"v3-whatsapp " + (mini ? "minimized" : "")} href="https://wa.me/351900000000" target="_blank" rel="noopener" aria-label="Join the Lisbon WhatsApp group">
      <svg viewBox="0 0 32 32" width="26" height="26" aria-hidden="true">
        <path fill="#fffdf6" d="M16 3C8.8 3 3 8.8 3 16c0 2.5.7 4.9 2 7L3 29l6.2-1.9c2 1.1 4.4 1.7 6.8 1.7 7.2 0 13-5.8 13-13S23.2 3 16 3zm7.4 18.3c-.3.9-1.6 1.6-2.5 1.7-.7.1-1.5.1-2.3-.1-.5-.2-1.2-.4-2.1-.8-3.6-1.6-6-5.2-6.2-5.5-.2-.2-1.5-2-1.5-3.8 0-1.8.9-2.7 1.3-3.1.3-.3.7-.4 1-.4h.7c.2 0 .5 0 .8.6.3.6.9 2.1 1 2.3.1.2.1.4 0 .6-.1.2-.2.4-.4.6-.2.2-.4.4-.5.5-.2.2-.4.4-.2.7.2.3.9 1.4 1.9 2.3 1.3 1.2 2.4 1.5 2.7 1.7.3.1.5.1.7-.1l1-1.2c.3-.3.6-.3.9-.2l2 1c.3.1.6.2.6.4.1.3.1 1.1-.2 2.1z"/>
      </svg>
      <span>Join the Lisbon WhatsApp group</span>
      <button className="v3-whatsapp-min" onClick={toggle} aria-label={mini ? "Expand" : "Minimize"} type="button">{mini ? "+" : "–"}</button>
    </a>
  );
};

const V3FooterRef = () => (
  <footer className="v3-footer">
    <div className="v3-footer-grid">
      <div className="v3-footer-brand ee-footer-brand">
        <a className="v3-logo v3-logo-light ee-footer-logo" href="index.html" aria-label="Easel Escape home">
          <img src="split-v1/img/logo-lockup-white.png" alt="" width="56" height="56"/>
          <span>Easel <i>Escape</i></span>
        </a>
        <p className="ee-footer-tagline">Connection through Creation.</p>
        <p>Bespoke painting events, socials &amp; meetups.</p>
        <p className="ee-footer-cities">Lisbon · Belfast · York · Dublin</p>
        <div className="v3-footer-social">
          <a aria-label="Instagram" href="https://www.instagram.com/easel.escape/" target="_blank" rel="noopener">Instagram</a>
          <a aria-label="TikTok" href="https://www.tiktok.com/@easel.escape" target="_blank" rel="noopener">TikTok</a>
          <a aria-label="Facebook" href="https://www.facebook.com/easelescape" target="_blank" rel="noopener">Facebook</a>
        </div>
      </div>
      <div>
        <h5>Events</h5>
        <a href="upcoming.html">Upcoming</a>
        <a href="private-events.html">Private bookings</a>
        <a className="ee-dead">Memberships</a>
        <a className="ee-dead">Gift cards</a>
      </div>
      <div>
        <h5>Company</h5>
        <a href="our-story.html">Our story</a>
        <a href="#venues">Locations</a>
        <a href="gallery.html#community">Community</a>
        <a href="contact.html">Contact</a>
      </div>
      <div>
        <h5>Support</h5>
        <a href="contact.html#enquiry">FAQ</a>
        <a className="ee-dead">Terms</a>
        <a className="ee-dead">Privacy</a>
      </div>
    </div>
    <div className="v3-footer-base">
      <span>© 2026 Easel Escape</span>
    </div>
  </footer>
);

window.V3Footer = V3FooterRef;
window.V3WhoWeAre = V3WhoWeAre;
window.V3Venues = V3Venues;
window.V3Membership = V3Membership;
window.V3Canvases = V3Canvases;
window.V3HowItWorks = V3HowItWorks;
window.V3Insta = V3Insta;
window.V3FinalCTA = V3FinalCTA;
window.V3MiniFAQ = V3MiniFAQ;
const V3PracticeTab = () => {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const root = document.querySelector(".ee-artboard-frame") || window;
    const onScroll = () => {
      const y = root === window ? window.scrollY : root.scrollTop;
      setShow(y > window.innerHeight * 0.85);
    };
    onScroll();
    root.addEventListener("scroll", onScroll);
    return () => root.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <a className={"v3-practice-tab " + (show ? "show" : "")} href="Draw Your Lisbon.html" aria-label="Practice your painting on the online canvas">
      <span className="v3-practice-label">Practice your painting</span>
    </a>
  );
};

window.V3PracticeTab = V3PracticeTab;
window.V3WhatsApp = V3WhatsApp;