/* ============================================================
   CHAINUS — Value, Features (broken bento), Anywhere
   ============================================================ */

function SignalMap({ t }) {
  const nodes = t.dir === 'zh'
    ? [
        ['社区', '讨论 / 关注'],
        ['资产', '上链 / 所有权'],
        ['行情', '价格 / 情绪'],
        ['学习', '术语 / 引导'],
        ['信任', '钱包 / 合约'],
      ]
    : [
        ['Community', 'Posts / follows'],
        ['Assets', 'Mint / ownership'],
        ['Market', 'Price / mood'],
        ['Learning', 'Terms / guidance'],
        ['Trust', 'Wallet / contracts'],
      ];
  return (
    <div className="signal-map" aria-label={t.dir === 'zh' ? 'ChainUs 信息关系图' : 'ChainUs information map'}>
      <svg className="signal-lines" viewBox="0 0 100 100" aria-hidden="true">
        <path d="M50 50 L18 24 M50 50 L82 24 M50 50 L86 70 M50 50 L50 88 M50 50 L14 70" />
        <path d="M18 24 C42 8 58 8 82 24 M14 70 C32 92 68 92 86 70" />
      </svg>
      <div className="signal-core">
        <b>ChainUs</b>
        <span>{t.dir === 'zh' ? '把散乱数据合成信号' : 'Turns scattered data into signal'}</span>
      </div>
      {nodes.map((n, i) => (
        <div key={n[0]} className={`signal-node sn-${i}`}>
          <b>{n[0]}</b>
          <span>{n[1]}</span>
        </div>
      ))}
    </div>
  );
}

function SignalConstellation({ t }) {
  const nodes = t.dir === 'zh'
    ? [
        ['Ray 上链插画', 'Post'],
        ['0.12 ETH', 'Asset'],
        ['RWA 热度上升', 'Topic'],
        ['BTC +2.4%', 'Market'],
        ['情绪 68', 'Mood'],
        ['新手解释', 'Learn'],
      ]
    : [
        ['Ray minted art', 'Post'],
        ['0.12 ETH', 'Asset'],
        ['RWA rising', 'Topic'],
        ['BTC +2.4%', 'Market'],
        ['Mood 68', 'Mood'],
        ['Plain explain', 'Learn'],
      ];
  return (
    <div className="signal-constellation" aria-hidden="true">
      <svg viewBox="0 0 100 100" className="constellation-lines">
        <path d="M17 29 L39 18 L66 26 L82 48 L61 74 L29 68 L17 29" />
        <path d="M39 18 L29 68 M66 26 L29 68 M82 48 L39 18" />
      </svg>
      {nodes.map((n, i) => (
        <span key={n.join('-')} className={`const-node cn-${i}`}>
          <b>{n[0]}</b>
          <em>{n[1]}</em>
        </span>
      ))}
    </div>
  );
}

