/* Home view — cinematic hero + categories + experiences + concierge + trust */

const HeroMarquee = ({ lang, layout, onCategory, onEnquire }) => {
  const T = window.BENO.copy[lang];
  const slides = [
    'media/lifestyle-supercars.webp',
    'media/lifestyle-yachts.webp',
    'media/banner-all-services.webp',
    'media/experience-buggy-dunes-1.webp',
    'media/blog-early-morning-boat-tour.webp',
  ];
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setActive(a => (a + 1) % slides.length), 5400);
    return () => clearInterval(t);
  }, []);
  const cats = window.BENO.categories;
  const C = window.BENO.contact;

  return (
    <section className="hero">
      <div className="hero-bg" aria-hidden="true">
        {slides.map((s, i) => (
          <div key={s} className={'slide' + (i === active ? ' active' : '')} style={{ backgroundImage: `url(${s})` }}/>
        ))}
      </div>
      <div className="hero-inner">
        <div>
          <div className="eyebrow eyebrow-light">{T.heroOver}</div>
          <h1 className="display hero-headline">
            {T.heroHead1}<br/>
            <em>{T.heroHead2}</em>{T.heroHead2alt}<br/>
            {T.heroHead3}
          </h1>
          <p className="hero-sub">{T.heroSub}</p>
          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={() => onCategory('yachts')}>
              {T.browseRentals} <ArrowSmart s={14}/>
            </button>
            <button className="btn btn-ghost" style={{ color: 'var(--paper)' }} onClick={() => onEnquire()}>
              {T.discoverExp}
            </button>
          </div>
        </div>
        <div className="hero-meta">
          <div className="eyebrow eyebrow-light">{lang === 'en' ? 'Categories' : 'الفئات'}</div>
          <div className="hero-cats">
            {cats.map(c => (
              <button key={c.id} className="hero-cat-link" onClick={() => onCategory(c.id)}>
                <span>{c.name[lang]}</span>
                <span><ArrowSmart s={10}/></span>
              </button>
            ))}
          </div>
        </div>
      </div>
      <div className="hero-foot">
        <div className="mono">{lang === 'en' ? 'Concierge · 24/7' : 'كونسيرج · ٢٤/٧'} · WhatsApp {C.whatsapp}</div>
        <div className="dots">
          {slides.map((_, i) => <span key={i} className={'dot' + (i === active ? ' active' : '')}/>)}
        </div>
        <div className="mono">{(active + 1).toString().padStart(2, '0')} / {slides.length.toString().padStart(2, '0')}</div>
      </div>
    </section>
  );
};

