const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;

function ArrowRight({ size = 14 }) {return <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M4 12h16M14 6l6 6-6 6" /></svg>;}
function SwapIcon() {return <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M3 8h14l-3-3M21 16H7l3 3" /></svg>;}

// ===== Hero =====
function Hero({ active, align }) {
  // Parallax plane shift on mousemove (subtle)
  const ref = useRefP(null);
  useEffectP(() => {
    if (!active) return;
    const el = ref.current;
    if (!el) return;
    let raf;
    const onMove = (e) => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const x = (e.clientX / window.innerWidth - 0.5) * 18;
        const y = (e.clientY / window.innerHeight - 0.5) * 10;
        el.style.transform = `translate3d(${x}px, ${y}px, 0)`;
      });
    };
    window.addEventListener('mousemove', onMove);
    return () => {window.removeEventListener('mousemove', onMove);cancelAnimationFrame(raf);};
  }, [active]);

  return (
    <section className={`panel panel--hero ${active ? 'is-in' : ''}`} data-screen-label="01 Hero">
      <div className="hero__bg" ref={ref}>
        <img src="assets/hero-plane.jpg" alt="" draggable="false" />
      </div>
      <div className="hero__vignette" />
      <div className={`hero__content hero--${align}`} style={{ textAlign: "left", height: "60px" }}>
        <div className="reveal r2"><h1 className="hero__title" style={{ margin: "0 0 20px" }}><span style={{ fontSize: "22px" }}>FLY DREAM</span><em style={{ fontStyle: "normal", fontWeight: "400", width: "1200px", fontFamily: "\"Cormorant Garamond\"", marginTop: "20px", fontSize: "44px" }}>梦想航空 DREAM启程</em></h1></div>
        <div className="reveal r4">
          <button className="btn-pill" style={{ flexDirection: "row", gap: "12px", padding: "14px 26px", fontFamily: "\"Cormorant Garamond\"", justifyContent: "flex-start", borderStyle: "solid", borderRadius: "0px", fontSize: "14px", height: "40px", width: "160px" }}><span>探索更多</span><ArrowRight size={14} /></button>
        </div>
      </div>
      <div className="hero__scroll reveal r5">
        <span>SCROLL</span>
        <span className="hero__scroll-line" />
      </div>
      <div className="hero__corner-left reveal r1">
        <span>N 39°54′</span><span>E 116°23′</span>
      </div>
      <div className="hero__corner-right reveal r1">
        <span>ALT. 41,000 FT</span>
        <span>MACH 0.85</span>
      </div>
    </section>);

}

// ===== Split (Heritage + LV) =====
function SplitPanel({ active }) {
  return (
    <section className={`panel panel--split ${active ? 'is-in' : ''}`} data-screen-label="02 Heritage">
      <SplitCard
        img="assets/heritage-plane.jpg"
        kicker="OUR HERITAGE"
        title="品牌历程"
        body="从一架公务机的起点，到寰宇航线的全球版图。梦想航空十二年，为高净值旅者书写每一程的私享叙事。"
        cta="了解更多"
        side="left" />
      
      <SplitCard
        img="assets/lv-interview.jpg"
        kicker="PR / LATEST NEWS"
        title="梦想航空对话 LV 掌门人"
        body="一场关于工艺、传承与时间感的深度对话。两个百年品牌的相遇，重新定义云端奢华。"
        cta="阅读专访"
        side="right" />
      
    </section>);

}

function SplitCard({ img, kicker, title, body, cta, side }) {
  return (
    <a className={`split__card split__card--${side}`} href="#" onClick={(e) => e.preventDefault()}>
      <div className="split__img"><img src={img} alt="" /></div>
      <div className="split__shade" />
      <div className="split__text">
        <span className="kicker reveal r1">{kicker}</span>
        <h2 className="reveal r2" style={{ fontSize: "44px" }}>{title}</h2>
        <p className="reveal r3" style={{ width: "560px", fontSize: "14px", height: "40px" }}>{body}</p>
        <span className="split__cta reveal r4">{cta} <ArrowRight size={12} /></span>
      </div>
    </a>);

}

