/* MEXYFOR — Top Page Design Comp (Plan A) */

const TopComp = () => {
  const T = window.TOKENS;
  const wrap = {
    width: '100%',
    maxWidth: 1440,
    margin: '0 auto',
    background: T.paper,
    color: T.ink,
    fontFamily: T.sans,
  };
  const containerPad = '0 80px';

  return (
    <div style={wrap}>
      {/* ---------- Header ---------- */}
      <header style={{
        display: 'grid',
        gridTemplateColumns: '1fr auto 1fr',
        alignItems: 'center',
        padding: '24px 96px',
        borderBottom: `1px solid ${T.rule}`,
        background: T.paper,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '14px 14px', gridTemplateRows: '14px 14px', gap: 2 }}>
            <div style={{ background: T.orange }}></div>
            <div style={{ background: T.navy }}></div>
            <div style={{ background: T.navy }}></div>
            <div style={{ background: T.orange }}></div>
          </div>
          <div style={{ fontFamily: T.serif, fontSize: 19, letterSpacing: '0.18em', color: T.ink }}>MEXYFOR</div>
        </div>
        <nav style={{ display: 'flex', gap: 32, fontSize: 13, color: T.ink2, letterSpacing: '0.04em' }}>
          <span>Business</span>
          <span>Company</span>
          <span>Message</span>
          <span>News</span>
          <span>Contact</span>
        </nav>
        <div></div>
      </header>

      {/* ============ HERO ============ */}
      <section style={{ padding: '160px 80px 200px', textAlign: 'center', position: 'relative' }}>
        {/* corner marks */}


        <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: '0.3em', color: T.orange, marginBottom: 24 }}>
          ＿ MEDICAL × MARKETING
        </div>

        <div style={{ fontFamily: T.sans, fontSize: 14, letterSpacing: '0.08em', color: T.ink2, marginBottom: 32 }}>
          MEXYFOR — 医療政策の矛盾を解消するプラットフォーム
        </div>

        <h1 style={{
          fontFamily: T.serif,
          fontWeight: 400,
          fontSize: 64,
          lineHeight: 1.36,
          margin: 0,
          letterSpacing: '0.02em',
          color: T.ink,
        }}>
          削るだけの医療政策に、<br />
          もう一つの答えを
        </h1>

        <div style={{
          marginTop: 64,
          fontFamily: T.sans,
          fontSize: 15,
          color: T.ink2,
          lineHeight: 2.2,
          letterSpacing: '0.06em',
          maxWidth: 640,
          margin: '64px auto 0',
        }}>
          短期的な医療費削減は、長期的に医療費を増やす。この矛盾を解消するため、私たちは医療経営、引いては医療政策のあるべき姿をデータで支える会社です。
        </div>

        <div style={{ marginTop: 96, display: 'inline-flex', gap: 12, alignItems: 'center', fontFamily: T.mono, fontSize: 10, color: T.ink3, letterSpacing: '0.24em' }}>
          <div style={{ width: 1, height: 32, background: T.ink }}></div>
          SCROLL
        </div>
      </section>

      {/* ============ 01 — WHY WE EXIST ============ */}
      <section style={{
        background: T.paperDeep,
        padding: '180px 80px',
        borderTop: `1px solid ${T.ink}`,
      }}>
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: '0.3em', color: T.ink3, marginBottom: 8 }}>
            01
          </div>
          <div style={{ fontFamily: T.en, fontStyle: 'italic', fontSize: 20, color: T.ink2, marginBottom: 32 }}>
            Why we exist
          </div>
          <div style={{
            marginTop: 0,
            fontSize: 15,
            lineHeight: 2.2,
            color: T.ink2,
            textAlign: 'justify',
            letterSpacing: '0.04em',
          }}>
            日本の医療費は、年間47兆円を超えました。<br />
            財政の持続性のため、診療報酬は引き下げ続けられています。
            <br /><br />
            しかし、目先の削減は、長期の損失を生みます。<br />
            受診を控えた患者は重症化し、結局はより多くの医療費を必要とする。<br />
            クリニックは経営難に陥り、地域医療が崩壊していく。
            <br /><br />
            私たちは、この矛盾をテクノロジーで解消します。
            <br /><br />
            患者の健康を長期的に守る仕組みを作り、<br />
            クリニックが健全に運営できる環境を整え、<br />
            医師が本来の医療業務に集中できる時間を取り戻す。
            <br /><br />
            結果として、社会全体の医療費を、長期的に抑える。
            <br /><br />
            それが我々が考える、矛盾の解消です。
          </div>
        </div>


      </section>

      {/* ============ 02 — BUSINESS ============ */}
      <section style={{ padding: '180px 80px', borderTop: `1px solid ${T.rule}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'end', marginBottom: 80 }}>
            <div>
              <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: '0.3em', color: T.ink3, marginBottom: 8 }}>02</div>
              <div style={{ fontFamily: T.en, fontStyle: 'italic', fontSize: 20, color: T.ink2, marginBottom: 32 }}>Business</div>
              <h2 style={{
                fontFamily: T.serif,
                fontWeight: 500,
                fontSize: 56,
                lineHeight: 1.4,
                margin: 0,
                letterSpacing: '0.02em',
              }}>
                患者様との関係性を<br />再構築する、CRM。
              </h2>
            </div>
            <div style={{ fontFamily: T.mono, fontSize: 11, color: T.ink3, letterSpacing: '0.16em' }}>
              SERVICE — 01 / 01
            </div>
          </div>

          {/* product card */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1.2fr',
            gap: 0,
            border: `1px solid ${T.ink}`,
            background: T.paper,
          }}>
            {/* left: copy */}
            <div style={{ padding: 64, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em', color: T.ink3, marginBottom: 24 }}>
                  CRM FOR CLINICS
                </div>
                <div style={{ fontFamily: T.serif, fontSize: 56, fontWeight: 500, letterSpacing: '0.01em', marginBottom: 16, color: T.navy }}>
                  LifeAware
                </div>
                <div style={{ fontFamily: T.en, fontStyle: 'italic', fontSize: 18, color: T.ink3, marginBottom: 32 }}>
                  ライフアウェア
                </div>
                <div style={{ fontSize: 14, lineHeight: 2, color: T.ink2 }}>
                  電子カルテのデータをもとに、患者様ひとりひとりの状態に合わせたフォローを実現。
                  <strong>「治療を必要とする患者様に、適切なタイミングで」</strong>お声がけする仕組みを提供します。
                </div>
              </div>
              <div style={{ marginTop: 48, paddingTop: 32, borderTop: `1px solid ${T.rule}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', gap: 24, fontSize: 11, fontFamily: T.mono, color: T.ink3, letterSpacing: '0.1em' }}>
                  <span>離脱防止</span>
                  <span>再来院率</span>
                  <span>診療単価</span>
                </div>
                <a href="https://lifeaware.jp/" target="_blank" rel="noopener noreferrer" style={{ fontFamily: T.mono, fontSize: 11, color: T.ink, letterSpacing: '0.16em', borderBottom: `1px solid ${T.ink}`, paddingBottom: 3, textDecoration: 'none' }}>
                  VIEW LP ↗
                </a>
              </div>
            </div>
            {/* right: product visual placeholder */}
            <div style={{
              background: T.dark,
              color: T.paper,
              minHeight: 480,
              padding: 48,
              position: 'relative',
              backgroundImage: `linear-gradient(135deg, ${T.dark} 0%, #2a2a30 100%)`,
            }}>
              <div style={{ fontFamily: T.mono, fontSize: 10, color: '#7a7a7a', letterSpacing: '0.2em', marginBottom: 32 }}>
                ／ PRODUCT
              </div>
              {/* mock interface */}
              <div style={{ background: '#1f1f24', border: `1px solid #2a2a30`, padding: 24, fontFamily: T.mono, fontSize: 11 }}>
                <div style={{ display: 'flex', gap: 8, marginBottom: 24 }}>
                  <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#3a3a40' }}></div>
                  <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#3a3a40' }}></div>
                  <div style={{ width: 8, height: 8, borderRadius: '50%', background: T.orange }}></div>
                </div>
                <div style={{ color: '#9a9a98', marginBottom: 12, fontSize: 10, letterSpacing: '0.1em' }}>PATIENT FOLLOW-UP / TODAY</div>
                {['田中 ／ 3ヶ月未受診 ／ 連絡推奨', '佐藤 ／ 検査結果フォロー', '鈴木 ／ 定期健診リマインド'].map((row, i) => (
                  <div key={i} style={{
                    padding: '14px 0',
                    borderTop: '1px solid #2a2a30',
                    color: '#d4d4d0',
                    display: 'flex',
                    justifyContent: 'space-between',
                    fontSize: 11,
                  }}>
                    <span>{row}</span>
                    <span style={{ color: i === 0 ? T.orange : '#7a7a7a' }}>{i === 0 ? '●' : '○'}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 40, fontSize: 12, color: '#9a9a98', lineHeight: 1.8 }}>
                データというファクト情報をもとに。<br />
                判断をする。<span style={{ color: T.orange }}>それが医療経営を支える</span>。
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '120px 80px', background: T.paper }}>
        <div style={{ maxWidth: 1080, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 64 }}>
            <div>
              <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: '0.3em', color: T.ink3, marginBottom: 8 }}>03</div>
              <div style={{ fontFamily: T.en, fontStyle: 'italic', fontSize: 20, color: T.ink2, marginBottom: 24 }}>News</div>
              <h2 style={{ fontFamily: T.serif, fontSize: 32, fontWeight: 500, margin: 0, letterSpacing: '0.02em' }}>
                News
              </h2>
              <div style={{ marginTop: 32, fontFamily: T.mono, fontSize: 11, color: T.ink, letterSpacing: '0.14em', borderBottom: `1px solid ${T.ink}`, paddingBottom: 3, display: 'inline-block' }}>
                VIEW ALL ↗
              </div>
            </div>
            <div>
              {[
                ['2025.08.01', 'PRESS', 'LifeAware β版を提供開始しました'],
                ['2026.04.01', 'NEWS', 'LifeAware新バージョンを提供開始'],
              ].map(([date, tag, title], i) => (
                <div key={i} style={{
                  display: 'grid',
                  gridTemplateColumns: '110px 80px 1fr 24px',
                  gap: 24,
                  padding: '24px 0',
                  borderBottom: `1px solid ${T.rule}`,
                  borderTop: i === 0 ? `1px solid ${T.ink}` : 'none',
                  alignItems: 'center',
                }}>
                  <span style={{ fontFamily: T.mono, fontSize: 12, color: T.ink3, letterSpacing: '0.04em' }}>{date}</span>
                  <span style={{
                    fontSize: 10,
                    padding: '4px 10px',
                    border: `1px solid ${T.ink}`,
                    justifySelf: 'start',
                    letterSpacing: '0.12em',
                    fontFamily: T.mono,
                  }}>{tag}</span>
                  <span style={{ fontSize: 14, color: T.ink }}>{title}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ============ FOOTER ============ */}
      <footer style={{ background: T.dark, color: T.paper, padding: '80px 80px 48px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 48 }}>
          <div>
            <svg width="120" height="22" viewBox="0 0 240 44" xmlns="http://www.w3.org/2000/svg">
              <g>
                <rect x="0" y="0" width="20" height="20" fill={T.orange} />
                <rect x="20" y="0" width="20" height="20" fill={T.navy} />
                <rect x="0" y="20" width="20" height="20" fill={T.navy} />
                <rect x="20" y="20" width="20" height="20" fill={T.orange} />
              </g>
              <text x="50" y="29" fontFamily={T.sans} fontSize="22" fontWeight="700" fill={T.paper} letterSpacing="2">MEXYFOR</text>
            </svg>
          </div>
          {[
            ['EXPLORE', ['Business', 'Company', 'Message', 'News']],
            ['JOIN', ['Contact']],
            ['SERVICES', ['LifeAware ↗']],
          ].map(([label, items]) => (
            <div key={label}>
              <div style={{ fontFamily: T.mono, fontSize: 10, color: '#7a7a7a', letterSpacing: '0.2em', marginBottom: 24 }}>{label}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 13, color: T.paper }}>
                {items.map(it => it === 'LifeAware ↗' ? (
                  <a key={it} href="https://lifeaware.jp/" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>{it}</a>
                ) : (
                  <span key={it}>{it}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 80,
          paddingTop: 24,
          borderTop: '1px solid #2a2a30',
          display: 'flex',
          justifyContent: 'space-between',
          fontFamily: T.mono,
          fontSize: 10,
          color: '#7a7a7a',
          letterSpacing: '0.14em',
        }}>
          <span>© 2026 MEXYFOR INC. ALL RIGHTS RESERVED.</span>
          <span style={{ display: 'flex', gap: 24 }}>
            <a href="pp.html" style={{ color: 'inherit', textDecoration: 'none' }}>PrivacyPolicy</a>
          </span>
        </div>
      </footer>
    </div>
  );
};

window.TopComp = TopComp;