// Claude Design handoff (2): production React layout, no design-tool runtime.
const P = '#4a5af0', PS = '#eef0fe', PF = '#3a44c8', CY = '#7de3f7';
const IC = {
  spark: 'M12 2l1.9 5.4L19 9l-5.1 1.6L12 16l-1.9-5.4L5 9l5.1-1.6zM19 14l.9 2.6L22 18l-2.1.4L19 21l-.9-2.6L16 18l2.1-.4z',
  doc: 'M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z',
  shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
  chart: 'M3 3v18h18M8 17v-5M13 17V8M18 17v-9',
  mic: 'M23 7l-7 5 7 5V7zM1 5h13a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H1z',
};
const SI = (s) => 'https://cdn.simpleicons.org/' + s;
const JD = (s) => 'https://cdn.jsdelivr.net/npm/simple-icons@13/icons/' + s + '.svg';

class LandingPage extends React.Component {
  state = { lang: initialLang(), form: {}, sent: false, consent:false, region: initialRegion() };
  changeLang = (lang) => { const next=lang==='zh-TW'?'zh-TW':'ja'; this.setState({lang:next}); saveLandingPreference(next,this.state.region); };
  changeRegion = (region) => {this.setState({region});saveLandingPreference(this.L,region);};
  componentDidMount(){saveLandingPreference(this.L,this.state.region);}
  submit = (e) => {e.preventDefault(); if(!e.currentTarget.reportValidity())return; window.location.href=landingMailto(this.state.form,this.L);this.setState({sent:true});};

  get L() { return this.state.lang; }

