/* ── DominiTrip App Shell ── */

const { useState, useEffect, useRef, useCallback } = React;

/* ── Navbar ── */
function Navbar({ onBook, scrolled, currency, onCurrencyChange }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const links = [
    { label: 'Tours', href: '#tours' },
    { label: 'Transfers', href: '#transfers' },
    { label: 'FAQ', href: '#faq' },
    { label: 'Contact', href: '#footer' },
  ];
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? 'var(--nav-bg)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px)' : 'none',
      boxShadow: scrolled ? '0 2px 24px rgba(0,0,0,0.08)' : 'none',
      transition: 'all 0.35s ease', padding: scrolled ? '10px 24px' : '16px 24px',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src="logo.png" alt="DominiTrip" style={{ height: 38, borderRadius: 6, objectFit: 'contain' }} />
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 800, color: scrolled ? 'var(--nav-text)' : '#fff' }}>DominiTrip</span>
        </div>
        {/* Desktop Links */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }} className="desktop-nav">
          {links.map(l => (
            <a key={l.label} href={l.href} style={{
              textDecoration: 'none', fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600,
              color: scrolled ? 'var(--text-secondary)' : 'rgba(255,255,255,0.85)',
              transition: 'color 0.2s',
            }}>{l.label}</a>
          ))}
          <CurrencyToggle currency={currency} onChange={onCurrencyChange} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: scrolled ? 'var(--primary)' : '#fff', fontSize: 14, fontWeight: 600, fontFamily: 'var(--font-display)' }}>
            {Icons.phone}
            <span>+1 (809) 555-0123</span>
          </div>
          <Btn variant={scrolled ? 'primary' : 'white'} size="sm" onClick={onBook} icon={Icons.calendar}>Book Now</Btn>
        </div>
        {/* Mobile menu toggle */}
        <button onClick={() => setMenuOpen(!menuOpen)} style={{
          display: 'none', background: 'none', border: 'none', color: scrolled ? 'var(--text)' : '#fff', cursor: 'pointer',
        }} className="mobile-toggle">{menuOpen ? Icons.close : Icons.menu}</button>
      </div>
      {/* Mobile dropdown */}
      {menuOpen && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0, background: 'var(--surface)',
          padding: 24, display: 'flex', flexDirection: 'column', gap: 16, boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
        }}>
          {links.map(l => (
            <a key={l.label} href={l.href} onClick={() => setMenuOpen(false)} style={{
              textDecoration: 'none', fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, color: 'var(--text)',
            }}>{l.label}</a>
          ))}
          <Btn variant="primary" full onClick={() => { setMenuOpen(false); onBook(); }} icon={Icons.calendar}>Book Now</Btn>
        </div>
      )}
      <style>{`
        @media(max-width:768px){
          .desktop-nav{display:none !important}
          .mobile-toggle{display:block !important}
        }
      `}</style>
    </nav>
  );
}

