/* global React */
// Nav + Hero (Language Palette) for the full scrollable portfolio

const PORTFOLIO_NAV = [
{ label: '抖音 AI 创作', href: 'case-01.html' },
{ label: '像塑 AI 创作', href: 'case-02.html' },
{ label: '像塑模板工具', href: 'case-03.html' },
{ label: '淘宝导购设计', href: 'case-04.html' },
{ label: '设计与思辨', href: 'case-05.html' },
{ label: '独立开发项目', href: 'case-06.html' }];


function Nav({ accent, mono, current = 0 }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [hovered, setHovered] = React.useState(false);
  const [hoveredItem, setHoveredItem] = React.useState(-1);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > window.innerHeight * 0.6);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const faded = scrolled && !hovered;
  return (
    <div style={{ position: 'fixed', top: 18, left: 0, right: 0, zIndex: 100, padding: '0 32px', display: 'flex', justifyContent: 'center', pointerEvents: 'none' }}>
      <div className="glass"
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        style={{ borderRadius: 100, padding: '6px 6px 6px 22px', display: 'flex', alignItems: 'center', gap: 24, pointerEvents: 'auto', background: 'rgba(10,10,14,.72)', backdropFilter: 'blur(20px)', opacity: faded ? 0.25 : 1, transition: 'opacity 0.4s ease' }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 9, fontFamily: mono, fontSize: 11, letterSpacing: '.2em', color: '#fff', textDecoration: 'none' }}>
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: accent, boxShadow: `0 0 12px ${accent}` }} />
          EDDY YUAN
        </a>
        <div style={{ width: 1, height: 18, background: 'rgba(255,255,255,.12)', marginLeft: 2 }} />
        <div style={{ display: 'flex', gap: 4 }}>
          {PORTFOLIO_NAV.map((item, i) => {
            const active = i === current;
            const isHovered = hoveredItem === i;
            const color = active ? '#fff' : 'rgba(255,255,255,.62)';
            const bg = active ? 'rgba(255,255,255,.08)' : (isHovered ? 'rgba(255,255,255,.04)' : 'transparent');
            return (
              <a key={i} href={item.href}
                onMouseEnter={() => setHoveredItem(i)}
                onMouseLeave={() => setHoveredItem(-1)}
                style={{ padding: '8px 14px', fontSize: 13, color, borderRadius: 100, background: bg, cursor: 'pointer', fontWeight: active ? 500 : 400, textDecoration: 'none', fontFamily: 'var(--font-zh)', whiteSpace: 'nowrap', transition: 'background .22s ease' }}>{item.label}</a>);

          })}
        </div>
        <a href="canvas.html" className="btn" style={{ background: accent, color: '#0a0a0a', border: 'none', padding: '9px 16px', fontSize: 12.5, fontWeight: 600, textDecoration: 'none' }}>Get in touch ↗</a>
      </div>
    </div>);

}

/* Default case meta = case-01 (抖音 AI 创作). Per-page pages set window.__CASE_META
   before this script loads to override. */
const CASE_META_DEFAULT = {
  caseNo: '01',
  caseRange: '2025 — NOW',
  indexItems: [['01', '流程即界面', false], ['02', '应用即智能', false], ['03', '意图即创作', false], ['04', '体验前置验证', false]],
  role: '产品设计\n项目负责人',
  stack: ['Seedream 5.0', 'SeedEdit 3.0', 'Seedance 2.0', 'Seed3D 1.0'],
  titleLine1a: '从', titleLine1b: 'UX Designer',
  titleLine2a: '到', titleLine2b: 'AI Builder',
  descHtml: '抖音 AI 创作基于 Seedream 模型能力，围绕抖音内容生态构建 AI 创作工具<br>作为项目设计负责人，我主导探索<strong>「语言即 UI」</strong>的交互范式，推动创作从「工具操作」转向「意图驱动」',
  paletteLabel: 'LANGUAGE IS UI',
  prompts: [
    'AI 创作里，「流程」是不是已经替代了「界面」？',
    '模型能力 → 产品形态，中间那 15 度夹角在哪里？',
    '工具操作 → 意图驱动，节点应该长什么样？',
    '模型能力 × Agent × 场景，怎么融合才不是堆砌？',
    '用户没说清楚，AI 该追问几次？怎么问？',
    'AI 生成完不是终点，下一步该怎么主动接力？',
  ],
  chips: ['图像生成', '图像编辑', '剧本帮写', '智能合拍', '视频生成'],
  stats: [
    ['AI 创作投稿规模', '+1500%', 'accent'],
    ['AI 创作用户规模', '+800%', '#fff'],
    ['AI 形象规模', '2 亿', '#fff'],
    ['项目时间', '2025 - NOW', '#fff'],
  ],
};

