/* Centaurus Charter — UI components */
const { useState, useEffect, useRef } = React;

/* === Icons === */
const Icon = {
  arrow: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  back: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M19 12H5M11 6l-6 6 6 6"/></svg>,
  cal: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><rect x="3" y="5" width="18" height="16" rx="1"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>,
  guests: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><circle cx="9" cy="8" r="3.2"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><circle cx="17" cy="9" r="2.5"/><path d="M21 19c0-2-1.7-4-4-4"/></svg>,
  pin: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>,
  check: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M5 12l4 4 10-10"/></svg>,
  wa: (p) => <svg viewBox="0 0 24 24" {...p}><path d="M17.4 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.9-2.9-1.6-4-3.5-.3-.5.3-.5.8-1.6.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2.1 3.2 5 4.4 1.8.8 2.5.8 3.4.7.6-.1 1.7-.7 2-1.4.2-.7.2-1.3.2-1.4-.1 0-.2-.1-.4-.2z" fill="currentColor"/><path d="M20.5 3.5C18.3 1.2 15.3 0 12.1 0 5.5 0 .2 5.4.2 12c0 2.1.5 4.1 1.6 5.9L0 24l6.3-1.7c1.7.9 3.7 1.4 5.7 1.4 6.6 0 11.9-5.4 11.9-12 .1-3.1-1.2-6.1-3.4-8.2zM12 21.9c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-3.8 1 1-3.7-.2-.4c-1-1.6-1.5-3.4-1.5-5.3 0-5.5 4.5-9.9 9.9-9.9 2.7 0 5.1 1 7 2.9s2.9 4.4 2.9 7c.1 5.5-4.3 10-9.8 10z" fill="currentColor"/></svg>,
  play: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M8 5v14l11-7z"/></svg>,
  close: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M6 6l12 12M18 6L6 18"/></svg>,
  star: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8l-6.2 3.2L7 14.2 2 9.3l6.9-1z"/></svg>,
};

/* === Logo (inline SVG from the official artwork) === */
function LogoMark({ color = 'navy', compact = false }) {
  const navy = color === 'navy' ? 'var(--navy)' : '#fff';
  const gold = 'var(--gold)';
  return (
    <svg viewBox="0 0 830 188" style={{ width: compact ? 132 : 168 }}>
      <path d="M22 150 A82 82 0 0 1 186 150" stroke={gold} strokeWidth="10" fill="none"/>
      <g fill={navy}>
        <path d="M61 96 l96 0 13 16 -10 0 -3 9 -86 0 -7 -10 -3 -9 z"/>
        <path d="M40 133 l132 0 -14 22 -104 0 -22 -10 z"/>
        <path d="M30 160 C70 150 120 174 168 162 C190 156 200 158 206 162 C188 178 150 184 110 182 C78 180 50 174 30 160 Z"/>
      </g>
      <path d="M70 99 l30 0 0 14 -25 0 -5 -8 z" fill={color === 'navy' ? '#fff' : 'var(--noir)'}/>
      <path d="M104 99 l26 0 8 14 -34 0 z" fill={color === 'navy' ? '#fff' : 'var(--noir)'}/>
      <path d="M64 140 l64 0 -3 7 -61 0 z" fill={color === 'navy' ? '#fff' : 'var(--noir)'}/>
      <g fill={navy} fontFamily="Inter, Arial, sans-serif" fontWeight="800" letterSpacing="2">
        <text x="250" y="86" fontSize="62">CENTAURUS</text>
        <text x="250" y="150" fontSize="52" letterSpacing="4">YACHTS CHARTER</text>
      </g>
    </svg>
  );
}

/* === Nav === */
function Nav({ screen, goto, dark, lang, setLang, onBook }) {
  const links = [
    ['home', 'Home'],
    ['fleet', 'Fleet'],
    ['experiences', 'Experiences'],
    ['destinations', 'Route Ideas'],
    ['watersports', 'Water Sports'],
    ['about', 'About'],
    ['contact', 'Contact'],
  ];
  return (
    <nav className={'nav' + (dark ? ' is-dark' : '')}>
      <div className="nav-inner">
        <div className="nav-logo" onClick={() => goto('home')}>
          <LogoMark color={dark ? 'white' : 'navy'} compact />
        </div>
        <div className="nav-links">
          {links.map(([k, label]) => (
            <button key={k} className={screen === k ? 'active' : ''} onClick={() => goto(k)}>{label}</button>
          ))}
        </div>
        <div className="nav-right">
          <div className="lang-toggle">
            {['EN','AR','RU','ZH'].map(l => (
              <button key={l} className={lang === l ? 'active' : ''} onClick={() => setLang(l)}>{l}</button>
            ))}
          </div>
          <button className="btn btn-primary btn-sm" onClick={onBook}>Book Now <Icon.arrow style={{width:14,height:14}}/></button>
        </div>
      </div>
    </nav>
  );
}

