// Home page
const { useState: _h_useState } = React;

function HomePage({ onNav }) {
  const state = window.useStore ? window.useStore() : null;
  const featured = window.DEER_DATA.filter(d => d.featured);
  const recent = window.RECENT_SIGHTINGS.slice(0, 5);
  const stats = (state && state.stats) || window.STATS;
  const speciesCount = new Set(window.DEER_DATA.map(d => d.speciesKey || d.species)).size;
  const heroSlides = (state && state.heroSlides ? state.heroSlides : []).filter(s => s.active !== false);
  const [heroIdx, setHeroIdx] = React.useState(0);

  React.useEffect(() => {
    if (heroSlides.length < 2) return;
    const t = setInterval(() => setHeroIdx(i => (i + 1) % heroSlides.length), 5200);
    return () => clearInterval(t);
  }, [heroSlides.length]);

  const curSlide = heroSlides[heroIdx % Math.max(1, heroSlides.length)] || null;

  return (
    <div className="page">
      {/* HERO */}
      <section className="hero hero-v2">
        {/* Carousel backdrop: layered slides cross-fading */}
        <div className="hero-carousel">
          {heroSlides.map((s, i) => (
            <div key={s.id}
              className={"hero-slide" + (i === heroIdx ? " active" : "")}
              style={{
                backgroundImage: `url(${s.url})`,
                filter: s.tone && s.tone !== "none" ? s.tone : undefined,
              }}
              aria-hidden={i !== heroIdx}
            />
          ))}
          <div className="hero-scrim"></div>
          <svg className="hero-backdrop-v2" viewBox="0 0 1400 220" preserveAspectRatio="none" aria-hidden="true">
            <path d="M0 170 L 80 150 L 180 168 L 280 145 L 400 165 L 520 148 L 640 170 L 760 152 L 880 168 L 1000 150 L 1120 172 L 1240 155 L 1400 168 L 1400 220 L 0 220 Z" fill="var(--moss)" opacity=".35" />
            <path d="M0 190 Q 35 184 70 190 T 140 190 T 210 190 T 280 190 T 350 190 T 420 190 T 490 190 T 560 190 T 630 190 T 700 190 T 770 190 T 840 190 T 910 190 T 980 190 T 1050 190 T 1120 190 T 1190 190 T 1260 190 T 1330 190 T 1400 190 L 1400 220 L 0 220 Z" fill="var(--sea)" opacity=".45" />
          </svg>
        </div>

        <div className="app hero-app">
            <div style={{ marginBottom: 28, display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 14 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
                <div className="kicker kicker-shanhai kicker-light"><span className="dot">●</span>ISSUE 01 / 筹备阶段</div>
                <span className="landmark mount landmark-light">山 · 大黑山 · 莲花山</span>
                <span className="landmark sea landmark-light">海 · 黄海 · 渤海</span>
              </div>
              <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                <span className="bird-mark"></span>
                <span className="coord-plate coord-plate-light"><span className="n">38.92°N</span>·<span className="n">121.61°E</span>· DALIAN</span>
              </div>
            </div>
            <div className="hero-grid hero-grid-v2">
              <div className="hero-text-card">
                <h1 className="hero-title hero-title-v2">
                  达里尼动物城<br />
                  <span className="underline">野生动物档案</span>
                </h1>
                <blockquote className="hero-quote hero-quote-v2">
                  你看到一只动物，但那一刻，它其实也正在被很多人记住。
                  <br />
                  以梅花鹿为首个切入口，扩展到狐狸、斑海豹、猛禽等大连在地野生动物，建立
                  <strong style={{ color: "var(--ink)", fontWeight: 500 }}>可被公众共同维护的数字身份档案</strong>——
                  通过 AI 辅助识别、公众上传、志愿者纠偏与故事化展示，
                  让每一次相遇都被城市认真地记住。
                  <span className="hero-quote-author">— 项目愿景 · Project Vision</span>
                </blockquote>
                <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
                  <button className="btn btn-lg btn-accent btn-glow" onClick={() => onNav("upload")}>
                    上传一次观察 →
                  </button>
                  <button className="btn btn-lg btn-ghost" onClick={() => onNav("archive")}>
                    浏览动物档案
                  </button>
                </div>
              </div>
              <div className="hero-right-col">
                {curSlide && (
                  <a className="hero-slide-card" onClick={() => curSlide.deerId && onNav("deer:" + curSlide.deerId)}
                     style={{ cursor: curSlide.deerId ? "pointer" : "default" }}>
                    <div className="hero-slide-card-id">
                      <span className="dot">●</span>{curSlide.deerName || "Archive"}
                    </div>
                    <div className="hero-slide-card-caption">
                      <span>{curSlide.caption || "首批动物档案 / SEED ARCHIVE"}</span>
                      <span>{curSlide.region || ""}</span>
                    </div>
                  </a>
                )}
                <div className="hero-dots">
                  {heroSlides.map((s, i) => (
                    <button key={s.id}
                      className={"hero-dot" + (i === heroIdx ? " active" : "")}
                      onClick={() => setHeroIdx(i)}
                      aria-label={`跳到第 ${i + 1} 张`} />
                  ))}
                </div>
                <div className="hero-counter mono">
                  {String(heroIdx + 1).padStart(2, "0")} / {String(heroSlides.length || 0).padStart(2, "0")}
                </div>
              </div>
            </div>
        </div>
      </section>

      {/* STATS STRIP */}
      <section style={{ padding: "40px 0", borderBottom: "1px solid var(--rule)" }}>
        <div className="app">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 28 }}>
            <Stat n={stats.wildlifeArchived || stats.deerArchived} l="已建档 Archived" d="野生动物档案" />
            <Stat n={stats.speciesCovered || speciesCount} l="物种 Species" d="首批覆盖" />
            <Stat n={stats.candidateIndividuals} l="候选 Candidate" d="待命名个体" />
            <Stat n={stats.totalSightings} l="观察记录 Obs" d="累计上传" />
            <Stat n={stats.contributors} l="贡献者 Contrib" d="已上传市民" />
          </div>
        </div>
      </section>

      {/* FEATURED DEER */}
      <section className="section">
        <div className="app">
          <div className="section-head">
            <div>
              <div className="kicker mb-4"><span className="dot">●</span>FEATURED / 首批个体</div>
              <h2>这是目前<br />我们认识的动物。</h2>
            </div>
            <div className="side">
              第一阶段不追求科研级的识别精度。每一个被收录的个体或物种线索，都要经过志愿者多次观察、拍摄、比对、讨论之后，才真正进入档案。你可以点开，读一段它的故事。
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {featured.map(d => (
              <DeerCard key={d.id} deer={d} onClick={() => onNav("deer:" + d.id)} />
            ))}
          </div>
          <div style={{ textAlign: "center", marginTop: 36 }}>
            <button className="btn btn-ghost" onClick={() => onNav("archive")}>
              查看全部 {window.DEER_DATA.length} 个档案 →
            </button>
          </div>
        </div>
      </section>

      {/* RECENT FEED */}
      <section className="section">
        <div className="app">
          <div className="section-head">
            <div>
              <div className="kicker mb-4"><span className="dot">●</span>RECENT OBSERVATIONS / 近期观察</div>
              <h2>最近，<br />有人在这里遇见。</h2>
            </div>
            <div className="side">
              每一次上传都会经过“AI 初审 + 志愿者人工纠偏”的双轨流程。以下是过去两周内平台收到的观察记录片段，位置信息按文明观察原则作模糊处理。
            </div>
          </div>
          <div>
            <div className="obs-row" style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, color: "var(--muted)", letterSpacing: ".14em", textTransform: "uppercase", borderBottom: "1px solid var(--rule)" }}>
              <span>OBS ID</span>
              <span>INDIVIDUAL</span>
              <span>NOTE · 观察备注</span>
              <span>TIME · LOCATION</span>
              <span>STATUS</span>
            </div>
            {recent.map(o => (
              <ObservationRow key={o.id} obs={o} onClick={() => onNav("deer:" + o.deerId)} />
            ))}
          </div>
          <div style={{ textAlign: "center", marginTop: 36 }}>
            <button className="btn btn-ghost" onClick={() => onNav("map")}>查看地图分布 →</button>
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="app">
          <div className="section-head">
            <div>
              <div className="kicker mb-4"><span className="dot">●</span>HOW IT WORKS / 机制设计</div>
              <h2>从一次相遇，<br />到一个档案。</h2>
            </div>
            <div className="side">
              项目当前重点不在算法精度，而在机制：如何让一张照片，被多个人记住、讨论、核对，最终沉淀为一个可以被持续维护的城市生命档案。
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--rule)", borderLeft: "1px solid var(--rule)" }}>
            {[
              { n: "01", z: "公众上传", e: "Contribute", d: "任何人都可以上传一张照片、一个时间、一个大致的区域，甚至一句观察备注。" },
              { n: "02", z: "AI 初审", e: "AI triage", d: "系统基于图像相似度，召回 Top 3 个候选档案，并输出特征摘要，供志愿者参考。" },
              { n: "03", z: "志愿纠偏", e: "Volunteer review", d: "志愿者核对 AI 结果，合并重复个体，或创建新档案。项目强调人工判断是最终权威。" },
              { n: "04", z: "归档展示", e: "Archive", d: "每个个体或物种线索拥有独立档案页：物种、特征、时间线、活动区域、故事，构成可被公众共同维护的数字身份。" },
            ].map(step => (
              <div key={step.n} style={{ padding: "32px 28px", borderRight: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)", background: "var(--paper)" }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: ".16em", fontWeight: 600 }}>{step.n}</div>
                <div className="serif" style={{ fontSize: 22, marginTop: 14, color: "var(--ink)" }}>{step.z}</div>
                <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".14em", textTransform: "uppercase", marginTop: 4 }}>{step.e}</div>
                <p style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 20, lineHeight: 1.65 }}>{step.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ROADMAP */}
      <section className="section">
        <div className="app">
          <div className="section-head">
            <div>
              <div className="kicker mb-4"><span className="dot">●</span>ROADMAP / 实施阶段</div>
              <h2>第一轮推进 · 10–11 周。</h2>
            </div>
            <div className="side">
              项目处于筹备阶段。我们先把机制、数据规则、原型和种子素材搭建起来，再向更广范围公开发布。以下是首期计划。
            </div>
          </div>
          <div style={{ position: "relative", paddingLeft: 0 }}>
            {[
              { k: "W1", t: "筹备设计期", e: "Preparation", d: "打磨项目定位，确定上传与审核规则、数据字段、页面结构，准备首批样例内容，招募种子志愿者。", status: "done" },
              { k: "W2–3", t: "原型搭建期", e: "Prototype", d: "完成基础页面、上传流程、后台审核原型、地图展示与 mock 数据，形成可演示版本。", status: "active" },
              { k: "W4–7", t: "冷启动试运行期", e: "Cold start", d: "定向征集种子用户与志愿者上传，跑通 AI 初审与人工纠偏流程，完善账户与积分机制。", status: "next" },
              { k: "W8–11", t: "公开发布期", e: "Public launch", d: "面向更广范围公开发布，持续征集照片与故事，开展传播联动，优化参与机制。", status: "next" },
            ].map((s, i) => (
              <div key={s.k} style={{ display: "grid", gridTemplateColumns: "110px 180px 1fr 130px", gap: 32, padding: "22px 0", borderTop: i === 0 ? "1px solid var(--rule)" : "1px solid var(--rule-soft)", alignItems: "baseline" }}>
                <div className="mono" style={{ fontSize: 12, color: "var(--ink)", letterSpacing: ".12em", fontWeight: 600 }}>{s.k}</div>
                <div>
                  <div className="serif" style={{ fontSize: 20 }}>{s.t}</div>
                  <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".14em", textTransform: "uppercase", marginTop: 2 }}>{s.e}</div>
                </div>
                <div style={{ fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.65, maxWidth: 560 }}>{s.d}</div>
                <div style={{ textAlign: "right" }}>
                  {s.status === "done" && <span className="chip ok">● 已完成</span>}
                  {s.status === "active" && <span className="chip accent">● 进行中</span>}
                  {s.status === "next" && <span className="chip">待启动</span>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CALL TO COLLAB */}
      <section className="section" style={{ borderBottom: "none" }}>
        <div className="app">
          <div style={{ background: "var(--ink)", color: "var(--paper)", padding: "64px 56px", position: "relative", overflow: "hidden" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "center", position: "relative", zIndex: 1 }}>
              <div>
                <div className="mono" style={{ fontSize: 10.5, color: "var(--accent)", letterSpacing: ".22em", textTransform: "uppercase", marginBottom: 18 }}>● JOIN · 共建邀请</div>
                <h2 style={{ color: "var(--paper)", fontSize: 44, lineHeight: 1.15 }}>
                  我们在寻找<br />
                  <span style={{ color: "var(--accent)" }}>下一位</span>记住它们的人。
                </h2>
                <p style={{ color: "rgba(255,255,255,.72)", fontSize: 14, lineHeight: 1.7, marginTop: 22, maxWidth: 520 }}>
                  无论你是常年在山里走的摄影师、每天跑步路过的市民、愿意每周花两小时的志愿者，
                  还是能提供云服务、摄像设备或传播资源的企业伙伴——
                  我们都为你留了一个入口。
                </p>
              </div>
              <div style={{ display: "grid", gap: 10 }}>
                {[
                  ["上传一张动物照片", "CONTRIBUTE PHOTO", "upload"],
                  ["成为志愿审核员", "BECOME A REVIEWER", "about"],
                  ["提名一个候选名字", "PROPOSE A NAME", "archive"],
                  ["企业与机构合作", "PARTNER WITH US", "about"],
                ].map(([z, e, t]) => (
                  <button key={e} onClick={() => onNav(t)} style={{
                    display: "flex", justifyContent: "space-between", alignItems: "center",
                    padding: "20px 22px", border: "1px solid rgba(255,255,255,.22)",
                    color: "var(--paper)", textAlign: "left", transition: "background-color .2s ease",
                    background: "transparent",
                  }}
                    onMouseEnter={e => e.currentTarget.style.background = "rgba(255,255,255,.05)"}
                    onMouseLeave={e => e.currentTarget.style.background = "transparent"}
                  >
                    <div>
                      <div className="serif" style={{ fontSize: 16, color: "var(--paper)" }}>{z}</div>
                      <div className="mono" style={{ fontSize: 10, letterSpacing: ".16em", color: "rgba(255,255,255,.45)", marginTop: 2 }}>{e}</div>
                    </div>
                    <span style={{ color: "var(--accent)", fontSize: 18 }}>→</span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function Stat({ n, l, d }) {
  return (
    <div className="stat">
      <div className="stat-n">{n}</div>
      <div className="stat-l">{l}</div>
      <div className="stat-d">{d}</div>
    </div>
  );
}

function DeerCard({ deer, onClick }) {
  return (
    <article className="deer-card" onClick={onClick}>
      <Portrait palette={deer.palette} photo={deer.photo} photoTone={deer.photoTone} id={deer.id} label={deer.region} aspect="4 / 5" />
      <div className="meta">
        <div className="name">
          {deer.name}
          <span className="id">{deer.id}</span>
        </div>
        <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: ".12em", marginTop: 4, textTransform: "uppercase" }}>
          {deer.species || "野生动物"} · {deer.speciesEn || "Wildlife"}
        </div>
        <div className="tagline">{deer.tags.slice(0, 2).join(" · ")}</div>
        <div className="bottom">
          <span>{deer.sightings} OBS</span>
          <span>{deer.contributors} CONTRIB</span>
          <span>{deer.candidate ? "● 候选" : "● 已归档"}</span>
        </div>
      </div>
    </article>
  );
}

function ObservationRow({ obs, onClick }) {
  const statusMap = {
    "已归档": "ok",
    "AI 初审": "warn",
    "志愿者审核中": "candidate",
  };
  return (
    <div className="obs-row" onClick={onClick} style={{ cursor: "pointer" }}>
      <span className="mono">{obs.id}</span>
      <span>
        <div className="deer-name">{obs.deerName}</div>
        <div className="mono" style={{ fontSize: 10, color: "var(--muted)", marginTop: 2 }}>{obs.deerId}</div>
      </span>
      <span className="note">{obs.note}</span>
      <span>
        <div style={{ fontSize: 12.5 }}>{obs.loc}</div>
        <div className="mono" style={{ fontSize: 10, color: "var(--muted)", marginTop: 2 }}>{obs.time}</div>
      </span>
      <span style={{ textAlign: "right" }}>
        <span className={"chip " + statusMap[obs.status]}>
          <span className={"status-dot " + (statusMap[obs.status] || "")}></span>
          {obs.status}
        </span>
      </span>
    </div>
  );
}

Object.assign(window, { HomePage, Stat, DeerCard, ObservationRow });