// website.jsx — 童画屋 official website

// Reuses Artwork + Logo components loaded earlier.
// Note: art.jsx exposes window.C / window.SERIF / window.SANS used by Artwork,
// but we don't need those colors here — website has its own CSS vars.

function Nav() {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#top" style={{display:'flex', alignItems:'center', gap: 12}}>
          <LogoWordmark height={28}/>
        </a>
        <div className="nav-links">
          <a href="#story">理念</a>
          <a href="#features">功能</a>
          <a href="#museum">数字展馆</a>
          <a href="#ai">AI 观察</a>
          <a href="/tonghuawu/privacy/">隐私</a>
          <a href="/tonghuawu/support/">支持</a>
          <a href="#download">下载</a>
        </div>
        <a href="#download" className="nav-cta">下载 App</a>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="eyebrow">A QUIET MUSEUM · FOR ONE CHILD</div>
        <h1 className="h1 reveal is-visible">
          记录她每一幅画，<br/>
          也<em>记录她<span className="mobile-break"></span>正在长大</em>。
        </h1>
        <p className="lede">
          童画屋是一座为孩子建立的、长期的数字艺术馆。<br/>
          每一幅画都有它的日期、故事、声音，与她自己。
        </p>
        <div className="hero-cta">
          <a href="#download" className="btn btn-primary">
            <svg width="14" height="16" viewBox="0 0 14 16" fill="currentColor"><path d="M10.4 8.5c0-1.8 1.5-2.7 1.6-2.7-.9-1.2-2.2-1.4-2.7-1.5-1.1-.1-2.2.7-2.8.7-.6 0-1.5-.7-2.5-.7C2.6 4.3 1 5.3.2 7c-1.4 2.4-.4 6 1 8 .7 1 1.5 2 2.5 2 1 0 1.4-.7 2.6-.7s1.5.7 2.6.7c1.1 0 1.7-1 2.4-2 .8-1 1.1-2 1.1-2 0-.1-2-.8-2-3.1zM8.4 3c.6-.7.9-1.7.8-2.7-.8 0-1.8.5-2.4 1.2-.5.6-1 1.6-.8 2.6 1 0 1.8-.5 2.4-1.1z"/></svg>
            App Store 即将上线
          </a>
          <a href="#features" className="btn btn-ghost">浏览功能 →</a>
        </div>
      </div>

      <div className="hero-strip">
        {[
          {id:'a14', age:'5y · 2024'},
          {id:'a7',  age:'6y · 春'},
          {id:'a13', age:'7y · 夏'},
          {id:'a8',  age:'7y · 秋'},
          {id:'a6',  age:'7y · 冬'},
        ].map((p,i) => (
          <div key={i} style={{
            width: 140 + (i===2?40:0),
            transform: `rotate(${[-1.4, 0.8, 0, -0.6, 1.2][i]}deg)`,
          }}>
            <div className="frame">
              <div style={{aspectRatio:'4/5'}}>
                <Artwork id={p.id}/>
              </div>
            </div>
            <div style={{textAlign:'center', marginTop: 10, fontFamily: '"Cormorant Garamond", serif', fontSize: 12, letterSpacing: 1.5, color: 'var(--muted)'}}>
              {p.age.toUpperCase()}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Manifesto() {
  return (
    <section className="manifesto" id="story">
      <div className="container">
        <div className="manifesto-inner">
          <div className="eyebrow" style={{textAlign:'center'}}>MANIFESTO</div>
          <h2 className="h2">不是相册，是她的一座小小美术馆。</h2>
          <p>
            手机相册里有几千张她的画的照片，<br/>
            可没有一张你能在五年后还<em>找得到</em>。<br/><br/>
            童画屋只做一件事：把这些画，认真地收藏起来。<br/>
            按年龄、按月份、按情绪。<br/>
            像树的年轮，像家里挂在墙上的那些画框。
          </p>
        </div>
      </div>
    </section>
  );
}

function Features() {
  const list = [
    {
      n: '01',
      t: '一次录入 · 自动归档',
      d: '拍照即可。边缘自动校正、年龄自动关联、主色自动识别。还可以录她当时介绍这幅画的声音——24 秒最珍贵。',
      visual: <CaptureMini/>,
    },
    {
      n: '02',
      t: '时间轴 · 看见她的长大',
      d: '按月份、按年龄、按年份切换。从 5 岁的一团色块，到 7 岁的"妈妈在厨房煮汤"，整年的变化一目了然。',
      visual: <TimelineMini/>,
    },
    {
      n: '03',
      t: '数字展馆 · 沉浸式浏览',
      d: '把今年挑出的 12 幅画自动布置成一座展厅。白色画廊、木质展馆、星空艺术馆、极简空间——挑一个，按播放，自动漫游。',
      visual: <MuseumMini/>,
    },
    {
      n: '04',
      t: 'AI 成长观察 · 像爷爷的笔记',
      d: '色彩、构图、主题、情绪——AI 每月写一段、每年写一篇，像一位安静的家庭观察员。不在端外计算，画不离机。',
      visual: <AIMini/>,
    },
  ];
  return (
    <section id="features">
      <div className="container">
        <div className="section-eyebrow eyebrow">FEATURES</div>
        <h2 className="h2">为孩子的画 · 重新设计</h2>
        <p className="sub">每一个功能都从一个家庭场景反推而来。不是从功能开始。</p>

        <div className="features">
          {list.map(f => (
            <div key={f.n} className="feat">
              <div className="feat-num">{f.n}</div>
              <h3 className="feat-title">{f.t}</h3>
              <p className="feat-body">{f.d}</p>
              <div className="feat-visual">{f.visual}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Mini visualizations inside feature cards
function CaptureMini() {
  return (
    <div style={{position:'absolute', inset: 0, background:'#1B1A17', display:'flex', alignItems:'center', justifyContent:'center', padding: 28}}>
      <div style={{width: 180, aspectRatio: '4/5', padding: 12, background:'#F8F4EB', position:'relative', boxShadow:'0 4px 20px rgba(0,0,0,0.3)'}}>
        <Artwork id="a13"/>
        {['tl','tr','bl','br'].map(c => {
          const t = c[0]==='t' ? 4 : null, b = c[0]==='b' ? 4 : null;
          const l = c[1]==='l' ? 4 : null, r = c[1]==='r' ? 4 : null;
          const rot = {tl:0,tr:90,br:180,bl:270}[c];
          return <div key={c} style={{position:'absolute', top:t, bottom:b, left:l, right:r, width: 14, height: 14, borderTop:'2px solid #BFA77E', borderLeft:'2px solid #BFA77E', transform: `rotate(${rot}deg)`}}/>;
        })}
      </div>
    </div>
  );
}

function TimelineMini() {
  const rows = [
    {y:'2024', m:'·5y', ids:['a14','a5']},
    {y:'2024', m:'·6y', ids:['a1','a4','a11']},
    {y:'2025', m:'·7y', ids:['a13','a8','a2','a7']},
  ];
  return (
    <div style={{position:'absolute', inset: 0, padding: 24, display:'flex', flexDirection:'column', gap: 14}}>
      {rows.map((r,i) => (
        <div key={i} style={{display:'flex', alignItems:'center', gap: 10}}>
          <div style={{
            fontFamily:'"Cormorant Garamond", serif', fontSize: 13,
            color:'var(--wood)', width: 70, letterSpacing: 1,
          }}>{r.y}{r.m}</div>
          <div style={{flex: 1, display:'flex', gap: 6}}>
            {r.ids.map(id => (
              <div key={id} style={{flex: 1, aspectRatio:'1', padding: 3, background:'#fff', boxShadow:'0 1px 3px rgba(120,90,60,.1)'}}>
                <Artwork id={id}/>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function MuseumMini() {
  return (
    <div style={{position:'absolute', inset: 0, background: 'linear-gradient(180deg, #F5F2EC 0%, #F5F2EC 70%, #D4CCBC 70%, #BFB39E 100%)', padding: 28}}>
      <div style={{display:'flex', gap: 16, alignItems:'flex-end', height:'80%'}}>
        <div style={{padding: 5, background:'#fff', boxShadow:'0 1px 3px rgba(0,0,0,.15), 0 12px 24px rgba(0,0,0,.18)', width: 80}}>
          <div style={{aspectRatio:'4/5'}}><Artwork id="a7"/></div>
        </div>
        <div style={{padding: 5, background:'#fff', boxShadow:'0 1px 3px rgba(0,0,0,.15), 0 12px 24px rgba(0,0,0,.18)', width: 100, marginBottom: -10}}>
          <div style={{aspectRatio:'4/5'}}><Artwork id="a13"/></div>
        </div>
        <div style={{padding: 5, background:'#fff', boxShadow:'0 1px 3px rgba(0,0,0,.15), 0 12px 24px rgba(0,0,0,.18)', width: 70}}>
          <div style={{aspectRatio:'4/5'}}><Artwork id="a2"/></div>
        </div>
      </div>
    </div>
  );
}

function AIMini() {
  return (
    <div style={{position:'absolute', inset: 0, padding: 28, fontFamily:'"Noto Serif SC", serif'}}>
      <div style={{display:'flex', alignItems:'center', gap: 6, marginBottom: 12, fontSize: 10, letterSpacing: 2, color:'var(--wood)', fontFamily:'"Cormorant Garamond", serif'}}>
        <span style={{display:'inline-block', width: 7, height: 7, borderRadius: '50%', background:'var(--wood)'}}/>
        OBSERVATION · MAY
      </div>
      <div style={{fontSize: 13, lineHeight: 1.9, color:'var(--charcoal)'}}>
        这个月朵朵开始画"地平线"——一条线，把天和地分开。她的画，正在长出一个世界。
      </div>
      <div style={{marginTop: 14, display:'flex', gap: 6, flexWrap:'wrap'}}>
        {['黄色 +18%','圆形构图','主题：植物'].map(t => (
          <span key={t} style={{fontSize: 10, padding: '3px 8px', borderRadius: 100, border:'0.5px solid var(--wood)', color:'var(--wood-deep)'}}>{t}</span>
        ))}
      </div>
    </div>
  );
}

function MuseumSection() {
  const styles = [
    {id:'a13', t:'白色现代画廊', n:'I',  bg: 'linear-gradient(180deg, #F5F2EC 0%, #F5F2EC 65%, #D4CCBC 65%, #BFB39E 100%)'},
    {id:'a10', t:'木质家庭展厅', n:'II', bg: 'linear-gradient(180deg, #5A4530 0%, #4E3B28 100%)'},
    {id:'a6',  t:'星空艺术馆',   n:'III', bg: 'radial-gradient(ellipse at 50% 30%, #1F2C46 0%, #0E1424 70%)'},
    {id:'a8',  t:'极简艺术空间', n:'IV',  bg: 'var(--cream)'},
  ];
  return (
    <section id="museum">
      <div className="container">
        <div className="section-eyebrow eyebrow">DIGITAL MUSEUM</div>
        <h2 className="h2">为她的画 · 四种展厅</h2>
        <p className="sub">挑一种风格，按"漫游"——她的画就成了一座展览。可以投到电视上看，可以发给奶奶看。</p>

        <div className="museum-strip">
          {styles.map(s => (
            <div key={s.t} className="museum-card" style={{background: s.bg}}>
              <div style={{
                position:'absolute', left:'18%', right:'18%', top:'30%', bottom:'30%',
                padding: 6, background: s.n==='II' ? '#2E2418' : '#fff',
                boxShadow: s.n==='II' ? 'inset 0 0 0 2px #BFA77E, 0 8px 18px rgba(0,0,0,0.3)' : '0 4px 18px rgba(0,0,0,0.18)',
              }}>
                <div style={{width:'100%', height:'100%', padding: s.n==='II' ? 6 : 0, background: s.n==='II' ? '#F8F4EB' : 'transparent'}}>
                  <Artwork id={s.id}/>
                </div>
              </div>
              <div className="mc-num">{s.n}</div>
              <div className="mc-title">{s.t}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AISection() {
  return (
    <section id="ai" style={{background: 'var(--wash)'}}>
      <div className="container">
        <div className="section-eyebrow eyebrow">GROWTH OBSERVATION</div>
        <h2 className="h2">AI · 像爷爷写在日历背面的笔记</h2>
        <p className="sub">不是聊天机器人。每月一段话，每年一篇短文。该出现时出现，不出现时不出现。</p>

        <div className="ai-sample">
          <div className="ai-mark">2024.05 — 2025.05 · 一年观察</div>
          <div className="ai-body">
            过去这一年，朵朵的画在悄悄变化。<br/>
            五岁那个春天，她常画一团一团的圆，颜色偏暖。<br/>
            到了夏末，画里开始出现"地平线"——<em>一条线把天和地分开</em>。<br/>
            进入六岁后，她画的人有了眼睛、手指、有人在做事。<br/><br/>
            最让我们意外的是，从今年三月起，<em>她画里的"妈妈"开始和"自己"靠得更近</em>。
          </div>
          <div className="ai-foot">· 这份观察由 AI 在你的设备上完成，画不离机。</div>
        </div>
      </div>
    </section>
  );
}

function Voices() {
  const v = [
    {q:'第一次有一个东西，认认真真地把孩子的画当作品看待。', a:'朵朵妈妈', meta:'北京 · 7岁孩子'},
    {q:'我妈打来电话，问那个"画展"什么时候再开——她以为我们办了真的画展。', a:'果果爸爸', meta:'上海 · 5岁孩子'},
    {q:'孩子睡前会自己点开"看一看我以前画的"。这件事比我想得更重要。', a:'乐乐妈妈', meta:'成都 · 9岁孩子'},
  ];
  return (
    <section>
      <div className="container">
        <div className="section-eyebrow eyebrow">VOICES</div>
        <h2 className="h2">来自家庭的声音</h2>
        <p className="sub">早期内测家庭，每个家庭至少跟随我们一年以上。</p>
        <div className="voices">
          {v.map((it,i) => (
            <div key={i} className="voice">
              <div className="voice-text">"{it.q}"</div>
              <div className="voice-author"><span>— {it.a}</span><span>{it.meta}</span></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Download() {
  return (
    <section id="download">
      <div className="container">
        <div className="download">
          <h2>下载童画屋</h2>
          <p>App 上线在即 · 先把孩子的画认真收藏起来</p>
          <div className="download-grid">
            <a href="#" className="dl-btn">
              <svg width="16" height="18" viewBox="0 0 16 18" fill="currentColor"><path d="M11.9 9.5c0-2 1.7-3 1.8-3-1-1.4-2.5-1.6-3-1.6-1.3-.1-2.5.8-3.2.8-.7 0-1.7-.8-2.8-.7-1.5 0-2.8 1-3.6 2.9-1.5 2.7-.4 6.7 1.1 9 .7 1.1 1.6 2.3 2.8 2.3 1.1 0 1.6-.7 2.9-.7 1.4 0 1.8.7 3 .7 1.2 0 2-1.1 2.7-2.3.9-1.1 1.2-2.3 1.2-2.3 0-.1-2.3-.9-2.3-3.5zM9.7 3.4c.6-.8 1-2 .9-3.1-.9.1-2 .6-2.7 1.4-.6.7-1.2 1.8-1 2.9 1.1.1 2.1-.5 2.8-1.2z"/></svg>
              App Store · 即将上线
            </a>
            <a href="/tonghuawu/support/" className="dl-btn outline">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16v16H4z"/><path d="M4 7l8 6 8-6"/></svg>
              技术支持
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-inner">
          <div>
            <LogoWordmark height={24}/>
            <div className="footer-meta" style={{marginTop: 16}}>
              ©2026 童画屋 · TONG HUA WU<br/>
              一座属于孩子的小小美术馆
            </div>
          </div>
          <div className="footer-links">
            <a href="#story">理念</a>
            <a href="#features">功能</a>
            <a href="#museum">展馆</a>
            <a href="/tonghuawu/privacy/">隐私</a>
            <a href="/tonghuawu/support/">支持</a>
            <a href="#download">下载</a>
          </div>
          <div className="footer-meta" style={{textAlign:'right'}}>
            iOS 17+ · iPadOS 17+<br/>
            iCloud · 端上 AI · 隐私优先
          </div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  // simple reveal on scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver(es => es.forEach(e => e.isIntersecting && e.target.classList.add('is-visible')));
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      {window.PAPER_FILTER}
      <Nav/>
      <Hero/>
      <Manifesto/>
      <Features/>
      <MuseumSection/>
      <AISection/>
      <Voices/>
      <Download/>
      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);