/* === Booking strip (under hero) === */
function BookingStrip({ onSubmit }) {
  const [pickedYacht, setPickedYacht] = useState('Any yacht');
  return (
    <div className="booking-strip">
      <div className="bf-field" onClick={() => onSubmit('check')}>
        <div className="bf-label">Yacht</div>
        <div className="bf-value">{pickedYacht} <Icon.arrow style={{transform:'rotate(90deg)'}}/></div>
      </div>
      <div className="bf-field">
        <div className="bf-label">Date</div>
        <div className="bf-value"><Icon.cal/> Sat, 30 May</div>
      </div>
      <div className="bf-field">
        <div className="bf-label">Duration</div>
        <div className="bf-value">3 hours · min. 3hr</div>
      </div>
      <div className="bf-field">
        <div className="bf-label">Guests</div>
        <div className="bf-value"><Icon.guests/> 8 guests</div>
      </div>
      <div className="bf-btn">
        <button className="btn btn-primary" onClick={() => onSubmit('check')}>Check availability</button>
      </div>
    </div>
  );
}

/* === Trust strip === */
function TrustRow() {
  const { TRUST } = window.CENTAURUS_DATA;
  return (
    <div className="trust-row">
      {TRUST.map((t, i) => (
        <div className="trust-card" key={i}>
          <div className="trust-num">{t.num}<em>{t.em}</em></div>
          <div className="trust-label">{t.label}</div>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 20, marginTop: 12 }}>{t.value}</div>
          <div className="trust-src">{t.src}</div>
        </div>
      ))}
    </div>
  );
}

/* === Yacht card === */
function YachtCard({ y, onOpen, onBook }) {
  return (
    <div className="yacht-card" onClick={() => onOpen(y.slug)}>
      <div className="yc-img" style={{ backgroundImage: `url(${y.thumb})` }}>
        {y.tag && <div className="yc-tag">{y.tag}</div>}
        <div className="yc-len">{y.length} ft · {y.make}</div>
      </div>
      <div className="yc-body">
        <div className="yc-make">{y.berth}</div>
        <div className="yc-name">{y.name}</div>
        <div className="yc-stats">
          <span><b>{y.length}</b> ft</span>
          <span><b>{y.guests}</b> guests</span>
        </div>
        <div className="yc-foot">
          <div className="yc-price">AED {y.rate.toLocaleString()}<small>from / hour · T&Cs</small></div>
          <div className="yc-cta">View <Icon.arrow style={{width:14,height:14}}/></div>
        </div>
      </div>
    </div>
  );
}

