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 PlusIcon({ size = 18 }) { return <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M12 4v16M4 12h16" /></svg>; }

// ===== Hero (3-slide carousel) =====
const HERO_SLIDES = [
  {
    key: "assets",
    img: "assets/pc/hero-01-assets.jpg",
    kicker: "ASSET SERVICES · 资产服务",
    title: "资产流转 价值恒生",
    sub: "覆盖飞机买卖、租赁、托管及无人机全链路，让每一架航空器持续增值",
    cta: "探索资产服务"
  },
  {
    key: "talent",
    img: "assets/pc/hero-02-talent.jpg",
    kicker: "TALENT INCUBATION · 人才孵化",
    title: "淬炼匿心 铸就精英",
    sub: "飞行执照、乘务礼仪、教育咨询、无人机操控，系统化培育行业顶尖人才",
    cta: "开启培训之旅"
  },
  {
    key: "brand",
    img: "assets/pc/hero-03-brand.jpg",
    kicker: "DREAMAVIATE · 逐梦航空",
    title: "逐梦星河 共赴云端",
    sub: "整合资产服务与人才培育，以专业赋能航空产业高质量发展",
    cta: "了解逐梦航空"
  }
];

function Hero({ active, autoplay }) {
  const [i, setI] = useStateP(0);
  const last = useRefP(0);

  useEffectP(() => {
    if (!active || !autoplay) return;
    last.current = Date.now();
    const id = setInterval(() => {
      if (Date.now() - last.current >= 5800) {
        setI((v) => (v + 1) % HERO_SLIDES.length);
        last.current = Date.now();
      }
    }, 600);
    return () => clearInterval(id);
  }, [active, autoplay]);

  useEffectP(() => { if (active) setI(0); }, [active]);

  const pick = (n) => { setI(n); last.current = Date.now(); };
  const next = () => pick((i + 1) % HERO_SLIDES.length);
  const prev = () => pick((i - 1 + HERO_SLIDES.length) % HERO_SLIDES.length);

  return (
    <section className={`panel panel--hero ${active ? 'is-in' : ''}`} data-screen-label="01 Hero">
      <div className="hero-c__bgs">
        {HERO_SLIDES.map((s, n) => (
          <div key={s.key} className={`hero-c__bg ${n === i ? 'is-active' : ''}`}>
            <img src={s.img} alt="" draggable="false" />
          </div>
        ))}
      </div>
      <div className="hero__vignette" />

      {HERO_SLIDES.map((s, n) => (
        <div key={s.key} className={`hero-c__content ${n === i ? 'is-active' : ''}`}>
          <h1 className="hero-c__title">
            <em className="hero-c__title-main">{s.title}</em>
          </h1>
          <p className="hero-c__sub">{s.sub}</p>
          <a className="hero-c__cta" href="#" onClick={(e) => e.preventDefault()}>
            <span>{s.cta}</span>
            <ArrowRight size={14} />
          </a>
        </div>
      ))}

      {/* Carousel chrome — minimal dots */}
      <div className="hero-c__chrome">
        <div className="hero-c__dots">
          {HERO_SLIDES.map((s, n) => (
            <button key={s.key} className={`hero-c__dot ${n === i ? 'is-active' : ''}`} onClick={() => pick(n)} aria-label={s.key}>
              <span className="hero-c__dot-bar"><span className="hero-c__dot-bar-fill" style={{ animationPlayState: (n === i && autoplay) ? 'running' : 'paused' }} key={`bar-${n}-${i}`} /></span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Assets Panel (light) =====
const ASSETS = [
  { num: "01", code: "TRADE", title: "飞机买卖", en: "Aircraft Trading", img: "assets/pc/asset-01-trade.jpg",
    desc: "公务机 / 商务机 / 直升机的全球甄选交易；从市场调研、机型匹配、技术尽调到交付，全流程托管。" },
  { num: "02", code: "LEASE", title: "飞机租赁", en: "Aircraft Leasing", img: "assets/pc/asset-02-lease.jpg",
    desc: "经营性租赁与融资租赁双线产品，覆盖整机、机时与短租；按需匹配运行人，让资产高效周转。" },
  { num: "03", code: "R&D", title: "无人机研发", en: "UAV Research", img: "assets/pc/asset-03-uav-rd.jpg",
    desc: "工业级无人机的整机设计、动力系统与智能算法研发；与高校实验室共建联合创新中心。" },
  { num: "04", code: "FLEET", title: "无人机租赁", en: "UAV Leasing", img: "assets/pc/asset-04-uav-lease.jpg",
    desc: "面向农林、能源、应急、物流的行业机队短租 + 长租方案，配套飞手与维保一站式交付。" }
];

function AssetsPanel({ active }) {
  return (
    <section className={`panel panel--assets ${active ? 'is-in' : ''}`} data-screen-label="02 Assets">
      <header className="da-head reveal r1">
        <span className="kicker">ASSET SERVICES · 资产服务</span>
        <h2 className="da-head__title">航空资产<em>全程护航</em></h2>
        <p className="da-head__sub">买卖 · 租赁 · 研发 · 运营，贯穿航空器全生命周期</p>
      </header>
      <div className="da-grid da-grid--4">
        {ASSETS.map((c, n) => (
          <article key={c.code} className={`acard reveal r${n + 2}`}>
            <div className="acard__media"><img src={c.img} alt="" /></div>
            <div className="acard__num">{c.num}</div>
            <div className="acard__body">
              <span className="acard__en">{c.en}</span>
              <h3 className="acard__title">{c.title}</h3>
              <p className="acard__desc">{c.desc}</p>
              <a className="acard__cta" href="#" onClick={(e) => e.preventDefault()}>
                <span>详细咨询</span>
                <ArrowRight size={12} />
              </a>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ===== Talent Panel (dark, interactive list with preview) =====
const TALENT = [
  { num: "01", title: "飞机培训", en: "Pilot Programs", img: "assets/pc/talent-01-pilot.jpg",
    bullets: ["私照 PPL · 商照 CPL · 仪表等级 IR", "国内外双证课程 · 高端定制带飞", "147 训练机构资质 · 双语教官团队"] },
  { num: "02", title: "服务人员培训", en: "Cabin Crew Academy", img: "assets/pc/talent-02-cabin.jpg",
    bullets: ["乘务员 · 安全员 · 地服 全岗位课程", "七星级礼仪 / 法语·英语 强化", "实景客舱 · 模拟服务场景"] },
  { num: "03", title: "教育咨询", en: "Education Consulting", img: "assets/pc/talent-03-edu.jpg",
    bullets: ["航空职业规划 · 院校联合招生", "学历提升 / 海外飞行院校直通车", "企业培训方案定制与认证"] },
  { num: "04", title: "无人机培训", en: "UAV Training", img: "assets/pc/talent-04-uav.jpg",
    bullets: ["CAAC 多旋翼 / 垂起 / 植保 执照培训", "行业应用专项：测绘 · 巡检 · 安防", "无人机教员养成与院校共建"] }
];

function TalentPanel({ active }) {
  const [i, setI] = useStateP(0);
  useEffectP(() => { if (active) setI(0); }, [active]);
  const cur = TALENT[i];

  return (
    <section className={`panel panel--talent ${active ? 'is-in' : ''}`} data-screen-label="03 Talent">
      <div className="talent__bgs">
        {TALENT.map((c, n) => (
          <div key={c.num} className={`talent__bg ${n === i ? 'is-active' : ''}`}>
            <img src={c.img} alt="" />
          </div>
        ))}
      </div>
      <div className="talent__shade" />
      <div className="talent__inner">
        <header className="da-head da-head--light da-head--start reveal r1">
          <span className="kicker kicker--light">TALENT INCUBATION · 人才孵化</span>
          <h2 className="da-head__title">打造航空<em>精英高地</em></h2>
          <p className="da-head__sub da-head__sub--light">飞行 · 客舱 · 教育 · 无人机，四院聚合启航职业生涯</p>
        </header>

        <div className="talent__grid">
          <ul className="talent__list">
            {TALENT.map((c, n) => (
              <li key={c.num} className={`talent__item ${n === i ? 'is-active' : ''}`} onMouseEnter={() => setI(n)} onClick={() => setI(n)}>
                <span className="talent__item-num">{c.num}</span>
                <div className="talent__item-body">
                  <span className="talent__item-en">{c.en}</span>
                  <h3 className="talent__item-title">{c.title}</h3>
                </div>
                <span className="talent__item-arrow"><ArrowRight size={14} /></span>
              </li>
            ))}
          </ul>

          <aside className="talent__detail" key={`detail-${i}`}>
            <span className="talent__detail-tag">CURRICULUM · {cur.num}</span>
            <h3 className="talent__detail-title">{cur.title}<span className="talent__detail-sub">{cur.en}</span></h3>
            <ul className="talent__detail-list">
              {cur.bullets.map((b, n) => (
                <li key={n}><span className="talent__detail-dot" />{b}</li>
              ))}
            </ul>
            <a className="talent__detail-cta" href="#" onClick={(e) => e.preventDefault()}>
              <span>预约咨询</span>
              <ArrowRight size={14} />
            </a>
          </aside>
        </div>
      </div>
    </section>
  );
}

// ===== Advantages Panel (生态飞轮 — flywheel + synced accordion) =====
const PILLARS = [
  { num: "01", code: "ASSET", title: "航空资产服务", en: "Aircraft Asset Services", role: "根基",
    points: ["全球甄选机型库", "买卖 / 租赁双轨方案", "整机维保 + 残值托管"] },
  { num: "02", code: "TALENT", title: "人才孵化", en: "Talent Incubation", role: "引擎",
    points: ["飞行 / 客舱 / 无人机四院", "147 训练机构资质", "院企双导师机制"] },
  { num: "03", code: "EMPOWER", title: "产业赋能", en: "Industry Empowerment", role: "飞轮",
    points: ["产学研政融合通道", "园区企业联合服务", "运营 · 投融资 · 出海"] }
];

const WHEEL_NODES = [
  { left: 160, top: 50 },
  { left: 255.3, top: 215 },
  { left: 64.7, top: 215 }
];

function AdvantagesPanel({ active }) {
  const [aci, setAci] = useStateP(0);
  const wheelRef = useRefP(null);
  const leftColRef = useRefP(null);
  const accRef = useRefP(null);
  const flyRef = useRefP(null);

  useEffectP(() => { if (active) setAci(0); }, [active]);

  useEffectP(() => {
    const wheel = wheelRef.current, leftCol = leftColRef.current, acc = accRef.current, fly = flyRef.current;
    if (!wheel || !leftCol || !acc || !fly) return;
    const PAINT_RATIO = 293 / 320;
    function paintedBounds() {
      const els = [wheel.querySelector('.wheel__ring'), ...wheel.querySelectorAll('.node')];
      let t = Infinity, b = -Infinity;
      els.forEach((e) => { const r = e.getBoundingClientRect(); t = Math.min(t, r.top); b = Math.max(b, r.bottom); });
      return { t, b };
    }
    function fit() {
      const colH = leftCol.clientHeight, colW = leftCol.clientWidth;
      let size = (colH * 0.80) / PAINT_RATIO;
      size = Math.min(size, colW - 32);
      size = Math.max(size, 150);
      const s = size / 320;
      wheel.style.transform = 'scale(' + s + ')';
      const lb = leftCol.getBoundingClientRect();
      const { t, b } = paintedBounds();
      const shiftPx = ((lb.bottom - b) - (t - lb.top)) / 2;
      wheel.style.transform = 'scale(' + s + ') translateY(' + (shiftPx / s) + 'px)';
      acc.style.height = (b - t) + 'px';
      acc.classList.remove('is-compact');
      if (acc.scrollHeight > acc.clientHeight + 2) acc.classList.add('is-compact');
    }
    const ro = new ResizeObserver(fit);
    ro.observe(fly);
    window.addEventListener('resize', fit);
    requestAnimationFrame(fit);
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(fit);
    return () => { ro.disconnect(); window.removeEventListener('resize', fit); };
  }, []);

  return (
    <section className={`panel panel--advantages ${active ? 'is-in' : ''}`} data-screen-label="04 Edge">
      <header className="da-head reveal r1">
        <span className="kicker">CORE STRENGTH · 核心优势</span>
        <h2 className="da-head__title"><em>三位一体</em>生态飞轮</h2>
        <p className="da-head__sub">资产为根基、人才为引擎、赋能为飞轮 — 三力咬合，循环增值</p>
      </header>

      <div className="fly reveal r2" ref={flyRef}>
        <div className="fly__col fly__col--left" ref={leftColRef}>
          <div className="wheel" ref={wheelRef}>
            <svg viewBox="0 0 320 320" aria-hidden="true">
              <defs>
                <marker id="flowArrow" viewBox="0 0 12 12" refX="9" refY="6" markerWidth="11" markerHeight="11" markerUnits="userSpaceOnUse" orient="auto">
                  <path d="M1 1 L11 6 L1 11 Z" fill="var(--accent)" />
                </marker>
              </defs>
              <circle className="wheel__ring" cx="160" cy="160" r="135" />
              <circle className="wheel__guide" cx="160" cy="160" r="110" />
              <path className="wheel__flow" d="M208.2 61.1 A110 110 0 0 1 269.7 167.7" markerEnd="url(#flowArrow)" />
              <path className="wheel__flow" d="M221.5 251.2 A110 110 0 0 1 98.5 251.2" markerEnd="url(#flowArrow)" />
              <path className="wheel__flow" d="M50.3 167.7 A110 110 0 0 1 111.8 61.1" markerEnd="url(#flowArrow)" />
            </svg>
            <div className="wheel__core">
              <b>循环增值</b>
              <span>Eco Loop</span>
            </div>
            {PILLARS.map((p, i) => (
              <div
                key={p.code}
                className={`node ${aci === i ? 'is-active' : ''}`}
                style={{ left: WHEEL_NODES[i].left + 'px', top: WHEEL_NODES[i].top + 'px' }}
                onMouseEnter={() => setAci(i)}
                onClick={() => setAci(i)}
              >
                <span className="node__num">{p.num}</span>
                <span className="node__title">{p.title.replace('航空', '')}</span>
                <span className="node__role">{p.role}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="fly__col fly__col--right">
          <div className="acc" ref={accRef}>
            {PILLARS.map((p, i) => (
              <article
                key={p.code}
                className={`acc-item ${aci === i ? 'is-open' : ''}`}
                onMouseEnter={() => setAci(i)}
                onClick={() => setAci(i)}
              >
                <div className="acc-item__main">
                  <div className="acc-item__text">
                    <h3 className="acc-item__title">{p.title}</h3>
                    <span className="acc-item__suben">{p.en}</span>
                    <div className="acc-item__body">
                      <span className="acc-item__rule" />
                      <ul className="acc-item__list">
                        {p.points.map((pt) => <li key={pt}>{pt}</li>)}
                      </ul>
                    </div>
                  </div>
                  <button className="acc-item__go" aria-label="查看">
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
                  </button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Synergy Panel (产学研政) =====
const QUADS = [
  { ch: "产", en: "INDUSTRY", title: "产业", desc: "联合园区企业与航司，搭建航空资产运营 · 产业孵化 · 联合采购平台。", img: "assets/pc/synergy-01-industry.jpg" },
  { ch: "学", en: "ACADEMIA", title: "学界", desc: "与高校联合开设飞行 · 航务 · 无人机方向课程，校企双导师培养。", img: "assets/pc/synergy-02-academia.jpg" },
  { ch: "研", en: "RESEARCH", title: "科研", desc: "共建联合实验室，聚焦无人机动力、AI 副驾、低空智能调度三大方向。", img: "assets/pc/synergy-03-research.jpg" },
  { ch: "政", en: "GOV", title: "政府", desc: "对接低空经济试点 · 产业引导基金 · 园区配套，承接区域航空规划。", img: "assets/pc/synergy-04-gov.jpg" }
];

function SynergyPanel({ active }) {
  const [hover, setHover] = useStateP(null);
  return (
    <section className={`panel panel--synergy ${active ? 'is-in' : ''}`} data-screen-label="05 Synergy">
      <div className="synergy__bg" />
      <div className="synergy__inner">
        <header className="da-head da-head--light reveal r1">
          <span className="kicker kicker--light">INDUSTRY × ACADEMIA × RESEARCH × GOVERNMENT</span>
          <h2 className="da-head__title">产学研政<em>四方融合</em></h2>
          <p className="da-head__sub da-head__sub--light">连接人才、技术、资本与政策，赋能低空经济发展</p>
        </header>

        <div className="synergy__board reveal r2">
          {QUADS.map((q, n) => (
            <article key={q.ch} className={`syn-quad reveal r${n + 3} ${hover === n ? 'is-hover' : ''}`}
              onMouseEnter={() => setHover(n)} onMouseLeave={() => setHover(null)}>
              <div className="syn-quad__media"><img src={q.img} alt="" /></div>
              <div className="syn-quad__overlay" />
              <div className="syn-quad__content">
                <div className="syn-quad__ch">{q.ch}</div>
                <div className="syn-quad__meta">
                  <span className="syn-quad__en">{q.en}</span>
                  <h3 className="syn-quad__title">{q.title}</h3>
                </div>
                <p className="syn-quad__desc">{q.desc}</p>
              </div>
            </article>
          ))}
          <div className="synergy__center" aria-hidden="true">
            <div className="radar">
              <div className="radar__map">
                <img src="assets/pc/hubei.svg" alt="" aria-hidden="true" />
              </div>
              <span className="radar__ring radar__ring--1" />
              <span className="radar__ring radar__ring--2" />
              <span className="radar__ring radar__ring--3" />
              <span className="radar__grid" />
              <span className="radar__sweep" />
              <span className="radar__blip radar__blip--a" />
              <span className="radar__blip radar__blip--b" />
              <span className="radar__blip radar__blip--c" />
              <span className="radar__core" />
            </div>
            <span className="synergy__center-label">逐梦<br />航空</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Footer Panel =====
function FooterPanel({ active }) {
  const cols = [
    { title: "逐梦航空", items: ["公司简介", "发展历程", "企业文化"] },
    { title: "业务产品", items: ["资产服务", "人才孵化"] },
    { title: "学员服务", items: ["报名流程", "就业支持", "学员风采"] },
    { title: "伙伴计划", items: ["航空资产服务", "培训业务咨询", "投资者关系", "社媒渠道", "加入我们"] }
  ];

  const socials = [
    { src: "assets/pc/social-wechat.png", label: "微信" },
    { src: "assets/pc/social-weibo.png", label: "微博" },
    { src: "assets/pc/social-douyin.png", label: "抖音" },
    { src: "assets/pc/social-xhs.png", label: "小红书" },
    { src: "assets/pc/social-x.png", label: "X" },
    { src: "assets/pc/social-instagram.png", label: "Instagram" },
    { src: "assets/pc/social-linkedin.png", label: "LinkedIn" }
  ];

  return (
    <section className={`panel panel--footer ${active ? 'is-in' : ''}`} data-screen-label="06 Footer">
      <div className="footer__inner">
        <div className="footer__row footer__row--contact da-footer__row">
          <div className="footer__contact">
            <div className="footer__row-label">联系电话</div>
            <div className="footer__email footer__email--static">
              <span>186-6666-8888</span>
            </div>
            <div className="footer__row-label" style={{ marginTop: 22 }}>公司地址</div>
            <a className="footer__email da-footer__addr" href="https://j.map.baidu.com/ad/e1pM" target="_blank" rel="noreferrer">
              <span>湖北省潜江市总口管理区奥体路 26 号科创中心 C2 栋</span>
              <ArrowRight size={15} />
            </a>
          </div>
          <div className="footer__follow">
            <div className="footer__row-label">关注我们</div>
            <div className="footer__social">
              {socials.map((s) =>
                <a key={s.label} href="#" onClick={(e) => e.preventDefault()} aria-label={s.label}>
                  <img src={s.src} alt={s.label} />
                </a>
              )}
            </div>
            <div className="footer__row-label" style={{ marginTop: 26 }}>邮件联系</div>
            <a className="footer__email" href="mailto:info@dreamaviate.com">
              <span>info@dreamaviate.com</span>
              <img className="footer__mail-icon" src="assets/pc/icon-mail.png" alt="" />
            </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 className="footer__end">
          <div className="footer__wordmark">逐梦航空</div>
          <div className="footer__bottom">
            <span>© 2026 逐梦航空科技有限公司</span>
            <span>鄂公网安备 XXXXXXXXXXXXX 号</span>
            <span>鄂 ICP 备 XXXXXXXX 号</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, AssetsPanel, TalentPanel, AdvantagesPanel, SynergyPanel, FooterPanel, ArrowRight });