/* ── DominiTrip Sections — v2: Research-backed pricing & US/CA copy ── */

/* ── Tour Data (2025 market-rate aligned) ── */
const TOURS = [
  { id: 1, name: 'Saona Island VIP Catamaran', price: 99, duration: '8–9 hours', pax: 'Up to 30',
    gradient: 'linear-gradient(135deg, #0891B2, #22D3EE, #67E8F9)',
    img: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=800&q=80',
    description: 'Speedboat to a private beach, catamaran cruise with open bar, natural pool swim with starfish, and a fresh Dominican BBQ lunch. Zero souvenir-shop stops.',
    includes: ['Speedboat + catamaran', 'Open bar & BBQ lunch', 'Private beach access'],
    tag: 'Most Popular' },
  { id: 2, name: 'Off-Road Buggy & ATV Adventure', price: 65, duration: '4 hours', pax: '2 per buggy',
    gradient: 'linear-gradient(135deg, #065F46, #059669, #34D399)',
    img: 'https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?auto=format&fit=crop&w=800&q=80',
    description: 'Tear through Dominican countryside trails, explore a hidden cenote cave, visit a cacao plantation, and hit Macao Beach — all mud, no gift shops.',
    includes: ['Buggy or ATV rental', 'Cenote swim', 'Macao Beach stop'],
    tag: 'Adventure' },
  { id: 3, name: 'Scape Park & Hoyo Azul Cenote', price: 109, duration: '6 hours', pax: 'Up to 20',
    gradient: 'linear-gradient(135deg, #164E63, #0E7490, #06B6D4)',
    img: 'https://images.unsplash.com/photo-1552083375-1447ce886485?auto=format&fit=crop&w=800&q=80',
    description: 'Swim in the electric-blue Hoyo Azul cenote, fly the Superman zipline headfirst over jungle canopy, explore Iguabonita Cave, and walk eco-trails at Cap Cana\'s premier adventure park.',
    includes: ['Full Scape Park pass', 'Hoyo Azul cenote swim', 'Ziplines + cave tour'],
    tag: 'Premium' },
  { id: 4, name: 'Monkeyland & Jungle Zipline Combo', price: 89, duration: '5 hours', pax: 'Up to 15',
    gradient: 'linear-gradient(135deg, #166534, #16A34A, #4ADE80)',
    img: 'https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=800&q=80',
    description: 'Play with free-roaming squirrel monkeys in their forest habitat, then soar above the canopy on ziplines. Family-friendly and hands-on — kids love this one.',
    includes: ['Monkey sanctuary access', 'Canopy zipline course', 'Hotel pickup & dropoff'],
    tag: 'Family Friendly' },
  { id: 5, name: 'Bávaro Coastline Snorkeling Cruise', price: 75, duration: '5 hours', pax: 'Up to 25',
    gradient: 'linear-gradient(135deg, #1E3A5F, #0369A1, #38BDF8)',
    img: 'https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=800&q=80',
    description: 'Explore coral reefs and tropical fish, then cruise the Bávaro coastline on a party catamaran with Dominican music, open bar, and fresh ceviche.',
    includes: ['Snorkel gear provided', 'Open bar & snacks', 'Party catamaran cruise'],
    tag: 'Best Value' },
];

/* ── Transfer Data (market-rate, distance-based) ── */
const TRANSFERS = [
  { name: 'Airport Pickup & Dropoff', desc: 'PUJ Airport ↔ Your Hotel', price: 35, priceLabel: 'From', icon: Icons.plane, time: '10–25 min' },
  { name: 'Hotel-to-Hotel', desc: 'Transfer between any resorts', price: 25, priceLabel: 'From', icon: Icons.hotel, time: 'Varies' },
  { name: 'Private SUV', desc: 'Exclusive comfort for couples', price: 65, priceLabel: 'From', icon: Icons.car, time: 'Any route' },
  { name: 'Shared Shuttle', desc: 'Budget-friendly, AC, WiFi', price: 18, priceLabel: 'From', unit: '/person', icon: Icons.users, time: '20–35 min' },
  { name: 'Group Van (15 pax)', desc: 'Perfect for large groups', price: 150, priceLabel: 'From', icon: Icons.van, time: 'Any route' },
];