/* ── Hero ── */
function Hero({ onBook, onExploreTours, heroStyle }) {
  return (
    <section style={{
      position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center',
      overflow: 'hidden',
    }}>
      {/* Hero background image + gradient overlay */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 0,
        backgroundImage: 'url(https://images.unsplash.com/photo-1519046904884-53103b34b206?auto=format&fit=crop&w=1920&q=80)',
        backgroundSize: 'cover', backgroundPosition: 'center',
      }}></div>
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: heroStyle === 'gradient'
          ? 'linear-gradient(135deg, rgba(14,116,144,0.85), rgba(8,145,178,0.8), rgba(34,211,238,0.75))'
          : heroStyle === 'split'
            ? 'rgba(14,116,144,0.88)'
            : 'linear-gradient(180deg, rgba(14,116,144,0.85), rgba(34,211,238,0.8))',
      }}></div>
      {/* Decorative waves */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, opacity: 0.12 }}>
        <svg viewBox="0 0 1440 320" style={{ display: 'block', width: '200%', animation: 'waveMove 25s linear infinite' }}>
          <path d="M0,160 C240,220 480,100 720,160 C960,220 1200,100 1440,160 C1680,220 1920,100 2160,160 C2400,220 2640,100 2880,160 L2880,320 L0,320 Z" fill="rgba(255,255,255,0.4)" />
          <path d="M0,200 C360,260 720,140 1080,200 C1440,260 1800,140 2160,200 C2520,260 2880,140 2880,200 L2880,320 L0,320 Z" fill="rgba(255,255,255,0.25)" />
        </svg>
      </div>
      {/* Floating circles */}
      <div style={{ position: 'absolute', top: '15%', right: '10%', width: 200, height: 200, borderRadius: '50%', background: 'rgba(255,255,255,0.06)', animation: 'float 6s ease-in-out infinite' }}></div>
      <div style={{ position: 'absolute', bottom: '20%', left: '5%', width: 120, height: 120, borderRadius: '50%', background: 'rgba(255,255,255,0.05)', animation: 'float 8s ease-in-out infinite 1s' }}></div>

      <div className="container" style={{
        position: 'relative', zIndex: 2, padding: '120px 24px 80px',
        display: heroStyle === 'split' ? 'grid' : 'block',
        gridTemplateColumns: heroStyle === 'split' ? '1fr 1fr' : undefined,
        gap: 40, alignItems: 'center', textAlign: heroStyle === 'split' ? 'left' : 'center',
      }}>
        <div style={{ maxWidth: heroStyle === 'split' ? '100%' : 720, margin: heroStyle === 'split' ? 0 : '0 auto' }}>
          <div style={{
            display: 'inline-block', background: 'rgba(255,255,255,0.15)', backdropFilter: 'blur(8px)',
            borderRadius: 100, padding: '8px 20px', marginBottom: 24,
            fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600, color: '#fff',
          }}>
            Licensed & Insured · MITUR Registered · Free Cancellation
          </div>
          <h1 style={{
            fontSize: 'clamp(36px, 6vw, 64px)', fontWeight: 800, color: '#fff', marginBottom: 20,
            lineHeight: 1.08, textWrap: 'balance',
          }}>
            Skip the Tourist Traps.
            <br />See the Real Punta Cana.
          </h1>
          <p style={{
            fontSize: 'clamp(16px, 2vw, 20px)', color: 'rgba(255,255,255,0.85)', marginBottom: 36,
            lineHeight: 1.6, maxWidth: heroStyle === 'split' ? '100%' : 560,
            margin: heroStyle === 'split' ? '0 0 36px' : '0 auto 36px',
          }}>
            No forced gift shops. No unmarked cars. No surprise fees. Just licensed transfers, curated tours, and bilingual drivers — trusted by US & Canadian travelers.
          </p>
          <div style={{ display: 'flex', gap: 14, justifyContent: heroStyle === 'split' ? 'flex-start' : 'center', flexWrap: 'wrap' }}>
            <Btn variant="white" size="lg" onClick={onBook} icon={Icons.calendar}>Book a Transfer</Btn>
            <Btn variant="accent" size="lg" onClick={onExploreTours} icon={Icons.arrowRight}>Explore Tours</Btn>
          </div>
        </div>
        {heroStyle === 'split' && (
          <div style={{
            borderRadius: 'var(--radius-lg)', background: 'linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05))',
            backdropFilter: 'blur(12px)', border: '1px solid rgba(255,255,255,0.15)',
            padding: 32, display: 'flex', flexDirection: 'column', gap: 16,
          }}>
            <h3 style={{ color: '#fff', fontSize: 20, fontWeight: 700, fontFamily: 'var(--font-display)', marginBottom: 4 }}>Quick Book</h3>
            {['Airport Pickup', 'Hotel Transfer', 'Tour Excursion'].map(s => (
              <button key={s} onClick={onBook} style={{
                background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.2)',
                borderRadius: 'var(--radius-sm)', padding: '14px 18px', color: '#fff',
                fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600,
                cursor: 'pointer', textAlign: 'left', transition: 'all 0.2s',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              }}
                onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.2)'}
                onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.12)'}
              >
                {s} {Icons.arrowRight}
              </button>
            ))}
          </div>
        )}
      </div>
      <WaveDivider color="var(--bg)" style={{ position: 'absolute', bottom: -2, left: 0, right: 0 }} />
    </section>
  );
}

