// 35.style sections — part 2: BrandStory, Positioning, Services, Values, Tone, Contact, Footer

// ════════════════════════════════════════════════
// BRAND STORY — Why 35 · 黄金临界角
// ════════════════════════════════════════════════
const MEANINGS = [
  {
    idx: '01', kn: 'CRITICAL ANGLE', cn: '黄金临界角',
    body: '35° — 水流速度最优化的倾角, 也是效率与美学的交汇点。临界, 不偏不倚。',
    en: 'The angle at which water flows at peak velocity. The intersection of efficiency and beauty.',
  },
  {
    idx: '02', kn: 'SMALL · DENSE', cn: '叁五成群',
    body: '一人公司 + AI 杠杆 = 高密度协作。去中心化的创意生产, 不再需要一支部队。',
    en: 'One person, AI as leverage. The new shape of creative production — decentralized, dense.',
  },
  {
    idx: '03', kn: 'A PROMISE', cn: '35.style',
    body: '不只是域名。是我们给每一个合作品牌的承诺: 离开时, 带走一种属于自己的风格。',
    en: 'Not just a domain. A promise: every brand we touch leaves with a style of its own.',
  },
  {
    idx: '04', kn: 'TIPPING POINT', cn: '临界点',
    body: 'AIGC 爆发前 35 秒, 我们已经在场。早一步, 不止一步。',
    en: 'Thirty-five seconds before the AIGC wave broke, we were already in the water.',
  },
];