/* ── Vehicles ── */
const VEHICLES = [
  { name: 'Sedan', capacity: '1–3 passengers', desc: 'Comfortable and private', gradient: 'linear-gradient(135deg, var(--primary), var(--primary-dark))', img: 'https://images.unsplash.com/photo-1550355291-bbee04a92027?auto=format&fit=crop&w=800&q=80' },
  { name: 'Minivan', capacity: 'Up to 7 passengers', desc: 'Great for families', gradient: 'linear-gradient(135deg, var(--accent), var(--accent-dark))', img: 'https://images.unsplash.com/photo-1559416523-140ddc3d238c?auto=format&fit=crop&w=800&q=80' },
  { name: 'Van', capacity: 'Up to 15 passengers', desc: 'Ideal for groups', gradient: 'linear-gradient(135deg, var(--green), #047857)', img: 'https://images.unsplash.com/photo-1570125909232-eb263c188f7e?auto=format&fit=crop&w=800&q=80' },
];

/* ── Pain Points We Solve ── */
const PAIN_POINTS = [
  { bad: 'Forced gift-shop stops that waste your day', good: 'Zero commercial stops — unless you ask', icon: Icons.clock },
  { bad: 'Unmarked cars and unlicensed drivers', good: 'MITUR-licensed, branded vehicles with uniformed drivers', icon: Icons.shield },
  { bad: 'Surprise fees and hidden costs', good: 'All-inclusive pricing — what you see is what you pay', icon: Icons.tag },
  { bad: 'No-shows and late pickups at the airport', good: 'Real-time flight tracking — your driver is always waiting', icon: Icons.plane },
  { bad: 'Last-minute cancellation penalties', good: 'Free cancellation up to 24 hours before', icon: Icons.check },
  { bad: 'Drivers who don\'t speak your language', good: 'Fully bilingual team (English & Spanish)', icon: Icons.globe },
];

/* ── Trust-Focused USPs ── */
const USPS = [
  { icon: Icons.shield, title: 'Licensed & Insured', desc: 'Fully registered with MITUR. Liability insurance on every ride.' },
  { icon: Icons.clock, title: '24/7 Availability', desc: 'Red-eye flight? 4 AM pickup? We\'re always on.' },
  { icon: Icons.globe, title: 'Bilingual Drivers', desc: 'Every driver speaks English and Spanish fluently.' },
  { icon: Icons.wifi, title: 'Free WiFi + AC', desc: 'Stay connected and cool in every vehicle.' },
  { icon: Icons.heart, title: 'Airport Meet & Greet', desc: 'Name sign, cold water, help with bags — the full welcome.' },
  { icon: Icons.drink, title: 'Cold Drinks on Arrival', desc: 'Complimentary water and refreshments in every vehicle.' },
];

/* ── Testimonials (US/CA specific) ── */
const TESTIMONIALS = [
  { name: 'Sarah M.', from: 'New York, USA', rating: 5, text: 'After reading horror stories about tourist taxis in Punta Cana, DominiTrip was a breath of fresh air. Driver tracked our delayed flight and was waiting with cold water. No drama, no haggling.' },
  { name: 'James & Lisa K.', from: 'Toronto, Canada', rating: 5, text: 'The Saona Island tour was the highlight of our trip. No gift shop stops, real food, and our guide knew every hidden spot. Already booked them for next year.' },
  { name: 'Carlos R.', from: 'Miami, USA', rating: 5, text: 'We did 3 tours and all airport transfers through DominiTrip. Every vehicle was clean, on time, with WiFi. The pricing matched what they quoted — no surprises. That\'s rare here.' },
  { name: 'Emma & Dave W.', from: 'Vancouver, Canada', rating: 5, text: 'The buggy adventure was incredible! We were nervous about safety but the vehicles were legit, helmets provided, and our guide was super professional. A must-do for adventurous couples.' },
];