// ===== Cities =====
const CITIES = [
{ city: "SEATTLE", cn: "西雅图", from: "北京", code: "PEK ⇄ SEA", note: "每周二 MU6800 · 周六 MU8600 班次", cta: "尊享预订", img: "assets/city-seattle.jpg", status: "active" },
{ city: "PARIS", cn: "巴黎", from: "上海", code: "PVG ⇄ CDG", note: "航线规划中 · 2026 Q3", cta: "敬请期待", img: "assets/city-paris.jpg", status: "soon" },
{ city: "SYDNEY", cn: "悉尼", from: "广州", code: "CAN ⇄ SYD", note: "航线规划中 · 2026 Q4", cta: "敬请期待", img: "assets/city-sydney.jpg", status: "soon" }];


function CitiesPanel({ active }) {
  return (
    <section className={`panel panel--cities ${active ? 'is-in' : ''}`} data-screen-label="03 Routes">
      <header className="cities__head">
        <div className="reveal r1"><span className="kicker">CURATED ROUTES</span></div>
        <h2 className="reveal r2" style={{ fontSize: "44px", fontFamily: "\"Noto Serif SC\"" }}>甄选航线 · 极致体验</h2>
        <p className="reveal r3"><span style={{ fontFamily: "\"Noto Serif SC\"", fontSize: "2px" }}>梦想相伴｜ 天地无界</span><i style={{ fontSize: "22px" }} /><span style={{ fontFamily: "\"Cormorant Garamond\"" }}>天地无界</span></p>
      </header>
      <div className="cities__grid">
        {CITIES.map((c, i) =>
        <article key={c.city} className={`city reveal r${i + 4}`}>
            <div className="city__img"><img src={c.img} alt={c.city} /></div>
            <div className="city__meta">
              <div className="city__route"><b style={{ fontFamily: "serif" }}>{c.from}</b> <SwapIcon /> <b>{c.cn}</b></div>
              <div className="city__note">{c.note}</div>
            </div>
            <button className={`city__cta city__cta--${c.status}`}>
              <span>{c.cta}</span>
              <span className="city__cta-arrow"><ArrowRight size={12} /></span>
            </button>
          </article>
        )}
      </div>
    </section>);

}

// ===== Cabin (4-state tabs) =====
const CABIN_STATES = [
{ key: "transfer", icon: "🛏", iconSvg: "car", label: "奢享接送", title: "ARRIVAL", body: "全程私属管家。从府邸门廊到舷梯之间的最后一公里，由专属司机与劳斯莱斯车队完成衔接。" },
{ key: "lounge", icon: "🥂", iconSvg: "bar", label: "空中酒廊", title: "MILE BAR", body: "云端八千米的私人酒廊，珍稀年份与现场调酒。让旅途的中场也成为一段值得纪念的相遇。" },
{ key: "vr", icon: "◐", iconSvg: "vr", label: "虚拟体验", title: "VR PREVIEW", body: "戴上设备，提前一窥您即将抵达的目的地。每一段航程都以电影般的预告片开启。" },
{ key: "concierge", icon: "♛", iconSvg: "key", label: "私享定制", title: "CONCIERGE", body: "从婚礼到生日，从音乐会到家族聚会。任何主题，皆可在三万英尺以上被实现。" }];


function CabinPanel({ active }) {
  const [tab, setTab] = useStateP(1);
  useEffectP(() => {if (active) setTab(1);}, [active]);
  const s = CABIN_STATES[tab];
  return (
    <section className={`panel panel--cabin ${active ? 'is-in' : ''}`} data-screen-label="04 Cabin">
      <div className="cabin__bg"><img src="assets/cabin-bar.jpg" alt="" /></div>
      <div className="cabin__shade" />
      <div className="cabin__inner">
        <header className="cabin__head reveal r1">
          <span className="kicker kicker--light">ABOARD THE DREAM</span>
          <h2>云端之上 · 奢享每一刻</h2>
        </header>
        <div className="cabin__story reveal r2" key={s.key}>
          <span className="cabin__story-kicker">{s.title} — {String(tab + 1).padStart(2, '0')} / 04</span>
          <h3>{s.label}</h3>
          <p>{s.body}</p>
        </div>
        <div className="cabin__tabs">
          {CABIN_STATES.map((c, i) =>
          <button key={c.key} className={`cabin__tab ${i === tab ? 'is-active' : ''}`} onClick={() => setTab(i)}>
              <CabinTabIcon kind={c.iconSvg} />
              <span>{c.label}</span>
              <span className="cabin__tab-num">{String(i + 1).padStart(2, '0')}</span>
            </button>
          )}
        </div>
      </div>
    </section>);

}