const CategoryGrid = ({ lang, onCategory }) => {
  const T = window.BENO.copy[lang];
  const cats = window.BENO.categories;
  // Custom layout: Cars tall, Yachts wide, Helicopter+Buggy thirds, Water+Jets halves, Events wide
  const layout = [
    ['cars',         'span-tall'],
    ['yachts',       'span-half'],
    ['helicopter',   'span-half'],
    ['buggy',        'span-third'],
    ['water-sports', 'span-third'],
    ['private-jets', 'span-third'],
    ['events',       'span-wide'],
  ];
  const find = id => cats.find(c => c.id === id);
  const isRtl = lang === 'ar';

  return (
    <section className="section wrap">
      <div className="section-head">
        <div>
          <div className="eyebrow">{lang === 'en' ? '01 · Categories' : '٠١ · الفئات'}</div>
          <h2 className="display"><em>{T.catTitle}</em> {T.catTitleEm}</h2>
        </div>
        <p className="lede">{T.catLede}</p>
        <button className="btn btn-ghost" style={{ color: 'var(--ink)' }} onClick={() => onCategory('yachts')}>
          {lang === 'en' ? 'All categories' : 'كل الفئات'} <ArrowSmart s={12}/>
        </button>
      </div>
      <div className="cat-grid">
        {layout.map(([id, span]) => {
          const c = find(id);
          return (
            <article key={id} className={'cat-card ' + span} onClick={() => onCategory(id)}>
              <div className="img" style={{ backgroundImage: `url(${c.img})` }}/>
              <div className="pill">{c.pill[lang]}</div>
              <div className="corner"><ArrowSmart s={14}/></div>
              <div className="body">
                <h3>{c.name[lang]}</h3>
                <p>{c.one[lang]}</p>
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
};

const ExperienceList = ({ lang, onExperience }) => {
  const T = window.BENO.copy[lang];
  const exps = window.BENO.experiences;
  return (
    <section className="section wrap">
      <div className="section-head">
        <div>
          <div className="eyebrow">{lang === 'en' ? '02 · Experiences' : '٠٢ · التجارب'}</div>
          <h2 className="display">{T.expTitle} <em>{T.expTitleEm}</em></h2>
        </div>
        <p className="lede">{T.expLede}</p>
        <button className="btn btn-ghost" style={{ color: 'var(--ink)' }} onClick={() => onExperience('supercar-weekend')}>
          {lang === 'en' ? 'See all six' : 'عرض الكل' } <ArrowSmart s={12}/>
        </button>
      </div>
      <div className="exp-list">
        {exps.map(e => (
          <div key={e.id} className="exp-row" onClick={() => onExperience(e.id)}>
            <div className="idx">{e.idx}</div>
            <div>
              <h3>{e.title[lang]}</h3>
              <p style={{ marginTop: 4 }}>{e.sub[lang]}</p>
            </div>
            <div className="meta">
              {e.tags.map(t => <span key={t} className="pill">{t}</span>)}
            </div>
            <div className="go"><ArrowSmart s={14}/></div>
          </div>
        ))}
      </div>
    </section>
  );
};

const ConciergeBand = ({ lang, onEnquire }) => {
  const T = window.BENO.copy[lang];
  const C = window.BENO.contact;
  return (
    <section className="concierge">
      <div>
        <div className="eyebrow eyebrow-light">{lang === 'en' ? '03 · Concierge' : '٠٣ · كونسيرج'}</div>
        <h2 className="display">{T.conTitle}<em>{T.conTitleEm}</em></h2>
        <p>{T.conLede}</p>
        <div className="hero-ctas" style={{ marginTop: 28 }}>
          <button className="btn btn-primary" onClick={() => onEnquire()}>
            {T.startBrief} <ArrowSmart s={14}/>
          </button>
          <a className="btn btn-ghost" style={{ color: 'var(--paper)' }} href={C.waUrl()} target="_blank" rel="noreferrer">
            <WAIcon s={14}/> {T.whatsapp}
          </a>
        </div>
      </div>
      <aside className="card">
        <div className="eyebrow eyebrow-light" style={{ marginBottom: 14 }}>
          {lang === 'en' ? 'How to reach us' : 'وسائل التواصل'}
        </div>
        <div className="row">
          <div className="lhs">
            <span className="chip"><WAIcon s={14}/></span>
            <div>
              <div className="label">WhatsApp</div>
              <div className="meta">{C.whatsapp}</div>
            </div>
          </div>
          <div className="meta">{lang === 'en' ? 'avg. 3 min' : '~ ٣ دقائق'}</div>
        </div>
        <div className="row">
          <div className="lhs">
            <span className="chip"><PhoneIcon s={14}/></span>
            <div>
              <div className="label">{lang === 'en' ? 'Office' : 'المكتب'}</div>
              <div className="meta">{C.office}</div>
            </div>
          </div>
          <div className="meta">{lang === 'en' ? '24/7' : '٢٤/٧'}</div>
        </div>
        <div className="row">
          <div className="lhs">
            <span className="chip">✉</span>
            <div>
              <div className="label">{lang === 'en' ? 'Reservations' : 'الحجوزات'}</div>
              <div className="meta">{C.email}</div>
            </div>
          </div>
          <div className="meta">{lang === 'en' ? 'reply &lt; 1h' : '< ساعة'}</div>
        </div>
        <div className="row">
          <div className="lhs">
            <span className="chip">⌖</span>
            <div>
              <div className="label">{lang === 'en' ? 'Toll-free' : 'المجاني'}</div>
              <div className="meta">{C.toll}</div>
            </div>
          </div>
          <div className="meta">UAE</div>
        </div>
        <div className="row cta">
          <button className="btn btn-solid-teal" style={{ width: '100%', justifyContent: 'center' }} onClick={() => onEnquire()}>
            {T.startBrief} <ArrowSmart s={14}/>
          </button>
        </div>
      </aside>
    </section>
  );
};

const TrustStrip = ({ lang }) => {
  const T = window.BENO.copy[lang];
  return (
    <section className="trust wrap" style={{ padding: 0 }}>
      <div className="cell">
        <div className="num">2018</div>
        <div className="label">{T.trustSince}</div>
        <div className="note">{T.trustNote1}</div>
      </div>
      <div className="cell">
        <div className="num">200<span style={{ fontSize: 28 }}>+</span></div>
        <div className="label">{T.trustPartners}</div>
        <div className="note">{T.trustNote2}</div>
      </div>
      <div className="cell">
        <div className="num">3</div>
        <div className="label">{T.trustApps}</div>
        <div className="note">{T.trustNote3}</div>
      </div>
      <div className="cell">
        <div className="num">24/7</div>
        <div className="label">{T.trustSupport}</div>
        <div className="note">{T.trustNote4}</div>
      </div>
      <div className="cell">
        <div className="num" style={{ fontFamily: 'var(--font-body)', fontSize: 20, letterSpacing: 0 }}>EcoVadis</div>
        <div className="label">{T.trustEco}</div>
        <div className="note">{T.trustNote5}</div>
      </div>
    </section>
  );
};

const AppBanner = ({ lang }) => {
  const isAr = lang === 'ar';
  return (
    <section className="banner">
      <div>
        <div className="eyebrow">{isAr ? 'التطبيق' : 'The App'}</div>
        <h3 className="display" style={{ marginTop: 12 }}>
          {isAr ? 'احجز من المرسى. ادفع من شرفتك. ' : 'Book from the dock. Pay from the balcony. '}
          <em>{isAr ? 'فاخر بأكمله.' : 'All luxury.'}</em>
        </h3>
        <p style={{ color: 'var(--ink-muted)', marginTop: 14, maxWidth: '50ch' }}>
          {isAr
            ? 'متاح على App Store وGoogle Play وHuawei AppGallery. حجز فوري، إقامة الكونسيرج، ودفع آمن.'
            : 'Available on the App Store, Google Play and Huawei AppGallery. Live booking, concierge chat and secure payment in one place.'}
        </p>
        <div className="app-cta" style={{ marginTop: 22 }}>
          <span className="store">App Store</span>
          <span className="store">Google Play</span>
          <span className="store">Huawei AppGallery</span>
        </div>
      </div>
      <div style={{ aspectRatio: '4/3', background: 'url(media/banner-all-services.webp) center/cover', borderRadius: 'var(--rad)' }}/>
    </section>
  );
};

const Footer = ({ lang, onCategory, onNav }) => {
  const T = window.BENO.copy[lang];
  const C = window.BENO.contact;
  return (
    <footer className="foot">
      <div className="foot-grid">
        <div>
          <div style={{ marginBottom: 22, color: 'var(--paper)' }}><Logo mono height={28}/></div>
          <p style={{ color: 'rgba(255,255,255,.7)', maxWidth: '34ch', fontSize: 14, lineHeight: 1.55 }}>
            {lang === 'en'
              ? 'Beno Technologies FZ-LLC · Dubai\u2019s curated luxury rental & concierge platform. The land, skies, seas and sand — in luxury.'
              : 'بينو تكنولوجيز ش.م.م-منطقة حرة · منصة دبي المختارة للتأجير الفاخر والكونسيرج.'}
          </p>
          <div className="hero-ctas" style={{ marginTop: 22 }}>
            <a className="btn btn-ghost" style={{ color: 'var(--paper)', padding: '11px 16px', fontSize: 12 }} href={C.waUrl()} target="_blank" rel="noreferrer">
              <WAIcon s={12}/> WhatsApp
            </a>
            <a className="btn btn-ghost" style={{ color: 'var(--paper)', padding: '11px 16px', fontSize: 12 }} href={'tel:' + C.officeTel}>
              <PhoneIcon s={12}/> {C.office}
            </a>
          </div>
        </div>
        <div>
          <h4>{T.navRentals}</h4>
          <ul>
            {window.BENO.categories.map(c => (
              <li key={c.id}><a href="#" onClick={e => { e.preventDefault(); onCategory(c.id); }}>{c.name[lang]}</a></li>
            ))}
          </ul>
        </div>
        <div>
          <h4>{lang === 'en' ? 'Company' : 'الشركة'}</h4>
          <ul>
            <li><a href="#" onClick={e => { e.preventDefault(); onNav({ name: 'about' }); }}>{T.navAbout}</a></li>
            <li><a href="#" onClick={e => { e.preventDefault(); onNav({ name: 'experiences' }); }}>{T.navExperiences}</a></li>
            <li><a href="#" onClick={e => { e.preventDefault(); onNav({ name: 'contact' }); }}>{T.navContact}</a></li>
            <li><a href={C.waUrl()} target="_blank" rel="noreferrer">WhatsApp</a></li>
            <li><a href={'mailto:' + C.email}>{C.email}</a></li>
          </ul>
        </div>
        <div>
          <h4>{lang === 'en' ? 'Branches' : 'الفروع'}</h4>
          <div className="branches">
            {window.BENO.branches.map(b => (
              <div key={b.name} className="branch">
                <div className="name">{b.name}</div>
                <div className="addr">{b.addr}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="foot-bottom">
        <div>© {new Date().getFullYear()} Beno Technologies FZ-LLC · Dubai, UAE</div>
        <div className="legal">
          <span>EN · AR · RU · ZH</span>
          <span>IG @beno.uae</span>
          <span>FB @benoluxury</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { HeroMarquee, CategoryGrid, ExperienceList, ConciergeBand, TrustStrip, AppBanner, Footer });