/* Aerovista — shared components */
const { useState, useEffect, useRef, useMemo } = React;

const D = window.AV_DATA;

/* ------ Brand logo (inline SVG, recoloured to currentColor) ------ */
function Logo({ color = "var(--brand)", height = 22 }) {
  // Use the file logo; color is applied via filter or stays as native red.
  return (
    <img
      src="media/logo-aerovista.svg"
      alt="Aerovista"
      style={{ height, display: "block" }}
    />
  );
}

/* ------ Tiny right arrow glyph ------ */
const Arr = ({ small } = {}) => (
  <span className="arr" aria-hidden="true">{small ? "→" : "→"}</span>
);

/* ------ Nav ------ */
function Nav({ page, setPage, onEnquire, lang, setLang, onDark }) {
  const t = D.i18n[lang];
  const pages = [
    { id: "services", label: t.nav[0] },
    { id: "fleet", label: t.nav[1] },
    { id: "group", label: t.nav[2] },
    { id: "news", label: t.nav[3] },
    { id: "contact", label: t.nav[4] },
  ];
  return (
    <header className={"nav " + (onDark ? "nav--on-dark" : "")}>
      <div className="wrap nav__row">
        <a
          className="nav__brand"
          onClick={(e) => { e.preventDefault(); setPage("home"); }}
          href="#"
        >
          <Logo />
          <span className="nav__brand-tag">FZE · Dubai</span>
        </a>
        <nav className="nav__links">
          {pages.map((p) => (
            <a
              key={p.id}
              href={"#" + p.id}
              className={"nav__link " + (page === p.id ? "nav__link--active" : "")}
              onClick={(e) => { e.preventDefault(); setPage(p.id); }}
            >
              {p.label}
            </a>
          ))}
        </nav>
        <div className="nav__right">
          <a className="nav__phone" href={D.contact.phoneHref}>{D.contact.phone}</a>
          <div className="nav__lang" role="tablist" aria-label="Language">
            {["EN", "AR", "RU", "ZH"].map((L) => (
              <button
                key={L}
                className={lang === L.toLowerCase() ? "is-on" : ""}
                onClick={() => setLang(L.toLowerCase())}
              >{L}</button>
            ))}
          </div>
          <button className="btn btn--primary" onClick={() => onEnquire()}>
            {t.cta_quote} <Arr />
          </button>
        </div>
      </div>
    </header>
  );
}

