// 35.style sections — part 1: NavBar, Hero, Now, Work

// ════════════════════════════════════════════════
// NAVBAR — light, minimal, sticky
// ════════════════════════════════════════════════
const NavBar = () => (
  <header style={{
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    background: 'rgba(199,204,212,0.62)',
    backdropFilter: 'blur(20px) saturate(150%)',
    WebkitBackdropFilter: 'blur(20px) saturate(150%)',
    borderBottom: '1px solid rgba(255,255,255,0.32)',
    boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.45), 0 1px 0 rgba(20,22,28,0.06)',
  }}>
    <div className="container" style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      height: 72,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <WordMark size={18} />
        <div className="nav-hide-md" style={{ width: 1, height: 16, background: 'var(--ink-5)', marginLeft: 6 }} />
        <span className="nav-hide-md" style={{
          fontFamily: 'var(--display)', fontStyle: 'italic',
          fontSize: 13, color: 'var(--ink-3)',
        }}>One-person studio</span>
      </div>

      <nav style={{ display: 'flex', gap: 32 }}>
        {[
          ['故事', 'Story',    '#story'],
          ['业务', 'Services', '#services'],
          ['当前', 'Now',      '#now'],
          ['作品', 'Work',     '#work'],
          ['联系', 'Contact',  '#contact'],
        ].map(([cn, en, href]) => (
          <a key={en} href={href} className="nav-link" style={{
            display: 'inline-flex', alignItems: 'baseline', gap: 6,
            fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 500,
          }}>
            <span>{en}</span>
            <span className="nav-hide-md" style={{
              fontFamily: 'var(--display-cn)', fontSize: 11,
              color: 'var(--ink-3)', fontWeight: 400,
            }}>{cn}</span>
          </a>
        ))}
      </nav>

      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <span className="pill nav-hide-md">
          <span className="pill-dot live" />
          <span>OPEN · SS27 · 2 SLOTS</span>
        </span>
        <a href="#contact" className="btn-ink" style={{ padding: '10px 16px', fontSize: 10 }}>
          <span>预约对话</span>
        </a>
      </div>
    </div>
  </header>
);