  renderVals() {
    const L = this.L, ja = L === 'ja';
    const mockKpi = [[t('landing.text001'), 3], [t('landing.text002'), 2], [t('landing.text003'), 5]].map(([label, value], i) => ({
      label, value,
      boxSt: 'flex:1; min-width:0; padding:9px 11px; border-radius:10px; background:' + (i === 1 ? 'rgba(229,72,77,.16)' : 'rgba(255,255,255,.07)') + ';',
      numSt: 'font-size:19px; font-weight:800; line-height:1.2; margin-top:2px; font-family:var(--mono); color:' + (i === 1 ? '#ff9d9d' : '#fff') + ';',
    }));
    const mockTodo = [
      ['提案メール', '1日超過', '#e5484d', '株式会社丸和運輸', 'メール作成', 1],
      ['フォロー', '9日 動きなし', '#e5484d', '山形屋商事', '電話する', 1],
      ['商談準備', '今日', '#d97706', 'パナソニックHVAC', '準備する', 0],
      ['お礼メール', '今日', '#d97706', '東海電機工業', '送付する', 0],
    ].map(([ty, chip, col, title, action, strong], i) => ({
      title, chip:ja?chip:({'1日超過':'逾期 1 天','9日 動きなし':'9 天未更新','今日':'今天'}[chip]), action:ja?action:({'メール作成':'撰寫郵件','電話する':'打電話','準備する':'準備','送付する':'寄送'}[action]),
      rowSt: 'display:flex; align-items:center; gap:9px; padding:9px 14px 9px 0;' + (i ? 'border-top:1px solid #f4f5f7;' : ''),
      railSt: 'width:3px; align-self:stretch; border-radius:0 2px 2px 0; background:' + col + '; flex:0 0 auto;',
      chipSt: 'flex:0 0 auto; font-size:10px; font-weight:800; padding:2px 7px; border-radius:5px; white-space:nowrap; color:' + (strong ? '#fff' : '#b45309') + '; background:' + (strong ? col : '#fdf0db') + ';',
      btnSt: 'flex:0 0 auto; font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:6px; white-space:nowrap; color:' + (strong ? '#fff' : PF) + '; background:' + (strong ? P : PS) + ';',
    }));

    const mkStats = (rows) => rows.map(([num, unit, label]) => ({ num, unit, label }));
    const statsJa = mkStats([
      ['142', '件', '1社あたりの自動取込件数（月平均）'],
      ['0', '件', '期限切れのまま放置された提案書'],
      ['64', '時間', '提案書・見積作成から削減した月間工数'],
      ['2', '週', '導入から現場稼働までの最短期間'],
    ]);
    const statsZh = mkStats([
      ['142', '件', '每家公司每月自動匯入的案件數'],
      ['0', '件', '逾期未處理的提案書'],
      ['64', '小時', '提案與報價作業每月省下的工時'],
      ['2', '週', '導入到現場開始使用的最短時間'],
    ]);

    const mkPains = (rows) => rows.map(([n, title, body]) => ({ n, title, body }));
    const painsJa = mkPains([
      ['01', '問い合わせが、返信されないまま流れていく', 'メール・フォーム・紹介から届く案件が別々の場所に溜まり、誰が対応するか決まらないうちに一次返信の期限が過ぎる。'],
      ['02', '提案書と見積書の作成に、夜が消える', '過去の資料を探し、体裁を整え、単価を確認する。商談そのものより、その準備に時間がかかっている。'],
      ['03', '事業ごとに管理がバラバラ', '開発と法人設立など事業が増えるたびにExcelとスプレッドシートが増え、全体の数字が誰にも見えなくなる。'],
    ]);
    const painsZh = mkPains([
      ['01', '詢價信躺在收件匣，最後沒人回', 'Email、表單、轉介進來的案件散在不同地方，還沒決定誰負責，第一次回覆的時限就過了。'],
      ['02', '提案書和報價單，吃掉整個晚上', '翻舊檔案、調格式、確認單價。準備的時間比談案子本身還長。'],
      ['03', '每個事業各自一套管理方式', '開發、法人設立每多一個事業，就多幾份 Excel 和試算表，整體數字沒有人看得到。'],
    ]);

    const featIcons = [IC.spark, IC.doc, IC.shield, IC.chart, IC.mic];
    const featTint = [[P, PS], ['#0891b2', '#e0f4f8'], ['#e5484d', '#fdecec'], ['#15803d', '#e3f5e9'], ['#c2410c', '#fde8db']];
    const mkFeats = (rows) => rows.map(([title, body, tags], i) => ({
      title, body, tags, d: featIcons[i],
      cardSt: 'background:#fff; border:1px solid #e9eaee; border-radius:16px; padding:24px 24px 26px; transition:border-color .15s, box-shadow .15s;',
      iconSt: 'width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:' + featTint[i][0] + '; background:' + featTint[i][1] + ';',
    }));
    const featsJa = mkFeats([
      ['AIが毎朝、今日やることを決める', '商談・期限・放置案件・新規リードをAIが読み、優先順位付きの一覧にします。行の右側のボタンから、そのまま次の一手を実行できます。', ['AIブリーフィング', '超過・今日・今週']],
      ['提案書と見積書を、指示するだけで作る', '案件の商談履歴と社内ナレッジを踏まえてAIが下書きを生成。「導入効果を数値で言い切って」のような修正も会話で通ります。', ['提案書スタジオ', '見積 機能一覧']],
      ['取りこぼしをゼロにする状態管理', '状態・ランク・期限を色と形で区別し、超過は赤で反転表示。担当未設定と日程未定も一覧の先頭に上がります。', ['状態バッジ', '期限アラート']],
      ['KPIと担当者パフォーマンスの可視化', 'エントリーから受注までの転換率を月次・週次で自動集計。担当ごとの成約率、平均商談回数、温度感まで並べて比較できます。', ['KPIレポート', '担当者分析']],
      ['議事録と予定は、自動で案件に紐づく', 'Fireflies の文字起こしをAIが要約して商談履歴へ。Googleカレンダーの未紐付け予定も、AIが候補案件を提示します。', ['Fireflies', 'Google カレンダー']],
    ]);
    const featsZh = mkFeats([
      ['AI 每天早上決定今天要做什麼', 'AI 讀過商談、期限、停滯案件與新進線索，產出帶優先順序的清單。每一列右側就有按鈕，可以直接執行下一步。', ['AI 早報', '逾期／今天／本週']],
      ['提案書與報價，用一句指示就產出', 'AI 依商談歷程與內部知識庫產生草稿。像「把導入效果用數字講清楚」這種修改，用對話就能改。', ['提案書工作室', '報價功能清單']],
      ['用狀態管理把漏接降到零', '狀態、等級、期限用顏色與形狀區分，逾期以紅底反白顯示。未指派負責人與未定日期也會排到清單最前面。', ['狀態標籤', '期限提醒']],
      ['KPI 與業務個人表現一目了然', '從進件到成交的轉換率自動按月、按週統計。各業務的成交率、平均商談次數、熱度都能並排比較。', ['KPI 報表', '業務分析']],
      ['會議記錄與行程自動掛回案件', 'Fireflies 的逐字稿由 AI 摘要後寫進商談歷程。Google 行事曆上還沒對應案件的行程，AI 也會提出候選。', ['Fireflies', 'Google 行事曆']],
    ]);

    const mkCases = (rows) => rows.map(([initial, company, meta, quote, metrics]) => ({
      initial, company, meta, quote,
      logoSt: 'width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#e7f7fc,#eef0fe); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; color:' + PF + '; flex:0 0 auto;',
      metrics: metrics.map(([value, label], i) => ({
        value, label,
        numSt: 'font-size:22px; font-weight:900; letter-spacing:-.01em; font-family:var(--mono); color:' + (i === 0 ? P : '#14161f') + ';',
      })),
    }));
    const casesJa = mkCases([
      ['A', 'A社（受託開発・導入イメージ）', '社員42名 / 営業5名', '「一次返信の遅れがゼロになりました。朝の10分で全員の今日が決まるので、案件の押し付け合いがなくなった。」',
        [['+38%', '一次商談への到達率'], ['0件', '返信遅れ'], ['-52h', '月間の管理工数']]],
      ['B', 'B社（開発＋法人設立・導入イメージ）', '社員18名 / 2事業', '「開発と法人設立を1つの画面で回せています。事業ごとの数字が毎週出るので、人の配置を数字で決められるようになりました。」',
        [['2→1', '管理ツールの数'], ['+24%', '受注率'], ['142件', '月間の取込件数']]],
    ]);
    const casesZh = mkCases([
      ['A', 'A 公司（受託開發・示意案例）', '員工 42 人 / 業務 5 人', '「第一次回覆再也沒有遲到過。早上十分鐘就決定全員今天要做什麼，不再互相推案子。」',
        [['+38%', '進入初次商談的比率'], ['0 件', '回覆逾期'], ['-52h', '每月管理工時']]],
      ['B', 'B 公司（開發＋法人設立・示意案例）', '員工 18 人 / 2 個事業', '「開發和法人設立在同一個畫面上跑。每週都有各事業的數字，人力配置終於能用數字決定。」',
        [['2→1', '管理工具數量'], ['+24%', '成交率'], ['142 件', '每月匯入件數']]],
    ]);

    const integs = [
      ['Gmail', 'GM', SI('gmail')], [t('landing.text004'), 'GC', SI('googlecalendar')], ['Google Drive', 'GD', SI('googledrive')],
      ['OpenAI', 'AI', JD('openai')], ['Slack', 'SL', JD('slack')], ['Zoom', 'ZM', SI('zoom')],
      ['Fireflies', 'FF', ''], ['freee', 'fr', ''],
    ].map(([name, mark, logo]) => ({
      name, mark, noLogo: !logo,
      logoEl: logo ? React.createElement('img', { src: logo, alt: '', style: { width: 20, height: 20, objectFit: 'contain', display: 'block' } }) : null,
      markSt: 'width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:11.5px; font-weight:800; color:' + PF + '; background:' + (logo ? '#fff' : PS) + ';' + (logo ? 'border:1px solid #e9eaee;' : ''),
    }));

    const mkSteps = (rows) => rows.map(([n, when, title, body]) => ({ n, when, title, body }));
    const stepsJa = mkSteps([
      ['1', 'DAY 1', '30分のオンラインデモ', '現在の案件の流れをうかがい、実際の画面でご覧いただきます。その場で御社のデータ項目に合うかを確認します。'],
      ['2', 'WEEK 1', '取込と事業の設定', 'Gmail の取込ルール、事業の振り分け、ステータスとランクのマスタをこちらで設定します。外部サービスからの取込は個別に対応します。'],
      ['3', 'WEEK 2', '現場が使い始める', '営業メンバーへの説明は30分。ダッシュボードとToDoから使い始め、KPI目標は運用しながら調整します。'],
    ]);
    const stepsZh = mkSteps([
      ['1', 'DAY 1', '30 分鐘線上示範', '先了解你們現在的案件流程，再用實際畫面操作給你看，當場確認欄位是否符合你們的資料。'],
      ['2', 'WEEK 1', '設定匯入與事業劃分', 'Gmail 的匯入規則、事業自動判定、狀態與等級主檔，都由我們這邊設定完成。外部服務的匯入另外個別處理。'],
      ['3', 'WEEK 2', '現場開始使用', '業務端說明只需 30 分鐘。先從儀表板與待辦開始用，KPI 目標邊用邊調。'],
    ]);

    const f = this.state.form;
    const set = (k) => (e) => { const v = e.target.value; this.setState(st => ({ form: Object.assign({}, st.form, { [k]: v }) })); };
    const inputSt = 'width:100%; box-sizing:border-box; border:1px solid #dfe2e8; border-radius:10px; padding:12px 13px; font-size:14px; font-weight:500; color:#14161f; background:#fff; outline:none;';
    const bizOpts = ja
      ? ['選択してください', 'システム・アプリ開発（受託）', '日本法人設立・進出支援', '両方', 'その他']
      : ['請選擇', '系統／應用程式開發（受託）', '日本法人設立・進駐支援', '兩者都有', '其他'];
    const slotOpts = ja
      ? ['時間帯を選択', '午前（9:00-12:00）', '午後（13:00-15:00）', '夕方（15:00-18:00）', 'いつでも可']
      : ['選擇時段', '上午（9:00-12:00）', '下午（13:00-15:00）', '傍晚（15:00-18:00）', '都可以'];
    const fields = [
      { key: 'company', label: t('landing.text005'), ph: t('landing.text006'), kind: 'text', type: 'text', req: true },
      { key: 'name', label: t('landing.text007'), ph: t('landing.text008'), kind: 'text', type: 'text', req: true },
      { key: 'email', label: t('landing.text009'), ph: 'you@company.co.jp', kind: 'text', type: 'email', req: true },
      { key: 'biz', label: t('landing.text010'), kind: 'select', options: bizOpts, req: true },
      { key: 'slot', label: t('landing.text011'), kind: 'slot', options: slotOpts, req: false },
    ].map(x => {
      const opts = (x.options || []).map((label,i)=>({label,value:i?String(i):''}));
      return {
      key:x.key, required:x.req, label: x.label+(x.kind==='slot'?' '+t('landing.contactTimezone'):''), ph: x.ph || '', type: x.type || 'text', options: opts,
      isText: x.kind === 'text', isSelect: x.kind === 'select', isSlot: x.kind === 'slot',
      value:f[x.key]||'', value2:f[x.key+'2']||'',
      onChange: set(x.key), onChange2: set(x.key + '2'), inputSt,
      req: x.req ? t('landing.text012') : t('landing.text013'),
      reqSt: 'font-size:10px; font-weight:800; padding:1px 6px; border-radius:4px; color:' + (x.req ? '#b91c1c' : '#8a909b') + '; background:' + (x.req ? '#fdecec' : '#f2f3f6') + ';',
      };
    });

    return {
      isJa: ja, isZh: !ja,
      langValue:L, setLang:e=>this.changeLang(e.target.value), privacy:location.pathname==='/privacy'||location.pathname==='/privacy.html', region:this.state.region, setRegion:this.changeRegion, appLink:'https://app.asm.ai-sutie.com/?lang='+L, contactLink:homePath()+'?lang='+L+'#contact', languageLabel:t('landing.text014'), loginLabel:t('landing.text015'), timeLabel:t('landing.text016'), consent:this.state.consent, setConsent:e=>this.setState({consent:e.target.checked}), consentText:t('landing.text017'), privacyLabel:t('landing.text018'), privacyLink:'/privacy?lang='+L+'&region='+this.state.region,
      nav: ja
        ? [{ label:'課題',href:homePath()+'?lang='+L+'#problems' }, { label: '機能', href: homePath()+'?lang='+L+'#features' }, { label:'導入事例',href:homePath()+'?lang='+L+'#stories' }, { label: '導入の流れ', href: homePath()+'?lang='+L+'#steps' }]
        : [{ label:'問題',href:homePath()+'?lang='+L+'#problems' }, { label: '功能', href: homePath()+'?lang='+L+'#features' }, { label:'導入案例',href:homePath()+'?lang='+L+'#stories' }, { label: '導入流程', href: homePath()+'?lang='+L+'#steps' }],
      ctaShort: t('landing.text019'),
      heroTicksJa: ['初期費用の見積は無料', '既存のExcelから移行支援', '最短2週間で稼働'],
      heroTicksZh: ['初期評估與報價免費', '協助從現有 Excel 移轉', '最快兩週上線'],
      mockKpi, mockTodo,
      statsJa, statsZh, painsJa, painsZh, featsJa, featsZh, casesJa, casesZh, integs, stepsJa, stepsZh,
      formEyebrow: t('landing.text020'),
      formTitle: t('landing.text021'),
      formLead: t('landing.text022'),
      formPoints: ja
        ? ['オンライン30分・カメラなしでも可', '担当者が御社のデータ項目で確認', '当日中にご返信', '料金は要件をうかがってからお見積り']
        : ['線上 30 分鐘，不開鏡頭也可以', '由負責人用你們的實際欄位確認', '當天回覆', '費用依需求評估後報價'],
      priceLabel: t('landing.text023'),
      priceBody: t('landing.text024'),
      companyName: 'ALION株式会社',
      fields, submitLabel: t('landing.text025'),
      formNote: t('landing.text026'),
      submit:this.submit, reset: () => this.setState({ sent: false }),
      sent: this.state.sent, notSent: !this.state.sent,
      sentTitle: t('landing.text027'),
      sentBody: t('landing.text028'),
      sentAgain: t('landing.text029'),
      footerProduct: t('landing.text030'),
      footerLinks: [{label:t('landing.text031'),href:homePath()+'?lang='+L+'#features'},{label:t('landing.text032'),href:homePath()+'?lang='+L+'#steps'},{label:t('landing.text033'),href:homePath()+'?lang='+L+'#contact'},{label:t('landing.text018'),href:'/privacy?lang='+L+'&region='+this.state.region}],
    };
  }

