// === Seven Yachts — Fleet index ===

function FleetPage({ setRoute, favs, toggleFav, openBooking, showRates, density }) {
  const [size, setSize] = useState('all');
  const [builder, setBuilder] = useState('all');
  const [layout, setLayout] = useState(density || 'standard');

  const builders = ['all', ...Array.from(new Set(FLEET.map(y => y.builder)))];
  const sizes = [
    { id: 'all', label: 'All sizes' },
    { id: 'small', label: '70–90 ft' },
    { id: 'mid', label: '90–120 ft' },
    { id: 'large', label: '120–164 ft' },
    { id: 'super', label: '165+ ft' },
  ];

  const filtered = FLEET.filter(y => {
    if (builder !== 'all' && y.builder !== builder) return false;
    if (size === 'small' && (y.length < 70 || y.length >= 90)) return false;
    if (size === 'mid' && (y.length < 90 || y.length >= 120)) return false;
    if (size === 'large' && (y.length < 120 || y.length >= 165)) return false;
    if (size === 'super' && y.length < 165) return false;
    return true;
  });

  return (
    <div className="fleet-page">
      <div className="fleet-header">
        <div className="container">
          <div className="eyebrow on-dark">The Fleet</div>
          <h1 className="h1" style={{ marginTop: 12, color: 'var(--paper)' }}>
            Seventeen vessels.<br/>
            <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>Seventy to two hundred feet.</em>
          </h1>
          <p style={{ marginTop: 16, color: 'rgba(247,250,251,0.7)', maxWidth: '60ch', fontSize: 18 }}>
            Builder-verified, concierge-managed, all berthed at Dubai Harbour. Filter by length or builder — or shortlist a few and let our team match the right yacht to your occasion.
          </p>
        </div>
      </div>

      <div className="fleet-filters">
        <div className="container" style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
          <div className="filter-group">
            <span className="filter-label">Length</span>
            {sizes.map(s => (
              <button key={s.id} className={`filter-chip ${size === s.id ? 'active' : ''}`} onClick={() => setSize(s.id)}>{s.label}</button>
            ))}
          </div>
          <div className="filter-group">
            <span className="filter-label">Builder</span>
            {builders.map(b => (
              <button key={b} className={`filter-chip ${builder === b ? 'active' : ''}`} onClick={() => setBuilder(b)}>{b === 'all' ? 'All' : b}</button>
            ))}
          </div>
          <div className="filter-group" style={{ marginLeft: 'auto', borderRight: 0, paddingRight: 0, marginRight: 0 }}>
            <span className="filter-label">View</span>
            <button className={`filter-chip ${layout === 'cinematic' ? 'active' : ''}`} onClick={() => setLayout('cinematic')}>Cinematic</button>
            <button className={`filter-chip ${layout === 'standard' ? 'active' : ''}`} onClick={() => setLayout('standard')}>Standard</button>
            <button className={`filter-chip ${layout === 'dense' ? 'active' : ''}`} onClick={() => setLayout('dense')}>Dense</button>
          </div>
        </div>
      </div>

      <div className="container">
        <div style={{ paddingTop: 20, fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--muted)', letterSpacing: '0.1em' }}>
          {filtered.length} {filtered.length === 1 ? 'YACHT' : 'YACHTS'} · OF {FLEET.length}
        </div>
        <div className={`fleet-grid ${layout}`}>
          {filtered.map(y => (
            <YachtCard
              key={y.slug}
              yacht={y}
              layout={layout === 'cinematic' ? 'wide' : 'tall'}
              fav={favs.includes(y.slug)}
              toggleFav={toggleFav}
              onSelect={(s) => { setRoute({ name: 'yacht', slug: s }); window.scrollTo(0, 0); }}
              showRates={showRates}
            />
          ))}
        </div>

        {filtered.length === 0 && (
          <div style={{ padding: '120px 0', textAlign: 'center', color: 'var(--muted)' }}>
            <p>No yachts match these filters.</p>
            <button className="btn btn-ghost-dark" onClick={() => { setSize('all'); setBuilder('all'); }} style={{ marginTop: 16 }}>Clear filters</button>
          </div>
        )}
      </div>

      <Footer />
    </div>
  );
}
window.FleetPage = FleetPage;


// Simple placeholder pages for other nav targets
function PlaceholderPage({ title, eyebrow, body, setRoute }) {
  return (
    <div style={{ paddingTop: 84, marginTop: -84, background: 'var(--paper)', minHeight: '100vh' }}>
      <section className="section">
        <div className="container" style={{ maxWidth: 820 }}>
          <div className="eyebrow">{eyebrow}</div>
          <h1 className="h1" style={{ marginTop: 12 }}>{title}</h1>
          <p className="lead" style={{ marginTop: 24, fontSize: 20 }}>{body}</p>
          <p style={{ marginTop: 24, fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--gold)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
            Prototype scope · This screen is not in the demo focus.
          </p>
          <div style={{ marginTop: 40, display: 'flex', gap: 12 }}>
            <button className="btn btn-primary" onClick={() => setRoute({ name: 'home' })}>← Back to Home</button>
            <button className="btn btn-ghost-dark" onClick={() => setRoute({ name: 'fleet' })}>Open Fleet</button>
            <button className="btn btn-ghost-dark" onClick={() => setRoute({ name: 'yacht', slug: 'lucien' })}>See Lucien microsite</button>
          </div>
        </div>
      </section>
      <Footer />
    </div>
  );
}
window.PlaceholderPage = PlaceholderPage;