/* ── FAQs (US/CA market concerns) ── */
const FAQS = [
  { q: 'Is it safe to book private transfers in Punta Cana?', a: 'Absolutely. DominiTrip is fully licensed with the Dominican Ministry of Tourism (MITUR) and INTRANT. All vehicles are branded, insured, and GPS-tracked. Our uniformed drivers carry official ID — you\'ll never have to worry about unmarked cars or unlicensed operators.' },
  { q: 'What if my flight is delayed?', a: 'We track every incoming flight in real-time. If your flight is delayed — even by hours — your driver will be waiting at arrivals at no extra charge. No penalties, no rebooking fees.' },
  { q: 'Do you make forced stops at souvenir shops?', a: 'Never. A top complaint on Reddit and TripAdvisor about Dominican tours is wasted time at gift shops. DominiTrip tours have zero commercial stops unless you specifically request one.' },
  { q: 'Can I pay in Canadian or US dollars?', a: 'Yes! We accept USD, CAD, and major credit cards. All prices on our site can be viewed in both currencies. No hidden conversion fees.' },
  { q: 'How far in advance should I book?', a: 'We recommend at least 48 hours for tours and 24 hours for transfers. That said, we often accommodate same-day bookings — just message us on WhatsApp.' },
  { q: 'What\'s your cancellation policy?', a: 'Free cancellation up to 24 hours before your scheduled service — full refund, no questions asked. Need to modify? Changes are free anytime.' },
  { q: 'Do vehicles have WiFi and air conditioning?', a: 'Every single vehicle in our fleet has high-speed WiFi and powerful AC. Punta Cana is hot — we keep you cool and connected.' },
  { q: 'Why book direct instead of through Viator or GetYourGuide?', a: 'OTAs charge us 20–30% commission, which inflates the price you pay. Booking direct with DominiTrip gets you the same (or better) experience at a lower price, plus direct WhatsApp support and flexible changes.' },
];

/* ── Destinations ── */
const DESTINATIONS = [
  { name: 'PUJ Airport', time: '10–15 min', icon: Icons.plane },
  { name: 'Bávaro Beach', time: '20–25 min', icon: Icons.mapPin },
  { name: 'Cap Cana', time: '10–15 min', icon: Icons.mapPin },
  { name: 'Uvero Alto', time: '45–50 min', icon: Icons.mapPin },
  { name: 'Bayahibe / Saona', time: '60–70 min', icon: Icons.car },
  { name: 'Miches', time: '90 min', icon: Icons.car },
];

/* ── Partners ── */
const PARTNERS = [
  { name: 'GetYourGuide', color: '#FF5533' },
  { name: 'Viator', color: '#00AA6C' },
  { name: 'Civitatis', color: '#1A73E8' },
  { name: 'Booking.com', color: '#003580' },
];

/* ── Gallery ── */
const GALLERY_ITEMS = [
  { label: 'Saona Island Beach', gradient: 'linear-gradient(135deg, #0891B2, #67E8F9)', img: 'https://images.unsplash.com/photo-1519046904884-53103b34b206?auto=format&fit=crop&w=600&q=80' },
  { label: 'Airport Meet & Greet', gradient: 'linear-gradient(135deg, #164E63, #0E7490)', img: 'https://images.unsplash.com/photo-1530521954074-e64f6810b32d?auto=format&fit=crop&w=600&q=80' },
  { label: 'Catamaran Cruise', gradient: 'linear-gradient(135deg, #1E3A5F, #38BDF8)', img: 'https://images.unsplash.com/photo-1540946485063-a40da27545f8?auto=format&fit=crop&w=600&q=80' },
  { label: 'Jungle Adventure', gradient: 'linear-gradient(135deg, #065F46, #34D399)', img: 'https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=600&q=80' },
  { label: 'Hoyo Azul Cenote', gradient: 'linear-gradient(135deg, #155E75, #22D3EE)', img: 'https://images.unsplash.com/photo-1552083375-1447ce886485?auto=format&fit=crop&w=600&q=80' },
  { label: 'Sunset Views', gradient: 'linear-gradient(135deg, #EA580C, #FBBF24)', img: 'https://images.unsplash.com/photo-1506929562872-bb421503ef21?auto=format&fit=crop&w=600&q=80' },
];

