// Image URLs — Unsplash hotlinked
const IMAGES = {
  hero: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=2400&q=80',
  heroAlt: 'https://images.unsplash.com/photo-1519046904884-53103b34b206?w=2400&q=80',
  sunset: 'https://images.unsplash.com/photo-1495954484750-af469f2f9be5?w=1600&q=80',
  cove: 'https://images.unsplash.com/photo-1515150144380-bca9f1650ed9?w=1600&q=80',
  fullday: 'https://images.unsplash.com/photo-1540541338287-41700207dee6?w=1600&q=80',
  private: 'https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1600&q=80',
  boat: 'https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1600&q=80',
  about: 'https://images.unsplash.com/photo-1527431293370-0cd188ca5d15?w=1200&q=80',

  // Gallery
  g1: 'https://images.unsplash.com/photo-1519046904884-53103b34b206?w=1200&q=80',
  g2: 'https://images.unsplash.com/photo-1493558103817-58b2924bce98?w=1200&q=80',
  g3: 'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=80',
  g4: 'https://images.unsplash.com/photo-1502209524164-acea936639a2?w=1200&q=80',
  g5: 'https://images.unsplash.com/photo-1444840535719-195841cb6e2b?w=1200&q=80',
  g6: 'https://images.unsplash.com/photo-1530541930197-ff16ac917b0e?w=1200&q=80',
  g7: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=1200&q=80',
  g8: 'https://images.unsplash.com/photo-1527599662143-9081a14b40c2?w=1200&q=80',
  g9: 'https://images.unsplash.com/photo-1502680390469-be75c86b636f?w=1200&q=80',
  g10: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1200&q=80',
  g11: 'https://images.unsplash.com/photo-1505881502353-a1986add3762?w=1200&q=80',
  g12: 'https://images.unsplash.com/photo-1565017228812-2b3a3c10c2c6?w=1200&q=80',
};

window.IMAGES = IMAGES;

