/* Shared UI components: nav, logo, icons, FAB variants */

const Logo = ({ mono = false, height = 22 }) => (
  <svg viewBox="0 0 150 30" height={height} xmlns="http://www.w3.org/2000/svg" aria-label="Beno">
    <g fill={mono ? 'currentColor' : '#00586F'}>
      <path d="M35.3356 7.93599C35.3356 9.10596 35.0629 10.2223 34.5197 11.2746C33.9764 12.3311 33.1235 13.2246 31.957 13.953C33.1235 14.7103 33.9764 15.6079 34.5197 16.6499C35.0629 17.694 35.3356 18.8 35.3356 19.97C35.3356 21.4288 35.0896 22.6607 34.5996 23.6656C34.1076 24.6684 33.4393 25.4814 32.5987 26.1087C31.7582 26.7318 30.7844 27.1899 29.6855 27.4768C28.5867 27.7636 27.4161 27.9059 26.1716 27.9059H0V0H26.1716C27.4161 0 28.5867 0.142377 29.6855 0.429195C30.7844 0.718077 31.7582 1.1741 32.5987 1.79932C33.4393 2.42248 34.1055 3.23754 34.5996 4.24243C35.0896 5.24526 35.3356 6.47507 35.3356 7.93599ZM4.66194 12.001H25.6284C27.1044 12.001 28.314 11.6543 29.2591 10.9651C30.2042 10.2759 30.6778 9.25452 30.6778 7.89884C30.6778 6.75157 30.2759 5.84366 29.4744 5.17923C28.6707 4.51687 27.4181 4.18465 25.7083 4.18465H4.66194V12.003V12.001ZM26.2516 23.3334C26.8461 23.3334 27.4079 23.257 27.9388 23.1002C28.4698 22.9413 28.9434 22.7081 29.3575 22.3945C29.7716 22.0829 30.0935 21.6909 30.3272 21.2245C30.5609 20.7541 30.6778 20.1949 30.6778 19.5428C30.6778 18.2924 30.2534 17.3803 29.4129 16.8067C28.5723 16.2351 27.5165 15.9483 26.2495 15.9483H4.66194V23.3334H26.2516Z"/>
      <path d="M70.1255 0V4.18259H44.573V12.1557H70.1255V15.9463H44.573V23.7234H70.1255V27.9059H39.9541V0H70.1255Z"/>
      <path d="M105.425 0H110.046V27.9059H103.834L79.37 5.27621V27.9059H74.749V0H80.9239L105.427 22.6297V0H105.425Z"/>
      <path d="M135.358 0C136.186 0 137.125 0.0474591 138.173 0.136187C139.222 0.229042 140.29 0.437449 141.377 0.763472C142.463 1.08743 143.519 1.5579 144.54 2.16867C145.563 2.78152 146.484 3.60276 147.3 4.63036C148.116 5.66001 148.77 6.93728 149.259 8.46216C149.751 9.98498 150 11.8173 150 13.9509C150 16.0845 149.754 17.9168 149.259 19.4438C148.77 20.9666 148.116 22.2418 147.3 23.2735C146.484 24.3032 145.565 25.1244 144.54 25.7352C143.519 26.348 142.463 26.8164 141.377 27.1404C140.29 27.4685 139.222 27.6748 138.173 27.7677C137.123 27.8605 136.184 27.9039 135.358 27.9039H129.3C128.471 27.9039 127.532 27.8585 126.485 27.7677C125.439 27.6748 124.371 27.4685 123.285 27.1404C122.198 26.8164 121.142 26.348 120.119 25.7352C119.096 25.1244 118.18 24.3032 117.364 23.2735C116.548 22.2439 115.894 20.9666 115.402 19.4438C114.91 17.9168 114.666 16.0886 114.666 13.9509C114.666 11.8132 114.91 9.98498 115.402 8.46216C115.894 6.93522 116.55 5.66001 117.364 4.63036C118.18 3.60276 119.096 2.78152 120.119 2.16867C121.142 1.5579 122.198 1.08743 123.285 0.763472C124.371 0.439512 125.439 0.229042 126.485 0.136187C127.535 0.0474591 128.473 0 129.3 0L135.358 0ZM135.241 23.647C137.26 23.647 138.896 23.3602 140.155 22.7845C141.41 22.2129 142.392 21.4639 143.107 20.5395C143.818 19.613 144.302 18.5771 144.561 17.4319C144.819 16.2847 144.95 15.125 144.95 13.953C144.95 12.7809 144.821 11.6213 144.561 10.4761C144.302 9.32881 143.818 8.30121 143.107 7.38711C142.394 6.47507 141.41 5.73223 140.155 5.15653C138.898 4.58496 137.26 4.29814 135.241 4.29814H129.417C127.397 4.29814 125.761 4.58496 124.507 5.15653C123.25 5.73223 122.266 6.47301 121.554 7.38711C120.841 8.29915 120.357 9.32674 120.097 10.4761C119.838 11.6213 119.707 12.783 119.707 13.953C119.707 15.1229 119.836 16.2847 120.097 17.4319C120.355 18.5771 120.839 19.613 121.554 20.5395C122.266 21.466 123.248 22.2129 124.507 22.7845C125.761 23.3602 127.397 23.647 129.417 23.647H135.241Z"/>
    </g>
  </svg>
);