/* ── Booking Modal ── */
function BookingModal({ open, onClose, preselected }) {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({ type: 'tour', tour: '', pickup: '', dropoff: '', date: '', guests: 2, name: '', phone: '', promo: '' });

  useEffect(() => {
    if (preselected) {
      if (preselected.isTransfer) {
        setForm(f => ({ ...f, type: 'transfer', pickup: preselected.name }));
      } else {
        setForm(f => ({ ...f, type: 'tour', tour: preselected.name }));
      }
    }
  }, [preselected]);

  useEffect(() => { if (open) setStep(1); }, [open]);

  if (!open) return null;
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const fieldStyle = {
    width: '100%', padding: '12px 16px', borderRadius: 'var(--radius-sm)',
    border: '2px solid var(--text-muted)', fontFamily: 'var(--font-body)', fontSize: 15,
    background: 'var(--surface)', color: 'var(--text)', outline: 'none', transition: 'border-color 0.2s',
  };
  const labelStyle = { fontSize: 13, fontWeight: 600, fontFamily: 'var(--font-display)', color: 'var(--text)', marginBottom: 6, display: 'block' };

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)', animation: 'fadeIn 0.25s ease',
    }} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div style={{
        background: 'var(--surface)', borderRadius: 'var(--radius-lg)', padding: '32px 28px',
        width: '90%', maxWidth: 480, maxHeight: '90vh', overflow: 'auto',
        animation: 'scaleIn 0.3s cubic-bezier(0.22,1,0.36,1)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 800 }}>
            {step === 1 ? 'What do you need?' : step === 2 ? 'Trip Details' : step === 3 ? 'Your Info' : 'Confirmed!'}
          </h3>
          <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)' }}>{Icons.close}</button>
        </div>

        {/* Progress */}
        <div style={{ display: 'flex', gap: 6, marginBottom: 28 }}>
          {[1, 2, 3].map(s => (
            <div key={s} style={{ flex: 1, height: 4, borderRadius: 2, background: s <= step ? 'var(--primary)' : 'var(--text-muted)', opacity: s <= step ? 1 : 0.25, transition: 'all 0.3s' }}></div>
          ))}
        </div>

        {step === 1 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {['tour', 'transfer'].map(t => (
                <button key={t} onClick={() => set('type', t)} style={{
                  padding: '20px 16px', borderRadius: 'var(--radius-sm)', cursor: 'pointer', textAlign: 'center',
                  border: form.type === t ? '2px solid var(--primary)' : '2px solid var(--text-muted)',
                  background: form.type === t ? 'var(--primary-glow)' : 'var(--surface)',
                  fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--text)',
                  transition: 'all 0.2s',
                }}>
                  <div style={{ marginBottom: 8, display: 'flex', justifyContent: 'center', color: 'var(--primary)' }}>
                    {t === 'tour' ? Icons.mapPin : Icons.van}
                  </div>
                  {t === 'tour' ? 'Book a Tour' : 'Book a Transfer'}
                </button>
              ))}
            </div>
            {form.type === 'tour' && (
              <div>
                <label style={labelStyle}>Select Tour</label>
                <select value={form.tour} onChange={e => set('tour', e.target.value)} style={fieldStyle}>
                  <option value="">Choose a tour...</option>
                  {TOURS.map(t => <option key={t.id} value={t.name}>{t.name} — ${t.price}</option>)}
                </select>
              </div>
            )}
            <Btn variant="primary" full size="lg" onClick={() => setStep(2)} icon={Icons.arrowRight}>Continue</Btn>
          </div>
        )}

        {step === 2 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {form.type === 'transfer' && (
              <>
                <div>
                  <label style={labelStyle}>Pickup Location</label>
                  <input placeholder="e.g. PUJ Airport, Hotel name..." value={form.pickup} onChange={e => set('pickup', e.target.value)} style={fieldStyle} />
                </div>
                <div>
                  <label style={labelStyle}>Dropoff Location</label>
                  <input placeholder="e.g. Bávaro resort, Hotel name..." value={form.dropoff} onChange={e => set('dropoff', e.target.value)} style={fieldStyle} />
                </div>
              </>
            )}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div>
                <label style={labelStyle}>Date</label>
                <input type="date" value={form.date} onChange={e => set('date', e.target.value)} style={fieldStyle} />
              </div>
              <div>
                <label style={labelStyle}>Guests</label>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <button onClick={() => set('guests', Math.max(1, form.guests - 1))} style={{ width: 40, height: 40, borderRadius: 8, border: '2px solid var(--text-muted)', background: 'var(--surface)', cursor: 'pointer', fontSize: 20, fontWeight: 700, color: 'var(--text)' }}>−</button>
                  <span style={{ fontSize: 20, fontWeight: 700, fontFamily: 'var(--font-display)', minWidth: 30, textAlign: 'center' }}>{form.guests}</span>
                  <button onClick={() => set('guests', Math.min(15, form.guests + 1))} style={{ width: 40, height: 40, borderRadius: 8, border: '2px solid var(--text-muted)', background: 'var(--surface)', cursor: 'pointer', fontSize: 20, fontWeight: 700, color: 'var(--text)' }}>+</button>
                </div>
              </div>
            </div>
            <div>
              <label style={labelStyle}>Promo Code</label>
              <input placeholder="e.g. DOMINISUN" value={form.promo} onChange={e => set('promo', e.target.value)} style={fieldStyle} />
              <p style={{ fontSize: 12, color: 'var(--accent-dark)', marginTop: 4, fontWeight: 600 }}>Use DOMINISUN for 15% off!</p>
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <Btn variant="ghost" onClick={() => setStep(1)}>Back</Btn>
              <Btn variant="primary" full size="lg" onClick={() => setStep(3)} icon={Icons.arrowRight}>Continue</Btn>
            </div>
          </div>
        )}

        {step === 3 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div>
              <label style={labelStyle}>Full Name</label>
              <input placeholder="Your name" value={form.name} onChange={e => set('name', e.target.value)} style={fieldStyle} />
            </div>
            <div>
              <label style={labelStyle}>Phone / WhatsApp</label>
              <input placeholder="+1 234 567 8900" value={form.phone} onChange={e => set('phone', e.target.value)} style={fieldStyle} />
            </div>
            <div style={{ background: 'var(--primary-glow)', borderRadius: 'var(--radius-sm)', padding: 16, fontSize: 14 }}>
              <strong style={{ fontFamily: 'var(--font-display)', color: 'var(--primary)' }}>Summary</strong>
              <p style={{ marginTop: 8, color: 'var(--text-secondary)' }}>
                {form.type === 'tour' ? form.tour || 'Tour' : `Transfer: ${form.pickup || '...'} → ${form.dropoff || '...'}`}
                <br />Date: {form.date || 'Not set'} • {form.guests} guest{form.guests > 1 ? 's' : ''}
                {form.promo && <><br />Promo: <strong>{form.promo}</strong></>}
              </p>
            </div>
            <Btn variant="primary" full size="lg" onClick={() => setStep(4)} icon={Icons.check}>Confirm Booking</Btn>
            <Btn variant="whatsapp" full size="md" onClick={() => window.open(`https://wa.me/18095550123?text=${encodeURIComponent(`Hi DominiTrip! I'd like to book: ${form.type === 'tour' ? form.tour : 'Transfer'} on ${form.date} for ${form.guests} guests.`)}`, '_blank')} icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492l4.632-1.467A11.934 11.934 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-2.168 0-4.19-.6-5.923-1.638l-.425-.247-2.746.87.893-2.657-.28-.44A9.777 9.777 0 012.182 12c0-5.422 4.396-9.818 9.818-9.818S21.818 6.578 21.818 12s-4.396 9.818-9.818 9.818z"/></svg>}>
              Or Contact via WhatsApp
            </Btn>
            <div style={{ display: 'flex', gap: 10 }}>
              <Btn variant="ghost" onClick={() => setStep(2)}>Back</Btn>
            </div>
          </div>
        )}

        {step === 4 && (
          <div style={{ textAlign: 'center', padding: '20px 0' }}>
            <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'var(--green-light)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px', color: 'var(--green)' }}>
              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg>
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 800, marginBottom: 8, color: 'var(--green)' }}>Booking Confirmed!</h3>
            <p style={{ color: 'var(--text-secondary)', marginBottom: 24 }}>We'll send you a confirmation via WhatsApp shortly. See you in Punta Cana!</p>
            <Btn variant="primary" onClick={onClose}>Done</Btn>
          </div>
        )}
      </div>
    </div>
  );
}