/* ═══════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* ── DominiTrip Difference (Pain Points) ── */
function DominiTripDifference() {
  return (
    <section className="section-pad" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <AnimatedSection>
          <SectionHeader tag="The DominiTrip Difference" title="We Fix What Other Operators Get Wrong"
            subtitle="Tourists on Reddit and TripAdvisor keep reporting the same problems in Punta Cana. We built DominiTrip to solve every single one." />
        </AnimatedSection>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 20 }}>
          {PAIN_POINTS.map((p, i) => (
            <AnimatedSection key={i} delay={i * 0.07}>
              <Card style={{ padding: '24px 20px', borderRadius: 'var(--radius)' }} hoverable={false}>
                <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                  <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--primary-glow)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--primary)', flexShrink: 0 }}>{p.icon}</div>
                  <div>
                    <p style={{ fontSize: 13, color: 'var(--accent-dark)', fontWeight: 600, textDecoration: 'line-through', marginBottom: 6, opacity: 0.7 }}>{p.bad}</p>
                    <p style={{ fontSize: 15, fontWeight: 700, color: 'var(--text)', fontFamily: 'var(--font-display)', lineHeight: 1.35 }}>{p.good}</p>
                  </div>
                </div>
              </Card>
            </AnimatedSection>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Tour Card ── */
function TourCard({ tour, onBook, cardStyle, currency }) {
  const [hovered, setHovered] = React.useState(false);
  const radius = cardStyle === 'rounded' ? 'var(--radius)' : '4px';
  return (
    <div onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} style={{
      borderRadius: radius, overflow: 'hidden', background: 'var(--surface)',
      boxShadow: hovered ? 'var(--card-shadow-hover)' : 'var(--card-shadow)',
      transform: hovered ? 'translateY(-6px)' : 'none',
      transition: 'all 0.4s cubic-bezier(0.22,1,0.36,1)', cursor: 'pointer',
      display: 'flex', flexDirection: 'column',
    }} onClick={() => onBook(tour)}>
      <div style={{ position: 'relative', height: 200, background: `url(${tour.img}) center/cover no-repeat, ${tour.gradient}`, display: 'flex', alignItems: 'flex-end', padding: 16 }}>
        <div style={{ position: 'absolute', top: 12, left: 12 }}><Badge>{tour.tag}</Badge></div>
        <div style={{ position: 'absolute', top: 12, right: 12, background: 'rgba(0,0,0,0.35)', backdropFilter: 'blur(8px)', borderRadius: 8, padding: '6px 12px', color: '#fff', fontSize: 13, fontWeight: 600, fontFamily: 'var(--font-display)' }}>{tour.duration}</div>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)' }}></div>
        <h3 style={{ position: 'relative', color: '#fff', fontSize: 18, fontWeight: 700, lineHeight: 1.25, textWrap: 'pretty' }}>{tour.name}</h3>
      </div>
      <div style={{ padding: '16px 16px 20px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.55, marginBottom: 12 }}>{tour.description}</p>
        {tour.includes && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 16 }}>
            {tour.includes.map((inc, j) => (
              <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--green)', fontWeight: 600 }}>
                <span style={{ color: 'var(--green)' }}>{Icons.check}</span> {inc}
              </div>
            ))}
          </div>
        )}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 'auto' }}>
          <div>
            <span style={{ fontSize: 26, fontWeight: 800, color: 'var(--primary)', fontFamily: 'var(--font-display)' }}>{formatPrice(tour.price, currency)}</span>
            <span style={{ fontSize: 13, color: 'var(--text-muted)', marginLeft: 4 }}>/person</span>
          </div>
          <Btn size="sm" variant="primary" icon={Icons.arrowRight}>Book</Btn>
        </div>
      </div>
    </div>
  );
}