// ════════════════════════════════════════════════
// HERO — editorial magazine-cover split
// LEFT: italic display headline + intro
// RIGHT: dark "specimen" panel showing the chrome 35 logo
// ════════════════════════════════════════════════
const Hero = () => (
  <section style={{
    position: 'relative',
    paddingTop: 152, paddingBottom: 80,
    minHeight: '100vh',
    display: 'flex', alignItems: 'center',
  }}>
    {/* corner marks */}
    <div className="container" style={{
      position: 'absolute', top: 92, left: 0, right: 0,
      display: 'flex', justifyContent: 'space-between',
    }}>
      <Cross />
      <Cross />
    </div>

    <div className="container" style={{ width: '100%' }}>
      {/* masthead — Vol / Issue style */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        paddingBottom: 28, borderBottom: '1px solid var(--ink)',
      }}>
        <div>
          <Mono sm ink>VOL. 35 · NO. 01</Mono>
          <Mono sm style={{ display: 'block', marginTop: 4 }}>SPRING / SUMMER · MMXXVI</Mono>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{
            fontFamily: 'var(--display)', fontStyle: 'italic',
            fontWeight: 500, fontSize: 18, color: 'var(--ink)',
          }}>The Studio Quarterly</div>
          <Mono sm style={{ display: 'block', marginTop: 4 }}>EST. 2024 · LONGGANG · 龙岗</Mono>
        </div>
        <div style={{ textAlign: 'right' }}>
          <Mono sm ink>35.STYLE</Mono>
          <Mono sm style={{ display: 'block', marginTop: 4 }}>¥ 0.00 · COMPLIMENTARY</Mono>
        </div>
      </div>

      {/* main grid */}
      <div className="grid-2" style={{
        marginTop: 72,
        display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 64,
        alignItems: 'center',
      }}>
        {/* LEFT — editorial cover */}
        <div>
          <span className="pill">
            <span className="pill-dot live" />
            <span>AIGC NATIVE · OPC · 一人公司</span>
          </span>

          <h1 className="display-italic" style={{
            margin: '32px 0 0',
            fontSize: 'clamp(60px, 7.6vw, 132px)',
            lineHeight: 0.94,
            letterSpacing: '-0.025em',
            color: 'var(--ink)',
            textWrap: 'balance',
          }}>
            Generate<br />
            the future.<br />
            <span style={{ color: 'var(--ink-2)' }}>Define the style.</span>
          </h1>

          <div className="display-cn" style={{
            marginTop: 28,
            fontSize: 30, fontWeight: 700,
            color: 'var(--ink)',
            letterSpacing: '0.1em',
          }}>生成未来 · 定义风格</div>

          {/* lede */}
          <div style={{
            marginTop: 36, maxWidth: 540,
            fontFamily: 'var(--display)', fontStyle: 'italic',
            fontWeight: 400, fontSize: 19, lineHeight: 1.55,
            color: 'var(--ink-2)',
            letterSpacing: '0.005em',
          }}>
            <DropCap letter="A" />
            n AIGC-native digital studio in Shenzhen Longgang.
            One founder, one taste, one hundred-person output —
            AI is the leverage, style is the point. 35.style is
            a promise: every brand we touch leaves with one of its own.
          </div>

          <div style={{
            marginTop: 18, maxWidth: 540,
            fontFamily: 'var(--display-cn)', fontWeight: 400,
            fontSize: 15, lineHeight: 1.9, color: 'var(--ink-3)',
            letterSpacing: '0.04em',
          }}>
            叁拾伍 — 一家以 AIGC 为原生杠杆的一人公司。
            一个主理人 · 一套审美 · 百人级产能。
            技术是手段，风格才是目的。
          </div>

          <div style={{ marginTop: 36, display: 'flex', gap: 14, alignItems: 'center' }}>
            <a href="#work" className="btn-ink">
              <span>查看作品</span>
              <span style={{ fontSize: 13 }}>→</span>
            </a>
            <a href="#contact" className="btn-outline">
              <span>开始对话</span>
            </a>
          </div>

          {/* small founder line */}
          <div style={{ marginTop: 56, display: 'flex', alignItems: 'center', gap: 14 }}>
            <div className="ph" data-label="FOUNDER" style={{
              width: 48, height: 48, borderRadius: '50%', flexShrink: 0,
            }} />
            <div>
              <Mono sm>FOUNDER · 主理人</Mono>
              <div style={{
                fontFamily: 'var(--display)', fontStyle: 'italic',
                fontSize: 18, fontWeight: 500, color: 'var(--ink)',
                marginTop: 2,
              }}>L. Chen · 陈某</div>
            </div>
            <div style={{ width: 1, height: 32, background: 'var(--ink-5)', marginLeft: 16 }} />
            <div>
              <Mono sm>EST.</Mono>
              <div style={{ marginTop: 2, fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 500 }}>2024</div>
            </div>
            <div style={{ width: 1, height: 32, background: 'var(--ink-5)' }} />
            <div>
              <Mono sm>STUDIO</Mono>
              <div style={{ marginTop: 2, fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 500 }}>1</div>
            </div>
          </div>
        </div>

        {/* RIGHT — chrome 35 specimen on void */}
        <div style={{
          position: 'relative',
          aspectRatio: '4/5',
          background: 'var(--void)',
          overflow: 'hidden',
        }} className="seigaiha-dark">
          <Cross onVoid style={{ position: 'absolute', top: 16, left: 16 }} />
          <Cross onVoid style={{ position: 'absolute', top: 16, right: 16 }} />
          <Cross onVoid style={{ position: 'absolute', bottom: 16, left: 16 }} />
          <Cross onVoid style={{ position: 'absolute', bottom: 16, right: 16 }} />

          {/* top meta */}
          <div style={{
            position: 'absolute', top: 24, left: 0, right: 0,
            display: 'flex', justifyContent: 'space-between',
            padding: '0 32px',
          }}>
            <Mono sm onVoid>BRAND MARK · CHROME</Mono>
            <Mono sm style={{ color: 'var(--gold-2)' }}>SPECIMEN · 01</Mono>
          </div>

          {/* centered mark */}
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Mark35 size={300} />
          </div>

          {/* bottom meta */}
          <div style={{
            position: 'absolute', bottom: 24, left: 0, right: 0,
            display: 'flex', justifyContent: 'space-between',
            padding: '0 32px', alignItems: 'flex-end',
          }}>
            <div>
              <Mono sm onVoid>SEIGAIHA · INLAID</Mono>
              <Mono sm onVoid style={{ display: 'block', marginTop: 4 }}>
                BEBAS NEUE · 135° CHROME GRADIENT
              </Mono>
            </div>
            <Mono sm style={{ color: 'var(--gold-2)' }}>叁拾伍 · 35</Mono>
          </div>
        </div>
      </div>

      {/* bottom strip — running keywords */}
      <div style={{
        marginTop: 80,
        paddingTop: 22, paddingBottom: 4,
        borderTop: '1px solid var(--ink)',
        display: 'flex', justifyContent: 'space-between',
        gap: 18,
      }}>
        {[
          ['品牌', 'BRAND'],
          ['识别', 'IDENTITY'],
          ['策略', 'STRATEGY'],
          ['内容', 'CONTENT'],
          ['顾问', 'ADVISORY'],
          ['出版', 'EDITORIAL'],
        ].map(([cn, en]) => (
          <div key={en}>
            <Mono sm ink>{en}</Mono>
            <div style={{
              marginTop: 4,
              fontFamily: 'var(--display-cn)', fontSize: 13,
              color: 'var(--ink-3)', letterSpacing: '0.12em',
            }}>{cn}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ════════════════════════════════════════════════
// NOW — "currently" page — personal OPC signal
// ════════════════════════════════════════════════
const NowSection = () => (
  <section id="now" className="section" style={{
    background: 'var(--paper-2)',
    borderTop: '1px solid var(--ink-5)',
    borderBottom: '1px solid var(--ink-5)',
  }}>
    <div className="container">
      <div className="grid-2" style={{
        display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 80,
        alignItems: 'flex-start',
      }}>
        <div style={{ position: 'sticky', top: 100 }}>
          <SectionHead idx="01" en="Now · 当前" italic="Currently." cn="正在进行" />
          <div style={{ marginTop: 28 }}>
            <Mono sm>UPDATED · 2026.05.12</Mono>
          </div>
          <div style={{
            marginTop: 40, padding: 18,
            background: 'var(--paper)',
            border: '1px solid var(--ink-5)',
            maxWidth: 320,
          }}>
            <Mono sm gold>● ANNUAL CADENCE</Mono>
            <div style={{
              marginTop: 10,
              fontFamily: 'var(--display)', fontStyle: 'italic',
              fontWeight: 500, fontSize: 22, color: 'var(--ink)',
              lineHeight: 1.25,
            }}>Four projects per year.<br />Two slots left for SS27.</div>
            <div style={{
              marginTop: 12,
              fontFamily: 'var(--display-cn)', fontSize: 13,
              color: 'var(--ink-2)', letterSpacing: '0.1em', lineHeight: 1.8,
            }}>每年四个项目 · SS27 还余两席。</div>
          </div>
        </div>

        <div>
          <div style={{ display: 'grid', gap: 0 }}>
            {[
              {
                idx: '01',
                kn: 'WORKING ON',
                cn: '正在做',
                title: 'Brand system for a 龙岗-based fragrance label',
                titleCn: '为本地小众香水品牌做完整识别系统',
                meta: 'SS26 · Phase 03 / 04 · Identity + Pack',
              },
              {
                idx: '02',
                kn: 'AVAILABLE FOR',
                cn: '可承接',
                title: 'Two strategic engagements for SS27',
                titleCn: 'SS27 季度还可承接两个项目',
                meta: 'Brand · Identity · Editorial · 12 weeks min.',
              },
              {
                idx: '03',
                kn: 'READING',
                cn: '正在读',
                title: 'Phaidon · The Index Book of Independent Studios',
                titleCn: '《独立工作室索引》· Phaidon 2024',
                meta: 'Slow. Underlined. Margin notes.',
              },
              {
                idx: '04',
                kn: 'WRITING',
                cn: '正在写',
                title: 'An essay on quiet luxury in Chinese vernacular brands',
                titleCn: '一篇关于中国本土品牌静奢风的随笔',
                meta: 'Drops in Notes · No. 12 · 06.2026',
              },
              {
                idx: '05',
                kn: 'LOCATED IN',
                cn: '当前所在',
                title: '深圳市龙岗区 · 创投大厦',
                titleCn: 'CHUANGTOU TOWER · LONGGANG · SZ',
                meta: '22.7197° N · 114.2462° E',
              },
            ].map((it, i) => (
              <article key={it.idx} style={{
                display: 'grid', gridTemplateColumns: '60px 180px 1fr',
                gap: 24, alignItems: 'flex-start',
                padding: '32px 0',
                borderTop: '1px solid var(--ink-5)',
                ...(i === 4 ? { borderBottom: '1px solid var(--ink-5)' } : {}),
              }}>
                <div style={{
                  fontFamily: 'var(--display)', fontStyle: 'italic',
                  fontWeight: 500, fontSize: 22, color: 'var(--ink-3)',
                }}>{it.idx}</div>
                <div>
                  <Mono sm ink>{it.kn}</Mono>
                  <div className="display-cn" style={{
                    marginTop: 4, fontSize: 14,
                    color: 'var(--ink-3)', fontWeight: 400,
                    letterSpacing: '0.12em',
                  }}>{it.cn}</div>
                </div>
                <div>
                  <div className="display-italic" style={{
                    fontSize: 26, color: 'var(--ink)',
                    letterSpacing: '-0.005em',
                    textWrap: 'balance',
                  }}>{it.title}</div>
                  <div style={{
                    marginTop: 8,
                    fontFamily: 'var(--display-cn)', fontWeight: 400,
                    fontSize: 14, color: 'var(--ink-2)',
                    letterSpacing: '0.06em', lineHeight: 1.7,
                  }}>{it.titleCn}</div>
                  <Mono sm style={{ display: 'block', marginTop: 12 }}>{it.meta}</Mono>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ════════════════════════════════════════════════
// WORK — selected projects, asymmetric layout
// ════════════════════════════════════════════════
const WORK = [
  {
    idx: '— 001',
    client: 'Atelier Mu',
    clientCn: '幕 · 香氛工作室',
    project: 'A complete identity for a 龙岗 indie fragrance house.',
    discipline: 'Brand · Identity · Pack',
    year: '2026 · SS',
    side: 'right',
  },
  {
    idx: '— 002',
    client: 'Hou & Shen',
    clientCn: '后 · 申 律师事务所',
    project: 'Editorial system for a corporate law boutique.',
    discipline: 'Identity · Editorial · Web',
    year: '2025 · AW',
    side: 'left',
  },
  {
    idx: '— 003',
    client: '叁拾伍 House',
    clientCn: '叁拾伍 居',
    project: 'Self-initiated print quarterly. Issue 01–04.',
    discipline: 'Editorial · Print · Publishing',
    year: '2024 — ',
    side: 'right',
  },
  {
    idx: '— 004',
    client: 'Yán Studio',
    clientCn: '岩 · 设计研究室',
    project: 'Brand strategy + digital surfaces for a stone+wood furniture maker.',
    discipline: 'Strategy · Identity · Web',
    year: '2025 · SS',
    side: 'left',
  },
];

const WorkSection = () => (
  <section id="work" className="section">
    <div className="container">
      <div style={{
        display: 'flex', justifyContent: 'space-between',
        alignItems: 'flex-end', marginBottom: 80,
      }}>
        <SectionHead idx="02" en="Selected · 精选" italic="Recent work." cn="近期作品" />
        <div style={{ textAlign: 'right' }}>
          <Mono sm ink>2024 — 2026</Mono>
          <div className="display-italic" style={{
            marginTop: 6, fontSize: 16, color: 'var(--ink-2)',
          }}>Twelve projects, four selected.</div>
        </div>
      </div>

      <div style={{ display: 'grid', gap: 96 }}>
        {WORK.map((w, i) => (
          <article key={w.idx} className="grid-2" style={{
            display: 'grid',
            gridTemplateColumns: w.side === 'right' ? '0.9fr 1.3fr' : '1.3fr 0.9fr',
            gap: 56, alignItems: 'center',
          }}>
            {/* text */}
            <div style={{ order: w.side === 'right' ? 1 : 2 }}>
              <Mono sm ink>{w.idx} · {w.discipline}</Mono>
              <h3 className="display-italic" style={{
                margin: '20px 0 0',
                fontSize: 'clamp(40px, 4vw, 64px)',
                color: 'var(--ink)', lineHeight: 1, letterSpacing: '-0.015em',
              }}>{w.client}</h3>
              <div className="display-cn" style={{
                marginTop: 12, fontSize: 20, color: 'var(--ink-2)',
                letterSpacing: '0.1em', fontWeight: 500,
              }}>{w.clientCn}</div>

              <p style={{
                marginTop: 24, maxWidth: 380,
                fontFamily: 'var(--display)', fontStyle: 'italic',
                fontWeight: 400, fontSize: 18, lineHeight: 1.55,
                color: 'var(--ink-2)',
              }}>{w.project}</p>

              <div style={{
                marginTop: 28, display: 'flex', justifyContent: 'space-between',
                alignItems: 'center', maxWidth: 380,
                paddingTop: 14, borderTop: '1px solid var(--ink-5)',
              }}>
                <Mono sm>{w.year}</Mono>
                <a href="#" className="link-underline" style={{
                  fontFamily: 'var(--mono)', fontSize: 11,
                  letterSpacing: '0.24em', textTransform: 'uppercase',
                  color: 'var(--ink)',
                }}>VIEW CASE → </a>
              </div>
            </div>

            {/* image placeholder */}
            <div style={{ order: w.side === 'right' ? 2 : 1 }}>
              <div className="ph" data-label={`${w.client.toUpperCase()} · ${w.discipline.toUpperCase()}`} style={{
                width: '100%',
                aspectRatio: '4/5',
              }} />
            </div>
          </article>
        ))}
      </div>

      <div style={{ marginTop: 80, textAlign: 'center' }}>
        <a href="#" className="btn-outline">
          <span>所有项目 · ALL WORK</span>
          <span style={{ fontSize: 14 }}>→</span>
        </a>
      </div>
    </div>
  </section>
);

Object.assign(window, { NavBar, Hero, NowSection, WorkSection, WORK });