// === Seven Yachts — shared components ===

const { useState, useEffect, useRef } = React;

// ---- Icons ----
function Icon({ name, size = 16 }) {
  const s = { width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'heart':
      return <svg viewBox="0 0 24 24" {...s}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>;
    case 'heart-fill':
      return <svg viewBox="0 0 24 24" style={{width:size,height:size}} fill="currentColor"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>;
    case 'whatsapp':
      return <svg viewBox="0 0 24 24" style={{width:size,height:size}} fill="currentColor"><path d="M17.5 14.4c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7 0-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.5-.5.2-.2.2-.3.4-.5.1-.2.1-.4 0-.5-.1-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1 1-1 2.5 1 2.9 1.2 3.1c.2.2 2.1 3.2 5 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.4.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>;
    case 'phone':
      return <svg viewBox="0 0 24 24" {...s}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/></svg>;
    case 'arrow':
      return <svg viewBox="0 0 24 24" {...s}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'arrow-up-right':
      return <svg viewBox="0 0 24 24" {...s}><path d="M7 17L17 7M8 7h9v9"/></svg>;
    case 'menu':
      return <svg viewBox="0 0 24 24" {...s}><path d="M3 12h18M3 6h18M3 18h18"/></svg>;
    case 'x':
      return <svg viewBox="0 0 24 24" {...s}><path d="M18 6L6 18M6 6l12 12"/></svg>;
    case 'check':
      return <svg viewBox="0 0 24 24" {...s} strokeWidth="2"><path d="M20 6L9 17l-5-5"/></svg>;
    case 'cal':
      return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>;
    case 'users':
      return <svg viewBox="0 0 24 24" {...s}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>;
    case 'compass':
      return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="10"/><path d="M16.24 7.76l-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z"/></svg>;
    case 'pin':
      return <svg viewBox="0 0 24 24" {...s}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case 'sparkle':
      return <svg viewBox="0 0 24 24" {...s}><path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z"/></svg>;
    case 'shield':
      return <svg viewBox="0 0 24 24" {...s}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;
    default: return null;
  }
}
window.Icon = Icon;

// ---- Logo (pure wordmark, gold) ----
function Logo({ dark = false, height = 28, color }) {
  // On dark backgrounds the wordmark sits in gold; on light, marine.
  const c = color || (dark ? 'var(--marine)' : 'var(--gold)');
  return (
    <span className="sy-logo" style={{ color: c, display: 'inline-flex', flexDirection: 'column', lineHeight: 1, gap: 2 }} aria-label="Seven Yachts">
      <span style={{
        fontFamily: "'Cormorant Garamond', Georgia, serif",
        fontWeight: 600,
        fontSize: height,
        letterSpacing: '0.04em',
        textTransform: 'none',
      }}>Seven</span>
      <span style={{
        fontFamily: "Inter, sans-serif",
        fontWeight: 500,
        fontSize: Math.round(height * 0.32),
        letterSpacing: '0.42em',
        textTransform: 'uppercase',
        paddingLeft: 2,
      }}>Yachts</span>
    </span>
  );
}
window.Logo = Logo;