  render(){
    const view=this.renderVals();
    return <LandingLayout {...view}/>;
  }
}

function LandingLayout({isJa,isZh,langValue,setLang,privacy,region,setRegion,appLink,contactLink,languageLabel,loginLabel,timeLabel,consent,setConsent,consentText,privacyLabel,privacyLink,nav,ctaShort,heroTicksJa,heroTicksZh,mockKpi,mockTodo,statsJa,statsZh,painsJa,painsZh,featsJa,featsZh,casesJa,casesZh,integs,stepsJa,stepsZh,formEyebrow,formTitle,formLead,formPoints,priceLabel,priceBody,companyName,fields,submitLabel,formNote,submit,reset,sent,notSent,sentTitle,sentBody,sentAgain,footerProduct,footerLinks}) { return (

<div className="landing-site" style={css("width:100%; overflow-x:hidden")}>

<header className="landing-header" style={css("position:sticky; top:0; z-index:200; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid #ecedf1")}>

<div style={css("max-width:1160px; margin:0 auto; padding:0 24px; height:66px; display:flex; align-items:center; gap:18px")}>

<img src="/assets/asm/asm-mark-dark.png" alt="ASM" style={css("display:block; width:82px; height:27px; flex:0 0 auto")} />

<nav className="landing-nav" style={css("display:flex; align-items:center; gap:20px; margin-left:8px; min-width:0; overflow:hidden")}>

{nav.map((n, index) => <React.Fragment key={index}>

<a href={n.href} style={css("font-size:13.5px; font-weight:600; color:#4b515c; white-space:nowrap")} className="landing-hover-0">
{n.label}
</a>

</React.Fragment>)}

</nav>

<div style={css("flex:1; min-width:8px")}>

</div>

<select className="header-language" aria-label={languageLabel} value={langValue} onChange={setLang}>
<option value="ja">
{"日本語"}
</option>
<option value="zh-TW">
{"繁體中文"}
</option>
</select>
<a className="system-login" href={appLink}>
{loginLabel}
</a>
<a href={contactLink} style={css("display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; background:#4a5af0; color:#fff; border-radius:10px; padding:10px 17px; font-size:13.5px; font-weight:700; white-space:nowrap; box-shadow:0 2px 8px rgba(40,50,180,.26)")} className="landing-hover-1">
{ctaShort}
</a>

</div>

</header>


{isJa && !privacy && <>

<div >

<section id="hero" className="landing-hero" style={css("background:#191c28; color:#fff; overflow:hidden")}>

<div style={css("max-width:1160px; margin:0 auto; padding:64px 24px 72px; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:44px; align-items:center")}>

<div style={css("min-width:0")}>

<div style={css("display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(125,227,247,.3); background:rgba(125,227,247,.08); border-radius:999px; padding:6px 13px; margin-bottom:22px")}>

<span style={css("width:7px; height:7px; border-radius:50%; background:#7de3f7")}>

</span>

<span style={css("font-size:12px; font-weight:700; color:#7de3f7; letter-spacing:.04em")}>
{"AI搭載 案件・商談管理システム"}
</span>

</div>

<h1 style={css("font-size:clamp(30px,4.2vw,46px); font-weight:900; line-height:1.35; letter-spacing:-.02em")}>
{"今日やることが、"}
<br  />
{"ログインした瞬間に分かる。"}
</h1>

<p style={css("font-size:16px; line-height:1.9; color:rgba(255,255,255,.68); margin-top:20px; max-width:30em; text-wrap:pretty")}>
{"問い合わせの取りこぼし、期限切れの提案書、担当者しか知らない商談。ASM は毎朝AIが案件を読み込み、「誰が・どの案件に・今日何をするか」を一覧にします。提案書と見積書の作成、議事録の取り込みまで同じ画面で完結します。"}
</p>

<div style={css("display:flex; flex-wrap:wrap; gap:11px; margin-top:30px")}>

<a href="#contact" style={css("display:inline-flex; align-items:center; gap:8px; background:#4a5af0; color:#fff; border-radius:11px; padding:14px 24px; font-size:15px; font-weight:700; box-shadow:0 4px 16px rgba(74,90,240,.4)")} className="landing-hover-2">
{"\n              無料デモを予約する\n              "}
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
<path d="M5 12h14M13 5l7 7-7 7">

</path>
</svg>

</a>

<a href="#features" style={css("display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:11px; padding:14px 22px; font-size:15px; font-weight:700")} className="landing-hover-3">
{"機能を見る"}
</a>

</div>

<div style={css("display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:26px")}>

{heroTicksJa.map((t, index) => <React.Fragment key={index}>

<span style={css("display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:rgba(255,255,255,.55)")}>

<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7de3f7" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round" style={css("flex:0 0 auto")}>
<path d="M20 6L9 17l-5-5">

</path>
</svg>
{t}
</span>

</React.Fragment>)}

</div>

</div>

<div style={css("min-width:0")}>

<div style={css("background:#fff; border-radius:16px; box-shadow:0 26px 70px rgba(0,0,0,.42); overflow:hidden")}>

<div style={css("display:flex; align-items:center; gap:8px; padding:11px 14px; background:#f6f7fa; border-bottom:1px solid #e9eaee")}>

<span style={css("width:9px; height:9px; border-radius:50%; background:#e5484d")}>

</span>

<span style={css("width:9px; height:9px; border-radius:50%; background:#f0b429")}>

</span>

<span style={css("width:9px; height:9px; border-radius:50%; background:#16a34a")}>

</span>

<span style={css("font-size:11px; color:#8a909b; margin-left:6px; font-family:var(--mono)")}>
{"ASM / 今日のダッシュボード"}
</span>

</div>

<div style={css("padding:16px; background:#f6f7fa")}>

<div style={css("border-radius:13px; background:#191c28; padding:15px 17px; margin-bottom:12px")}>

<div style={css("font-size:10.5px; font-weight:800; color:#7de3f7; letter-spacing:.16em")}>
{"2026.09.07 MON"}
</div>

<div style={css("font-size:16px; font-weight:800; color:#fff; margin-top:6px; line-height:1.5")}>
{"今日は商談3件、対応が必要12件"}
</div>

<div style={css("display:flex; gap:8px; margin-top:12px")}>

{mockKpi.map((k, index) => <React.Fragment key={index}>

<div style={css(k.boxSt)}>

<div style={css("font-size:10px; color:rgba(255,255,255,.5); font-weight:700")}>
{k.label}
</div>

<div style={css(k.numSt)}>
{k.value}
</div>

</div>

</React.Fragment>)}

</div>

</div>

<div style={css("background:#fff; border:1px solid #e9eaee; border-radius:13px; overflow:hidden")}>

<div style={css("display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid #f0f1f4")}>

<span style={css("font-size:12.5px; font-weight:700; color:#14161f")}>
{"対応が必要"}
</span>

<span style={css("font-size:10.5px; font-weight:800; color:#fff; background:#e5484d; border-radius:999px; padding:1px 8px")}>
{"超過 2"}
</span>

<span style={css("font-size:10.5px; font-weight:800; color:#b45309; background:#fdf0db; border-radius:999px; padding:1px 8px")}>
{"今日 3"}
</span>

</div>

{mockTodo.map((m, index) => <React.Fragment key={index}>

<div style={css(m.rowSt)}>

<span style={css(m.railSt)}>

</span>

<span style={css(m.chipSt)}>
{m.chip}
</span>

<span style={css("font-size:12px; font-weight:600; color:#1f2430; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap")}>
{m.title}
</span>

<span style={css(m.btnSt)}>
{m.action}
</span>

</div>

</React.Fragment>)}

</div>

</div>

</div>

</div>

</div>

</section>

<section id="stats" className="landing-stats" style={css("border-bottom:1px solid #ecedf1; background:#fff")}>

<div style={css("max-width:1160px; margin:0 auto; padding:34px 24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:24px")}>

{statsJa.map((s, index) => <React.Fragment key={index}>

<div >

<div style={css("display:flex; align-items:baseline; gap:4px")}>

<span style={css("font-size:32px; font-weight:900; letter-spacing:-.02em; color:#14161f; font-family:var(--mono)")}>
{s.num}
</span>

<span style={css("font-size:14px; font-weight:800; color:#4a5af0")}>
{s.unit}
</span>

</div>

<div style={css("font-size:12.5px; color:#6b727c; font-weight:600; margin-top:5px; line-height:1.6")}>
{s.label}
</div>

</div>

</React.Fragment>)}

</div>

<p className="landing-sample-note">{t('landing.sampleNote')}</p>
</section>

<section id="problems" className="landing-problems" style={css("background:#f6f7fa")}>

<div style={css("max-width:1160px; margin:0 auto; padding:66px 24px")}>

<div style={css("font-size:12px; font-weight:800; color:#4a5af0; letter-spacing:.14em; margin-bottom:12px")}>
{"課題"}
</div>

<h2 style={css("font-size:clamp(23px,2.8vw,31px); font-weight:800; letter-spacing:-.01em; line-height:1.5; max-width:24em; text-wrap:pretty")}>
{"案件が増えるほど、管理が属人化していく。"}
</h2>

<div style={css("display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:34px")}>

{painsJa.map((p, index) => <React.Fragment key={index}>

<div style={css("background:#fff; border:1px solid #e9eaee; border-radius:16px; padding:24px 24px 26px")}>

<div style={css("font-size:11px; font-weight:800; color:#c4c9d0; letter-spacing:.1em; font-family:var(--mono)")}>
{p.n}
</div>

<div style={css("font-size:16px; font-weight:800; color:#14161f; margin-top:12px; line-height:1.6")}>
{p.title}
</div>

<div style={css("font-size:13.5px; color:#5b626d; line-height:1.9; margin-top:10px; text-wrap:pretty")}>
{p.body}
</div>

</div>

</React.Fragment>)}

</div>

</div>

</section>

<section id="features" className="landing-features" style={css("background:#fff")}>

<div style={css("max-width:1160px; margin:0 auto; padding:70px 24px")}>

<div style={css("font-size:12px; font-weight:800; color:#4a5af0; letter-spacing:.14em; margin-bottom:12px")}>
{"機能"}
</div>

<h2 style={css("font-size:clamp(23px,2.8vw,31px); font-weight:800; letter-spacing:-.01em; line-height:1.5; max-width:26em; text-wrap:pretty")}>
{"入力を増やさずに、抜け漏れをなくす5つの仕組み。"}
</h2>

<div style={css("display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:16px; margin-top:34px")}>

{featsJa.map((f, index) => <React.Fragment key={index}>

<div style={css(f.cardSt)} className="landing-hover-4">

<div style={css(f.iconSt)}>

<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d={f.d}>

</path>
</svg>

</div>

<div style={css("font-size:16px; font-weight:800; color:#14161f; margin-top:16px; line-height:1.55")}>
{f.title}
</div>

<div style={css("font-size:13.5px; color:#5b626d; line-height:1.9; margin-top:9px; text-wrap:pretty")}>
{f.body}
</div>

<div style={css("display:flex; flex-wrap:wrap; gap:6px; margin-top:14px")}>

{f.tags.map((tg, index) => <React.Fragment key={index}>

<span style={css("font-size:11px; font-weight:700; color:#3a44c8; background:#eef0fe; border-radius:6px; padding:3px 9px")}>
{tg}
</span>

</React.Fragment>)}

</div>

</div>

</React.Fragment>)}

</div>

</div>

</section>

<section id="stories" className="landing-stories" style={css("background:#f6f7fa")}>

<div style={css("max-width:1160px; margin:0 auto; padding:66px 24px")}>

<div style={css("font-size:12px; font-weight:800; color:#4a5af0; letter-spacing:.14em; margin-bottom:12px")}>
{"導入事例"}
</div>

<h2 style={css("font-size:clamp(23px,2.8vw,31px); font-weight:800; letter-spacing:-.01em; line-height:1.5")}>
{"数字で見る、導入後の変化。"}
</h2>

<div style={css("display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; margin-top:34px")}>

{casesJa.map((c, index) => <React.Fragment key={index}>

<div style={css("background:#fff; border:1px solid #e9eaee; border-radius:16px; padding:26px 26px 24px")}>

<div style={css("display:flex; align-items:center; gap:11px")}>

<div style={css(c.logoSt)}>
{c.initial}
</div>

<div style={css("min-width:0")}>

<div style={css("font-size:14px; font-weight:800; color:#14161f")}>
{c.company}
</div>

<div style={css("font-size:12px; color:#8a909b; margin-top:2px")}>
{c.meta}
</div>

</div>

</div>

<div style={css("font-size:15px; font-weight:700; color:#14161f; line-height:1.75; margin-top:18px; text-wrap:pretty")}>
{c.quote}
</div>

<div style={css("display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid #f0f1f4")}>

{c.metrics.map((m, index) => <React.Fragment key={index}>

<div >

<div style={css(m.numSt)}>
{m.value}
</div>

<div style={css("font-size:11.5px; color:#8a909b; font-weight:600; margin-top:3px; line-height:1.5")}>
{m.label}
</div>

</div>

</React.Fragment>)}

</div>

</div>

</React.Fragment>)}

</div>

<div style={css("font-size:11.5px; color:#a8aeb8; margin-top:14px")}>
{"※ 画面・企業事例・数値は利用イメージを示すサンプルです。導入成果を保証するものではありません。"}
</div>

</div>

</section>

<section id="integrations" className="landing-integrations" style={css("background:#fff; border-top:1px solid #ecedf1")}>

<div style={css("max-width:1160px; margin:0 auto; padding:52px 24px")}>

<div style={css("display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:22px")}>

<div style={css("font-size:14px; font-weight:800; color:#14161f; white-space:nowrap")}>
{"いま使っているツールと、そのまま繋がる"}
</div>

<div style={css("flex:1; min-width:40px; height:1px; background:#ecedf1")}>

</div>

<div style={css("font-size:12.5px; color:#8a909b")}>
{"Gmail・カレンダー・議事録・会計まで自動連携"}
</div>

</div>

<div style={css("display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px")}>

{integs.map((i, index) => <React.Fragment key={index}>

<div style={css("display:flex; align-items:center; gap:11px; border:1px solid #e9eaee; border-radius:12px; padding:13px 15px; background:#fff")}>

<div style={css(i.markSt)}>
{i.logoEl}
{i.noLogo && <>
<span >
{i.mark}
</span>
</>}
</div>

<span style={css("font-size:13px; font-weight:700; color:#2b2f38; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap")}>
{i.name}
</span>

</div>

</React.Fragment>)}

</div>

</div>

</section>

<section id="steps" className="landing-steps" style={css("background:#191c28; color:#fff")}>

<div style={css("max-width:1160px; margin:0 auto; padding:62px 24px")}>

<div style={css("font-size:12px; font-weight:800; color:#7de3f7; letter-spacing:.14em; margin-bottom:12px")}>
{"導入の流れ"}
</div>

<h2 style={css("font-size:clamp(22px,2.6vw,29px); font-weight:800; letter-spacing:-.01em; line-height:1.5")}>
{"最短2週間で、現場が使い始められます。"}
</h2>

<div style={css("display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:34px")}>

{stepsJa.map((s, index) => <React.Fragment key={index}>

<div style={css("border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:22px 22px 24px; background:rgba(255,255,255,.04)")}>

<div style={css("display:flex; align-items:center; gap:10px")}>

<span style={css("display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; background:#4a5af0; color:#fff; font-size:12.5px; font-weight:800; font-family:var(--mono)")}>
{s.n}
</span>

<span style={css("font-size:12px; font-weight:800; color:#7de3f7; letter-spacing:.06em")}>
{s.when}
</span>

</div>

<div style={css("font-size:15.5px; font-weight:800; margin-top:14px; line-height:1.6")}>
{s.title}
</div>

<div style={css("font-size:13px; color:rgba(255,255,255,.6); line-height:1.9; margin-top:9px; text-wrap:pretty")}>
{s.body}
</div>

</div>

</React.Fragment>)}

</div>

</div>

</section>

</div>

</>}


{isZh && !privacy && <>

<div >

<section id="hero" className="landing-hero" style={css("background:#191c28; color:#fff; overflow:hidden")}>

<div style={css("max-width:1160px; margin:0 auto; padding:64px 24px 72px; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:44px; align-items:center")}>

<div style={css("min-width:0")}>

<div style={css("display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(125,227,247,.3); background:rgba(125,227,247,.08); border-radius:999px; padding:6px 13px; margin-bottom:22px")}>

<span style={css("width:7px; height:7px; border-radius:50%; background:#7de3f7")}>

</span>

<span style={css("font-size:12px; font-weight:700; color:#7de3f7; letter-spacing:.04em")}>
{"AI 驅動的案件與商談管理系統"}
</span>

</div>

<h1 style={css("font-size:clamp(30px,4.2vw,46px); font-weight:900; line-height:1.4; letter-spacing:-.01em")}>
{"今天該做什麼，"}
<br  />
{"登入的那一刻就知道。"}
</h1>

<p style={css("font-size:16px; line-height:2; color:rgba(255,255,255,.68); margin-top:20px; max-width:28em; text-wrap:pretty")}>
{"漏掉的詢價、過期的提案、只有負責人知道的商談進度。ASM 每天早上由 AI 讀過所有案件，列出「誰、哪一件、今天要做什麼」。提案書與報價的產出、會議記錄的匯入，都在同一個畫面完成。"}
</p>

<div style={css("display:flex; flex-wrap:wrap; gap:11px; margin-top:30px")}>

<a href="#contact" style={css("display:inline-flex; align-items:center; gap:8px; background:#4a5af0; color:#fff; border-radius:11px; padding:14px 24px; font-size:15px; font-weight:700; box-shadow:0 4px 16px rgba(74,90,240,.4)")} className="landing-hover-5">
{"\n              預約免費線上示範\n              "}
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
<path d="M5 12h14M13 5l7 7-7 7">

</path>
</svg>

</a>

<a href="#features" style={css("display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:11px; padding:14px 22px; font-size:15px; font-weight:700")} className="landing-hover-6">
{"看功能"}
</a>

</div>

<div style={css("display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:26px")}>

{heroTicksZh.map((t, index) => <React.Fragment key={index}>

<span style={css("display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:rgba(255,255,255,.55)")}>

<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7de3f7" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round" style={css("flex:0 0 auto")}>
<path d="M20 6L9 17l-5-5">

</path>
</svg>
{t}
</span>

</React.Fragment>)}

</div>

</div>

<div style={css("min-width:0")}>

<div style={css("background:#fff; border-radius:16px; box-shadow:0 26px 70px rgba(0,0,0,.42); overflow:hidden")}>

<div style={css("display:flex; align-items:center; gap:8px; padding:11px 14px; background:#f6f7fa; border-bottom:1px solid #e9eaee")}>

<span style={css("width:9px; height:9px; border-radius:50%; background:#e5484d")}>

</span>

<span style={css("width:9px; height:9px; border-radius:50%; background:#f0b429")}>

</span>

<span style={css("width:9px; height:9px; border-radius:50%; background:#16a34a")}>

</span>

<span style={css("font-size:11px; color:#8a909b; margin-left:6px; font-family:var(--mono)")}>
{"ASM / 今日儀表板"}
</span>

</div>

<div style={css("padding:16px; background:#f6f7fa")}>

<div style={css("border-radius:13px; background:#191c28; padding:15px 17px; margin-bottom:12px")}>

<div style={css("font-size:10.5px; font-weight:800; color:#7de3f7; letter-spacing:.16em")}>
{"2026.09.07 MON"}
</div>

<div style={css("font-size:16px; font-weight:800; color:#fff; margin-top:6px; line-height:1.5")}>
{"今天有 3 場商談、12 件待處理"}
</div>

<div style={css("display:flex; gap:8px; margin-top:12px")}>

{mockKpi.map((k, index) => <React.Fragment key={index}>

<div style={css(k.boxSt)}>

<div style={css("font-size:10px; color:rgba(255,255,255,.5); font-weight:700")}>
{k.label}
</div>

<div style={css(k.numSt)}>
{k.value}
</div>

</div>

</React.Fragment>)}

</div>

</div>

<div style={css("background:#fff; border:1px solid #e9eaee; border-radius:13px; overflow:hidden")}>

<div style={css("display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid #f0f1f4")}>

<span style={css("font-size:12.5px; font-weight:700; color:#14161f")}>
{"待處理"}
</span>

<span style={css("font-size:10.5px; font-weight:800; color:#fff; background:#e5484d; border-radius:999px; padding:1px 8px")}>
{"逾期 2"}
</span>

<span style={css("font-size:10.5px; font-weight:800; color:#b45309; background:#fdf0db; border-radius:999px; padding:1px 8px")}>
{"今天 3"}
</span>

</div>

{mockTodo.map((m, index) => <React.Fragment key={index}>

<div style={css(m.rowSt)}>

<span style={css(m.railSt)}>

</span>

<span style={css(m.chipSt)}>
{m.chip}
</span>

<span style={css("font-size:12px; font-weight:600; color:#1f2430; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap")}>
{m.title}
</span>

<span style={css(m.btnSt)}>
{m.action}
</span>

</div>

</React.Fragment>)}

</div>

</div>

</div>

</div>

</div>

</section>

<section id="stats" className="landing-stats" style={css("border-bottom:1px solid #ecedf1; background:#fff")}>

<div style={css("max-width:1160px; margin:0 auto; padding:34px 24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:24px")}>

{statsZh.map((s, index) => <React.Fragment key={index}>

<div >

<div style={css("display:flex; align-items:baseline; gap:4px")}>

<span style={css("font-size:32px; font-weight:900; letter-spacing:-.02em; color:#14161f; font-family:var(--mono)")}>
{s.num}
</span>

<span style={css("font-size:14px; font-weight:800; color:#4a5af0")}>
{s.unit}
</span>

</div>

<div style={css("font-size:12.5px; color:#6b727c; font-weight:600; margin-top:5px; line-height:1.6")}>
{s.label}
</div>

</div>

</React.Fragment>)}

</div>

<p className="landing-sample-note">{t('landing.sampleNote')}</p>
</section>

<section id="problems" className="landing-problems" style={css("background:#f6f7fa")}>

<div style={css("max-width:1160px; margin:0 auto; padding:66px 24px")}>

<div style={css("font-size:12px; font-weight:800; color:#4a5af0; letter-spacing:.14em; margin-bottom:12px")}>
{"現場的問題"}
</div>

<h2 style={css("font-size:clamp(23px,2.8vw,31px); font-weight:800; letter-spacing:-.01em; line-height:1.6; max-width:22em; text-wrap:pretty")}>
{"案件越多，管理就越依賴個人記憶。"}
</h2>

<div style={css("display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:34px")}>

{painsZh.map((p, index) => <React.Fragment key={index}>

<div style={css("background:#fff; border:1px solid #e9eaee; border-radius:16px; padding:24px 24px 26px")}>

<div style={css("font-size:11px; font-weight:800; color:#c4c9d0; letter-spacing:.1em; font-family:var(--mono)")}>
{p.n}
</div>

<div style={css("font-size:16px; font-weight:800; color:#14161f; margin-top:12px; line-height:1.6")}>
{p.title}
</div>

<div style={css("font-size:13.5px; color:#5b626d; line-height:2; margin-top:10px; text-wrap:pretty")}>
{p.body}
</div>

</div>

</React.Fragment>)}

</div>

</div>

</section>

<section id="features" className="landing-features" style={css("background:#fff")}>

<div style={css("max-width:1160px; margin:0 auto; padding:70px 24px")}>

<div style={css("font-size:12px; font-weight:800; color:#4a5af0; letter-spacing:.14em; margin-bottom:12px")}>
{"功能"}
</div>

<h2 style={css("font-size:clamp(23px,2.8vw,31px); font-weight:800; letter-spacing:-.01em; line-height:1.6; max-width:24em; text-wrap:pretty")}>
{"不用多輸入，就不再漏掉任何一件。"}
</h2>

<div style={css("display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:16px; margin-top:34px")}>

{featsZh.map((f, index) => <React.Fragment key={index}>

<div style={css(f.cardSt)} className="landing-hover-7">

<div style={css(f.iconSt)}>

<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d={f.d}>

</path>
</svg>

</div>

<div style={css("font-size:16px; font-weight:800; color:#14161f; margin-top:16px; line-height:1.55")}>
{f.title}
</div>

<div style={css("font-size:13.5px; color:#5b626d; line-height:2; margin-top:9px; text-wrap:pretty")}>
{f.body}
</div>

<div style={css("display:flex; flex-wrap:wrap; gap:6px; margin-top:14px")}>

{f.tags.map((tg, index) => <React.Fragment key={index}>

<span style={css("font-size:11px; font-weight:700; color:#3a44c8; background:#eef0fe; border-radius:6px; padding:3px 9px")}>
{tg}
</span>

</React.Fragment>)}

</div>

</div>

</React.Fragment>)}

</div>

</div>

</section>

<section id="stories" className="landing-stories" style={css("background:#f6f7fa")}>

<div style={css("max-width:1160px; margin:0 auto; padding:66px 24px")}>

<div style={css("font-size:12px; font-weight:800; color:#4a5af0; letter-spacing:.14em; margin-bottom:12px")}>
{"導入案例"}
</div>

<h2 style={css("font-size:clamp(23px,2.8vw,31px); font-weight:800; letter-spacing:-.01em; line-height:1.6")}>
{"用數字看導入後的變化。"}
</h2>

<div style={css("display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; margin-top:34px")}>

{casesZh.map((c, index) => <React.Fragment key={index}>

<div style={css("background:#fff; border:1px solid #e9eaee; border-radius:16px; padding:26px 26px 24px")}>

<div style={css("display:flex; align-items:center; gap:11px")}>

<div style={css(c.logoSt)}>
{c.initial}
</div>

<div style={css("min-width:0")}>

<div style={css("font-size:14px; font-weight:800; color:#14161f")}>
{c.company}
</div>

<div style={css("font-size:12px; color:#8a909b; margin-top:2px")}>
{c.meta}
</div>

</div>

</div>

<div style={css("font-size:15px; font-weight:700; color:#14161f; line-height:1.85; margin-top:18px; text-wrap:pretty")}>
{c.quote}
</div>

<div style={css("display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid #f0f1f4")}>

{c.metrics.map((m, index) => <React.Fragment key={index}>

<div >

<div style={css(m.numSt)}>
{m.value}
</div>

<div style={css("font-size:11.5px; color:#8a909b; font-weight:600; margin-top:3px; line-height:1.5")}>
{m.label}
</div>

</div>

</React.Fragment>)}

</div>

</div>

</React.Fragment>)}

</div>

<div style={css("font-size:11.5px; color:#a8aeb8; margin-top:14px")}>
{"※ 畫面、企業案例與數字為使用情境示意，並非經查證的客戶實績或成果保證。"}
</div>

</div>

</section>

<section id="integrations" className="landing-integrations" style={css("background:#fff; border-top:1px solid #ecedf1")}>

<div style={css("max-width:1160px; margin:0 auto; padding:52px 24px")}>

<div style={css("display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:22px")}>

<div style={css("font-size:14px; font-weight:800; color:#14161f; white-space:nowrap")}>
{"和你現在用的工具直接串接"}
</div>

<div style={css("flex:1; min-width:40px; height:1px; background:#ecedf1")}>

</div>

<div style={css("font-size:12.5px; color:#8a909b")}>
{"郵件、行事曆、會議記錄到會計，全部自動連動"}
</div>

</div>

<div style={css("display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px")}>

{integs.map((i, index) => <React.Fragment key={index}>

<div style={css("display:flex; align-items:center; gap:11px; border:1px solid #e9eaee; border-radius:12px; padding:13px 15px; background:#fff")}>

<div style={css(i.markSt)}>
{i.logoEl}
{i.noLogo && <>
<span >
{i.mark}
</span>
</>}
</div>

<span style={css("font-size:13px; font-weight:700; color:#2b2f38; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap")}>
{i.name}
</span>

</div>

</React.Fragment>)}

</div>

</div>

</section>

<section id="steps" className="landing-steps" style={css("background:#191c28; color:#fff")}>

<div style={css("max-width:1160px; margin:0 auto; padding:62px 24px")}>

<div style={css("font-size:12px; font-weight:800; color:#7de3f7; letter-spacing:.14em; margin-bottom:12px")}>
{"導入流程"}
</div>

<h2 style={css("font-size:clamp(22px,2.6vw,29px); font-weight:800; letter-spacing:-.01em; line-height:1.6")}>
{"最快兩週，現場就能開始用。"}
</h2>

<div style={css("display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:34px")}>

{stepsZh.map((s, index) => <React.Fragment key={index}>

<div style={css("border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:22px 22px 24px; background:rgba(255,255,255,.04)")}>

<div style={css("display:flex; align-items:center; gap:10px")}>

<span style={css("display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; background:#4a5af0; color:#fff; font-size:12.5px; font-weight:800; font-family:var(--mono)")}>
{s.n}
</span>

<span style={css("font-size:12px; font-weight:800; color:#7de3f7; letter-spacing:.06em")}>
{s.when}
</span>

</div>

<div style={css("font-size:15.5px; font-weight:800; margin-top:14px; line-height:1.6")}>
{s.title}
</div>

<div style={css("font-size:13px; color:rgba(255,255,255,.6); line-height:2; margin-top:9px; text-wrap:pretty")}>
{s.body}
</div>

</div>

</React.Fragment>)}

</div>

</div>

</section>

</div>

</>}


{!privacy && <>
<section id="contact" style={css("background:#f6f7fa; border-top:1px solid #ecedf1")}>

<div style={css("max-width:1160px; margin:0 auto; padding:70px 24px 76px; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:34px; align-items:start")}>

<div style={css("min-width:0")}>

<div style={css("font-size:12px; font-weight:800; color:#4a5af0; letter-spacing:.14em; margin-bottom:12px")}>
{formEyebrow}
</div>

<h2 style={css("font-size:clamp(24px,3vw,33px); font-weight:900; letter-spacing:-.01em; line-height:1.5; text-wrap:pretty")}>
{formTitle}
</h2>

<p style={css("font-size:14.5px; color:#5b626d; line-height:1.95; margin-top:16px; max-width:26em; text-wrap:pretty")}>
{formLead}
</p>

<div style={css("display:flex; flex-direction:column; gap:12px; margin-top:26px")}>

{formPoints.map((p, index) => <React.Fragment key={index}>

<div style={css("display:flex; align-items:flex-start; gap:10px")}>

<span style={css("display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#e3f5e9; flex:0 0 auto; margin-top:1px")}>

<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#15803d" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
<path d="M20 6L9 17l-5-5">

</path>
</svg>

</span>

<span style={css("font-size:13.5px; color:#3b414b; font-weight:600; line-height:1.7")}>
{p}
</span>

</div>

</React.Fragment>)}

</div>

<div style={css("margin-top:26px; padding:16px 18px; background:#fff; border:1px solid #e9eaee; border-radius:14px")}>

<div style={css("font-size:12px; font-weight:800; color:#8a909b; letter-spacing:.06em")}>
{priceLabel}
</div>

<div style={css("font-size:14.5px; font-weight:700; color:#14161f; margin-top:6px; line-height:1.7")}>
{priceBody}
</div>

</div>

</div>

<div style={css("min-width:0; background:#fff; border:1px solid #e9eaee; border-radius:18px; padding:26px 26px 24px; box-shadow:0 8px 30px rgba(20,22,40,.06)")}>

{sent && <>

<div style={css("padding:32px 6px; text-align:center")}>

<div style={css("width:46px; height:46px; border-radius:50%; background:#e3f5e9; display:flex; align-items:center; justify-content:center; margin:0 auto 16px")}>

<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#15803d" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round">
<path d="M20 6L9 17l-5-5">

</path>
</svg>

</div>

<div style={css("font-size:17px; font-weight:800; color:#14161f")}>
{sentTitle}
</div>

<div style={css("font-size:13.5px; color:#5b626d; line-height:1.9; margin-top:10px")}>
{sentBody}
</div>

<button onClick={reset} style={css("margin-top:20px; border:1px solid #e2e5ea; background:#fff; color:#3b414b; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit")}>
{sentAgain}
</button>

</div>

</>}

{notSent && <>

<form onSubmit={submit}>

<div style={css("display:flex; flex-direction:column; gap:16px")}>

{fields.map((f, index) => <React.Fragment key={index}>

<div >

<label htmlFor={f.key} style={css("display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; color:#3b414b; margin-bottom:7px")}>
{f.label}
<span style={css(f.reqSt)}>
{f.req}
</span>
</label>

{f.isText && <>

<input id={f.key} name={f.key} required={f.required} maxLength="200" value={f.value} onChange={f.onChange} type={f.type} placeholder={f.ph} style={css(f.inputSt)} />

</>}

{f.isSelect && <>

<select id={f.key} name={f.key} required={f.required} value={f.value} onChange={f.onChange} style={css(f.inputSt)}>

{f.options.map((o, index) => <React.Fragment key={index}>

<option value={o.value}>
{o.label}
</option>

</React.Fragment>)}

</select>

</>}

{f.isSlot && <>

<div style={css("display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:8px")}>

<input id={f.key} name={f.key} required={f.required} maxLength="200" value={f.value} onChange={f.onChange} type="date" style={css(f.inputSt)} />

<select aria-label={timeLabel} value={f.value2} onChange={f.onChange2} style={css(f.inputSt)}>

{f.options.map((o, index) => <React.Fragment key={index}>

<option value={o.value}>
{o.label}
</option>

</React.Fragment>)}

</select>

</div>

</>}

</div>

</React.Fragment>)}

</div>

<label className="privacy-consent">
<input type="checkbox" required={true} checked={consent} onChange={setConsent} />
<span >
{consentText}
<a href={privacyLink} target="_blank" rel="noopener">
{privacyLabel}
</a>
</span>
</label>
<button type="submit" style={css("width:100%; margin-top:22px; border:none; background:#4a5af0; color:#fff; border-radius:11px; padding:15px 20px; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit; box-shadow:0 3px 12px rgba(40,50,180,.28)")} className="landing-hover-8">
{submitLabel}
</button>

<div style={css("font-size:11.5px; color:#7b828d; line-height:1.8; margin-top:12px; text-align:center")}>
{formNote}
</div>

</form>

</>}

</div>

</div>

</section>

</>}
{privacy && <>
<PrivacyPolicy lang={langValue} region={region} onRegion={setRegion}>

</PrivacyPolicy>
</>}
<footer style={css("background:#191c28; color:rgba(255,255,255,.5)")}>

<div style={css("max-width:1160px; margin:0 auto; padding:34px 24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap")}>

<img src="/assets/asm/asm-mark-white.png" alt="ASM" style={css("display:block; width:74px; height:24px; flex:0 0 auto")} />

<span style={css("font-size:12px")}>

<a href="https://alion.jp" target="_blank" rel="noopener" style={css("color:rgba(255,255,255,.72); font-weight:700")} className="landing-hover-9">
{"ALION株式会社"}
</a>

<span style={css("color:rgba(255,255,255,.32); margin:0 7px")}>
{"/"}
</span>
{footerProduct}
</span>

<div style={css("flex:1; min-width:20px")}>

</div>

<div style={css("display:flex; gap:18px; flex-wrap:wrap")}>

{footerLinks.map((l, index) => <React.Fragment key={index}>

<a href={l.href} style={css("font-size:12px; color:rgba(255,255,255,.5)")} className="landing-hover-10">
{l.label}
</a>

</React.Fragment>)}

</div>

<div style={css("display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.16); border-radius:9px; padding:0 10px; height:34px; flex:0 0 auto")}>

<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.5)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={css("flex:0 0 auto")}>
<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18">

</path>
</svg>

<select aria-label={languageLabel} value={langValue} onChange={setLang} style={css("border:none; background:transparent; color:#fff; font-size:12.5px; font-weight:600; font-family:inherit; padding:0 2px; outline:none; cursor:pointer")}>

<option value="ja" style={css("color:#14161f")}>
{"日本語"}
</option>

<option value="zh-TW" style={css("color:#14161f")}>
{"繁體中文"}
</option>

</select>

</div>

<span style={css("font-size:11.5px; color:rgba(255,255,255,.3); font-family:var(--mono)")}>
{"© 2026 ALION"}
</span>

</div>

</footer>

</div>

); }
ReactDOM.createRoot(document.getElementById("landing-root")).render(<LandingPage/>);