function ValueProp({ t }) {
  const v = t.value;
  return (
    <section className="section value" id="value">
      <div className="wrap">
        <div className="value-grid">
          <div className="value-copy">
            <Reveal className="eyebrow" as="span">{v.eyebrow}</Reveal>
            <Reveal as="h2" className="h2" delay={70} style={{ marginTop: 16 }}>
              {v.title[0]} <span className="brand-text">{v.title[1]}</span>
            </Reveal>
          </div>
          <Reveal className="lead" delay={130}>{v.body}</Reveal>
        </div>
        <div className="value-packages value-packages-premium">
          {v.stats.map((s, i) => (
            <Reveal key={i} className="value-stat" delay={i * 90}>
              <div className="value-k">{s.k}</div>
              <div className="value-v muted">{s.v}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* native mini feed rows used in the feed feature */
function FeedPreview({ t }) {
  return (
    <div className="feed-prev">
      <div className="hero-phone-stack">
        <PhoneFrame slotId="feature-feed" placeholder={t.dir === 'zh' ? '社区信息流' : 'Community feed'} width={236} glow />
      </div>
      <div className="feed-chip fc-a card card-hi">
        <span className="avatars"><span className="av av-2"></span></span>
        <div><b>{t.hero.cardFeedUser}</b><small className="faint">{t.dir === 'zh' ? '上链了一组插画' : 'minted an illustration set'}</small></div>
      </div>
      <div className="feed-chip fc-b card card-hi">
        <span className="fc-react">♥ 248</span><span className="fc-react">↗ 31</span>
      </div>
    </div>
  );
}

function Features({ t }) {
  const items = t.features.items;
  const feed = items[0], tok = items[1], learn = items[2];
  return (
    <section className="section features" id="features">
      <div className="wrap">
        <SectionHead eyebrow={t.features.eyebrow} title={t.features.title} sub={t.features.sub} max={680} />

        {/* Feature 1 — feed, full split story */}
        <div className="feat-hero reveal-scale">
          <div className="feat-hero-copy">
            <span className="feat-ic ic-blue"><Glyph kind="feed" /></span>
            <span className="tag" style={{ marginTop: 18, display: 'block' }}>{feed.tag}</span>
            <h3 className="h2 feat-hero-title">{feed.title}</h3>
            <p className="lead" style={{ marginTop: 14 }}>{feed.body}</p>
          </div>
          <div className="feat-hero-vis">
            <FeedPreview t={t} />
          </div>
        </div>

        {/* Features 2 + 3 — asymmetric pair */}
        <div className="feat-pair">
          <Reveal scale className="feat-card feat-wide">
            <div className="feat-card-head">
              <span className="feat-ic ic-cyan"><Glyph kind="tokenize" /></span>
              <span className="tag">{tok.tag}</span>
            </div>
            <h3 className="h3" style={{ marginTop: 18 }}>{tok.title}</h3>
            <p className="muted lead-sm" style={{ marginTop: 10, maxWidth: '42ch' }}>{tok.body}</p>
            <div className="feature-product-shot feature-product-wide">
              <PhoneFrame slotId="shot-tokenize" placeholder={tok.title} width={214} />
              <div className="feature-shot-caption">
                <span>{t.dir === 'zh' ? '选择对象' : 'Choose item'}</span>
                <span>{t.dir === 'zh' ? '确认信息' : 'Confirm details'}</span>
                <span>{t.dir === 'zh' ? '发布上链' : 'Publish on-chain'}</span>
              </div>
            </div>
          </Reveal>

          <Reveal scale delay={90} className="feat-card feat-narrow">
            <div className="feat-card-head">
              <span className="feat-ic ic-violet"><Glyph kind="learn" /></span>
              <span className="tag">{learn.tag}</span>
            </div>
            <h3 className="h3" style={{ marginTop: 18 }}>{learn.title}</h3>
            <p className="muted lead-sm" style={{ marginTop: 10 }}>{learn.body}</p>
            <div className="learn-flip learn-flip-quiet">
              <div className="lf-row"><span className="lf-term">Gas</span><span className="lf-plain">{t.dir === 'zh' ? '= 网络手续费' : '= network fee'}</span></div>
              <div className="lf-row"><span className="lf-term">Mint</span><span className="lf-plain">{t.dir === 'zh' ? '= 把东西上链' : '= put it on-chain'}</span></div>
              <div className="lf-row"><span className="lf-term">RWA</span><span className="lf-plain">{t.dir === 'zh' ? '= 现实世界资产' : '= real-world asset'}</span></div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---- Mobile / Web / Tablet ---- */
function Anywhere({ t }) {
  const a = t.anywhere;
  const [view, setView] = useState('web');
  const views = [
    { id: 'mobile', label: t.dir === 'zh' ? '手机 App' : 'Mobile' },
    { id: 'web', label: t.dir === 'zh' ? '网页版' : 'Web' },
    { id: 'tablet', label: t.dir === 'zh' ? '平板' : 'Tablet' },
  ];
  return (
    <section className="section anywhere" id="anywhere">
      <div className="wrap">
        <div className="anywhere-grid">
          <div className="anywhere-copy">
            <Reveal as="h2" className="h2" delay={70} style={{ marginTop: 16 }}>{a.title[0]} <span className="brand-text">{a.title[1]}</span></Reveal>
            <Reveal className="lead" delay={130} style={{ marginTop: 16 }}>{a.body}</Reveal>
            <Reveal delay={190} className="anywhere-tags">
              {a.tags.map((tag, i) => <span key={i} className="chip"><Glyph kind={tag.g} w={15} />{tag.t}</span>)}
            </Reveal>
            <Reveal delay={240} className="seg" style={{ marginTop: 26 }}>
              {views.map((vw) => (
                <button key={vw.id} className={view === vw.id ? 'on' : ''} onClick={() => setView(vw.id)}>{vw.label}</button>
              ))}
            </Reveal>
          </div>
          <Reveal scale delay={120} className={`anywhere-stage view-${view}`}>
            <div className="aurora" style={{ opacity: 0.45 }}></div>
            <div className="sync-mesh" aria-hidden="true">
              <span>{t.dir === 'zh' ? 'Feed' : 'Feed'}</span>
              <span>{t.dir === 'zh' ? 'Mint' : 'Mint'}</span>
              <span>{t.dir === 'zh' ? 'Market' : 'Market'}</span>
            </div>
            {view === 'web' && <div className="aw-web"><DesktopFrame slotId="any-web" placeholder={a.webCap} url="chainus.org" ratio="16 / 10" /></div>}
            {view === 'mobile' && <div className="aw-phone"><PhoneFrame slotId="any-phone" placeholder={a.phoneCap} width={250} glow /></div>}
            {view === 'tablet' && <div className="aw-tablet"><TabletFrame slotId="any-tablet" placeholder={t.dir === 'zh' ? '平板版' : 'Tablet'} width={420} /></div>}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ValueProp, Features, Anywhere, FeedPreview });