// ===== HERO =====
function Hero({ openBooking }) {
  const { t } = useI18n();
  return (
    <section className="hero" id="hero">
      <div className="hero-bg">
        <img src={IMAGES.hero} alt="Mediterranean sunset" className="hero-bg-img" />
      </div>
      <div className="container hero-inner">
        <span className="hero-eyebrow">{t.hero.eyebrow}</span>
        <h1 className="hero-title display">
          {t.hero.title1}<br />
          <em>{t.hero.title2}</em>
        </h1>
        <p className="hero-lede">{t.hero.lede}</p>
        <div className="hero-ctas">
          <button className="btn btn-primary btn-lg" onClick={openBooking}>
            {t.hero.ctaBook} <ArrowRight size={18} />
          </button>
          <button className="btn btn-ghost on-dark btn-lg" onClick={() => navigate('cruises')}>
            {t.hero.ctaCruises}
          </button>
        </div>
        <div className="hero-stats">
          {t.hero.stats.map((s, i) => (
            <div key={i} className="hero-stat">
              <div className="n display">{s.n}</div>
              <div className="l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="hero-scroll">
        <span>scroll</span>
        <span className="hero-scroll-line"></span>
      </div>
    </section>
  );
}

// ===== INTRO/ABOUT (short version on home) =====
function IntroSection() {
  const { t } = useI18n();
  return (
    <section className="section intro-section">
      <div className="container">
        <div className="intro-grid">
          <div className="intro-img reveal">
            <img src={IMAGES.about} alt="Aron, Captain Kain Ama" />
          </div>
          <div className="intro-content reveal">
            <span className="eyebrow">{t.intro.eyebrow}</span>
            <h2 className="display intro-title">{t.intro.title}</h2>
            <p className="intro-body">{t.intro.body}</p>
            <div className="intro-sign">{t.intro.sign}</div>
            <button className="btn btn-ghost" style={{ marginTop: 32, alignSelf: 'flex-start' }} onClick={() => navigate('about')}>
              {t.nav.about} <ArrowRight />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== CRUISES =====
function CruisesSection({ openBooking, full = false }) {
  const { t } = useI18n();
  const images = [IMAGES.sunset, IMAGES.cove, IMAGES.fullday, IMAGES.private];
  return (
    <section className="section cruises-section" id="cruises-section">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t.cruises.eyebrow}</span>
          <h2 className="display section-title">{t.cruises.title}</h2>
          <p className="section-sub">{t.cruises.sub}</p>
        </div>
        <div className="cruise-grid">
          {t.cruises.items.map((c, i) => (
            <article key={i} className="cruise-card reveal" style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="cruise-card-media">
                {c.tag && <span className="cruise-tag">{c.tag}</span>}
                <img src={images[i]} alt={c.name} />
              </div>
              <div className="cruise-card-body">
                <div className="cruise-card-head">
                  <h3 className="cruise-name">{c.name}</h3>
                  <div className="cruise-price">
                    <div className="v">{c.price}</div>
                    <span className="u">{c.unit}</span>
                  </div>
                </div>
                <div className="cruise-meta">
                  <span className="cruise-meta-item"><ClockIcon /> {c.duration}</span>
                  <span className="cruise-meta-item">· {c.time}</span>
                </div>
                <p className="cruise-desc">{c.desc}</p>
                <div className="cruise-includes">
                  <span className="cruise-includes-label">{t.cruises.includes}</span>
                  <ul className="cruise-includes-list">
                    {c.includes.map((it, j) => (
                      <li key={j}><CheckIcon /> {it}</li>
                    ))}
                  </ul>
                </div>
                <div className="cruise-card-foot">
                  <button className="btn btn-primary btn-sm" onClick={() => openBooking(i)}>
                    {t.cruises.bookCta}
                  </button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== BOAT (specs) =====
function BoatSection() {
  const { t } = useI18n();
  return (
    <section className="section boat-section">
      <div className="container">
        <div className="boat-grid">
          <div className="boat-img reveal">
            <img src={IMAGES.boat} alt="Beneteau Antares 12" />
          </div>
          <div className="boat-content reveal">
            <span className="eyebrow gold">{t.boat.eyebrow}</span>
            <h2 className="display section-title" style={{ marginTop: 16 }}>{t.boat.title}</h2>
            <p className="section-sub" style={{ marginTop: 16 }}>{t.boat.body}</p>
            <div className="boat-specs">
              {t.boat.specs.map((s, i) => (
                <div key={i} className="boat-spec">
                  <div className="l">{s.label}</div>
                  <div className="v">{s.value}</div>
                </div>
              ))}
            </div>
            <div className="boat-amenities">
              {t.boat.amenities.map((a, i) => (
                <div key={i} className="boat-amenity">
                  <CheckIcon /> {a}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== GALLERY =====
const GALLERY_DATA = [
  { src: IMAGES.g1, cat: 'sunset', tall: false, wide: true },
  { src: IMAGES.g2, cat: 'coast', tall: true, wide: false },
  { src: IMAGES.g3, cat: 'boat', tall: false, wide: false },
  { src: IMAGES.g4, cat: 'life', tall: false, wide: false },
  { src: IMAGES.g5, cat: 'sunset', tall: true, wide: false },
  { src: IMAGES.g6, cat: 'coast', tall: false, wide: false },
  { src: IMAGES.g7, cat: 'boat', tall: false, wide: true },
  { src: IMAGES.g8, cat: 'life', tall: false, wide: false },
  { src: IMAGES.g9, cat: 'sunset', tall: false, wide: false },
  { src: IMAGES.g10, cat: 'coast', tall: false, wide: false },
  { src: IMAGES.g11, cat: 'boat', tall: false, wide: false },
  { src: IMAGES.g12, cat: 'life', tall: true, wide: false },
];

function GallerySection() {
  const { t } = useI18n();
  const [cat, setCat] = React.useState('all');
  const [lightbox, setLightbox] = React.useState(null);
  const filtered = cat === 'all' ? GALLERY_DATA : GALLERY_DATA.filter(g => g.cat === cat);
  useScrollLock(lightbox !== null);

  React.useEffect(() => {
    if (lightbox === null) return;
    const onKey = (e) => {
      if (e.key === 'Escape') setLightbox(null);
      if (e.key === 'ArrowRight') setLightbox(l => (l + 1) % filtered.length);
      if (e.key === 'ArrowLeft') setLightbox(l => (l - 1 + filtered.length) % filtered.length);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [lightbox, filtered.length]);

  return (
    <section className="section gallery-section">
      <div className="container">
        <div className="section-head center reveal">
          <span className="eyebrow">{t.gallery.eyebrow}</span>
          <h2 className="display section-title">{t.gallery.title}</h2>
          <p className="section-sub">{t.gallery.sub}</p>
        </div>
        <div className="gallery-cats reveal">
          {Object.entries(t.gallery.cats).map(([k, v]) => (
            <button
              key={k}
              className={'gallery-cat ' + (cat === k ? 'active' : '')}
              onClick={() => setCat(k)}
            >{v}</button>
          ))}
        </div>
        <div className="gallery-grid">
          {filtered.map((g, i) => (
            <button
              key={`${cat}-${i}`}
              className={'gallery-item reveal' + (g.tall ? ' tall' : '') + (g.wide ? ' wide' : '')}
              onClick={() => setLightbox(i)}
              style={{ transitionDelay: `${(i % 6) * 50}ms` }}
              aria-label={`Open image ${i + 1}`}
            >
              <img src={g.src} alt="" loading="lazy" />
            </button>
          ))}
        </div>
      </div>

      {lightbox !== null && (
        <div className="lightbox" onClick={() => setLightbox(null)}>
          <button className="lightbox-close" onClick={(e) => { e.stopPropagation(); setLightbox(null); }} aria-label="Close">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M18 6L6 18M6 6l12 12" strokeLinecap="round"/></svg>
          </button>
          <button className="lightbox-nav prev" onClick={(e) => { e.stopPropagation(); setLightbox(l => (l - 1 + filtered.length) % filtered.length); }} aria-label="Previous">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M15 18l-6-6 6-6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <button className="lightbox-nav next" onClick={(e) => { e.stopPropagation(); setLightbox(l => (l + 1) % filtered.length); }} aria-label="Next">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M9 18l6-6-6-6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <div className="lightbox-img-wrap" onClick={(e) => e.stopPropagation()}>
            <img src={filtered[lightbox].src} alt="" />
          </div>
          <div className="lightbox-counter">{lightbox + 1} / {filtered.length}</div>
        </div>
      )}
    </section>
  );
}

// ===== ROUTES =====
const ROUTES_DATA = [
  {
    id: 1,
    titleKey: { ro: 'Apus pe rada Málaga', en: 'Sunset on Málaga bay', es: 'Atardecer en la bahía de Málaga' },
    descKey: {
      ro: 'Plecăm din El Candado, navigăm de-a lungul plajelor La Caleta și Pedregalejo, ancorăm în larg pentru cele mai bune fotografii la apus.',
      en: 'We leave El Candado, sail along La Caleta and Pedregalejo beaches, anchor offshore for the best sunset photos.',
      es: 'Salimos de El Candado, navegamos por La Caleta y Pedregalejo, anclamos en mar abierto para las mejores fotos al atardecer.',
    },
    duration: { ro: '2h', en: '2h', es: '2h' },
    distance: '14 nm',
    coords: [{ x: 35, y: 65 }, { x: 50, y: 60 }, { x: 65, y: 58 }],
  },
  {
    id: 2,
    titleKey: { ro: 'Calele din Calahonda', en: 'Calahonda coves', es: 'Calas de Calahonda' },
    descKey: {
      ro: 'Spre vest, până în Calahonda. Apă cristalină, golfuri liniștite, ideal pentru snorkeling în familie.',
      en: 'Westwards to Calahonda. Crystal water, quiet coves, perfect for family snorkeling.',
      es: 'Hacia el oeste, hasta Calahonda. Agua cristalina, calas tranquilas, perfectas para snorkel familiar.',
    },
    duration: { ro: '4h', en: '4h', es: '4h' },
    distance: '28 nm',
    coords: [{ x: 35, y: 65 }, { x: 25, y: 70 }, { x: 15, y: 75 }],
  },
  {
    id: 3,
    titleKey: { ro: 'Maro & Cerro Gordo', en: 'Maro & Cerro Gordo', es: 'Maro y Cerro Gordo' },
    descKey: {
      ro: 'Spre est, prin Nerja, până la cele mai frumoase faleze din Andalusia. Stâncă albă, peșteri, apă turcoaz.',
      en: 'Eastwards through Nerja to the most beautiful cliffs in Andalusia. White rock, caves, turquoise water.',
      es: 'Hacia el este, por Nerja, hasta los acantilados más bonitos de Andalucía. Roca blanca, cuevas, agua turquesa.',
    },
    duration: { ro: '6–8h', en: '6–8h', es: '6–8h' },
    distance: '52 nm',
    coords: [{ x: 35, y: 65 }, { x: 55, y: 62 }, { x: 75, y: 55 }, { x: 85, y: 50 }],
  },
  {
    id: 4,
    titleKey: { ro: 'Marbella & Puerto Banús', en: 'Marbella & Puerto Banús', es: 'Marbella y Puerto Banús' },
    descKey: {
      ro: 'O zi de glamour pe coastă. Ancorăm aproape de plajele exclusiviste, oprim într-un sat pescăresc pentru prânz.',
      en: 'A day of glamour on the coast. We anchor near the exclusive beaches, stop at a fishing village for lunch.',
      es: 'Un día de glamour en la costa. Anclamos cerca de playas exclusivas, paramos en un pueblo pesquero para comer.',
    },
    duration: { ro: '8h', en: '8h', es: '8h' },
    distance: '64 nm',
    coords: [{ x: 35, y: 65 }, { x: 22, y: 72 }, { x: 8, y: 80 }],
  },
];

function RoutesSection() {
  const { t, lang } = useI18n();
  const [active, setActive] = React.useState(0);
  return (
    <section className="section routes-section">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t.routes.eyebrow}</span>
          <h2 className="display section-title">{t.routes.title}</h2>
          <p className="section-sub">{t.routes.sub}</p>
        </div>
        <div className="routes-layout">
          <div className="routes-list reveal">
            {ROUTES_DATA.map((r, i) => (
              <button
                key={r.id}
                className={'route-item ' + (active === i ? 'active' : '')}
                onClick={() => setActive(i)}
              >
                <div className="route-item-head">
                  <span className="route-num display">0{r.id}</span>
                  <span style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>{r.distance}</span>
                </div>
                <h3 className="route-title">{r.titleKey[lang]}</h3>
                <div className="route-meta">
                  <span><ClockIcon /> {r.duration[lang]}</span>
                  <span>· {r.distance}</span>
                </div>
                <p className="route-desc">{r.descKey[lang]}</p>
              </button>
            ))}
          </div>
          <div className="route-map reveal">
            <RouteMap route={ROUTES_DATA[active]} lang={lang} />
          </div>
        </div>
      </div>
    </section>
  );
}

function RouteMap({ route, lang }) {
  // Stylized SVG map of Málaga coast
  const path = route.coords.map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.x} ${c.y}`).join(' ');
  return (
    <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style={{ background: 'linear-gradient(180deg, #2E5670 0%, #1F3A4D 60%, #142836 100%)' }}>
      {/* Stars */}
      {[...Array(40)].map((_, i) => {
        const x = (i * 37) % 100;
        const y = (i * 19) % 35;
        return <circle key={i} cx={x} cy={y} r={0.15 + (i % 3) * 0.1} fill="#F5EFE6" opacity={0.4 + (i % 3) * 0.2} />;
      })}
      {/* Land */}
      <path d="M 0 50 Q 10 48, 20 52 T 40 56 Q 50 58, 60 56 T 80 52 Q 90 50, 100 48 L 100 0 L 0 0 Z"
            fill="#2A2A28" opacity="0.85" />
      <path d="M 0 50 Q 10 48, 20 52 T 40 56 Q 50 58, 60 56 T 80 52 Q 90 50, 100 48"
            stroke="#B8924C" strokeWidth="0.3" fill="none" opacity="0.6" />

      {/* Coastline labels */}
      <text x="15" y="46" fontSize="2.2" fill="#B8924C" fontFamily="serif" fontStyle="italic" opacity="0.85">Marbella</text>
      <text x="33" y="50" fontSize="2.5" fill="#D4B377" fontFamily="serif" fontStyle="italic" fontWeight="600">Málaga</text>
      <text x="55" y="48" fontSize="2.2" fill="#B8924C" fontFamily="serif" fontStyle="italic" opacity="0.85">Nerja</text>
      <text x="78" y="44" fontSize="2.0" fill="#B8924C" fontFamily="serif" fontStyle="italic" opacity="0.7">Maro</text>

      {/* Route waves underneath */}
      <path d="M 0 75 Q 25 73, 50 75 T 100 75" stroke="#4A7891" strokeWidth="0.2" fill="none" opacity="0.4" strokeDasharray="1 1"/>
      <path d="M 0 85 Q 25 83, 50 85 T 100 85" stroke="#4A7891" strokeWidth="0.2" fill="none" opacity="0.4" strokeDasharray="1 1"/>
      <path d="M 0 95 Q 25 93, 50 95 T 100 95" stroke="#4A7891" strokeWidth="0.2" fill="none" opacity="0.3" strokeDasharray="1 1"/>

      {/* Active route path */}
      <path d={path}
            stroke="#C8624A" strokeWidth="0.7" fill="none"
            strokeLinecap="round" strokeLinejoin="round"
            strokeDasharray="2 1.5"
            style={{ animation: 'dashFlow 8s linear infinite' }}/>

      {/* Route points */}
      {route.coords.map((c, i) => (
        <g key={i}>
          <circle cx={c.x} cy={c.y} r="2.2" fill="#C8624A" opacity="0.25"/>
          <circle cx={c.x} cy={c.y} r="0.9" fill="#C8624A"/>
          {i === 0 && (
            <text x={c.x + 2.5} y={c.y + 1} fontSize="2" fill="#F5EFE6" fontFamily="sans-serif" fontWeight="600">
              {{ ro: 'Plecare', en: 'Start', es: 'Salida' }[lang]}
            </text>
          )}
          {i === route.coords.length - 1 && (
            <text x={c.x - 12} y={c.y - 2} fontSize="2" fill="#D4B377" fontFamily="sans-serif" fontWeight="600">
              {route.titleKey[lang].split(' ')[0]}
            </text>
          )}
        </g>
      ))}

      {/* Compass */}
      <g transform="translate(90, 88)">
        <circle r="4" fill="none" stroke="#B8924C" strokeWidth="0.2" opacity="0.6"/>
        <path d="M 0 -3 L 0.7 0 L 0 3 L -0.7 0 Z" fill="#C8624A"/>
        <text y="-4.5" fontSize="1.5" fill="#D4B377" textAnchor="middle" fontWeight="600">N</text>
      </g>

      <style>{`@keyframes dashFlow { to { stroke-dashoffset: -20; } }`}</style>
    </svg>
  );
}

// ===== FAQ =====
function FAQSection() {
  const { t } = useI18n();
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section faq-section">
      <div className="container">
        <div className="section-head center reveal">
          <span className="eyebrow">{t.faq.eyebrow}</span>
          <h2 className="display section-title">{t.faq.title}</h2>
        </div>
        <div className="faq-list reveal">
          {t.faq.items.map((item, i) => (
            <div key={i} className={'faq-item ' + (open === i ? 'open' : '')}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <span className="faq-q-icon"><ChevronDown /></span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{item.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== CONTACT =====
function ContactSection() {
  const { t } = useI18n();
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', date: '', people: '2', cruise: '0', message: '' });

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 5000);
    setForm({ name: '', email: '', phone: '', date: '', people: '2', cruise: '0', message: '' });
  };

  return (
    <section className="section contact-section">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow gold">{t.contact.eyebrow}</span>
          <h2 className="display section-title">{t.contact.title}</h2>
          <p className="section-sub">{t.contact.sub}</p>
        </div>
        <div className="contact-grid">
          <div className="contact-info reveal">
            <a href="https://maps.google.com/?q=Puerto+Deportivo+El+Candado" target="_blank" rel="noopener" className="contact-info-item">
              <span className="contact-icon"><PinIcon /></span>
              <div className="contact-info-content">
                <div className="l">{t.contact.info.location}</div>
                <div className="v">{t.contact.info.locationVal}</div>
              </div>
            </a>
            <a href={`tel:${t.contact.info.phoneVal}`} className="contact-info-item">
              <span className="contact-icon"><PhoneIcon /></span>
              <div className="contact-info-content">
                <div className="l">{t.contact.info.phone}</div>
                <div className="v">{t.contact.info.phoneVal}</div>
              </div>
            </a>
            <a href={`https://wa.me/34612345678`} target="_blank" rel="noopener" className="contact-info-item">
              <span className="contact-icon"><WhatsAppIcon /></span>
              <div className="contact-info-content">
                <div className="l">{t.contact.info.whatsapp}</div>
                <div className="v">{t.contact.info.whatsappVal}</div>
              </div>
            </a>
            <a href={`mailto:${t.contact.info.emailVal}`} className="contact-info-item">
              <span className="contact-icon"><MailIcon /></span>
              <div className="contact-info-content">
                <div className="l">{t.contact.info.email}</div>
                <div className="v">{t.contact.info.emailVal}</div>
              </div>
            </a>
            <a href={`https://instagram.com/kainama.malaga`} target="_blank" rel="noopener" className="contact-info-item">
              <span className="contact-icon"><InstagramIcon /></span>
              <div className="contact-info-content">
                <div className="l">{t.contact.info.instagram}</div>
                <div className="v">{t.contact.info.instagramVal}</div>
              </div>
            </a>
          </div>
          <form className="contact-form reveal" onSubmit={submit}>
            {sent && (
              <div className="contact-success">
                <CheckIcon /> {t.contact.form.sent}
              </div>
            )}
            <div className="field-row">
              <div className="field">
                <label>{t.contact.form.name}</label>
                <input required value={form.name} onChange={e => setForm({...form, name: e.target.value})} />
              </div>
              <div className="field">
                <label>{t.contact.form.email}</label>
                <input type="email" required value={form.email} onChange={e => setForm({...form, email: e.target.value})} />
              </div>
            </div>
            <div className="field-row">
              <div className="field">
                <label>{t.contact.form.phone}</label>
                <input type="tel" value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} />
              </div>
              <div className="field">
                <label>{t.contact.form.date}</label>
                <input type="date" value={form.date} onChange={e => setForm({...form, date: e.target.value})} />
              </div>
            </div>
            <div className="field-row">
              <div className="field">
                <label>{t.contact.form.cruise}</label>
                <select value={form.cruise} onChange={e => setForm({...form, cruise: e.target.value})}>
                  {t.cruises.items.map((c, i) => (
                    <option key={i} value={i}>{c.name}</option>
                  ))}
                </select>
              </div>
              <div className="field">
                <label>{t.contact.form.people}</label>
                <select value={form.people} onChange={e => setForm({...form, people: e.target.value})}>
                  {[1,2,3,4,5,6,7,8,9,10].map(n => <option key={n} value={n}>{n}</option>)}
                </select>
              </div>
            </div>
            <div className="field">
              <label>{t.contact.form.message}</label>
              <textarea rows="4" value={form.message} onChange={e => setForm({...form, message: e.target.value})}></textarea>
            </div>
            <button type="submit" className="btn btn-primary btn-lg" style={{ alignSelf: 'flex-start', marginTop: 8 }}>
              {t.contact.form.submit} <ArrowRight />
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}

// ===== TESTIMONIALS =====
const TESTIMONIALS = [
  {
    quote: { ro: 'Cea mai frumoasă seară din vacanța noastră. Aron e un căpitan de poveste — știe toate locurile bune și ne-a făcut să ne simțim ca acasă. Fotografiile la apus sunt incredibile.', en: 'The most beautiful evening of our holiday. Aron is a wonderful captain — he knows all the good spots and made us feel at home. The sunset photos are unbelievable.', es: 'La tarde más bonita de nuestras vacaciones. Aron es un gran capitán — conoce todos los buenos sitios y nos hizo sentir como en casa. Las fotos al atardecer son increíbles.' },
    author: 'Marta & Diego, Madrid',
  },
  {
    quote: { ro: 'Am rezervat croaziera privată pentru aniversarea soției mele. Totul a fost impecabil, de la cava la coloana sonoră. Recomand cu drag.', en: 'I booked the private charter for my wife\'s birthday. Everything was flawless — from the cava to the soundtrack. Highly recommend.', es: 'Reservé el crucero privado para el cumpleaños de mi mujer. Todo fue impecable, desde el cava hasta la música. Lo recomiendo de corazón.' },
    author: 'Thomas K., München',
  },
  {
    quote: { ro: 'Cu copiii a fost ideal. Apă curată, snorkel, pâine cu jamón pe punte. Ne întoarcem sigur anul viitor.', en: 'With the kids it was ideal. Clean water, snorkeling, bread with jamón on deck. We\'ll definitely be back next year.', es: 'Con los niños fue ideal. Agua limpia, snorkel, pan con jamón en cubierta. Volveremos seguro el año que viene.' },
    author: 'Familia Popescu, București',
  },
];

function TestimonialsSection() {
  const [idx, setIdx] = React.useState(0);
  const { lang } = useI18n();
  React.useEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % TESTIMONIALS.length), 6000);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="section testimonials-section">
      <div className="container">
        <div className="section-head center reveal">
          <span className="eyebrow">{ {ro: 'Recenzii', en: 'Reviews', es: 'Reseñas'}[lang] }</span>
          <h2 className="display section-title">{ {ro: 'Ce spun cei care au fost.', en: 'What guests say.', es: 'Lo que dicen los huéspedes.'}[lang] }</h2>
        </div>
        <div className="testimonial-wrap reveal">
          <div className="testimonial-track">
            <div className="testimonial-slide" key={idx}>
              <div className="testimonial-stars">
                {[...Array(5)].map((_, i) => <StarIcon key={i} />)}
              </div>
              <blockquote className="testimonial-quote">"{TESTIMONIALS[idx].quote[lang]}"</blockquote>
              <cite className="testimonial-author">— {TESTIMONIALS[idx].author}</cite>
            </div>
          </div>
          <div className="testimonial-dots">
            {TESTIMONIALS.map((_, i) => (
              <button key={i} className={'testimonial-dot ' + (idx === i ? 'active' : '')} onClick={() => setIdx(i)} aria-label={`Review ${i+1}`}></button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== TRUST STRIP =====
function TrustStrip() {
  const { lang } = useI18n();
  const items = ['Tripadvisor', 'Airbnb Experiences', 'GetYourGuide', 'Booking', 'Costa del Sol Tourism'];
  return (
    <section className="trust-strip">
      <div className="container">
        <p style={{ textAlign: 'center', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-mute)', marginBottom: 24, fontWeight: 600 }}>
          { {ro: 'Suntem listați pe', en: 'Featured on', es: 'Estamos en'}[lang] }
        </p>
        <div className="trust-grid">
          {items.map((it, i) => (
            <div key={i} className="trust-item">{it}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Hero, IntroSection, CruisesSection, BoatSection, GallerySection,
  RoutesSection, FAQSection, ContactSection, TestimonialsSection, TrustStrip,
  ROUTES_DATA, GALLERY_DATA, TESTIMONIALS,
});