/* eslint-disable */
// V3.2 — Premium redesign: themes grid, partner marquee, story, FAQ, private (rewritten)
// (useReveal + Reveal are defined in v3-brush.jsx — loaded first)

// ---------- PARTNER LOGO MARQUEE (B/W moving banner) ----------
const V3Partners = () => {
  const all = window.V3_BRANDS;
  return (
    <section className="v3-partners">
      <Reveal className="v3-partners-head">
        <span className="v3-eyebrow">Trusted by</span>
        <h2 className="v3-h2">Painted for <em>teams</em> at…</h2>
      </Reveal>
      <div className="v3-partners-marquee" aria-label="Partner logos">
        <div className="v3-partners-track">
          {[0,1].map(k => (
            <div key={k} className="v3-partners-row" aria-hidden={k === 1}>
              {all.map(b => (
                <div key={b.name + k} className="v3-partner-logo" title={b.name}>
                  <img src={b.img} alt={b.name} decoding="async"/>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- THEMES (More than a paint night) — premium static grid ----------
const V3Vibe = () => {
  const themes = [
    { name: "Team Building", img: "split-v1/img/kpmg-belfast.jpg" },
    { name: "Hen Parties",   img: "split-v1/img/hen-parties/lisbon/reveal-portrait.jpg" },
    { name: "Birthday Events", img: "split-v1/img/group-aprons.jpg" },
    { name: "Charity & Community", img: "split-v1/img/group-canvases.jpg" },
    { name: "Neon Glow",     img: "split-v1/img/night-tongue.jpg" },
  ];
  return (
    <section id="vibe" className="v3-vibe2 v3-vibe-cards">
      <Reveal className="v3-section-head">
        <span className="v3-eyebrow">Pick your vibe</span>
        <h2 className="v3-h2">More than a <em>paint night.</em></h2>
        <p>Five things we do brilliantly. Tap one to start planning.</p>
      </Reveal>
      <div className="v3-vibecards-rail">
        {themes.map((t, i) => (
          <Reveal key={t.name} as="a" href="#contact" className="v3-vibecard" delay={i * 70}>
            <img src={t.img} alt={t.name} loading="lazy"/>
            <span className="v3-vibecard-tint"/>
            <h3>{t.name}</h3>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// ---------- TESTIMONIALS ----------
const V3Testimonials = () => (
  <section className="v3-testimonials">
    <V3Swirl className="ee-pink-swirl ee-swirl-bridge" color="#FF8FAE" opacity={0.42} rotate={-14} variant="loop" duration={19}/>
    <V3Swirl className="v3-test-swirl" color="#FF8FAE" opacity={0.32} rotate={-25}/>
    <V3Swirl className="v3-test-swirl-2" color="#FF8FAE" opacity={0.22} rotate={70} variant="loop"/>
    <Reveal className="v3-section-head">
      <span className="v3-eyebrow">From actual painters</span>
      <h2 className="v3-h2">"Best night out I've had in <em>ages</em>."</h2>
      <div className="v3-test-stars">
        {"★★★★★".split("").map((s, i) => <span key={i}>{s}</span>)}
        <b>4.9</b><span>· 97% of people recommend us</span>
      </div>
    </Reveal>
    <div className="v3-test-grid">
      {window.V3_TESTIMONIALS.map((t, i) => (
        <Reveal key={i} as="article" className="v3-test-card" delay={i * 80}>
          <div className="v3-test-stars-sm">
            {Array(t.rating).fill(0).map((_, j) => <span key={j}>★</span>)}
          </div>
          <h4>{t.headline}</h4>
          <p>{t.quote}</p>
          <div className="v3-test-attr">
            <div className="v3-test-avatar" style={{ backgroundImage: `url(${t.img})` }}/>
            <div>
              <b>{t.name}</b>
              <span>{t.city}</span>
            </div>
          </div>
        </Reveal>
      ))}
    </div>
  </section>
);

// ---------- PRIVATE EVENTS — full premium block ----------
const V3Private = () => (
  <section id="private" className="v3-private2">
    <V3Swirl className="v3-private2-swirl" color="#C8E150" opacity={0.5} rotate={12} variant="loop"/>
    <div className="v3-private2-inner">
      <Reveal className="v3-private2-head">
        <span className="v3-eyebrow v3-eyebrow-light">Private events</span>
        <h2 className="v3-h2 v3-h2-light">
          You bring the people.<br/>We bring the <em>party</em>.
        </h2>
        <p>Tell us your date, group size, and rough vibe. We'll come back with a tailored quote within four hours — easels, paint, music, drinks, all sorted.</p>
      </Reveal>

      <Reveal className="v3-private2-steps" delay={120}>
        {[
          { n: "01", t: "Tell us the basics", b: "Date, group size, location, occasion." },
          { n: "02", t: "Choose your vibe", b: "Hen, milestone, off-site, charity — or just a Tuesday." },
          { n: "03", t: "We plan everything", b: "Venue logistics, materials, custom prompts, hosting." },
          { n: "04", t: "Show up & paint", b: "We're set up before you arrive. Cleaned up after you leave." },
        ].map(s => (
          <div key={s.n} className="v3-step">
            <span className="v3-step-num">{s.n}</span>
            <h4>{s.t}</h4>
            <p>{s.b}</p>
          </div>
        ))}
      </Reveal>

      <Reveal className="v3-private2-cta" delay={300}>
        <div>
          <span className="v3-private-from">From <b>£32</b> per person · groups 6 – 80</span>
        </div>
        <a className="v3-btn v3-btn-lime v3-btn-lg" href="#contact">Get a quote →</a>
      </Reveal>

      <Reveal className="v3-private2-included" delay={400}>
        <h5>What's included, every time</h5>
        <ul>
          <li><span>✓</span> Easel, canvas, paints, brushes</li>
          <li><span>✓</span> Easel Escape apron to keep</li>
          <li><span>✓</span> 2+ hours with a working artist host</li>
          <li><span>✓</span> Custom prompt for the occasion</li>
          <li><span>✓</span> Setup, hosting & clean-up</li>
          <li><span>✓</span> 4-hour quote turnaround</li>
        </ul>
      </Reveal>
    </div>
  </section>
);

// ---------- STORY (rewritten to match real Easel Escape narrative) ----------
const V3Story = () => (
  <section id="story" className="v3-story2">
    <V3Swirl className="v3-story2-swirl" color="#C8E150" opacity={0.4} rotate={-8} variant="loop"/>
    <Reveal className="v3-story2-head">
      <span className="v3-eyebrow">Our story</span>
      <h2 className="v3-h2">Sparking human connection<br/><em>through creativity.</em></h2>
    </Reveal>

    <div className="v3-story2-cols">
      <Reveal className="v3-story2-col" delay={80}>
        <p>In a world that's rapidly evolving through technology, AI, and constant digital noise, hands-on creativity and real human connection are slowly fading from everyday life.</p>
        <p>Most of us spend our days typing, tapping, scrolling — but rarely <em>making</em> anything with our own hands anymore, and often doing it alone.</p>
      </Reveal>
      <Reveal className="v3-story2-col" delay={160}>
        <p>Easel Escape was born from a simple truth: <em>"we feel most human when we create — and even more so when we do it side by side."</em></p>
        <p>It started with a belief that people deserve spaces where they can switch off, slow down, use their hands, and reconnect with others in real life.</p>
      </Reveal>
      <Reveal className="v3-story2-col" delay={240}>
        <p>What began as a single class above a Belfast pub has grown into a vibrant community across the UK, Ireland, and Portugal — over 1,600 painters hosted, 240+ events, and counting.</p>
        <p>We still host every event ourselves. We still write the prompts. We still wash the brushes.</p>
      </Reveal>
    </div>

    <Reveal className="v3-story2-pillars" delay={320}>
      {[
        { t: "Why We're Different", img: "split-v1/img/couple-kiss.jpg" },
        { t: "Our Goal", img: "split-v1/img/hippo-painter.jpg" },
        { t: "Our Mission", img: "split-v1/img/group-aprons.jpg" },
        { t: "Meet the Founder", img: "split-v1/img/host-students.jpg" },
      ].map(p => (
        <a key={p.t} className="v3-story2-pillar" href="#">
          <div className="v3-story2-pillar-img" style={{ backgroundImage: `url(${p.img})` }}/>
          <div className="v3-story2-pillar-tint"/>
          <h4>{p.t}</h4>
          <span className="v3-story2-pillar-arrow">→</span>
        </a>
      ))}
    </Reveal>
  </section>
);

// ---------- PRESS ----------
const V3Press = () => (
  !window.V3_PRESS || !window.V3_PRESS.length ? null :
  <section className="v3-press2">
    <Reveal className="v3-press2-inner">
      <span className="v3-press2-label">As seen in</span>
      <div className="v3-press2-row">
        {window.V3_PRESS.map(p => (
          <div key={p.name} className="v3-press2-item">
            <p>{p.quote}.</p>
            <span><b>{p.name}</b> · {p.year}</span>
          </div>
        ))}
      </div>
    </Reveal>
  </section>
);

// ---------- FAQ — premium 2-col ----------
const V3FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const faq = window.V3_FAQ;
  return (
    <section id="faq" className="v3-faq2">
      <div className="v3-faq2-grid">
        <Reveal className="v3-faq2-side">
          <span className="v3-eyebrow">Quick answers</span>
          <h2 className="v3-h2">Things <em>people ask.</em></h2>
          <p>Can't find your question? We're a small team and we read every email — promise.</p>
          <a className="v3-btn v3-btn-ghost" href="#contact">Ask us anything →</a>
        </Reveal>
        <Reveal className="v3-faq2-list" delay={120}>
          {faq.map((f, i) => (
            <div key={i} className={"v3-faq2-item " + (open === i ? "open" : "")}>
              <button className="v3-faq2-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="v3-faq2-num">0{i + 1}</span>
                <span className="v3-faq2-label">{f.q}</span>
                <span className="v3-faq2-icon">{open === i ? "−" : "+"}</span>
              </button>
              <div className="v3-faq2-a"><p>{f.a}</p></div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
};

// ---------- NEWSLETTER ----------
const V3Newsletter = () => {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contact" className="v3-newsletter">
      <V3Swirl className="v3-news-swirl" color="#C8E150" opacity={0.55} rotate={5} variant="loop"/>
      <Reveal className="v3-news-card">
        <div className="v3-news-text">
          <span className="v3-eyebrow v3-eyebrow-light">First dibs</span>
          <h2 className="v3-h2 v3-h2-light">Get the next 5 dates<br/><em>before</em> they sell out.</h2>
          <p>One email a fortnight. Early access to popular dates and 10% off your first ticket.</p>
        </div>
        <form className="v3-news-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
          {sent ? (
            <div className="v3-news-sent">
              <span>✓</span>
              <b>Welcome aboard.</b>
              <p>Check your inbox for that 10% code.</p>
            </div>
          ) : (
            <>
              <input type="email" required placeholder="hayley@example.com" value={email} onChange={e => setEmail(e.target.value)}/>
              <button type="submit" className="v3-btn v3-btn-lime v3-btn-lg">Get my code →</button>
              <span className="v3-news-fine">No spam. Unsubscribe with one click.</span>
            </>
          )}
        </form>
      </Reveal>
    </section>
  );
};

// ---------- FOOTER ----------
const V3Footer = () => (
  <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">Gallery</a>
        <a href="contact.html">Contact</a>
      </div>
      <div>
        <h5>Support</h5>
        <a href="#faq">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>
);

// ---------- DATE PICKER (straight to Stripe) ----------
const V3BookingModal = ({ event, onClose }) => {
  const dates = event.occurrences || (event.dates || [event.date]).map(d => ({ label: d }));
  const open = d => { if (d.link) window.open(d.link, "_blank", "noopener") };
  return (
    <div className="v3-modal-bg" onClick={onClose}>
      <div className="v3-modal" onClick={e => e.stopPropagation()}>
        <button className="v3-modal-close" onClick={onClose} aria-label="Close">×</button>
        <div className="v3-modal-head" style={{ backgroundImage: `url(${event.image})` }}>
          <div className="v3-modal-head-tint"/>
          <div className="v3-modal-head-text">
            <span className="v3-eyebrow-sm">{event.city} · {event.time} · {event.price}</span>
            <h3>{event.title}</h3>
            <span>{event.venue}</span>
          </div>
        </div>
        <div className="v3-modal-body">
          {event.soldOut ? (
            <div className="ee-soldout-note">Sold out</div>
          ) : (<>
            <h5>Pick your date</h5>
            <div className="ee-date-rows">
              {dates.map(d => (
                <div key={d.label} className={"ee-date-row" + (d.past ? " past" : "")}>
                  <b>{d.label}</b>
                  {d.past ? <span className="ee-date-state">Past</span>
                    : d.soldOut ? <span className="ee-date-state">Sold out</span>
                    : d.link ? <button type="button" className="v3-btn v3-btn-primary v3-btn-sm" onClick={() => open(d)}>Book now →</button>
                    : <span className="ee-date-soon">Coming soon</span>}
                </div>
              ))}
            </div>
          </>)}
          {event.includes && <p className="ee-modal-includes">{event.includes}</p>}
          <p className="ee-modal-fine">Booking and payment are handled securely by Stripe — it opens in a new tab.</p>
        </div>
      </div>
    </div>
  );
};

window.V3Vibe = V3Vibe;
window.V3Testimonials = V3Testimonials;
window.V3Partners = V3Partners;
window.V3Private = V3Private;
window.V3Story = V3Story;
window.V3Press = V3Press;
window.V3FAQ = V3FAQ;
window.V3Newsletter = V3Newsletter;
window.V3Footer = V3Footer;
window.V3BookingModal = V3BookingModal;