// ABLY — Sections part 2: Quiz CTA, How it works, Gallery, Testimonials, Inclusions, FAQ, Final CTA, Footer

// ============ QUIZ CTA SECTION ============
const QuizCTA = ({ onOpenQuiz }) => {
  return (
    <section className="section-pad dark" id="quiz">
      <div className="container">
        <div className="quiz-cta-grid">
          <div className="reveal">
            <div className="eyebrow on-dark">Your personal concierge</div>
            <h2 className="section-title" style={{ marginTop: 16, color: 'var(--white)' }}>
              Not Sure Which Yacht<br/>Experience Is Right for You?
            </h2>
            <p className="section-sub">
              Take the 30-second quiz and get a personalized recommendation for your group, occasion and budget.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={onOpenQuiz}>
                Find My Perfect Experience
                <Icon name="arrowRight" size={14} />
              </button>
              <button className="btn btn-ghost-light" onClick={() => window.openWhatsApp(window.WA_MESSAGES.general)}>
                <Icon name="wa" size={16} />
                Talk to a Concierge
              </button>
            </div>
            <p style={{ marginTop: 18, fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>
              No pressure. No commitment. Just a personalized recommendation.
            </p>
          </div>

          <div className="quiz-preview-card reveal dl1">
            <div className="qp-progress">
              <span className="done" />
              <span className="active" />
              <span />
              <span />
            </div>
            <div className="qp-q">Question 2 of 4 · Occasion</div>
            <div className="qp-question">What kind of experience are you planning?</div>
            <div className="qp-opts">
              <div className="qp-opt">Relax & Sunset</div>
              <div className="qp-opt selected">Birthday or Celebration <Icon name="check" size={14} stroke={2.5} /></div>
              <div className="qp-opt">Family Day</div>
              <div className="qp-opt">Luxury VIP</div>
            </div>
            <div style={{ marginTop: 18, fontSize: 12, color: 'rgba(255,255,255,0.5)', display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon name="sparkle" size={12} stroke={2} />
              No contact info needed to see your recommendation.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ============ MEET YOUR CABO YACHT ADVISOR ============
const Advisor = ({ onOpenQuiz }) => {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;

  if (isMobile) {
    return (
      <section className="section-pad advisor-section" id="advisor">
        <div className="container">
          <div className="advisor-mobile reveal">
            <div className="advisor-m-photo">
              <image-slot
                id="armando-portrait"
                shape="rounded"
                radius="20"
                placeholder="Drop Armando's photo"
              ></image-slot>
              <div className="advisor-m-idcard">
                <span className="advisor-m-idname">Armando</span>
                <span className="advisor-m-idrole">Founder · 10+ years in Cabo yacht experiences</span>
              </div>
            </div>

            <div className="eyebrow" style={{ marginTop: 30 }}>Meet your Cabo yacht advisor</div>
            <h2 className="advisor-m-title">You Don't Need More Boat Options. You Need the Right One.</h2>

            <p className="advisor-m-intro">Hi, I'm Armando.</p>
            <p className="advisor-m-body">
              After more than 10 years in Cabo's yacht industry, I created ABLY to make finding the
              right yacht experience simpler and more personalized. Tell me about your group, your
              occasion, and the kind of day you're looking for — I'll handle the rest.
            </p>

            <blockquote className="advisor-m-quote">
              Most visitors compare dozens of boats and still aren't sure which one is right. ABLY makes the process easy.
            </blockquote>

            <ul className="advisor-trust-bullets advisor-m-bullets">
              <li><Icon name="check" size={14} stroke={2.5} /> 10+ years in the Cabo yacht industry</li>
              <li><Icon name="check" size={14} stroke={2.5} /> Access to trusted local yacht operators</li>
              <li><Icon name="check" size={14} stroke={2.5} /> Personalized recommendations for your group</li>
              <li><Icon name="check" size={14} stroke={2.5} /> Clear pricing before you book</li>
            </ul>

            <button className="btn btn-primary btn-block" onClick={onOpenQuiz}>
              Find My Perfect Experience
              <Icon name="arrowRight" size={14} />
            </button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="section-pad advisor-section" id="advisor">
      <div className="container">
        <div className="advisor-grid">
          <div className="advisor-photo-col reveal">
            <image-slot
              id="armando-portrait"
              className="advisor-photo"
              shape="rounded"
              radius="22"
              placeholder="Drop Armando's photo"
            ></image-slot>
            <div className="advisor-signature">
              <span className="advisor-sign-name">Armando</span>
              <span className="advisor-sign-role">Founder, 10+ Years in Cabo Yacht Experiences</span>
            </div>
          </div>
          <div className="advisor-note reveal dl1">
            <h2 className="section-title" style={{ marginBottom: 32 }}>You Don't Need More Boat Options. You Need the Right One.</h2>
            <div className="eyebrow">Meet your Cabo yacht advisor</div>
            <h2 className="section-title" style={{ marginTop: 16 }}>Hi, I'm Armando.</h2>
            <div className="advisor-body">
              <p>After more than 10 years in Cabo's yacht industry, I've seen how overwhelming it can be to plan the perfect day on the water.</p>
              <p>Most visitors end up comparing dozens of boats, trying to understand pricing, and wondering if they're choosing the right experience for their group.</p>
              <p>That's exactly why I created ABLY.</p>
              <p>I wanted to make the process simple.</p>
              <p>Instead of spending hours researching operators and comparing options, you can tell us about your group, your occasion, and what kind of day you're looking for. We'll help you find the experience that fits best.</p>
              <p>Whether you're planning a family outing, a celebration with friends, or a luxury escape, my goal is to help you spend less time searching and more time enjoying Cabo.</p>
            </div>
            <ul className="advisor-trust-bullets">
              <li><Icon name="check" size={14} stroke={2.5} /> 10+ years in the Cabo yacht industry</li>
              <li><Icon name="check" size={14} stroke={2.5} /> Access to trusted local yacht operators</li>
              <li><Icon name="check" size={14} stroke={2.5} /> Personalized recommendations for your group</li>
              <li><Icon name="check" size={14} stroke={2.5} /> Clear pricing before you book</li>
            </ul>
            <button className="btn btn-primary" style={{ marginTop: 0 }} onClick={onOpenQuiz}>
              Find My Perfect Experience
              <Icon name="arrowRight" size={14} />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

// ============ GALLERY ============
// (Gallery component now lives in gallery.jsx)

// ============ SOCIAL PROOF / TRUSTED OPERATORS ============
const Testimonials = () => {
  const items = [
    {
      quote: 'We had an amazing time on our excursion! The captain and crew tended to our every need. The food was prepared fresh and was delicious! Cedric, Armando, and Denise took excellent care of our group! Nothing was lacking and we will most definitely do this again!',
      name: 'Cristopher Yager',
      img: 'assets/reviews/cristopher.png',
      imgId: 'rev0',
    },
    {
      quote: 'The highlight of our trip to Cabo! So relaxing the Capt. in the crew were perfectly attentive to our every need and took us to the most beautiful sites to swim and see the sunset. Highly recommend! Will definitely be back.',
      name: 'Liane Rodriguez',
      img: 'assets/reviews/liane.png',
      imgId: 'rev1',
    },
    {
      quote: 'Absolutely wonderful!! Mario, Nikki, Denise, Hector and Alvaro provided a wonderful tour from the Cabo Marina, around the arch! While providing details about the area, as well as Mario\u2019s expert conversation about the humpback whales in the area, we enjoyed beverages (adult and kid-friendly) and some great snacks. Their timing was perfect \u2014 while the sun was still high we were able to enjoy swim time (some jumped off the catamaran and swimming to the beach, while others played on the swim pad). Prior to sunset we got around to the Pacific where we were able to experience some close-ish encounters with the whales. At sunset Denise captured some stunning photos of the area, as well as some great family photos. Relaxed and enjoyable, a perfect final excursion for our trip to Cabo! Thanks team!!',
      name: 'Jen Pedersen',
      img: 'assets/reviews/jen.png',
      imgId: 'rev2',
    },
    {
      quote: 'We took the \u201835 yacht with chief stew Axel, Capitan Adan and Alexandra the photographer. They were awesome; really personable, really attentive, really fun. They took us whale watching, put an anchor down near a beautiful beach by the arches where we swam and snorkeled. They made the food by hand on the boat and it was delicious (beef quesadillas, homemade guac and pico de gallo). We felt safe and well taken care of, didn\u2019t want to get off. I would highly recommend.',
      name: 'Gina Sbragia',
      img: 'assets/reviews/gina.png',
      imgId: 'rev3',
    },
  ];
  const Star = () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true">
      <polygon points="12 2 15 9 22 9.5 17 14.5 18.5 22 12 18 5.5 22 7 14.5 2 9.5 9 9 12 2" />
    </svg>
  );
  const Card = ({ t }) => (
    <div className="testimonial">
      <div className="stars">{Array.from({ length: 5 }).map((_, j) => <Star key={j} />)}</div>
      <blockquote>"{t.quote}"</blockquote>
      <div className="testimonial-author">
        <img className="testimonial-avatar" src={(window.__resources && window.__resources[t.imgId]) || t.img} alt={t.name} loading="lazy" draggable="false" />
        <cite>{t.name}</cite>
      </div>
    </div>
  );
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const [expanded, setExpanded] = React.useState(false);
  const visible = isMobile && !expanded ? items.slice(0, 2) : items;

  // Desktop marquee: the track drifts left continuously via rAF; dragging it
  // (pointer events) pauses the drift, which resumes 4s after the pointer is
  // released. Items are rendered twice so the loop wraps seamlessly at the
  // width of one copy. Reduced-motion users get a static, still-draggable bar.
  const trackRef = React.useRef(null);
  const marquee = React.useRef({ offset: 0, dragging: false, resumeAt: 0, lastX: 0, copyW: 0 });
  const [dragging, setDragging] = React.useState(false);

  React.useEffect(() => {
    if (isMobile) return;
    const track = trackRef.current;
    const st = marquee.current;
    if (!track) return;
    const reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const SPEED = 0.028; // px per ms ≈ 28px/s

    const measure = () => {
      const gap = parseFloat(getComputedStyle(track).columnGap) || 0;
      st.copyW = (track.scrollWidth + gap) / 2; // width of one copy incl. its trailing gap
    };
    measure();
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(measure);
    window.addEventListener('resize', measure, { passive: true });

    let raf, lastT = 0;
    const tick = (t) => {
      const dt = lastT ? Math.min(t - lastT, 100) : 16;
      lastT = t;
      if (!st.dragging && t >= st.resumeAt && !reduceMotion) st.offset += dt * SPEED;
      if (st.copyW > 0) st.offset = ((st.offset % st.copyW) + st.copyW) % st.copyW;
      track.style.transform = `translate3d(${-st.offset}px,0,0)`;
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', measure);
    };
  }, [isMobile]);

  const onPointerDown = (e) => {
    const st = marquee.current;
    st.dragging = true;
    st.lastX = e.clientX;
    setDragging(true);
    e.currentTarget.setPointerCapture(e.pointerId);
  };
  const onPointerMove = (e) => {
    const st = marquee.current;
    if (!st.dragging) return;
    st.offset -= e.clientX - st.lastX;
    st.lastX = e.clientX;
  };
  const endDrag = () => {
    const st = marquee.current;
    if (!st.dragging) return;
    st.dragging = false;
    st.resumeAt = performance.now() + 4000;
    setDragging(false);
  };
  return (
    <section className="section-pad dark" id="trust">
      <div className="container">
        <div className="reveal" style={{ maxWidth: 760 }}>
          <div className="eyebrow on-dark">Curated &amp; trusted</div>
          <h2 className="section-title" style={{ marginTop: 16 }}>
            Curated by Local Experts.<br/>Delivered by Trusted Operators.
          </h2>
          <p className="section-sub on-dark">
            Finding the right yacht experience shouldn't require comparing dozens of boats, prices and operators.
          </p>
          <p className="section-sub on-dark" style={{ marginTop: 12 }}>
            That's why ABLY works with established yacht partners in Cabo to help guests access exceptional experiences with greater clarity and confidence.
          </p>
        </div>

        <div className="reviews-head reveal dl1">
          <h3 className="reviews-title">What Guests Love About These Experiences</h3>
          <span className="reviews-label">
            <Icon name="shield" size={13} stroke={1.6} />
            Guest feedback from partner-operated experiences
          </span>
        </div>

        {isMobile ? (
          <div className="testimonials reveal dl2">
            {visible.map((t, i) => <Card t={t} key={i} />)}
          </div>
        ) : (
          <div
            className={`testimonials-marquee reveal dl2${dragging ? ' dragging' : ''}`}
            onPointerDown={onPointerDown}
            onPointerMove={onPointerMove}
            onPointerUp={endDrag}
            onPointerCancel={endDrag}
          >
            <div className="testimonials-track" ref={trackRef}>
              {[...items, ...items].map((t, i) => <Card t={t} key={i} />)}
            </div>
          </div>
        )}

        {isMobile && items.length > 2 && (
          <div className="reviews-actions">
            <button
              className="btn btn-ghost-light btn-sm"
              onClick={() => setExpanded((v) => !v)}
            >
              {expanded ? 'Show Less' : 'Show More'}
              <Icon name={expanded ? 'arrowLeft' : 'plus'} size={13} stroke={2} />
            </button>
          </div>
        )}
      </div>
    </section>
  );
};

// ============ INCLUSIONS ============
const Inclusions = () => {
  const items = [
    { icon: 'concierge', name: 'Bilingual crew' },
    { icon: 'bar', name: 'Open bar' },
    { icon: 'snack', name: 'Food options' },
    { icon: 'toy', name: 'Water toys' },
    { icon: 'anchor', name: 'Iconic Cabo stops' },
  ];
  return (
    <section className="section-pad-sm dark" id="included">
      <div className="container">
        <div className="inclusions-split">
          <div className="inclusions-copy reveal">
            <div className="eyebrow on-dark">Inclusions</div>
            <h2 className="section-title" style={{ marginTop: 16 }}>Show Up, Relax, and Let Us Handle the Rest</h2>
            <p className="section-sub on-dark">Every yacht experience includes:</p>
          </div>
          <ul className="inclusions-list reveal dl1">
            {items.map(it => (
              <li className="inclusion" key={it.name}>
                <span className="ic"><Icon name={it.icon} size={20} /></span>
                {it.name}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

// ============ FAQ ============
const FAQ = () => {
  const items = [
    { q: 'Why book through ABLY?', a: "Because we help you compare options, understand what's included and find the experience that best fits your group without spending hours researching on your own." },
    { q: 'Do I need to know which yacht I want?', a: "Not at all. Most guests start by telling us what kind of experience they're looking for, and we help narrow down the options." },
    { q: 'Which experience is right for my group?', a: "If you're not sure, that's exactly what we're here for. Tell us about your group, occasion and budget, and we'll recommend the best available options for your trip." },
    { q: 'Can I customize my experience?', a: "Absolutely. Once you tell us about your group and occasion, we can help you customize the yacht size, add-ons, duration, and extras. Everything is tailored around what works best for your group before anything is confirmed." },
    { q: 'Do you offer transportation from my hotel to the marina?', a: "Yes. We offer private, round-trip luxury van transportation between your hotel and the marina at an exclusive discounted rate. It's an optional service — not included in the charter price — but it's noticeably more affordable than local taxis or outside providers, and keeps your day effortless from door to dock and back." },
    { q: 'What happens after I contact you?', a: "We'll learn more about what you're planning, recommend the best options for your group and confirm availability for your preferred dates." },
    { q: 'How much should I expect to spend?', a: "Pricing varies depending on the experience, yacht selection, duration and optional upgrades. We'll help you find an option that fits your budget before anything is confirmed." },
    { q: 'What is the cancellation policy?', a: "You can cancel or reschedule for free up to 72 hours before your charter. Within 72 hours of departure, payments are non-refundable. Weather is the exception: if the Port Captain closes the harbor or conditions are unsafe, we reschedule your trip first — and if no alternative date works for you, you receive a 100% refund." },
    { q: "What if the weather isn't ideal?", a: "Safety comes first. Cabo enjoys over 300 days of sunshine a year, and light rain or passing clouds don't typically affect a charter. Sailing conditions are regulated by the Port Captain, and in the rare case the harbor is closed — or conditions are otherwise unsafe — we reschedule your experience for the next available date, and if no alternative date works for you, you receive a 100% refund." },
    { q: "What's included?", a: "Every charter includes a professional captain and crew, an open bar (rum, tequila, vodka, beer, mixers, sodas, juices and bottled water), food and snacks (cheese quesadillas, fresh fruit, guacamole, pico de gallo and chips), snorkel gear, paddle board and floating mat, and a Bluetooth sound system. Equipment can vary slightly by yacht — we'll confirm the exact details for the boat you choose." },
    { q: 'What should I bring?', a: "Just the essentials for a day on the water: beachwear and sandals, towels, sunglasses, a hat, a light jacket for the ride back, sunscreen, and your phone charged up with your favorite playlist for the Bluetooth sound system." },
    { q: 'Where does the tour take us?', a: "Charters cruise the iconic Land's End: Pelican Rock, Lover's Beach, the famous Arch (El Arco) and the Pedregal coastline, with swim and snorkel stops along the way. On longer charters there's time to continue up the corridor to Santa María or Chileno Bay, two of Cabo's best snorkeling spots." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section-pad" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div className="reveal">
            <div className="eyebrow">FAQ</div>
            <h2 className="section-title" style={{ marginTop: 16 }}>Still Deciding? Start Here.</h2>
            <p className="section-sub">Here are answers to the questions we hear most often.</p>
            <div className="faq-side-card">
              <p style={{ fontWeight: 600, color: 'var(--graphite)' }}>Prefer to just ask?</p>
              <p style={{ fontSize: 14, color: 'var(--graphite-soft)', marginTop: 8, lineHeight: 1.65 }}>
                Tell us what you're planning and we'll point you to the right experience — no pressure, no commitment.
              </p>
              <button className="btn btn-wa btn-sm" style={{ marginTop: 18 }} onClick={() => window.openWhatsApp(window.WA_MESSAGES.general)}>
                <Icon name="wa" size={15} />
                Ask on WhatsApp
              </button>
            </div>
          </div>
          <div className="faq-list reveal dl1">
            {items.map((it, i) => (
              <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  {it.q}
                  <span className="plus"><Icon name="plus" size={14} stroke={2} /></span>
                </button>
                <p className="faq-a">{it.a}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ============ FINAL CTA ============
const FinalCTA = ({ onOpenQuiz }) => {
  return (
    <section className="final-cta dark">
      <div className="final-cta-bg" />
      <div className="container reveal" style={{ position: 'relative', zIndex: 2 }}>
        <div className="gold-line" />
        <div className="eyebrow on-dark" style={{ justifyContent: 'center', display: 'flex' }}>YOUR DAY ON THE WATER</div>
        <h2 style={{ marginTop: 20 }}>Let's Find the Perfect Yacht<br/><span style={{ color: 'var(--gold-soft)' }}>Experience for Your Group</span></h2>
        <p className="sub">Tell us what you're planning, and we'll help you find the right experience for your group, occasion, and budget — without the guesswork.</p>
        <div className="ctas">
          <button className="btn btn-wa" onClick={() => window.openWhatsApp(window.WA_MESSAGES.general)}>
            <Icon name="wa" size={16} />
            Check Availability on WhatsApp
          </button>
        </div>
        <p className="micro">No pressure. No obligation. Just personalized recommendations from a local expert.</p>
      </div>
    </section>
  );
};

// ============ FOOTER ============
const Footer = () => {
  return (
    <footer className="footer" id="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="logo-mark" style={{ color: 'var(--white)' }}>
              <span className="name">ABLY</span>
              <span className="desc" style={{ color: 'var(--gold)' }}>Private Yacht Experiences</span>
            </div>
            <p className="footer-blurb">Private yacht experiences in Cabo, curated around your group, occasion and style.</p>
          </div>
          <div>
            <h5>Experiences</h5>
            <ul>
              <li><a href="#experiences">Celebration Cruise</a></li>
              <li><a href="#experiences">Ultra Luxury VIP</a></li>
              <li><a href="#experiences">Private Escape</a></li>
              <li><a href="#quiz">Find My Perfect Experience</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#gallery">Gallery</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="#">WhatsApp</a></li>
              <li><a href="#">Email</a></li>
              <li><a href="#">Instagram</a></li>
            </ul>
          </div>
          <div>
            <h5>Legal</h5>
            <ul>
              <li><a href="privacy.html" target="_blank" rel="noopener">Privacy Policy</a></li>
              <li><a href="#">Terms</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 ABLY. All rights reserved.</span>
          <div className="legal">
            <span>Armando Rico · Fraccionamiento Portales 23473, Calle Los Corales M12, L19, Cabo San Lucas, B.C.S., México</span>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.QuizCTA = QuizCTA;
window.Advisor = Advisor;
window.Testimonials = Testimonials;
window.Inclusions = Inclusions;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;