const Arrow = ({ s = 14 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" className="arrow">
    <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const ArrowRTL = ({ s = 14 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" className="arrow">
    <path d="M19 12H5M11 6l-6 6 6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const ArrowSmart = ({ s }) => (document.documentElement.dir === 'rtl' ? <ArrowRTL s={s}/> : <Arrow s={s}/>);

const WAIcon = ({ s = 14 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor">
    <path d="M19.05 4.91A9.82 9.82 0 0 0 12 2.04C6.51 2.04 2.04 6.51 2.04 12c0 1.75.46 3.45 1.32 4.95L2 22l5.18-1.34A9.92 9.92 0 0 0 12 21.96c5.49 0 9.96-4.47 9.96-9.96 0-2.66-1.04-5.16-2.91-7.09M12 20.3c-1.55 0-3.07-.42-4.39-1.21l-.31-.18-3.07.79.82-3-.21-.32A8.27 8.27 0 0 1 3.74 12c0-4.56 3.7-8.26 8.26-8.26 2.2 0 4.27.86 5.83 2.42a8.2 8.2 0 0 1 2.42 5.84c0 4.56-3.71 8.3-8.25 8.3m4.53-6.18c-.25-.13-1.47-.72-1.69-.81-.23-.08-.39-.13-.56.13-.17.25-.65.81-.79.97-.15.17-.29.18-.54.06-.25-.13-1.05-.39-2-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.39.11-.51.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.13-.55-1.34-.76-1.83-.2-.48-.4-.42-.55-.42-.14 0-.31-.02-.47-.02-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29Z"/>
  </svg>
);

const PhoneIcon = ({ s = 14 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
    <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" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const CloseIcon = ({ s = 18 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
    <path d="M6 6l12 12M6 18L18 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
  </svg>
);

/* ----------------- Nav ----------------- */
const Nav = ({ view, onNav, lang, setLang, onEnquire, dark }) => {
  const T = window.BENO.copy[lang];
  return (
    <header className={'nav' + (dark ? ' on-dark' : '')}>
      <div className="nav-logo" onClick={() => onNav({ name: 'home' })} title={T.tag}>
        <Logo mono={dark} height={20}/>
      </div>
      <nav className="nav-links">
        <button className="nav-link" aria-current={view.name === 'rentals' || view.name === 'category'} onClick={() => onNav({ name: 'rentals' })}>{T.navRentals}</button>
        <button className="nav-link" aria-current={view.name === 'experiences' || view.name === 'experience'} onClick={() => onNav({ name: 'experiences' })}>{T.navExperiences}</button>
        <button className="nav-link" aria-current={view.name === 'about'} onClick={() => onNav({ name: 'about' })}>{T.navAbout}</button>
        <button className="nav-link" aria-current={view.name === 'contact'} onClick={() => onNav({ name: 'contact' })}>{T.navContact}</button>
      </nav>
      <div className="nav-right">
        <div className="lang-toggle">
          <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          <button className={lang === 'ar' ? 'active' : ''} onClick={() => setLang('ar')}>عر</button>
        </div>
        <button className="nav-cta" onClick={onEnquire}>
          <span>{T.navEnquire}</span> <ArrowSmart s={12}/>
        </button>
      </div>
    </header>
  );
};

/* ----------------- FAB ----------------- */
const FAB = ({ style, lang, onEnquire }) => {
  const T = window.BENO.copy[lang];
  const [open, setOpen] = React.useState(false);
  const C = window.BENO.contact;

  if (style === 'dock') {
    return (
      <div className="fab-dock">
        <div className="left">
          <span className="av"></span>
          <span>{lang === 'en' ? 'Concierge online · replies in ~3 min' : 'الكونسيرج متاح · يرد خلال ٣ دقائق'}</span>
        </div>
        <div className="right">
          <a className="btn btn-sm" style={{ background: '#25D366', color: '#0a0a0a' }} href={C.waUrl()} target="_blank" rel="noreferrer"><WAIcon s={12}/> WhatsApp</a>
          <button className="btn btn-sm" style={{ background: 'var(--paper)', color: 'var(--noir)' }} onClick={onEnquire}>{T.startBrief}</button>
        </div>
      </div>
    );
  }

  if (style === 'panel' && open) {
    return (
      <div className="fab-panel">
        <div className="top">
          <div className="who">
            <span className="av"></span>
            <div>
              <div>{lang === 'en' ? 'Beno Concierge' : 'كونسيرج بينو'}</div>
              <div className="status">{lang === 'en' ? 'Online · replies in ~3 min' : 'متصل · يرد خلال ٣ دقائق'}</div>
            </div>
          </div>
          <button onClick={() => setOpen(false)} style={{ background: 'none', border: 0, color: 'var(--paper)' }}><CloseIcon s={16}/></button>
        </div>
        <div className="quick">
          {(lang === 'en' ? [
            'A yacht day this weekend for 8',
            'Supercar Friday → Sunday',
            'Helicopter tour for two',
            'Surprise me — concierge picks',
          ] : [
            'يوم يخت لـ ٨ ضيوف نهاية الأسبوع',
            'سيارة سوبر من الجمعة إلى الأحد',
            'جولة هليكوبتر لشخصين',
            'فاجئني — اختيار الكونسيرج',
          ]).map((q, i) => (
            <button key={i} onClick={() => { onEnquire(q); setOpen(false); }}>{q}</button>
          ))}
        </div>
        <div className="ctas">
          <a className="btn" style={{ background: '#25D366', color: '#0a0a0a' }} href={C.waUrl()} target="_blank" rel="noreferrer">
            <WAIcon s={12}/> WhatsApp
          </a>
          <a className="btn btn-ghost" style={{ color: 'var(--paper)' }} href={'tel:' + C.officeTel}>
            <PhoneIcon s={12}/> {lang === 'en' ? 'Call' : 'اتصل'}
          </a>
        </div>
      </div>
    );
  }

  if (style === 'panel') {
    return (
      <div className="fab">
        <button className="fab-button dark" onClick={() => setOpen(true)}>
          {lang === 'en' ? 'Concierge' : 'الكونسيرج'} <ArrowSmart s={12}/>
        </button>
      </div>
    );
  }

  // default: WhatsApp button
  return (
    <div className="fab">
      <a className="fab-button" href={C.waUrl()} target="_blank" rel="noreferrer">
        <WAIcon s={16}/> {lang === 'en' ? 'WhatsApp concierge' : 'كونسيرج واتساب'}
      </a>
    </div>
  );
};

Object.assign(window, { Logo, Arrow, ArrowRTL, ArrowSmart, WAIcon, PhoneIcon, CloseIcon, Nav, FAB });