/* ── WhatsApp Float ── */
function WhatsAppFloat() {
  const [show, setShow] = useState(false);
  useEffect(() => { setTimeout(() => setShow(true), 2000); }, []);
  if (!show) return null;
  return (
    <a href="https://wa.me/18095550123?text=Hi%20DominiTrip!%20I%27d%20like%20to%20book%20a%20tour%20or%20transfer." target="_blank" rel="noopener"
      style={{
        position: 'fixed', bottom: 24, right: 24, zIndex: 90, width: 60, height: 60,
        borderRadius: '50%', background: '#25D366', display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 4px 20px rgba(37,211,102,0.4)', animation: 'pulse 2s infinite', cursor: 'pointer',
        textDecoration: 'none',
      }}>
      <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492l4.632-1.467A11.934 11.934 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-2.168 0-4.19-.6-5.923-1.638l-.425-.247-2.746.87.893-2.657-.28-.44A9.777 9.777 0 012.182 12c0-5.422 4.396-9.818 9.818-9.818S21.818 6.578 21.818 12s-4.396 9.818-9.818 9.818z"/></svg>
    </a>
  );
}

/* ── Footer ── */
function Footer() {
  return (
    <footer id="footer" style={{ background: 'var(--footer-bg)', color: 'var(--footer-text)', padding: '56px 24px 32px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 40, marginBottom: 40 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <img src="logo.png" alt="DominiTrip" style={{ height: 36, borderRadius: 6, background: '#fff', padding: 2 }} />
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 800, color: '#fff' }}>DominiTrip</span>
            </div>
            <p style={{ fontSize: 14, opacity: 0.7, lineHeight: 1.6 }}>Your trusted partner for tours, transfers, and unforgettable experiences in Punta Cana, Dominican Republic.</p>
          </div>
          <div>
            <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 700, color: '#fff', marginBottom: 16, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Services</h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['Island Tours', 'Adventure Excursions', 'Airport Transfers', 'Hotel Transfers', 'Private Transport'].map(s => (
                <a key={s} href="#tours" style={{ color: 'inherit', textDecoration: 'none', fontSize: 14, opacity: 0.7, transition: 'opacity 0.2s' }}
                  onMouseEnter={e => e.target.style.opacity = 1} onMouseLeave={e => e.target.style.opacity = 0.7}>{s}</a>
              ))}
            </div>
          </div>
          <div>
            <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 700, color: '#fff', marginBottom: 16, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Contact</h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14, opacity: 0.7 }}>
              <span>📞 +1 (809) 555-0123</span>
              <span>💬 WhatsApp Available 24/7</span>
              <span>📧 hello@dominitrip.com</span>
              <span>📍 Punta Cana, Dominican Republic</span>
            </div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12, fontSize: 13, opacity: 0.5 }}>
          <span>© 2026 DominiTrip. All rights reserved.</span>
          <span>Made with ☀️ in Punta Cana</span>
        </div>
      </div>
    </footer>
  );
}