const BrandStory = () => (
  <section id="story" className="section" style={{
    borderTop: '1px solid var(--ink-5)',
  }}>
    <div className="container">
      <div className="grid-2" style={{
        display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80,
        alignItems: 'flex-start',
      }}>
        <div style={{ position: 'sticky', top: 100 }}>
          <SectionHead idx="02" en="Why 35 · 为什么是叁拾伍" italic="The thirty-fifth degree." cn="黄金临界角" />

          <blockquote style={{
            margin: '40px 0 0', padding: '20px 0 20px 24px',
            borderLeft: '2px solid var(--ink)',
            fontFamily: 'var(--display)', fontStyle: 'italic',
            fontWeight: 500, fontSize: 22, lineHeight: 1.5,
            color: 'var(--ink)',
            maxWidth: 360,
          }}>
            "35, the golden tilt — the second before everything is about to happen."
          </blockquote>

          <div style={{
            marginTop: 16,
            fontFamily: 'var(--display-cn)', fontWeight: 500,
            fontSize: 16, lineHeight: 1.85, color: 'var(--ink-2)',
            letterSpacing: '0.1em', maxWidth: 360,
          }}>35 · 黄金倾角 · 临界点 · 一切即将发生的前一秒。</div>
        </div>

        <div>
          <Mono sm ink>FOUR MEANINGS · 四重含义</Mono>
          <div style={{ marginTop: 32, display: 'grid', gap: 0 }}>
            {MEANINGS.map((m, i) => (
              <article key={m.idx} style={{
                display: 'grid', gridTemplateColumns: '64px 1fr',
                gap: 32, alignItems: 'flex-start',
                padding: '36px 0',
                borderTop: '1px solid var(--ink-5)',
                ...(i === MEANINGS.length - 1 ? { borderBottom: '1px solid var(--ink-5)' } : {}),
              }}>
                <div style={{
                  fontFamily: 'var(--display)', fontStyle: 'italic',
                  fontWeight: 500, fontSize: 36, lineHeight: 1,
                  color: 'var(--ink-3)',
                }}>{m.idx}</div>
                <div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
                    <h3 className="display-cn" style={{
                      margin: 0, fontSize: 26, fontWeight: 700,
                      color: 'var(--ink)', letterSpacing: '0.06em',
                    }}>{m.cn}</h3>
                    <Mono sm>{m.kn}</Mono>
                  </div>
                  <p style={{
                    margin: '14px 0 0',
                    fontFamily: 'var(--sans-cn)', fontWeight: 400,
                    fontSize: 15, lineHeight: 1.85,
                    color: 'var(--ink-2)',
                    letterSpacing: '0.04em',
                  }}>{m.body}</p>
                  <p style={{
                    margin: '10px 0 0',
                    fontFamily: 'var(--display)', fontStyle: 'italic',
                    fontWeight: 400, fontSize: 15, lineHeight: 1.55,
                    color: 'var(--ink-3)',
                  }}>— {m.en}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ════════════════════════════════════════════════
// POSITIONING — Three identities, one founder
// ════════════════════════════════════════════════
const POSITIONS = [
  {
    idx: '01',
    mark: '◈',
    cn: 'AIGC 内容工厂',
    en: 'AIGC · CONTENT FACTORY',
    body: '一人团队，百人产能。AI 重构内容生产流水线 — 文本、图像、视频、代码，按品牌方需求批量交付。',
    bodyEn: 'A one-person line producing at the scale of a hundred-person crew.',
  },
  {
    idx: '02',
    mark: '◉',
    cn: '数字科技研发商',
    en: 'DIGITAL R&D',
    body: '不止交付内容, 更交付能力。算法模型定制、私有化部署、AIGC 工具链搭建 — 把 AI 装进客户的核心竞争力。',
    bodyEn: "Not just outputs — capabilities. Models, pipelines, deployment.",
  },
  {
    idx: '03',
    mark: '◎',
    cn: '品牌战略伙伴',
    en: 'BRAND STRATEGY',
    body: 'IP 开发、数字营销、品牌定位与内容矩阵。AI 是杠杆, 品牌思维才是支点。',
    bodyEn: 'AI is the lever. Brand thinking is the fulcrum.',
  },
];

const Positioning = () => (
  <section className="section" style={{
    background: 'var(--paper-2)',
    borderTop: '1px solid var(--ink-5)',
    borderBottom: '1px solid var(--ink-5)',
  }}>
    <div className="container">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64 }}>
        <SectionHead idx="03" en="Positioning · 我们是谁" italic="Three modes, one founder." cn="三重身份" />
        <div style={{ textAlign: 'right', maxWidth: 280 }}>
          <Mono sm ink>OPC × AI LEVERAGE</Mono>
          <div className="display-italic" style={{
            marginTop: 10, fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.45,
          }}>One person plays three roles. AI does the rest.</div>
        </div>
      </div>

      <div className="grid-3" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
        border: '1px solid var(--ink-5)', background: 'var(--paper)',
      }}>
        {POSITIONS.map((p, i) => (
          <article key={p.idx} style={{
            padding: 40,
            borderRight: i < POSITIONS.length - 1 ? '1px solid var(--ink-5)' : 'none',
            background: 'var(--paper)',
            position: 'relative',
            transition: 'background 0.25s ease',
          }}
            onMouseEnter={e => e.currentTarget.style.background = '#DCE0E6'}
            onMouseLeave={e => e.currentTarget.style.background = 'var(--paper)'}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
            }}>
              <div style={{
                width: 44, height: 44, border: '1px solid var(--ink)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--display)', fontSize: 22, color: 'var(--ink)',
              }}>{p.mark}</div>
              <Mono sm>{p.idx} / 03</Mono>
            </div>

            <h3 className="display-cn" style={{
              margin: '40px 0 0', fontSize: 26, fontWeight: 700,
              letterSpacing: '0.05em', color: 'var(--ink)',
            }}>{p.cn}</h3>
            <Mono sm ink style={{ display: 'block', marginTop: 6 }}>{p.en}</Mono>

            <p style={{
              margin: '20px 0 0',
              fontFamily: 'var(--sans-cn)', fontSize: 14.5, lineHeight: 1.9,
              color: 'var(--ink-2)', letterSpacing: '0.04em',
            }}>{p.body}</p>

            <p style={{
              margin: '14px 0 0',
              fontFamily: 'var(--display)', fontStyle: 'italic',
              fontSize: 15, lineHeight: 1.5, color: 'var(--ink-3)',
            }}>{p.bodyEn}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

// ════════════════════════════════════════════════
// SERVICES — 6 official business scope categories
// ════════════════════════════════════════════════
const SERVICES = [
  {
    idx: '01', cn: 'AIGC 内容生产', en: 'AIGC · CONTENT',
    body: '文本、图片、音频、视频、代码的 AI 批量生产与质量管控。为品牌方、MCN、广告代理提供 AI 内容工厂解决方案。',
    tags: ['短视频生成', '微短剧制作', 'AI 图文', '多模态内容'],
  },
  {
    idx: '02', cn: 'AI 技术研发', en: 'AI · R&D',
    body: '生成式 AI 技术开发与私有化部署、算法模型优化、AIGC 工具链定制, 以及企业 AI 转型技术咨询。',
    tags: ['大模型定制', '私有部署', 'API 集成', '工作流自动化'],
  },
  {
    idx: '03', cn: '数字营销 & 品牌', en: 'BRAND · MARKETING',
    body: '全域数字营销策划、AI 驱动的广告创意生产、企业形象策划与品牌营销策略, 覆盖抖音、小红书、微信生态。',
    tags: ['全域运营', 'AI 广告创意', '品牌策划', '数字营销'],
  },
  {
    idx: '04', cn: '影视后期 & 动漫', en: 'FILM · ANIMATION',
    body: 'AI 影视后期制作、动漫设计、数字图形图像处理, 以及 AIGC 视频生成全流程制作服务。',
    tags: ['AI 视频制作', '动漫设计', '影视后期', '4K 修复'],
  },
  {
    idx: '05', cn: 'VR / AR / MR & 元宇宙', en: 'XR · METAVERSE',
    body: '虚拟现实技术开发与应用、沉浸式数字体验设计、元宇宙内容开发, 连接现实与虚拟世界的体验界面。',
    tags: ['虚拟体验', '空间计算', '沉浸式内容', '元宇宙'],
  },
  {
    idx: '06', cn: 'IP 开发 & 文化内容', en: 'IP · EDITORIAL',
    body: 'IP 开发、授权、运营及衍生品管理, 网络文化内容策划与运营, 自有知识产权技术及产品进出口。',
    tags: ['IP 运营', '衍生品', '文化策划', '知识产权'],
  },
];

const Services = () => (
  <section id="services" className="section">
    <div className="container">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64 }}>
        <SectionHead idx="04" en="Services · 经营范围" italic="What the studio does." cn="六项业务" />
        <div style={{ textAlign: 'right', maxWidth: 280 }}>
          <Mono sm ink>SHENZHEN · GONGSHANG REG.</Mono>
          <div className="display-italic" style={{
            marginTop: 10, fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.5,
          }}>
            Six categories. One pair of hands.<br />
            Six 项业务范围 · 一双手交付。
          </div>
        </div>
      </div>

      <div className="grid-2" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
        border: '1px solid var(--ink-5)',
      }}>
        {SERVICES.map((s, i) => (
          <article key={s.idx} style={{
            padding: 42,
            background: 'var(--paper)',
            borderRight: i % 2 === 0 ? '1px solid var(--ink-5)' : 'none',
            borderBottom: i < 4 ? '1px solid var(--ink-5)' : 'none',
            display: 'grid', gridTemplateColumns: '72px 1fr', gap: 24,
            transition: 'background 0.2s ease',
          }}
            onMouseEnter={e => e.currentTarget.style.background = '#DCE0E6'}
            onMouseLeave={e => e.currentTarget.style.background = 'var(--paper)'}>
            <div style={{
              fontFamily: 'var(--display)', fontStyle: 'italic',
              fontWeight: 500, fontSize: 56, lineHeight: 0.9,
              color: 'var(--ink-4)',
            }}>{s.idx}</div>

            <div>
              <Mono sm ink>{s.en}</Mono>
              <h3 className="display-cn" style={{
                margin: '6px 0 0', fontSize: 26, fontWeight: 700,
                color: 'var(--ink)', letterSpacing: '0.06em',
              }}>{s.cn}</h3>

              <p style={{
                margin: '16px 0 0',
                fontFamily: 'var(--sans-cn)', fontSize: 14, lineHeight: 1.85,
                color: 'var(--ink-2)', letterSpacing: '0.04em',
              }}>{s.body}</p>

              <div style={{ marginTop: 20, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {s.tags.map(t => (
                  <span key={t} style={{
                    padding: '5px 10px',
                    border: '1px solid var(--ink-5)',
                    fontFamily: 'var(--mono)',
                    fontSize: 10, letterSpacing: '0.15em',
                    color: 'var(--ink-2)',
                  }}>{t}</span>
                ))}
              </div>
            </div>
          </article>
        ))}
      </div>

      {/* footnote — small print of official scope */}
      <div style={{
        marginTop: 32, padding: '20px 24px',
        background: 'var(--paper-2)',
        border: '1px solid var(--ink-5)',
      }}>
        <Mono sm ink>OFFICIAL SCOPE · 工商登记经营范围</Mono>
        <p style={{
          margin: '8px 0 0',
          fontFamily: 'var(--sans-cn)', fontSize: 12.5, lineHeight: 1.85,
          color: 'var(--ink-3)', letterSpacing: '0.04em',
        }}>
          一般经营项目: 数字内容制作服务 (不含出版发行) · 软件开发 · 信息技术咨询服务 ·
          人工智能基础软件开发 · 人工智能应用软件开发 · 网络与信息安全软件开发 ·
          动漫游戏开发 · 数字视频特效制作服务 · 虚拟现实设备制造 ·
          VR/AR/MR 内容开发 · 元宇宙相关技术开发 ·
          企业形象策划 · 品牌管理 · 广告设计代理 ·
          知识产权服务 (除专利代理) · 信息咨询服务。
        </p>
      </div>
    </div>
  </section>
);

// ════════════════════════════════════════════════
// VALUES — Four brand values
// ════════════════════════════════════════════════
const VALUES = [
  {
    idx: '01', cn: '原生 AI 思维', en: 'AI-NATIVE',
    body: '不是在传统流程上贴 AI 标签, 而是从 AI 原生出发重新设计每一个业务节点。工具变了, 思维必须先变。',
    bodyEn: 'Tools changed. Thinking changes first.',
  },
  {
    idx: '02', cn: '审美即竞争力', en: 'TASTE IS THE MOAT',
    body: '当 AI 把生产门槛降到零, 审美判断力成为最稀缺的壁垒。我们不生产平庸内容, 只做有风格的作品。',
    bodyEn: 'When AI removes the floor, taste becomes the only ceiling.',
  },
  {
    idx: '03', cn: '速度 × 质量', en: 'SPEED × QUALITY',
    body: 'AIGC 时代, 慢即淘汰。我们用系统化的工作流, 实现传统团队 10 倍的产出速度, 同时不妥协品质。',
    bodyEn: 'Slow is over. We ship at 10×, without trading taste.',
  },
  {
    idx: '04', cn: '深圳基因', en: 'SHENZHEN DNA',
    body: '扎根深圳龙岗, 面向全球。实用主义、快速迭代、敢想敢做 — 这是我们的城市基因, 也是我们的工作方式。',
    bodyEn: 'Pragmatic. Iterative. Built in Longgang.',
  },
];

const Values = () => (
  <section className="section" style={{
    background: 'var(--paper-2)',
    borderTop: '1px solid var(--ink-5)', borderBottom: '1px solid var(--ink-5)',
  }}>
    <div className="container">
      <SectionHead idx="06" en="Values · 价值观" italic="The four constants." cn="四项准则" align="left" />

      <div className="grid-4" style={{
        marginTop: 64,
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32,
      }}>
        {VALUES.map((v) => (
          <div key={v.idx} style={{ position: 'relative' }}>
            <div className="display-italic" style={{
              fontSize: 72, lineHeight: 0.9,
              color: 'var(--ink-4)',
            }}>{v.idx}</div>

            <Mono sm ink style={{ display: 'block', marginTop: 18 }}>{v.en}</Mono>

            <h3 className="display-cn" style={{
              margin: '4px 0 0', fontSize: 24, fontWeight: 700,
              color: 'var(--ink)', letterSpacing: '0.06em',
            }}>{v.cn}</h3>

            <p style={{
              margin: '18px 0 0',
              fontFamily: 'var(--sans-cn)', fontSize: 13.5, lineHeight: 1.85,
              color: 'var(--ink-2)', letterSpacing: '0.04em',
            }}>{v.body}</p>

            <p style={{
              margin: '14px 0 0',
              fontFamily: 'var(--display)', fontStyle: 'italic',
              fontSize: 14, lineHeight: 1.5, color: 'var(--ink-3)',
            }}>— {v.bodyEn}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ════════════════════════════════════════════════
// TONE — Voice rules · what we don't say · slogans
// ════════════════════════════════════════════════
const Tone = () => (
  <section className="section">
    <div className="container">
      <SectionHead idx="07" en="Voice · 调性" italic="How we sound." cn="语言与立场" align="left" />

      <div className="grid-2" style={{
        marginTop: 64,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32,
      }}>
        {/* WHAT WE SAY */}
        <div style={{ padding: 36, border: '1px solid var(--ink)', background: 'var(--paper)' }}>
          <Mono sm ink>WHAT WE SAY · 说</Mono>
          <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'grid', gap: 18 }}>
            {[
              ['简洁有力 · 不说废话',     'Every line earns its space.'],
              ['技术自信 · 不卖焦虑',     "Show capability. Don't sell fear."],
              ['有立场 · 有美感',         'A point of view, with taste.'],
              ['中文优先 · 无缝双语',     'CN-first, EN-fluent.'],
              ['克制的未来感',           'Restrained futurism.'],
            ].map(([cn, en]) => (
              <li key={en} style={{ display: 'grid', gridTemplateColumns: '20px 1fr', gap: 12 }}>
                <span style={{ color: 'var(--ink-3)' }}>—</span>
                <div>
                  <div style={{
                    fontFamily: 'var(--display-cn)', fontWeight: 500,
                    fontSize: 15, color: 'var(--ink)', letterSpacing: '0.06em',
                  }}>{cn}</div>
                  <div style={{
                    marginTop: 2,
                    fontFamily: 'var(--display)', fontStyle: 'italic',
                    fontSize: 14, color: 'var(--ink-3)',
                  }}>{en}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>

        {/* WHAT WE DON'T SAY */}
        <div style={{ padding: 36, border: '1px solid var(--ink-5)', background: 'var(--paper-2)' }}>
          <Mono sm ink>WHAT WE DON'T SAY · 不说</Mono>
          <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'grid', gap: 18 }}>
            {[
              ['"赋能" "生态" "矩阵"',     'Tired internet vocabulary.'],
              ['"颠覆" "革命"',            "We do specific things, not slogans."],
              ['"一站式" "全方位"',        'Vague = nothing said.'],
              ['过度堆砌技术名词',         "Don't make outsiders feel locked out."],
              ['不必要的英文术语',         'No buzzword cosplay.'],
            ].map(([cn, en]) => (
              <li key={en} style={{ display: 'grid', gridTemplateColumns: '20px 1fr', gap: 12 }}>
                <span style={{ color: 'var(--ink-4)', textDecoration: 'line-through' }}>×</span>
                <div>
                  <div style={{
                    fontFamily: 'var(--display-cn)', fontWeight: 400,
                    fontSize: 15, color: 'var(--ink-2)', letterSpacing: '0.06em',
                  }}>{cn}</div>
                  <div style={{
                    marginTop: 2,
                    fontFamily: 'var(--display)', fontStyle: 'italic',
                    fontSize: 14, color: 'var(--ink-3)',
                  }}>{en}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* SLOGAN SYSTEM */}
      <div style={{
        marginTop: 32,
        padding: 56,
        background: 'var(--void)',
        color: 'var(--paper)',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <div className="seigaiha-dark" style={{
          position: 'absolute', inset: 0, opacity: 0.55, pointerEvents: 'none',
        }} />
        <div style={{ position: 'relative' }}>
          <Mono sm style={{ color: 'var(--gold-2)' }}>SLOGAN SYSTEM · 标语系统</Mono>

          <div style={{
            marginTop: 32,
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 56,
          }}>
            {[
              { tag: 'MASTER · 主 SLOGAN',  cn: '生成未来 · 定义风格',           en: 'Generate the Future. Define the Style.' },
              { tag: 'BRAND LINE',          cn: 'AIGC 原生 · 内容新纪元',        en: 'AIGC-native. A new era of content.' },
              { tag: 'TECH LINE',           cn: '算法即创意 · 模型即生产力',     en: 'Algorithms are ideas. Models are production.' },
              { tag: 'DOMAIN CLAIM',        cn: '35.style — 有风格的 AI 公司',   en: '35.style — the AI company with style.' },
            ].map((s, i) => (
              <div key={i} style={{ borderTop: '1px solid rgba(245,245,240,0.15)', paddingTop: 20 }}>
                <Mono sm style={{ color: 'var(--gold-2)' }}>{s.tag}</Mono>
                <div className="display-cn" style={{
                  marginTop: 12, fontSize: 26, fontWeight: 700,
                  color: 'var(--paper)', letterSpacing: '0.06em',
                }}>{s.cn}</div>
                <div className="display-italic" style={{
                  marginTop: 8, fontSize: 17, color: 'var(--void-text-2)',
                }}>— {s.en}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ════════════════════════════════════════════════
// CONTACT — Slogan CTA with chrome 35 specimen
// ════════════════════════════════════════════════
const Contact = () => (
  <section id="contact" style={{
    background: 'var(--void)', color: 'var(--paper)',
    padding: '140px 0', position: 'relative', overflow: 'hidden',
    borderTop: '1px solid var(--ink-5)',
  }}>
    <div className="seigaiha-dark" style={{
      position: 'absolute', inset: 0, opacity: 0.45, pointerEvents: 'none',
    }} />

    {/* gigantic ghost 35 behind */}
    <div style={{
      position: 'absolute', top: '50%', left: '50%',
      transform: 'translate(-50%, -50%) scale(1.22, 0.82)',
      fontFamily: 'var(--bebas)', fontSize: 'clamp(360px, 56vw, 920px)',
      lineHeight: 0.82, letterSpacing: '-0.02em',
      color: 'transparent',
      WebkitTextStroke: '1px rgba(245,245,240,0.05)',
      pointerEvents: 'none',
    }}>35</div>

    <Cross onVoid style={{ position: 'absolute', top: 36, left: 56 }} />
    <Cross onVoid style={{ position: 'absolute', top: 36, right: 56 }} />
    <Cross onVoid style={{ position: 'absolute', bottom: 36, left: 56 }} />
    <Cross onVoid style={{ position: 'absolute', bottom: 36, right: 56 }} />

    <div className="container" style={{ position: 'relative', textAlign: 'center' }}>
      <Mono sm style={{ color: 'var(--gold-2)' }}>● CONTACT · 准备好了吗</Mono>

      <h2 className="display-italic" style={{
        margin: '32px 0 0',
        fontSize: 'clamp(72px, 9vw, 156px)',
        lineHeight: 0.95, letterSpacing: '-0.02em',
        color: 'var(--paper)',
        textWrap: 'balance',
      }}>
        Generate the future.<br />
        <span style={{ color: 'var(--void-text-2)' }}>Define the style.</span>
      </h2>

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

      <p style={{
        margin: '40px auto 0', maxWidth: 580,
        fontFamily: 'var(--display)', fontStyle: 'italic',
        fontWeight: 400, fontSize: 19, lineHeight: 1.55,
        color: 'var(--void-text)',
      }}>
        AIGC content production. AI tool-chain build-out. Brand transformation
        for the new content era. 35, in the new era — running ahead, on purpose.
      </p>

      <div style={{
        marginTop: 48, display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap',
      }}>
        <a href="mailto:hello@35.style" className="btn-ink" style={{
          background: 'var(--paper)', color: 'var(--ink)',
        }}>
          <span>HELLO@35.STYLE</span>
          <span style={{ fontSize: 14 }}>→</span>
        </a>
        <a href="https://35.style" target="_blank" rel="noopener" style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          padding: '13px 21px',
          background: 'transparent', color: 'var(--paper)',
          border: '1px solid rgba(245,245,240,0.4)',
          fontFamily: 'var(--mono)', fontSize: 11,
          letterSpacing: '0.24em', textTransform: 'uppercase',
        }}>
          <span>访问官网 · 35.STYLE</span>
        </a>
      </div>

      {/* contact strip */}
      <div style={{
        marginTop: 80, paddingTop: 36,
        borderTop: '1px solid rgba(245,245,240,0.15)',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32,
        textAlign: 'left', maxWidth: 980, margin: '80px auto 0',
      }} className="grid-4">
        {[
          ['EMAIL', 'hello@35.style', '项目 / 合作 / 媒体'],
          ['ADDRESS', '深圳市龙岗区 · 创投大厦', 'NO.X CHUANGTOU TOWER · LONGGANG'],
          ['DOMAIN', '35.style', '一切对外的入口'],
          ['HOURS', '工作日 · 10:00 — 19:00', 'GMT+8 · MON—FRI'],
        ].map(([k, v, sub]) => (
          <div key={k}>
            <Mono sm style={{ color: 'var(--gold-2)' }}>{k}</Mono>
            <div className="display-cn" style={{
              marginTop: 10, fontSize: 18, fontWeight: 500,
              color: 'var(--paper)', letterSpacing: '0.04em',
            }}>{v}</div>
            <Mono sm style={{ display: 'block', marginTop: 6, color: 'var(--void-text-2)' }}>{sub}</Mono>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ════════════════════════════════════════════════
// FOOTER
// ════════════════════════════════════════════════
const Footer = () => (
  <footer style={{
    padding: '48px 0 32px',
    borderTop: '1px solid var(--ink-5)',
    background: 'var(--paper)',
  }}>
    <div className="container">
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 16,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
          <WordMark size={16} />
          <div style={{ width: 1, height: 18, background: 'var(--ink-5)' }} />
          <div style={{
            fontFamily: 'var(--display-cn)', fontWeight: 500,
            fontSize: 13, color: 'var(--ink-2)',
          }}>叁拾伍（深圳）数字科技有限公司</div>
        </div>
        <Mono sm>© MMXXVI · 35.STYLE · BUILT IN LONGGANG</Mono>
      </div>

      <div style={{
        marginTop: 18, display: 'flex', justifyContent: 'space-between',
        flexWrap: 'wrap', gap: 12,
      }}>
        <Mono sm>粤 ICP 备 2025XXXXXXX 号</Mono>
        <Mono sm>深圳市龙岗区 · 创投大厦</Mono>
        <Mono sm gold>● ACCEPTING SS27 · 2 SLOTS LEFT</Mono>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  BrandStory, MEANINGS,
  Positioning, POSITIONS,
  Services, SERVICES,
  Values, VALUES,
  Tone,
  Contact, Footer,
});