function HeroLangPalette({ accent, mono, zh }) {
  const META = Object.assign({}, CASE_META_DEFAULT, window.__CASE_META || {});
  const PROMPTS = META.prompts;

  const [idx, setIdx] = React.useState(0);
  const [typed, setTyped] = React.useState('');
  React.useEffect(() => {
    const full = PROMPTS[idx];let i = 0;
    const typer = setInterval(() => {
      i++;setTyped(full.slice(0, i));
      if (i >= full.length) {clearInterval(typer);setTimeout(() => setIdx((v) => (v + 1) % PROMPTS.length), 1800);}
    }, 55);
    return () => clearInterval(typer);
  }, [idx]);

  return (
    <section data-screen-label="01 Hero" style={{ position: 'relative', minHeight: '100vh', padding: '0', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      {/* grid bg */}
      <div aria-hidden style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px)', backgroundSize: '80px 80px', maskImage: 'radial-gradient(ellipse at center, black 20%, transparent 75%)' }} />
      <div aria-hidden style={{ position: 'absolute', top: '35%', left: '50%', width: 1000, height: 700, transform: 'translate(-50%,-50%)', background: `radial-gradient(ellipse, ${accent}18 0%, transparent 60%)`, pointerEvents: 'none' }} />

      <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr 240px', gap: 'clamp(20px, 2.6vw, 40px)', padding: 'clamp(110px, 9vw, 140px) clamp(20px, 2.5vw, 32px) clamp(40px, 4vw, 60px)', position: 'relative', zIndex: 2, alignItems: 'start', flex: 1 }}>
        {/* LEFT INDEX */}
        <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: '.06em', color: 'rgba(255,255,255,.5)' }}>
          <div>
            <div style={{ color: accent, fontSize: 10, letterSpacing: '.2em' }}>// INDEX</div>
            <div style={{ marginTop: 12, display: 'grid', gap: 8 }}>
              {META.indexItems.map(([n, x, a], i) =>
              <div key={i} style={{ color: a ? '#fff' : 'rgba(255,255,255,.72)', paddingLeft: 0, display: 'flex', gap: 10, textAlign: 'left' }}>
                  <span>{n}</span><span>{x}</span>
                </div>
              )}
            </div>
          </div>
          <div style={{ marginTop: 32 }}>
            <div style={{ color: accent, fontSize: 10, letterSpacing: '.2em' }}>// ROLE</div>
            <div style={{ marginTop: 10, color: 'rgba(255,255,255,.72)', lineHeight: 1.7, fontFamily: zh, letterSpacing: "0.66px", whiteSpace: 'pre-line' }}>{META.role}</div>
          </div>
          <div style={{ marginTop: 22 }}>
            <div style={{ color: accent, fontSize: 10, letterSpacing: '.2em' }}>// STACK</div>
            <div style={{ marginTop: 10, color: 'rgba(255,255,255,.72)', lineHeight: 1.9 }}>
              {META.stack.map((s, i) => <div key={i}>{s}</div>)}
            </div>
          </div>
        </div>

        {/* CENTER */}
        <div style={{ textAlign: 'center', maxWidth: 780, justifySelf: 'center', width: '100%', minWidth: 0 }}>
          <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: '.26em', color: 'rgba(255,255,255,.5)', marginBottom: 20, display: 'none' }}>———  CASE 01 / 2025 — NOW  ———</div>
          <h1 style={{ margin: '0 auto', fontSize: 'clamp(48px, 5vw, 80px)', lineHeight: 1.02, fontWeight: 500, letterSpacing: '-.03em', fontFamily: `var(--font-sans), ${zh}`, maxWidth: 710, width: '100%' }}>
            <span style={{ color: 'rgba(255,255,255,.45)' }}>{META.titleLine1a}</span> {META.titleLine1b}<br />
            <span style={{ color: 'rgba(255,255,255,.45)' }}>{META.titleLine2a}</span> <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400, background: `linear-gradient(110deg, #fff 20%, ${accent} 80%)`, WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', display: 'inline-block', paddingLeft: '.08em', paddingBottom: '.12em', marginLeft: '-.08em', marginBottom: '-.12em', lineHeight: 1.15 }}>{META.titleLine2b}</span>
          </h1>
          <p style={{ lineHeight: 1.75, color: 'rgba(255,255,255,.65)', fontFamily: zh, fontSize: "14px", fontWeight: "400", letterSpacing: "0px", margin: "26px auto 0px", textAlign: 'center' }}
             dangerouslySetInnerHTML={{ __html: META.descHtml }} />

          {/* command palette */}
          <div className="glass" style={{ marginTop: 72, borderRadius: 16, padding: 6, background: 'rgba(14,14,18,.55)', textAlign: 'left', boxShadow: `0 24px 60px -20px ${accent}22` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 18px', borderBottom: '1px solid rgba(255,255,255,.05)' }}>
              <div style={{ width: 20, height: 20, display: 'grid', placeItems: 'center', borderRadius: 5, background: accent, color: '#0a0a0a', fontWeight: 700, fontSize: 12 }}>✦</div>
              <span style={{ fontFamily: mono, fontSize: 11, color: 'rgba(255,255,255,.55)', letterSpacing: '.08em' }}>{META.paletteLabel}</span>
              <div style={{ flex: 1 }} />
              <span style={{ fontFamily: mono, fontSize: 10, color: 'rgba(255,255,255,.35)' }}>⌘K</span>
            </div>
            <div style={{ padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 12, minHeight: 64 }}>
              <span style={{ color: accent, fontFamily: mono }}>›</span>
              <span style={{ fontSize: 18, color: '#fff', fontFamily: zh }}>{typed}<span style={{ display: 'inline-block', width: 9, height: 20, background: accent, marginLeft: 2, verticalAlign: 'middle', animation: 'blink 1s infinite' }} /></span>
            </div>
            <div style={{ padding: '10px 18px 12px', display: 'flex', gap: 8, borderTop: '1px solid rgba(255,255,255,.05)' }}>
              {META.chips.map((c, i) =>
              <div key={i} style={{ fontFamily: zh, fontSize: 11, padding: '6px 12px', borderRadius: 100, border: '1px solid rgba(255,255,255,.1)', color: 'rgba(255,255,255,.75)' }}>{c}</div>
              )}
            </div>
          </div>
          <style>{`@keyframes blink { 50% { opacity: 0; } }`}</style>
        </div>

        {/* RIGHT spacer (figure removed per review) */}
        <div aria-hidden />
      </div>

      {/* BOTTOM telemetry */}
      <div style={{ marginTop: 'auto', height: 84, display: 'flex', alignItems: 'center', borderTop: '1px solid rgba(255,255,255,.08)', borderBottom: '1px solid rgba(255,255,255,.08)', background: 'rgba(0,0,0,.25)', fontFamily: mono, position: 'relative', zIndex: 2 }}>
        {META.stats.map(([k, v, c], i) => {
          const color = c === 'accent' ? accent : c;
          return (
        <div key={i} style={{ flex: 1, padding: '0 32px', borderRight: i < META.stats.length - 1 ? '1px solid rgba(255,255,255,.06)' : 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
            <span style={{ fontSize: 10.5, letterSpacing: '.18em', color: 'rgba(255,255,255,.4)', textTransform: 'uppercase', fontFamily: zh }}>{k}</span>
            <span style={{ fontSize: 26, color, letterSpacing: '-.02em', fontFamily: 'var(--font-display)', fontStyle: 'italic' }}>{v}</span>
          </div>);
        })}
      </div>
    </section>);

}

window.Nav = Nav;window.HeroLangPalette = HeroLangPalette;