/* ── Tours Section ── */
function ToursSection({ onBook, cardStyle, currency }) {
  return (
    <section id="tours" className="section-pad" style={{ background: 'var(--bg-alt)' }}>
      <div className="container">
        <AnimatedSection>
          <SectionHeader tag="Tours & Excursions" title="Unforgettable Experiences, Transparent Pricing"
            subtitle="Every tour includes hotel pickup, bilingual guide, and zero forced gift-shop stops. Prices are per person — what you see is what you pay." />
        </AnimatedSection>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 24 }}>
          {TOURS.map((t, i) => (
            <AnimatedSection key={t.id} delay={i * 0.08}>
              <TourCard tour={t} onBook={onBook} cardStyle={cardStyle} currency={currency} />
            </AnimatedSection>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Transfers Section ── */
function TransfersSection({ onBook, cardStyle, currency }) {
  const radius = cardStyle === 'rounded' ? 'var(--radius)' : '4px';
  return (
    <section id="transfers" className="section-pad" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <AnimatedSection>
          <SectionHeader tag="Transfers & Transportation" title="Safe, On-Time, Every Time"
            subtitle="Licensed vehicles with GPS tracking, flight-monitoring tech, and uniformed bilingual drivers. Your ride is confirmed the moment you book." />
        </AnimatedSection>
        <div className="transfers-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 20, marginBottom: 56 }}>
          {TRANSFERS.map((t, i) => (
            <AnimatedSection key={t.name} delay={i * 0.07} style={{ height: '100%' }}>
              <Card style={{ padding: 24, borderRadius: radius, textAlign: 'center', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }} onClick={() => onBook({ name: t.name, price: 0, isTransfer: true })}>
                <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'var(--primary-glow)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 14px', color: 'var(--primary)' }}>
                  {t.icon}
                </div>
                <h4 style={{ fontSize: 15, fontWeight: 700, marginBottom: 4 }}>{t.name}</h4>
                <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 6 }}>{t.desc}</p>
                {t.time && <p style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 10 }}>{t.time}</p>}
                <span style={{ fontSize: 18, fontWeight: 800, color: 'var(--accent)', fontFamily: 'var(--font-display)', marginTop: 'auto' }}>
                  {t.priceLabel} {formatPrice(t.price, currency)}{t.unit || ''}
                </span>
              </Card>
            </AnimatedSection>
          ))}
        </div>
        {/* Vehicle Fleet */}
        <AnimatedSection>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, textAlign: 'center', marginBottom: 28 }}>Our Fleet</h3>
        </AnimatedSection>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 20 }}>
          {VEHICLES.map((v, i) => (
            <AnimatedSection key={v.name} delay={i * 0.1}>
              <div style={{ borderRadius: radius, overflow: 'hidden', background: `url(${v.img}) center/cover no-repeat, ${v.gradient}`, padding: '32px 24px', color: '#fff', textAlign: 'center', position: 'relative', minHeight: 180 }}>
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 100%)', borderRadius: radius }}></div>
                <div style={{ position: 'relative', zIndex: 1 }}>
                <div style={{ fontSize: 48, marginBottom: 8 }}>{Icons.car}</div>
                <h4 style={{ fontSize: 22, fontWeight: 800, marginBottom: 4 }}>{v.name}</h4>
                <p style={{ fontSize: 15, opacity: 0.85, marginBottom: 4 }}>{v.capacity}</p>
                <p style={{ fontSize: 13, opacity: 0.7 }}>{v.desc}</p>
                </div>
              </div>
            </AnimatedSection>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Special Offer ── */
function SpecialOffer({ onBook }) {
  return (
    <section style={{ background: 'var(--offer-bg)', color: 'var(--offer-text)', padding: '56px 24px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.07, backgroundImage: 'repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,1) 20px, rgba(255,255,255,1) 22px)' }}></div>
      <div className="container" style={{ position: 'relative' }}>
        <AnimatedSection>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(255,255,255,0.2)', borderRadius: 100, padding: '6px 16px', marginBottom: 16, fontSize: 14, fontWeight: 600, fontFamily: 'var(--font-display)' }}>
            {Icons.tag} Book Direct & Save
          </div>
          <h2 style={{ fontSize: 'clamp(26px, 4vw, 40px)', fontWeight: 800, marginBottom: 12, fontFamily: 'var(--font-display)' }}>Skip the OTA Markup — Save 15%</h2>
          <p style={{ fontSize: 17, opacity: 0.9, marginBottom: 8, maxWidth: 560, margin: '0 auto 24px' }}>OTAs like Viator charge us 20–30% commission. Book direct and we pass the savings to you. Use code <span style={{ fontWeight: 800, background: 'rgba(255,255,255,0.2)', padding: '2px 10px', borderRadius: 6, fontFamily: 'var(--font-display)', letterSpacing: '0.05em' }}>DOMINISUN</span></p>
          <Btn variant="white" size="lg" onClick={onBook} icon={Icons.calendar}>Book Direct & Save</Btn>
        </AnimatedSection>
      </div>
    </section>
  );
}

/* ── Why Choose Us ── */
function WhyChooseUs() {
  return (
    <section className="section-pad" style={{ background: 'var(--bg-alt)' }}>
      <div className="container">
        <AnimatedSection>
          <SectionHeader tag="Why Travelers Trust Us" title="Built for Peace of Mind"
            subtitle="94% of tourists rate Dominican Republic services positively. We aim for 100%." />
        </AnimatedSection>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 24 }}>
          {USPS.map((u, i) => (
            <AnimatedSection key={u.title} delay={i * 0.07}>
              <div style={{ textAlign: 'center', padding: '24px 12px' }}>
                <div style={{ width: 56, height: 56, borderRadius: 16, background: 'var(--primary-glow)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 14px', color: 'var(--primary)' }}>{u.icon}</div>
                <h4 style={{ fontSize: 15, fontWeight: 700, marginBottom: 6, fontFamily: 'var(--font-display)' }}>{u.title}</h4>
                <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.5 }}>{u.desc}</p>
              </div>
            </AnimatedSection>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Partners ── */
function PartnersSection() {
  return (
    <section className="section-pad" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <AnimatedSection>
          <SectionHeader tag="Also Available On" title="Find Us on Your Favorite Platform"
            subtitle="We're listed on the top travel platforms — but booking direct always gets you the best price." />
        </AnimatedSection>
        <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 24 }}>
          {PARTNERS.map((p, i) => (
            <AnimatedSection key={p.name} delay={i * 0.1}>
              <div style={{
                padding: '20px 36px', borderRadius: 'var(--radius-sm)', background: 'var(--surface)',
                boxShadow: 'var(--card-shadow)', display: 'flex', alignItems: 'center', gap: 12,
                minWidth: 200, justifyContent: 'center',
              }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: p.color }}></div>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 700, color: 'var(--text)' }}>{p.name}</span>
              </div>
            </AnimatedSection>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Testimonials ── */
function TestimonialsSection() {
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const timer = setInterval(() => setActive(a => (a + 1) % TESTIMONIALS.length), 5000);
    return () => clearInterval(timer);
  }, []);
  return (
    <section className="section-pad" style={{ background: 'var(--bg-alt)' }}>
      <div className="container">
        <AnimatedSection>
          <SectionHeader tag="Real Reviews" title="What US & Canadian Travelers Say" />
        </AnimatedSection>
        <div style={{ maxWidth: 700, margin: '0 auto' }}>
          <AnimatedSection>
            <Card style={{ padding: '40px 32px', textAlign: 'center', minHeight: 220, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
              <Stars rating={TESTIMONIALS[active].rating} size={20} />
              <p style={{ fontSize: 18, lineHeight: 1.65, margin: '20px 0', color: 'var(--text)', fontStyle: 'italic', textWrap: 'pretty' }}>"{TESTIMONIALS[active].text}"</p>
              <p style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--primary)' }}>{TESTIMONIALS[active].name}</p>
              <p style={{ fontSize: 13, color: 'var(--text-muted)' }}>{TESTIMONIALS[active].from}</p>
            </Card>
            <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 20 }}>
              {TESTIMONIALS.map((_, i) => (
                <button key={i} onClick={() => setActive(i)} style={{
                  width: i === active ? 28 : 10, height: 10, borderRadius: 5,
                  background: i === active ? 'var(--primary)' : 'var(--text-muted)',
                  border: 'none', cursor: 'pointer', transition: 'all 0.3s ease', opacity: i === active ? 1 : 0.4,
                }}></button>
              ))}
            </div>
          </AnimatedSection>
        </div>
      </div>
    </section>
  );
}