// ---- Navbar ----
function Navbar({ route, setRoute, dark = true, lang, setLang, openFav, openBooking, favCount }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const navItems = [
    { id: 'fleet', label: lang === 'ar' ? 'الأسطول' : 'Fleet' },
    { id: 'experiences', label: lang === 'ar' ? 'التجارب' : 'Experiences' },
    { id: 'destinations', label: lang === 'ar' ? 'الوجهات' : 'Destinations' },
    { id: 'sales', label: lang === 'ar' ? 'البيع' : 'Sales' },
    { id: 'about', label: lang === 'ar' ? 'عننا' : 'About' },
  ];

  const cls = `navbar ${dark ? 'dark' : 'light'} ${scrolled ? 'scrolled' : ''}`;

  return (
    <div className={cls}>
      <div className="nav-inner">
        <button className="nav-logo" onClick={() => setRoute({ name: 'home' })} aria-label="Home" style={{ background: 'transparent', border: 0, padding: 0 }}>
          <Logo dark={!dark || scrolled} height={26} />
        </button>
        <div className="nav-links">
          {navItems.map(i => (
            <button
              key={i.id}
              className={`nav-link ${route.name === i.id ? 'active' : ''}`}
              onClick={() => setRoute({ name: i.id })}
            >{i.label}</button>
          ))}
        </div>
        <div className="nav-right">
          <button className="lang-toggle" onClick={() => setLang(lang === 'en' ? 'ar' : 'en')} title="Language">
            <span style={{ opacity: lang === 'en' ? 1 : 0.5 }}>EN</span>
            <span style={{ opacity: 0.5, margin: '0 4px' }}>·</span>
            <span style={{ opacity: lang === 'ar' ? 1 : 0.5 }}>ع</span>
            <span style={{ opacity: 0.4, margin: '0 4px' }}>·</span>
            <span style={{ opacity: lang === 'ru' ? 1 : 0.5 }}>RU</span>
            <span style={{ opacity: 0.4, margin: '0 4px' }}>·</span>
            <span style={{ opacity: lang === 'zh' ? 1 : 0.5 }}>中</span>
          </button>
          <button className="btn btn-sm btn-ghost-light" onClick={openFav} style={{ position: 'relative' }}>
            <Icon name="heart" size={14} />
            <span>Favourites</span>
            {favCount > 0 && (
              <span style={{
                position: 'absolute', top: -6, right: -6,
                background: 'var(--gold)', color: 'var(--ink)',
                fontFamily: 'var(--mono)', fontSize: 10, fontWeight: 700,
                width: 18, height: 18, borderRadius: '50%',
                display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>{favCount}</span>
            )}
          </button>
          <button className="btn btn-sm btn-primary" onClick={() => openBooking()}>
            Check Availability
          </button>
        </div>
      </div>
    </div>
  );
}
window.Navbar = Navbar;

// ---- Availability widget ----
function AvailabilityWidget({ compact, defaultYacht, onSubmit }) {
  const today = new Date();
  const tw = new Date(today.getTime() + 7 * 86400000);
  const fmt = d => d.toISOString().slice(0, 10);
  const [date, setDate] = useState(fmt(tw));
  const [guests, setGuests] = useState(8);
  const [yacht, setYacht] = useState(defaultYacht || 'any');
  const [duration, setDuration] = useState('4hr');

  const handle = (e) => {
    e.preventDefault();
    onSubmit && onSubmit({ date, guests, yacht, duration });
  };

  return (
    <form className={`avail ${compact ? 'compact' : ''}`} onSubmit={handle}>
      {!compact && (
        <label className="avail-field">
          <span className="avail-label">Yacht</span>
          <select className="avail-value" value={yacht} onChange={e => setYacht(e.target.value)}>
            <option value="any">Any yacht — recommend me</option>
            {FLEET.map(y => <option key={y.slug} value={y.slug}>{y.name} · {y.length}ft</option>)}
          </select>
        </label>
      )}
      <label className="avail-field">
        <span className="avail-label">Date</span>
        <input className="avail-value" type="date" value={date} onChange={e => setDate(e.target.value)} />
      </label>
      <label className="avail-field">
        <span className="avail-label">Guests</span>
        <select className="avail-value" value={guests} onChange={e => setGuests(+e.target.value)}>
          {[2,4,6,8,10,12,15,20,25,30,40].map(n => <option key={n} value={n}>{n} guests</option>)}
        </select>
      </label>
      <label className="avail-field">
        <span className="avail-label">Duration</span>
        <select className="avail-value" value={duration} onChange={e => setDuration(e.target.value)}>
          <option value="3hr">3 hours</option>
          <option value="4hr">4 hours</option>
          <option value="6hr">6 hours</option>
          <option value="day">Full day</option>
          <option value="overnight">Overnight</option>
          <option value="multi">Multi-day</option>
        </select>
      </label>
      <button className="avail-cta" type="submit">Check →</button>
    </form>
  );
}
window.AvailabilityWidget = AvailabilityWidget;

// ---- Yacht card (editorial) ----
function YachtCard({ yacht, layout = 'tall', dark = false, fav, toggleFav, onSelect, showRates, onEnquire }) {
  const cls = `feature-card ${dark ? 'dark' : ''} ${layout === 'tall' ? 'fc-tall' : layout === 'wide' ? 'fc-wide' : ''}`;
  return (
    <div className={cls} onClick={() => onSelect && onSelect(yacht.slug)}>
      <div className="media">
        <img src={yacht.hero} alt={`${yacht.name} — ${yacht.builder} ${yacht.length}ft`} loading="lazy" />
      </div>
      <div className="body">
        <div className="fc-meta">
          <span>{yacht.builder}</span>
          <span className="dot"></span>
          <span>{yacht.length} ft</span>
          {yacht.cruisingGuests && (<><span className="dot"></span><span>up to {yacht.cruisingGuests}</span></>)}
          {yacht.confirmFleet && (<><span className="dot"></span><span style={{color:'var(--gold)'}}>confirm</span></>)}
        </div>
        <h3 className="fc-name">{yacht.name}</h3>
        <div className="fc-foot">
          <div className="fc-rate">
            {showRates && yacht.fromHourly ? (
              <span><span className="from">from</span><span className="num">AED {fmtAED(yacht.fromHourly)}</span> <span className="small">/hr · indicative</span></span>
            ) : (
              <span style={{ color: 'var(--muted)', fontSize: 12 }}>Rate on request</span>
            )}
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button
              className={`fc-fav ${fav ? 'active' : ''}`}
              onClick={(e) => { e.stopPropagation(); toggleFav && toggleFav(yacht.slug); }}
              title={fav ? 'Remove from favourites' : 'Add to favourites'}
            >
              <Icon name={fav ? 'heart-fill' : 'heart'} size={14} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
window.YachtCard = YachtCard;

// ---- Footer ----
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <Logo dark={false} height={30} />
            <p style={{ marginTop: 18, fontSize: 14, opacity: 0.7, maxWidth: '32ch' }}>
              Dubai's concierge yacht-charter house. Your private yacht, your way.
            </p>
            <p style={{ marginTop: 12, fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--gold)' }}>
              Dubai Harbour · DA37–DA41
            </p>
          </div>
          <div>
            <h5>Charter</h5>
            <ul>
              <li>The Fleet</li>
              <li>Featured Yachts</li>
              <li>Day Charters</li>
              <li>Overnight</li>
              <li>Favourites</li>
            </ul>
          </div>
          <div>
            <h5>Experiences</h5>
            <ul>
              <li>Celebrations</li>
              <li>Gourmet Dining</li>
              <li>Floating Cinema</li>
              <li>Wellness at Sea</li>
              <li>Corporate</li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li>About</li>
              <li>Yacht Sales</li>
              <li>Yacht Management</li>
              <li>Berths for Sale</li>
              <li>Contact</li>
            </ul>
          </div>
          <div>
            <h5>Concierge</h5>
            <ul>
              <li><a href="tel:+971521217833">+971 52 121 7833</a></li>
              <li><a href={waLink()}>WhatsApp 24/7</a></li>
              <li><a href="mailto:info@sevenyachts.com">info@sevenyachts.com</a></li>
            </ul>
            <div style={{ marginTop: 18, display: 'flex', gap: 12, fontFamily: 'var(--mono)', fontSize: 12 }}>
              <span style={{ opacity: 0.6 }}>IG</span>
              <span style={{ opacity: 0.6 }}>YT</span>
              <span style={{ opacity: 0.6 }}>FB</span>
              <span style={{ opacity: 0.6 }}>TT</span>
            </div>
          </div>
        </div>
        <div className="footer-base">
          <span>© Seven Yachts — Dubai Harbour. Concept design, May 2026.</span>
          <span>EN · العربية · РУС · 中文</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;

// ---- Concept badge (small honest disclosure) ----
function ConceptBadge() {
  const [hidden, setHidden] = useState(false);
  if (hidden) return null;
  return (
    <div className="concept-badge" onClick={() => setHidden(true)} title="Hide">
      <span className="dot"></span>
      <span>Concept · Additive layer · Rates indicative</span>
    </div>
  );
}
window.ConceptBadge = ConceptBadge;

// ---- Fleet marquee ----
function FleetMarquee() {
  const items = FLEET.slice(0, 12);
  const list = [...items, ...items];
  return (
    <div className="fleet-strip">
      <div className="marquee">
        {list.map((y, i) => (
          <span key={i} className="marquee-item">
            <strong>{y.name}</strong>
            <span>· {y.builder}</span>
            <span>· {y.length} ft</span>
            <span className="marquee-sep">◇</span>
          </span>
        ))}
      </div>
    </div>
  );
}
window.FleetMarquee = FleetMarquee;