function CabinTabIcon({ kind }) {
  const c = { width: 20, height: 20, fill: "none", stroke: "currentColor", strokeWidth: 1.4 };
  if (kind === 'car') return <svg viewBox="0 0 24 24" {...c}><path d="M3 16h18M5 16l1.5-5h11L19 16M7 16v2M17 16v2" /><circle cx="8" cy="16" r="1.3" /><circle cx="16" cy="16" r="1.3" /></svg>;
  if (kind === 'bar') return <svg viewBox="0 0 24 24" {...c}><path d="M5 4h14l-6 7v8M9 19h8" /><path d="M7 4l5 7" /></svg>;
  if (kind === 'vr') return <svg viewBox="0 0 24 24" {...c}><rect x="3" y="8" width="18" height="9" rx="2" /><circle cx="8" cy="12.5" r="1.5" /><circle cx="16" cy="12.5" r="1.5" /></svg>;
  if (kind === 'key') return <svg viewBox="0 0 24 24" {...c}><circle cx="8" cy="12" r="4" /><path d="M12 12h9M18 12v3M21 12v2" /></svg>;
  return null;
}

// ===== Partners =====
const PARTNERS = [
{ title: "服务联盟", en: "SERVICE PARTNERS", body: "携手全球高净值品牌——从私厨到家族办公室——共同构建一张围绕您出行半径的服务网。", img: "assets/partner-service.jpg" },
{ title: "技术合作", en: "TECH PARTNERS", body: "与航空电子、安全与材料的顶级工程团队合作，让每一次起降都建立在不可妥协的底层之上。", img: "assets/partner-tech.jpg" },
{ title: "联合航线", en: "CODE-SHARE", body: "与全球甄选承运人开放联合航线，让寰宇任何一处的转接都成为同一段叙事的延续。", img: "assets/partner-route.jpg" }];


function PartnersPanel({ active }) {
  return (
    <section className={`panel panel--partners ${active ? 'is-in' : ''}`} data-screen-label="05 Alliance">
      <header className="partners__head">
        <h2 className="reveal r2" style={{ fontSize: "44px" }}>全球联盟 · 寰宇同频</h2>
      </header>
      <div className="partners__grid">
        {PARTNERS.map((p, i) =>
        <article key={p.title} className={`partner reveal r${i + 3}`}>
            <div className="partner__img"><img src={p.img} alt="" /></div>
            <h3>{p.title}</h3>
            <span className="partner__en">{p.en}</span>
            <p>{p.body}</p>
            <a className="partner__cta" href="#" onClick={(e) => e.preventDefault()}>查看更多 <span className="partner__cta-line" /></a>
          </article>
        )}
      </div>
    </section>);

}

// ===== Footer =====
function FooterPanel({ active }) {
  const cols = [
  { title: "梦想航空", items: ["品牌历程", "甄选航线", "奢享礼遇"] },
  { title: "系列产品", items: ["天骄系列", "尊瑞系列", "壹境系列"] },
  { title: "全球合作伙伴", items: ["联营航线", "技术合作", "服务联盟"] },
  { title: "联系我们", items: ["商务合作", "品牌合作", "社媒矩阵"] }];

  return (
    <section className={`panel panel--footer ${active ? 'is-in' : ''}`} data-screen-label="06 Footer">
      <div className="footer__inner">
        <div className="footer__top">
          <div className="footer__contact">
            <div className="kicker kicker--light">邮件联系</div>
            <a className="footer__email" href="mailto:info@dreamfly.group">info@dreamfly.group <span>↗</span></a>
            <div className="kicker kicker--light" style={{ marginTop: 24 }}>关注我们</div>
            <div className="footer__social">
              {["抖音", "微博", "小红书", "X", "LinkedIn", "Instagram"].map((s) => <a key={s} href="#" onClick={(e) => e.preventDefault()}>{s}</a>)}
            </div>
          </div>
          <div className="footer__cols">
            {cols.map((c) =>
            <div key={c.title} className="footer__col">
                <div className="footer__col-title">{c.title}</div>
                {c.items.map((it) => <a key={it} href="#" onClick={(e) => e.preventDefault()}>{it}</a>)}
              </div>
            )}
          </div>
        </div>
        <div className="footer__wordmark">追觅 · 梦想航空</div>
        <div className="footer__bottom">
          <span>© 2026 梦想航空科技有限公司</span>
          <span>沪公网安备 31010602008949 号</span>
          <span>沪 ICP 备 20008735 号-2</span>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Hero, SplitPanel, CitiesPanel, CabinPanel, PartnersPanel, FooterPanel, ArrowRight, SwapIcon });