/* ------ Footer ------ */
function Footer({ setPage }) {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot__row">
          <div>
            <a onClick={(e)=>{e.preventDefault(); setPage("home");}} href="#" style={{display:"inline-block", marginBottom:18}}>
              <img src="media/logo-aerovista.svg" alt="Aerovista" style={{height:24, filter:"brightness(0) invert(1)"}} />
            </a>
            <p style={{color:"rgba(246,248,250,.7)", fontSize:14, lineHeight:1.6, maxWidth:"32ch"}}>
              A Dubai-based B2B commercial aircraft &amp; engine leasing, trading and asset-management company. Established 1999.
            </p>
            <p className="meta" style={{marginTop:18, color:"rgba(246,248,250,.4)"}}>
              Aerovista FZE · Business Bay · Dubai, UAE
            </p>
          </div>
          <div>
            <h4>Services</h4>
            <ul>
              {D.services.map((s) => (
                <li key={s.id}><a href={"#"+s.id} onClick={(e)=>{e.preventDefault(); setPage("svc:"+s.id);}}>{s.name}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h4>Group</h4>
            <ul>
              <li><a>Aerovista FZE</a></li>
              <li><a>Aerovista / Avion Engineering</a></li>
              <li><a>Fly2Sky Airlines</a></li>
              <li><a>3Green DWC LLC</a></li>
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li><a href="#group" onClick={(e)=>{e.preventDefault(); setPage("group");}}>Who we are</a></li>
              <li><a href="#fleet" onClick={(e)=>{e.preventDefault(); setPage("fleet");}}>Fleet</a></li>
              <li><a href="#news" onClick={(e)=>{e.preventDefault(); setPage("news");}}>News &amp; Press</a></li>
              <li><a href="#contact" onClick={(e)=>{e.preventDefault(); setPage("contact");}}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li><a href={D.contact.phoneHref}>{D.contact.phone}</a></li>
              <li><a href={"mailto:"+D.contact.salesEmail}>{D.contact.salesEmail}</a></li>
              <li><a href={"mailto:"+D.contact.infoEmail}>{D.contact.infoEmail}</a></li>
              <li><a href="#" onClick={(e)=>e.preventDefault()}>LinkedIn — /company/aerovista</a></li>
            </ul>
          </div>
        </div>
        <div className="foot__bottom">
          <span>© 1999–2026 Aerovista FZE</span>
          <span>B2B asset manager · No public price list</span>
          <span>EN · AR · RU · ZH</span>
        </div>
      </div>
    </footer>
  );
}

/* ------ Enquiry Modal ------ */
function EnquiryModal({ open, onClose, prefill }) {
  const [tab, setTab] = useState(prefill || "leasing");
  const [sent, setSent] = useState(false);

  useEffect(() => {
    if (prefill) setTab(prefill);
    if (open) setSent(false);
  }, [open, prefill]);

  useEffect(() => {
    const h = (e) => { if (e.key === "Escape") onClose(); };
    if (open) window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [open, onClose]);

  if (!open) return null;

  const types = [
    ["leasing", "Leasing"],
    ["trading", "Trading"],
    ["management", "Management"],
    ["engineering", "Engineering"],
    ["general", "General"],
  ];

  return (
    <div className="modal" role="dialog" aria-modal="true" aria-label="Enquiry">
      <div className="modal__veil" onClick={onClose}></div>
      <div className="modal__panel">
        <div className="modal__head">
          <div>
            <div className="eyebrow"><span className="dot">●</span> Enquiry · {tab.toUpperCase()}</div>
            <h2 className="modal__title" style={{marginTop:8}}>Let's do business.</h2>
            <p className="meta" style={{marginTop:8}}>Routed to {D.contact.salesEmail}</p>
          </div>
          <button className="modal__close" onClick={onClose} aria-label="Close">✕</button>
        </div>

        {sent ? (
          <div style={{padding:"60px 0"}}>
            <div className="eyebrow" style={{color:"var(--brand)"}}><span className="dot">●</span> Received</div>
            <h3 className="h2" style={{margin:"12px 0 20px"}}>Thank you.</h3>
            <p className="lede">Your enquiry is in. The Dubai office acknowledges B2B enquiries within one business day.</p>
            <p className="meta" style={{marginTop:24}}>{D.contact.phone} · {D.contact.salesEmail}</p>
            <button className="btn btn--ghost" onClick={onClose} style={{marginTop:32}}>Close <Arr/></button>
          </div>
        ) : (
          <>
            <div className="meta" style={{marginBottom:8}}>Enquiry type</div>
            <div className="tabs">
              {types.map(([id, label]) => (
                <button key={id} className={tab === id ? "is-on" : ""} onClick={() => setTab(id)}>{label}</button>
              ))}
            </div>

            <form className="form-grid" onSubmit={(e)=>{e.preventDefault(); setSent(true);}}>
              <div className="field">
                <label>Full name</label>
                <input required defaultValue="" placeholder="Jumber Yakobadze" />
              </div>
              <div className="field">
                <label>Company</label>
                <input required placeholder="Avolon / lessor / airline…" />
              </div>
              <div className="field">
                <label>Email</label>
                <input type="email" required placeholder="you@company.aero" />
              </div>
              <div className="field">
                <label>Phone</label>
                <input placeholder="+971 …" />
              </div>
              <div className="field">
                <label>Country</label>
                <input placeholder="United Arab Emirates" />
              </div>
              <div className="field">
                <label>Asset focus</label>
                <select defaultValue="a320">
                  <option value="a320">A320 family — passenger</option>
                  <option value="a321p2f">A321P2F — cargo</option>
                  <option value="engine">Engine — CFM56 / V2500</option>
                  <option value="other">Other</option>
                </select>
              </div>
              <div className="field field--full">
                <label>Enquiry</label>
                <textarea required placeholder="Describe the transaction structure, timeline, counterparty profile…"></textarea>
              </div>
              <div className="field field--full" style={{marginTop:12}}>
                <button className="btn btn--primary btn--block" type="submit">
                  Submit enquiry <Arr />
                </button>
                <p className="meta" style={{marginTop:12, color:"var(--muted)"}}>
                  No prices, lease rates or asset values are published. Every deal is bespoke.
                </p>
              </div>
            </form>
          </>
        )}
      </div>
    </div>
  );
}

/* ------ Floating Action ------ */
function FAB({ onClick, label }) {
  return (
    <button className="fab" onClick={onClick} aria-label={label}>
      <span>●</span> {label} <Arr />
    </button>
  );
}

/* ------ Marquee ------ */
function Marquee({ items }) {
  const doubled = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__inner">
        {doubled.map((x, i) => <span key={i}>{x}</span>)}
      </div>
    </div>
  );
}

/* ------ Stat strip ------ */
function StatStrip({ stats }) {
  return (
    <div className="stat-strip">
      {stats.map((s, i) => (
        <div key={i}>
          <div className="v">{s.v}</div>
          <div className="l">{s.l}</div>
          <div className="s">{s.s}</div>
        </div>
      ))}
    </div>
  );
}

/* expose */
Object.assign(window, { Logo, Arr, Nav, Footer, EnquiryModal, FAB, Marquee, StatStrip });