/* Lighter views: Experiences, About, Contact */

const ExperienceView = ({ expId, lang, onEnquire, onNav }) => {
  const exps = window.BENO.experiences;
  const exp = exps.find(e => e.id === expId) || exps[0];
  const others = exps.filter(e => e.id !== exp.id);

  return (
    <div className="view-enter">
      <section className="cat-hero">
        <div className="cat-hero-img" style={{ backgroundImage: `url(${exp.img})` }}/>
        <div className="cat-hero-text">
          <div className="eyebrow eyebrow-light">
            <button onClick={() => onNav({ name: 'home' })} style={{ background: 'none', border: 0, color: 'inherit', padding: 0, cursor: 'pointer' }}>
              {lang === 'en' ? '← Home' : '→ الرئيسية'}
            </button>
            <span style={{ margin: '0 12px', opacity: .4 }}>/</span>
            <span>{lang === 'en' ? 'Experience' : 'تجربة'} · {exp.idx}</span>
          </div>
          <h1 className="display">{exp.title[lang]}</h1>
          <p>{exp.sub[lang]}</p>
          <div className="meta">
            {exp.tags.map(t => (
              <div key={t} className="meta-item"><div className="v" style={{ fontSize: 16 }}>{t}</div></div>
            ))}
          </div>
          <div className="hero-ctas" style={{ marginTop: 8 }}>
            <button className="btn btn-primary" onClick={() => onEnquire({ id: 'events', name: { en: exp.title.en, ar: exp.title.ar }, pill: { en: 'Experience', ar: 'تجربة' } })}>
              {lang === 'en' ? 'Build this brief' : 'ابدأ التخطيط'} <ArrowSmart s={14}/>
            </button>
            <a className="btn btn-ghost" style={{ color: 'var(--paper)' }} href={window.BENO.contact.waUrl('Hi Beno, I\u2019d like to enquire about ' + exp.title.en)} target="_blank" rel="noreferrer">
              <WAIcon s={14}/> WhatsApp
            </a>
          </div>
        </div>
      </section>

      <section className="section wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">{lang === 'en' ? 'How concierge builds it' : 'كيف يبني الكونسيرج التجربة'}</div>
            <h2 className="display">{lang === 'en' ? 'Four moves.' : 'أربع خطوات.'} <em>{lang === 'en' ? 'No back-and-forth.' : 'دون تعقيد.'}</em></h2>
          </div>
          <p className="lede">
            {lang === 'en'
              ? 'Tell us the brief in a sentence; we propose; you confirm; we deliver. Live availability across all categories — no fixed-price catalogue, no surprises at handover.'
              : 'تخبرنا بفكرتك، نقترح، تؤكد، ننفذ. التوفر فوري، بلا قوائم أسعار جامدة ولا مفاجآت.'}
          </p>
        </div>
        <div className="cat-process" style={{ borderInline: '1px solid var(--border)', borderRadius: 'var(--rad)' }}>
          {[
            { n: '01', t: lang === 'en' ? 'Brief' : 'الفكرة', s: lang === 'en' ? 'A sentence. The occasion, group size, time of day.' : 'جملة واحدة. المناسبة، عدد الضيوف، الوقت.' },
            { n: '02', t: lang === 'en' ? 'Propose' : 'الاقتراح', s: lang === 'en' ? 'Concierge replies within the hour with options & a quote.' : 'يرد الكونسيرج خلال ساعة بخيارات وعروض.' },
            { n: '03', t: lang === 'en' ? 'Confirm' : 'التأكيد', s: lang === 'en' ? 'Pick one. Pay securely in-app or by link.' : 'اختر. ادفع عبر التطبيق أو رابط آمن.' },
            { n: '04', t: lang === 'en' ? 'Deliver' : 'التنفيذ', s: lang === 'en' ? 'We meet you at the door, the dock, or the helipad.' : 'نلتقي عند الباب أو المرسى أو المهبط.' },
          ].map(s => (
            <div key={s.n} className="step">
              <div className="num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.s}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="section wrap" style={{ paddingTop: 0 }}>
        <div className="section-head">
          <div>
            <div className="eyebrow">{lang === 'en' ? 'Five more briefs' : 'خمسة تجارب أخرى'}</div>
            <h2 className="display">{lang === 'en' ? 'Or take a' : 'أو فكّر'} <em>{lang === 'en' ? 'different shape.' : 'بطريقة مختلفة.'}</em></h2>
          </div>
        </div>
        <div className="exp-list">
          {others.map(e => (
            <div key={e.id} className="exp-row" onClick={() => { window.scrollTo(0, 0); onNav({ name: 'experience', id: 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>
    </div>
  );
};

const ExperienceHub = ({ lang, onNav, onEnquire }) => {
  const exps = window.BENO.experiences;
  const T = window.BENO.copy[lang];
  return (
    <div className="view-enter">
      <section className="cat-hero" style={{ gridTemplateColumns: '1fr', minHeight: '52vh' }}>
        <div className="cat-hero-text" style={{ background: 'var(--noir)' }}>
          <div className="eyebrow eyebrow-light">{lang === 'en' ? 'Concierge experiences' : 'تجارب الكونسيرج'}</div>
          <h1 className="display" style={{ maxWidth: '14ch' }}>
            {lang === 'en' ? 'Pre-built briefs you can ' : 'فعاليات جاهزة '}<em>{lang === 'en' ? 'shape.' : 'قابلة للتخصيص.'}</em>
          </h1>
          <p style={{ maxWidth: '60ch' }}>{T.expLede}</p>
        </div>
      </section>
      <section className="section wrap">
        <div className="exp-list">
          {exps.map(e => (
            <div key={e.id} className="exp-row" onClick={() => onNav({ name: 'experience', id: 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>
      <ConciergeBand lang={lang} onEnquire={onEnquire}/>
    </div>
  );
};

const AboutView = ({ lang, onEnquire, onNav }) => {
  const isAr = lang === 'ar';
  return (
    <div className="view-enter">
      <section className="cat-hero" style={{ gridTemplateColumns: '1fr 1fr' }}>
        <div className="cat-hero-img" style={{ backgroundImage: 'url(media/branch-jbr-kiosk.webp)' }}/>
        <div className="cat-hero-text">
          <div className="eyebrow eyebrow-light">{isAr ? 'عن بينو · منذ ٢٠١٨' : 'About · Since 2018'}</div>
          <h1 className="display">
            {isAr ? 'الفخامة، ' : 'Luxury, '}<br/><em>{isAr ? 'في خدمتك.' : 'at your service.'}</em>
          </h1>
          <p style={{ maxWidth: '52ch' }}>
            {isAr
              ? 'تأسست بينو عام ٢٠١٨ على يد أيهم بدر، وتعمل منصة دبي المختارة للتأجير الفاخر التي تجمع بين أسطول مملوك ومدار، وشبكة شركاء معتمدة عبر السيارات واليخوت والمروحيات والصحراء والطيران الخاص. الفلسفة واحدة: كونسيرج واحد، تجربة واحدة، من البداية للنهاية.'
              : 'Founded 2018 by Aiham Bader, Beno is Dubai\u2019s curated luxury rental platform — a curated platform spanning an owned-and-operated fleet plus a vetted partner network across cars, yachts, helicopters, the desert and the skies. One philosophy: one concierge, one experience, end to end.'}
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={() => onNav({ name: 'contact' })}>
              {isAr ? 'تواصل' : 'Get in touch'} <ArrowSmart s={14}/>
            </button>
            <button className="btn btn-ghost" style={{ color: 'var(--paper)' }} onClick={() => onEnquire()}>
              {isAr ? 'ابدأ التخطيط' : 'Start a brief'}
            </button>
          </div>
        </div>
      </section>

      <TrustStrip lang={lang}/>

      <section className="section wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">{isAr ? 'النموذج' : 'The model'}</div>
            <h2 className="display">{isAr ? 'منصة منسّقة. ' : 'A curated platform. '}<em>{isAr ? 'منهج متطوّر.' : 'An evolving model.'}</em></h2>
          </div>
          <p className="lede">
            {isAr
              ? 'بدأت بينو عام ٢٠٢٠ كأول منصة في الإمارات توحد تأجير المركبات الفاخرة عبر شبكة شركاء، واليوم تجمع بين أسطول مملوك ومدار (BENO Yachts, BENO Car Rental) وشبكة الشركاء — لتُحدد طبيعة كل تجربة وفقًا لذلك.'
              : 'Beno launched in 2020 as the UAE\u2019s first tech platform to unify luxury vehicle rentals across a vetted partner network. Today it operates as a hybrid platform — owned-and-operated divisions (BENO Yachts, BENO Car Rental) alongside the partner network — and we present each booking as either depending on what serves the brief best.'}
          </p>
        </div>
        <div className="cat-process" style={{ borderRadius: 'var(--rad)' }}>
          <div className="step">
            <div className="num">2018</div>
            <h4>{isAr ? 'التأسيس' : 'Founded'}</h4>
            <p>{isAr ? 'أيهم بدر · بينو تكنولوجيز ش.م.م-منطقة حرة.' : 'Aiham Bader · Beno Technologies FZ-LLC.'}</p>
          </div>
          <div className="step">
            <div className="num">2020</div>
            <h4>{isAr ? 'منصة' : 'Platform'}</h4>
            <p>{isAr ? 'إطلاق المنصة الموحدة لتأجير المركبات.' : 'First unified-rentals tech platform in the UAE.'}</p>
          </div>
          <div className="step">
            <div className="num">2023</div>
            <h4>{isAr ? 'أسطول مملوك' : 'Owned fleet'}</h4>
            <p>{isAr ? 'إطلاق قسم اليخوت المملوكة والمدارة.' : 'BENO Yachts division — owned & operated.'}</p>
          </div>
          <div className="step">
            <div className="num">2026</div>
            <h4>{isAr ? 'التوسع' : 'Expansion'}</h4>
            <p>{isAr ? 'اليونان والسعودية / البحر الأحمر — قيد التنفيذ.' : 'Greece + Saudi / Red Sea — forward-looking.'}</p>
          </div>
        </div>
      </section>

      <section className="banner">
        <div>
          <div className="eyebrow">{isAr ? 'الاستدامة' : 'Sustainability'}</div>
          <h3 className="display" style={{ marginTop: 12 }}>
            {isAr ? 'مُقَيّمة من ' : 'Assessed by '}<em>EcoVadis.</em>
          </h3>
          <p style={{ color: 'var(--ink-muted)', marginTop: 14, maxWidth: '52ch' }}>
            {isAr
              ? 'بينو ضمن المنصات السياحية المُقَيّمة من EcoVadis — الدرجة والسنة قيد التأكيد قبل النشر.'
              : 'Beno is one of the regional mobility platforms assessed by EcoVadis. Medal level and year of award are confirmed at publish — never asserted blind.'}
          </p>
        </div>
        <div className="placeholder" style={{ aspectRatio: '4/3', borderRadius: 'var(--rad)' }}>
          EcoVadis badge ·<br/>confirm medal + year
        </div>
      </section>
    </div>
  );
};

const ContactView = ({ lang, onEnquire }) => {
  const isAr = lang === 'ar';
  const C = window.BENO.contact;
  return (
    <div className="view-enter">
      <section className="section wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">{isAr ? 'تواصل' : 'Contact'}</div>
            <h2 className="display">{isAr ? 'الكونسيرج ' : 'Concierge, '}<em>{isAr ? 'دائمًا.' : 'always.'}</em></h2>
          </div>
          <p className="lede">{isAr
            ? 'الواتساب أسرع، الهاتف على مدار الساعة، البريد للحجوزات الرسمية. اختر ما يناسبك.'
            : 'WhatsApp is fastest. Phone is staffed 24/7. Email is best for formal bookings. Pick the one that fits.'}</p>
          <button className="btn btn-solid-teal" onClick={() => onEnquire()}>
            {isAr ? 'ابدأ التخطيط' : 'Start a brief'} <ArrowSmart s={12}/>
          </button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {[
            { k: 'WhatsApp', v: C.whatsapp, sub: isAr ? '~ ٣ دقائق' : 'avg. 3 min reply', cta: isAr ? 'افتح المحادثة' : 'Open chat', href: C.waUrl(), bg: '#25D366', fg: '#0a0a0a' },
            { k: isAr ? 'المكتب' : 'Office', v: C.office, sub: '24/7', cta: isAr ? 'اتصل' : 'Call now', href: 'tel:' + C.officeTel },
            { k: isAr ? 'المجاني' : 'Toll-free', v: C.toll, sub: 'UAE', cta: isAr ? 'اتصل' : 'Call', href: 'tel:' + C.tollTel },
            { k: isAr ? 'الحجوزات' : 'Reservations', v: C.email, sub: isAr ? 'رد < ساعة' : 'reply < 1h', cta: isAr ? 'بريد' : 'Email', href: 'mailto:' + C.email },
          ].map(c => (
            <div key={c.k} style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--rad)', padding: 22 }}>
              <div className="eyebrow">{c.k}</div>
              <div className="display" style={{ fontSize: 26, marginTop: 10, lineHeight: 1.1 }}>{c.v}</div>
              <div style={{ color: 'var(--muted)', fontSize: 12, marginTop: 6 }}>{c.sub}</div>
              <a className="btn" style={{ marginTop: 16, background: c.bg || 'var(--noir)', color: c.fg || 'var(--paper)', padding: '10px 14px', fontSize: 11 }} href={c.href} target="_blank" rel="noreferrer">
                {c.cta} <ArrowSmart s={11}/>
              </a>
            </div>
          ))}
        </div>
      </section>

      <section className="section wrap" style={{ paddingTop: 0 }}>
        <div className="section-head">
          <div>
            <div className="eyebrow">{isAr ? 'الفروع' : 'Branches'}</div>
            <h2 className="display">{isAr ? 'أربع نقاط ' : 'Four points '}<em>{isAr ? 'في دبي.' : 'across Dubai.'}</em></h2>
          </div>
          <p className="lede">{isAr ? 'إضافة إلى الكويز (سيارات) والشارقة الصحراوية (باغي) — العناوين قيد التأكيد.' : 'Plus Al Quoz (cars) & Sharjah desert (buggy) — addresses pending confirmation.'}</p>
        </div>
        <div className="cat-process" style={{ borderRadius: 'var(--rad)' }}>
          {window.BENO.branches.map(b => (
            <div key={b.name} className="step">
              <div className="num">·</div>
              <h4>{b.name.split(' — ')[0]}</h4>
              <p>{b.addr}</p>
              <div style={{ marginTop: 10, fontSize: 11, color: 'var(--muted)' }}>{C.hours.split('·')[0]}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="section wrap" style={{ paddingTop: 0 }}>
        <div className="placeholder" style={{ aspectRatio: '21/9', borderRadius: 'var(--rad)' }}>
          MAP PLACEHOLDER · headline pin to be confirmed with client<br/>
          (geo conflict: 25.0768805,55.1328699 vs 25.082299,55.132866 · pick branch)
        </div>
      </section>
    </div>
  );
};

const RentalsHub = ({ lang, onCategory, onEnquire }) => {
  const T = window.BENO.copy[lang];
  const cats = window.BENO.categories;
  return (
    <div className="view-enter">
      <section className="cat-hero" style={{ gridTemplateColumns: '1fr', minHeight: '48vh' }}>
        <div className="cat-hero-text" style={{ background: 'var(--noir)' }}>
          <div className="eyebrow eyebrow-light">{T.navRentals}</div>
          <h1 className="display" style={{ maxWidth: '14ch' }}>
            <em>{T.catTitle}</em> {T.catTitleEm}
          </h1>
          <p style={{ maxWidth: '60ch' }}>{T.catLede}</p>
        </div>
      </section>
      <section className="section wrap">
        <div className="cat-grid">
          {cats.map((c, i) => (
            <article key={c.id} className={'cat-card ' + (i === 0 ? 'span-tall' : i === 6 ? 'span-wide' : 'span-half')} onClick={() => onCategory(c.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>
      <ConciergeBand lang={lang} onEnquire={onEnquire}/>
    </div>
  );
};

Object.assign(window, { ExperienceView, ExperienceHub, AboutView, ContactView, RentalsHub });