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

const TopComp = () => {
  const T = window.TOKENS;
  const wrap = {
    width: 1440,
    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 80px',
        borderBottom: `1px solid ${T.rule}`,
        position: 'sticky',
        top: 0,
        background: `${T.paper}f2`,
        backdropFilter: 'blur(12px)',
        zIndex: 10,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          {/* MEXYFOR wordmark */}
          <svg width="120" height="22" viewBox="0 0 240 44" xmlns="http://www.w3.org/2000/svg">
            {/* M with orange + navy quadrants suggesting the logo mark */}
            <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.ink} letterSpacing="2">MEXYFOR</text>
          </svg>
          <span style={{ fontFamily: T.mono, fontSize: 10, color: T.ink3, letterSpacing: '0.16em', borderLeft: `1px solid ${T.rule}`, paddingLeft: 12 }}>
            CORPORATE
          </span>
        </div>
        <nav style={{ display: 'flex', gap: 32, fontSize: 13, color: T.ink2, letterSpacing: '0.04em' }}>
          <span>事業</span>
          <span>会社概要</span>
          <span>代表メッセージ</span>
        </nav>
        <div style={{ textAlign: 'right' }}>
          <span style={{ fontFamily: T.mono, fontSize: 11, color: T.ink, letterSpacing: '0.14em', borderBottom: `1px solid ${T.ink}`, paddingBottom: 3 }}>
            CONTACT ↗
          </span>
        </div>
      </header>

      {/* ============ HERO ============ */}
      <section style={{ padding: '160px 80px 200px', textAlign: 'center', position: 'relative' }}>
        {/* corner marks */}
        <div style={{ position: 'absolute', top: 60, left: 80, fontFamily: T.mono, fontSize: 10, color: T.ink3, letterSpacing: '0.2em' }}>
          ／ STATEMENT
        </div>
        <div style={{ position: 'absolute', top: 60, right: 80, fontFamily: T.mono, fontSize: 10, color: T.ink3, letterSpacing: '0.2em' }}>
          2026 — N°01
        </div>

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

        <h1 style={{
          fontFamily: T.serif,
          fontWeight: 400,
          fontSize: 88,
          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',
        }}>
          保険診療で経営の基盤をつくり、その上に、適切な自費診療で経営の伸びしろをつくる。<br />
          私たちは、医療経営のあるべき姿を、データで支える会社です。
        </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>

      {/* ============ INDEX ============ */}
      <section style={{ borderTop: `1px solid ${T.ink}`, padding: '80px 80px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 80 }}>
          <div>
            <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: '0.24em', color: T.ink3, marginBottom: 8 }}>INDEX</div>
            <div style={{ fontFamily: T.serif, fontSize: 16, color: T.ink2 }}>目次</div>
          </div>
          <div>
            {[
              ['01', '私たちの姿勢', 'Why we exist'],
              ['02', '事業領域', 'Business'],
              ['03', '代表メッセージ', 'Message from CEO'],
            ].map(([n, ja, en], i) => (
              <div key={n} style={{
                display: 'grid',
                gridTemplateColumns: '60px 1fr auto 24px',
                alignItems: 'baseline',
                padding: '24px 0',
                borderBottom: `1px solid ${T.rule}`,
                gap: 24,
              }}>
                <span style={{ fontFamily: T.mono, fontSize: 13, color: T.ink3 }}>{n}</span>
                <span style={{ fontFamily: T.serif, fontSize: 26, fontWeight: 500, letterSpacing: '0.02em' }}>{ja}</span>
                <span style={{ fontFamily: T.en, fontStyle: 'italic', fontSize: 18, color: T.ink2 }}>{en}</span>
                <span style={{ fontFamily: T.mono, color: T.ink3 }}>↗</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ 01 — WHY WE EXIST ============ */}
      <section style={{
        background: T.paperDeep,
        padding: '180px 80px',
        borderTop: `1px solid ${T.rule}`,
      }}>
        <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: 48 }}>
            Why we exist
          </div>
          <h2 style={{
            fontFamily: T.serif,
            fontWeight: 500,
            fontSize: 48,
            lineHeight: 1.6,
            margin: 0,
            letterSpacing: '0.02em',
          }}>
            診るべき医師が、<br />
            <span style={{ color: T.navy }}>診ることに専念できる</span>環境を。
          </h2>
          <div style={{
            marginTop: 64,
            fontSize: 15,
            lineHeight: 2.2,
            color: T.ink2,
            textAlign: 'justify',
            letterSpacing: '0.04em',
          }}>
            診療報酬は下がり続け、保険診療だけではクリニックの経営が成り立たなくなりつつあります。
            目の前には、診てもらえる環境があり、診るべき医師もいる。それでも社会の構造そのものが、医療を「続けられないもの」にしようとしている。
            <br /><br />
            データで患者一人ひとりの状況を捉え直し、保険診療で経営が成り立つ運営を支える。必要としている方には、必要な自費診療を、過不足なく届けられるようにする。
            <br /><br />
            患者に適切な診療を提供できることで、診療で医療経営が成り立ち、そこで働く看護師やスタッフも満たされる。
            その小さな循環をひとつずつ重ねていくことが、これからの医療を支える方法だと考えています。
          </div>
        </div>

        {/* three pillars */}
        <div style={{
          maxWidth: 1080,
          margin: '120px auto 0',
          display: 'grid',
          gridTemplateColumns: '1fr 1fr 1fr',
          gap: 0,
          borderTop: `1px solid ${T.rule}`,
          borderBottom: `1px solid ${T.rule}`,
        }}>
          {[
            ['Ⅰ', '専念', 'Focus', '医師が「診ること」に集中できる環境を、データと運用で支える。'],
            ['Ⅱ', '循環', 'Circulation', '患者・経営・スタッフが互いを満たし合う、小さな循環をつくる。'],
            ['Ⅲ', '伝播', 'Ripple', '医療を支える環境が、人々の幸せをつくり、その幸せがやがて広く伝播していく。'],
          ].map(([num, ja, en, desc], i) => (
            <div key={num} style={{
              padding: '48px 32px',
              borderLeft: i > 0 ? `1px solid ${T.rule}` : 'none',
            }}>
              <div style={{ fontFamily: T.en, fontSize: 32, color: T.orange, marginBottom: 16 }}>{num}</div>
              <div style={{ fontFamily: T.serif, fontSize: 24, fontWeight: 500, marginBottom: 4 }}>{ja}</div>
              <div style={{ fontFamily: T.en, fontStyle: 'italic', fontSize: 14, color: T.ink3, marginBottom: 20 }}>{en}</div>
              <div style={{ fontSize: 13, lineHeight: 1.9, color: T.ink2 }}>{desc}</div>
            </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 }}>
                  電子カルテのデータをもとに、患者ひとりひとりの状態に合わせたフォロー連絡を半自動化。
                  「来るべき人に、来るべきタイミングで」コミュニケーションできる環境をつくります。
                </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>
                <span style={{ fontFamily: T.mono, fontSize: 11, color: T.ink, letterSpacing: '0.16em', borderBottom: `1px solid ${T.ink}`, paddingBottom: 3 }}>
                  VIEW LP ↗
                </span>
              </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>

      {/* ============ 03 — MESSAGE ============ */}
      <section style={{
        background: T.dark,
        color: T.paper,
        padding: '180px 80px',
        borderTop: `1px solid ${T.dark}`,
        position: 'relative',
      }}>
        <div style={{ maxWidth: 1080, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, alignItems: 'start' }}>
            {/* portrait placeholder */}
            <div>
              <div style={{
                aspectRatio: '4/5',
                background: '#26262c',
                border: `1px solid #3a3a40`,
                position: 'relative',
                overflow: 'hidden',
              }}>
                <div style={{
                  position: 'absolute',
                  inset: 0,
                  background: 'repeating-linear-gradient(135deg, transparent, transparent 16px, rgba(255,255,255,0.02) 16px, rgba(255,255,255,0.02) 32px)',
                }}></div>
                <div style={{
                  position: 'absolute',
                  bottom: 16,
                  left: 16,
                  fontFamily: T.mono,
                  fontSize: 10,
                  color: '#6a6a6a',
                  letterSpacing: '0.16em',
                }}>
                  [ portrait ／ 代表 ]
                </div>
              </div>
              <div style={{ marginTop: 24, fontFamily: T.mono, fontSize: 10, color: '#7a7a7a', letterSpacing: '0.18em' }}>
                FOUNDER & CEO
              </div>
              <div style={{ marginTop: 8, fontFamily: T.serif, fontSize: 22, color: T.paper }}>
                ＿＿ ＿＿
              </div>
            </div>

            {/* message */}
            <div>
              <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: '0.3em', color: '#7a7a7a', marginBottom: 8 }}>03</div>
              <div style={{ fontFamily: T.en, fontStyle: 'italic', fontSize: 20, color: '#9a9a98', marginBottom: 48 }}>Message</div>

              <blockquote style={{
                fontFamily: T.serif,
                fontWeight: 500,
                fontSize: 44,
                lineHeight: 1.6,
                margin: 0,
                letterSpacing: '0.02em',
              }}>
                <span style={{ color: T.orange }}>半径4m</span>の人を、<br />
                笑顔にする。
              </blockquote>

              <div style={{ marginTop: 56, fontSize: 14, lineHeight: 2.1, color: '#c4c4c0', maxWidth: 560 }}>
                素直に言うと、世の中を変えるなどと壮大なビジョンはありません。まず手の届く範囲の人たちを幸せにできているか。
                家族、仲間、目の前のお客様。
                半径4メートル ─ 自分が直接関わる人たちを笑顔にすること。その想いは人から人へ伝播し、
                やがて大きな変化を生むと、私は信じています。
                MEXYFOR という社名には「私が（Me）／広げる（Expand）／あなたのために（Y/You）／未来のために（FOR）」、
                その半径を自らが主体的に行動し広げていくための、思いが込められています。
              </div>

              <div style={{ marginTop: 56, display: 'flex', gap: 24, alignItems: 'center' }}>
                <span style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em', borderBottom: `1px solid ${T.paper}`, paddingBottom: 3 }}>
                  READ FULL MESSAGE ↗
                </span>
                <span style={{ fontFamily: T.mono, fontSize: 11, color: '#7a7a7a', letterSpacing: '0.14em' }}>
                  / 全文を読む
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ 04 — NEWS ============ */}
      <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 }}>04</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' }}>
                お知らせ
              </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 style={{ marginTop: 16, fontSize: 12, color: '#9a9a98', lineHeight: 1.9 }}>
              株式会社メキシフォー<br />
              MEXYFOR Inc.
            </div>
          </div>
          {[
            ['EXPLORE', ['事業', '会社概要', '代表メッセージ']],
            ['JOIN', ['お問い合わせ']],
            ['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 => <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 }}>
            <span>PRIVACY</span>
            <span>TERMS</span>
            <span>SECURITY</span>
          </span>
        </div>
      </footer>
    </div>
  );
};

window.TopComp = TopComp;