/* === Footer === */
function Footer({ goto }) {
  return (
    <footer className="footer" style={{ backgroundImage: 'url(media/footer-sunset.webp)' }}>
      <div className="wrap">
        <div className="ft-grid">
          <div>
            <LogoMark color="white"/>
            <p style={{ marginTop: 24, color: 'rgba(255,255,255,0.75)', maxWidth: 360, fontSize: 14, lineHeight: 1.7 }}>
              Centaurus Passenger Yachts & Boats Rental L.L.C — Dubai's full-service yacht charter since 2013.
              Boarding at Dubai Marina and Dubai Harbour.
            </p>
            <div style={{ display:'flex', gap: 10, marginTop: 24 }}>
              <a className="btn btn-primary btn-sm" href="https://wa.me/971524901269" target="_blank" rel="noopener">WhatsApp +971 52 490 1269</a>
            </div>
          </div>
          <div>
            <h4>Charter</h4>
            <ul>
              <li onClick={() => goto('fleet')}>Fleet</li>
              <li onClick={() => goto('experiences')}>Experiences</li>
              <li onClick={() => goto('destinations')}>Route Ideas</li>
              <li onClick={() => goto('watersports')}>Water Sports</li>
              <li>Offers & Events</li>
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li onClick={() => goto('about')}>About</li>
              <li onClick={() => goto('contact')}>Contact</li>
              <li>Blog</li>
              <li>FAQ</li>
              <li>Careers</li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li>Office +971 4 352 1833</li>
              <li>WhatsApp +971 52 490 1269</li>
              <li>info@centauruscharter.com</li>
              <li>sales@centauruscharter.com</li>
              <li>Office 402, Galadari Bldg.17, IMPZ</li>
            </ul>
          </div>
          <div>
            <h4>Boarding</h4>
            <ul>
              <li>Dubai Marina — Marina Walk</li>
              <li>Dubai Harbour Marina</li>
              <li style={{ color: 'var(--gold)', marginTop: 12 }}>↓ Apps</li>
              <li>iOS · App Store</li>
              <li>Android · Google Play</li>
            </ul>
          </div>
        </div>
        <div className="ft-bottom">
          <div>© 2026 Centaurus Charter · DED-licensed</div>
          <div>EN · AR · RU · ZH</div>
          <div>Site: cinematic rebuild · v2</div>
        </div>
      </div>
    </footer>
  );
}

/* === WhatsApp FAB === */
function WhatsAppFab() {
  return (
    <a className="fab-wa" href="https://wa.me/971524901269?text=Hi%20Centaurus%2C%20I%27d%20like%20to%20book%20a%20yacht" target="_blank" rel="noopener">
      <Icon.wa/>
    </a>
  );
}

/* === Booking / Enquiry modal === */
function BookingModal({ open, onClose, prefillYacht }) {
  if (!open) return null;
  const yachts = window.CENTAURUS_DATA.FLEET;
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ position:'relative' }}>
        <div className="modal-side" style={{ backgroundImage: 'url(media/yacht-poseidon-118ft-sailing.webp)' }}/>
        <div className="modal-body">
          <button className="modal-close" style={{ background: 'var(--paper)', color: 'var(--ink)' }} onClick={onClose}><Icon.close style={{width:16,height:16}}/></button>
          <div className="eyebrow">Check availability</div>
          <h2 style={{ marginTop: 12, marginBottom: 8, fontSize: 36 }}>Book in minutes</h2>
          <p className="muted" style={{ marginBottom: 22, fontSize: 13 }}>FareHarbor instant booking · pay-on-board · Visa · Mastercard · Tabby · Crypto.</p>
          <div className="field">
            <label>Yacht</label>
            <select defaultValue={prefillYacht || ''}>
              <option value="">Any yacht</option>
              {yachts.map(y => <option key={y.slug} value={y.slug}>{y.name} — {y.length} ft · AED {y.rate.toLocaleString()}/hr</option>)}
            </select>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12 }}>
            <div className="field"><label>Date</label><input type="date" defaultValue="2026-05-30"/></div>
            <div className="field"><label>Hours</label><select defaultValue="3"><option>3</option><option>4</option><option>5</option><option>6</option><option>8</option></select></div>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12 }}>
            <div className="field"><label>Guests</label><input type="number" defaultValue="8" min="1"/></div>
            <div className="field"><label>Mobile</label><input type="tel" placeholder="+971…"/></div>
          </div>
          <div className="field"><label>Notes</label><textarea rows="3" placeholder="Anniversary, kids on board, etc."/></div>
          <div style={{ display:'flex', gap: 10, marginTop: 12 }}>
            <button className="btn btn-primary" style={{ flex: 1, justifyContent:'center' }} onClick={onClose}>Confirm & Book</button>
            <a className="btn btn-wa" href="https://wa.me/971524901269" target="_blank" rel="noopener">WhatsApp</a>
          </div>
        </div>
      </div>
    </div>
  );
}

/* === Lightbox === */
function Lightbox({ src, onClose }) {
  if (!src) return null;
  return (
    <div className="lightbox-bg" onClick={onClose}>
      <img src={src}/>
    </div>
  );
}

Object.assign(window, {
  Icon, LogoMark, Nav, BookingStrip, TrustRow, YachtCard, Footer, WhatsAppFab,
  BookingModal, Lightbox,
});