/* ── Gallery ── */
function GallerySection() {
  return (
    <section className="section-pad" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <AnimatedSection>
          <SectionHeader tag="Gallery" title="Moments from Punta Cana"
            subtitle="A glimpse of the adventures waiting for you." />
        </AnimatedSection>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: 'repeat(2, 200px)', gap: 16 }}>
          {GALLERY_ITEMS.map((item, i) => (
            <AnimatedSection key={item.label} delay={i * 0.06}>
              <div style={{
                borderRadius: 'var(--radius-sm)', background: `url(${item.img}) center/cover no-repeat, ${item.gradient}`, height: '100%',
                display: 'flex', alignItems: 'flex-end', padding: 16, position: 'relative', overflow: 'hidden',
              }}>
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.45), transparent 60%)' }}></div>
                <span style={{ position: 'relative', color: '#fff', fontSize: 14, fontWeight: 600, fontFamily: 'var(--font-display)' }}>{item.label}</span>
              </div>
            </AnimatedSection>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── FAQ ── */
function FAQSection() {
  const [openIdx, setOpenIdx] = React.useState(null);
  return (
    <section id="faq" className="section-pad" style={{ background: 'var(--bg-alt)' }}>
      <div className="container" style={{ maxWidth: 760 }}>
        <AnimatedSection>
          <SectionHeader tag="FAQ" title="Questions US & Canadian Travelers Ask" />
        </AnimatedSection>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {FAQS.map((faq, i) => (
            <AnimatedSection key={i} delay={i * 0.05}>
              <div style={{
                background: 'var(--surface)', borderRadius: 'var(--radius-sm)',
                boxShadow: openIdx === i ? 'var(--card-shadow-hover)' : 'var(--card-shadow)',
                overflow: 'hidden', transition: 'all 0.3s ease',
              }}>
                <button onClick={() => setOpenIdx(openIdx === i ? null : i)} style={{
                  width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '18px 20px', background: 'none', border: 'none', cursor: 'pointer',
                  fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, color: 'var(--text)', textAlign: 'left', gap: 12,
                }}>
                  {faq.q}
                  <span style={{ transform: openIdx === i ? 'rotate(180deg)' : 'none', transition: 'transform 0.3s ease', color: 'var(--primary)', flexShrink: 0 }}>{Icons.chevDown}</span>
                </button>
                <div style={{ maxHeight: openIdx === i ? 300 : 0, overflow: 'hidden', transition: 'max-height 0.35s ease' }}>
                  <p style={{ padding: '0 20px 18px', fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.65 }}>{faq.a}</p>
                </div>
              </div>
            </AnimatedSection>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Destinations ── */
function DestinationsSection() {
  return (
    <section className="section-pad" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <AnimatedSection>
          <SectionHeader tag="Transfer Times" title="How Far Is Everything?"
            subtitle="Drive times from PUJ Airport to popular destinations. All transfers include meet & greet." />
        </AnimatedSection>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(170px, 1fr))', gap: 16 }}>
          {DESTINATIONS.map((d, i) => (
            <AnimatedSection key={d.name} delay={i * 0.07}>
              <Card style={{ padding: '20px 16px', textAlign: 'center' }}>
                <div style={{ color: 'var(--primary)', marginBottom: 10, display: 'flex', justifyContent: 'center' }}>{d.icon}</div>
                <h4 style={{ fontSize: 14, fontWeight: 700, marginBottom: 4, fontFamily: 'var(--font-display)' }}>{d.name}</h4>
                <p style={{ fontSize: 20, fontWeight: 800, color: 'var(--accent)', fontFamily: 'var(--font-display)' }}>{d.time}</p>
              </Card>
            </AnimatedSection>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Stats Bar ── */
function StatsBar() {
  const stats = [
    { value: '62%', label: 'of DR tourists are from US & Canada' },
    { value: '24/7', label: 'Support via WhatsApp' },
    { value: '0', label: 'Forced gift-shop stops' },
    { value: 'Free', label: 'Cancellation (24h)' },
  ];
  return (
    <section style={{ background: 'var(--primary-dark)', padding: '36px 24px' }}>
      <div className="container" style={{ display: 'flex', justifyContent: 'space-around', flexWrap: 'wrap', gap: '20px 40px' }}>
        {stats.map((s, i) => (
          <div key={i} style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 'clamp(26px, 3.5vw, 36px)', fontWeight: 800, color: '#fff', fontFamily: 'var(--font-display)' }}>{s.value}</div>
            <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', fontFamily: 'var(--font-display)', fontWeight: 500, marginTop: 2 }}>{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, {
  TOURS, TRANSFERS, VEHICLES, USPS, TESTIMONIALS, FAQS, DESTINATIONS, PARTNERS,
  PAIN_POINTS, GALLERY_ITEMS,
  TourCard, ToursSection, TransfersSection, SpecialOffer, WhyChooseUs,
  PartnersSection, TestimonialsSection, GallerySection, FAQSection,
  DestinationsSection, StatsBar, DominiTripDifference,
});