/* ── Final CTA ── */
function FinalCTA({ onBook }) {
  return (
    <section style={{
      background: 'linear-gradient(135deg, var(--hero-from), var(--hero-to))',
      padding: '72px 24px', textAlign: 'center', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.08 }}>
        <svg viewBox="0 0 1440 320" style={{ display: 'block', width: '200%', animation: 'waveMove 20s linear infinite' }}>
          <path d="M0,128 C480,200 960,60 1440,128 C1920,200 2400,60 2880,128 L2880,320 L0,320 Z" fill="rgba(255,255,255,0.4)" />
        </svg>
      </div>
      <div className="container" style={{ position: 'relative' }}>
        <AnimatedSection>
          <h2 style={{ fontSize: 'clamp(26px, 4.5vw, 44px)', fontWeight: 800, color: '#fff', fontFamily: 'var(--font-display)', marginBottom: 14 }}>Ready to Book with Confidence?</h2>
          <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.8)', marginBottom: 32, maxWidth: 500, margin: '0 auto 32px' }}>Licensed, insured, transparent — book direct and save vs. OTA prices.</p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Btn variant="white" size="lg" onClick={onBook} icon={Icons.calendar}>Book Now</Btn>
            <Btn variant="accent" size="lg" onClick={() => window.open('https://wa.me/18095550123', '_blank')}>WhatsApp Us</Btn>
          </div>
        </AnimatedSection>
      </div>
    </section>
  );
}

/* ── Main App ── */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = useState(false);
  const [bookingOpen, setBookingOpen] = useState(false);
  const [preselected, setPreselected] = useState(null);
  const [currency, setCurrency] = useState('USD');

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
  }, [t.theme]);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const openBooking = useCallback((item) => {
    setPreselected(item || null);
    setBookingOpen(true);
  }, []);

  const scrollToTours = useCallback(() => {
    document.getElementById('tours')?.scrollTo?.({ behavior: 'smooth' });
    const el = document.getElementById('tours');
    if (el) el.style.scrollMarginTop = '80px';
    el?.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
  }, []);

  return (
    <>
      <Navbar onBook={() => openBooking()} scrolled={scrolled} currency={currency} onCurrencyChange={setCurrency} />
      <Hero onBook={() => openBooking()} onExploreTours={scrollToTours} heroStyle={t.heroStyle} />
      <StatsBar />
      <DominiTripDifference />
      <ToursSection onBook={openBooking} cardStyle={t.cardStyle} currency={currency} />
      <WaveDivider color="var(--bg)" />
      <TransfersSection onBook={openBooking} cardStyle={t.cardStyle} currency={currency} />
      <SpecialOffer onBook={() => openBooking()} />
      <WhyChooseUs />
      <WaveDivider color="var(--bg)" />
      <PartnersSection />
      <TestimonialsSection />
      <GallerySection />
      <DestinationsSection />
      <FAQSection />
      <FinalCTA onBook={() => openBooking()} />
      <Footer />
      <WhatsAppFloat />
      <BookingModal open={bookingOpen} onClose={() => setBookingOpen(false)} preselected={preselected} />

      <TweaksPanel title="DominiTrip Tweaks">
        <TweakSection label="Theme">
          <TweakRadio label="Color Theme" value={t.theme} options={[
            { value: 'ocean', label: 'Ocean Breeze' },
            { value: 'sunset', label: 'Tropical Sunset' },
            { value: 'night', label: 'Island Night' },
          ]} onChange={v => setTweak('theme', v)} />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakRadio label="Hero Style" value={t.heroStyle} options={[
            { value: 'gradient', label: 'Gradient' },
            { value: 'split', label: 'Split' },
            { value: 'minimal', label: 'Minimal' },
          ]} onChange={v => setTweak('heroStyle', v)} />
          <TweakRadio label="Card Corners" value={t.cardStyle} options={[
            { value: 'rounded', label: 'Rounded' },
            { value: 'sharp', label: 'Sharp' },
          ]} onChange={v => setTweak('cardStyle', v)} />
        </TweakSection>
        <TweakSection label="Currency">
          <TweakRadio label="Display Prices In" value={currency} options={[
            { value: 'USD', label: 'USD ($)' },
            { value: 'CAD', label: 'CAD (C$)' },
          ]} onChange={v => setCurrency(v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

/* ── Mount ── */
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
