// Sections.jsx — homepage prototype (zh-Hant-HK)
const TrustStrip = () => {
  const badges = [
    { t: '專為香港中小企而設', d: '寫畀香港市場推廣團隊，唔係照搬外地打法' },
    { t: '支援英文 / 繁中', d: '每樣交付都係雙語，唔係事後翻譯' },
    { t: 'SEO + AEO 內容架構', d: 'Google 排名 + ChatGPT、Perplexity 引用' },
    { t: '自動化優先嘅推廣流程', d: 'AI 流程駁返你已經用緊嘅工具' },
  ];
  return (
    <section className="cs-trust">
      <div className="cs-container">
        <div className="cs-trust__row cs-trust__row--badges">
          {badges.map(b => (
            <div key={b.t} className="cs-trust__badge">
              <span className="cs-trust__check" aria-hidden="true">✓</span>
              <div>
                <div className="cs-trust__badge-title">{b.t}</div>
                <div className="cs-trust__badge-desc">{b.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const BrokenSystem = () => {
  const stages = [
    ['流量', 'SEO / 廣告帶到人入嚟，但著陸頁未承接到。'],
    ['內容', '題目、內容大綱、審稿、雙語版本分散喺唔同工具。'],
    ['查詢', '表單、WhatsApp、電郵入嚟之後冇即時分類。'],
    ['跟進', '高價值查詢冷咗，唔合適嘅查詢又食咗時間。'],
    ['報告', '數據有，但冇講清楚下星期要做咩。'],
  ];

  return (
    <section className="cs-section cs-section--warm">
      <div className="cs-container">
        <span className="cs-eyebrow">問題唔係單一渠道</span>
        <h2 className="cs-section__title">你嘅市場推廣系統，通常係中間斷開咗。</h2>
        <p className="cs-section__lead">AI 工具本身唔會解決問題。真正要處理嘅係流量、內容、查詢、跟進同報告之間，未形成一條可重複流程。</p>
        <div className="cs-breakflow" aria-label="市場推廣流程斷點示意">
          {stages.map(([title, copy], index) => (
            <article className="cs-breakflow__stage" style={{ '--i': index }} key={title}>
              <span className="cs-breakflow__num">{String(index + 1).padStart(2, '0')}</span>
              <h3>{title}</h3>
              <p>{copy}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const systemNodes = [
  ['SEO', '搜尋結構', '技術 SEO、內部連結、商業意圖頁面。'],
  ['AEO', '答案格式', '令內容更容易被 ChatGPT、Perplexity、Gemini 理解及引用。'],
  ['內容', '出貨流程', '由題目大綱到雙語草稿、審稿、發佈。'],
  ['廣告', '訊息對齊', '廣告、著陸頁、跟進流程用同一套銷售邏輯。'],
  ['CRM', '查詢跟進', '查詢分類、評分、派發、草擬回覆。'],
  ['分析', '下步行動', '每週一頁簡報，只保留能推動決策嘅數據。'],
];

const Solution = () => (
  <section className="cs-section cs-section--dark">
    <div className="cs-container cs-solution">
      <div className="cs-solution__copy">
        <span className="cs-eyebrow cs-eyebrow--on-dark">AI 優先 · 唔係得個講字</span>
        <h2 className="cs-solution__title">一條流程，駁通六個市場推廣斷點。</h2>
        <p className="cs-solution__lead">
          我哋唔係賣工具。我哋將 SEO、AEO、內容、廣告、CRM 同報告整合成一條由你市場推廣負責人真係用得到嘅流程。
          AI 做引擎，唔係瓶頸。
        </p>
        <ul className="cs-solution__list">
          <li><b>診斷</b> · 14 日 · 固定範圍</li>
          <li><b>排序</b> · 按業務影響、難度、時間定優先次序</li>
          <li><b>建立</b> · 先做最關鍵流程，再逐步擴展</li>
        </ul>
      </div>
      <div className="cs-solution__diagram" role="img" aria-label="AI 流程連接 SEO、AEO、內容、廣告、CRM 同分析">
        <svg className="cs-system-map" viewBox="0 0 460 460" aria-hidden="true">
          <defs>
            <radialGradient id="cs-map-glow-zh" cx="50%" cy="50%" r="60%">
              <stop offset="0%" stopColor="#F97316" stopOpacity="0.32" />
              <stop offset="58%" stopColor="#F97316" stopOpacity="0.08" />
              <stop offset="100%" stopColor="#F97316" stopOpacity="0" />
            </radialGradient>
            <linearGradient id="cs-map-line-zh" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#FED7AA" stopOpacity="0.12" />
              <stop offset="50%" stopColor="#F97316" stopOpacity="0.72" />
              <stop offset="100%" stopColor="#FED7AA" stopOpacity="0.12" />
            </linearGradient>
          </defs>
          <circle className="cs-system-map__glow" cx="230" cy="230" r="170" fill="url(#cs-map-glow-zh)" />
          <circle className="cs-system-map__ring cs-system-map__ring--outer" cx="230" cy="230" r="174" />
          <circle className="cs-system-map__ring cs-system-map__ring--inner" cx="230" cy="230" r="104" />
          {[
            ['M230 230 L118 58'],
            ['M230 230 L348 58'],
            ['M230 230 L48 230'],
            ['M230 230 L410 230'],
            ['M230 230 L132 392'],
            ['M230 230 L348 392']
          ].map((d,i)=>(
            <path key={i} className={`cs-system-map__path cs-system-map__path--${i + 1}`} d={d} pathLength="1" />
          ))}
        </svg>
        <div className="cs-node cs-node--center"><img src="/assets/cheetah-mark-orange.png" alt=""/><b>AI 流程</b></div>
        {['SEO','AEO','內容','廣告','CRM','分析'].map((n,i)=>(
          <div key={n} className={`cs-node cs-node--n${i+1}`}><span>{n}</span></div>
        ))}
      </div>
      <div className="cs-system-explain">
        {systemNodes.map(([node, title, copy]) => (
          <article key={node}>
            <span>{node}</span>
            <h3>{title}</h3>
            <p>{copy}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const AuditDeliverables = () => {
  const deliverables = [
    ['1 頁診斷總結', '講清楚頭 3 項問題、業務影響、建議處理次序。'],
    ['90 日路線圖', '每星期做咩、邊個負責、咩可以暫時唔做。'],
    ['AI 流程圖', 'SEO、AEO、內容、廣告、CRM、報告點樣駁埋。'],
    ['機會清單', '內容題目、AEO 答案格式、自動化快修項目。'],
  ];

  return (
    <section className="cs-section" id="services">
      <div className="cs-container">
        <div className="cs-section__head">
          <div>
            <span className="cs-eyebrow">診斷交付物</span>
            <h2 className="cs-section__title">免費診斷之後，你唔會只收到一段銷售說辭。</h2>
          </div>
          <a className="cs-btn cs-btn--ghost" href="/zh-hk/services/">查看完整服務 →</a>
        </div>
        <div className="cs-deliverables">
          {deliverables.map(([title, copy], index) => (
            <article className="cs-deliverable" key={title}>
              <span className="cs-deliverable__file">文件 0{index + 1}</span>
              <h3>{title}</h3>
              <p>{copy}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const HowItWorks = () => {
  const steps = [
    { n:'01', t:'診斷', d:'14 日內檢查 SEO、AEO、內容、廣告、CRM 同報告，搵出最大斷點。' },
    { n:'02', t:'排序', d:'將問題按業務影響、落地難度、時間排序，變成一份 90 日路線圖。' },
    { n:'03', t:'建立系統', d:'確認方向後，先建立最關鍵流程，再逐步擴展到內容、廣告同報告。' },
  ];
  return (
    <section className="cs-section cs-section--warm" id="how">
      <div className="cs-container">
        <span className="cs-eyebrow">流程</span>
        <h2 className="cs-section__title">由簽診斷到第一個成效，6 週內。</h2>
        <ol className="cs-steps cs-steps--three">
          {steps.map((s,i)=>(
            <li key={s.n} className={`cs-step ${i===0 ? 'is-active':''}`}>
              <span className="cs-step__num">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
};

const Workflows = () => (
  <section className="cs-section" id="work">
    <div className="cs-container">
      <div className="cs-section__head">
        <div>
          <span className="cs-eyebrow">流程示範</span>
          <h2 className="cs-section__title">AI 流程喺實際運作係點。</h2>
          <p className="cs-section__lead cs-workflow__disclaimer">以下純屬流程示範，並非真實客戶個案。真實案例稍後公開。</p>
        </div>
      </div>
      <div className="cs-workflows">
        <article className="cs-card cs-workflow">
          <div className="cs-workflow__head"><span className="cs-pill cs-pill--warm">查詢引擎</span><span className="cs-mono">流程示範</span></div>
          <h3>網站查詢 → 24 小時內變成合適約談</h3>
          <p className="cs-workflow__scenario">當網站收到查詢後，AI 先協助分類及整理資料，CRM 自動標籤客戶興趣，系統草擬跟進電郵，團隊再按優先次序處理高價值機會。</p>
          <ol className="cs-workflow__steps">
            <li>表單提交 + 公司資料自動補全</li>
            <li>AI 評估合適程度 + 草擬個人化回覆</li>
            <li>CRM 按服務興趣自動標籤</li>
            <li>創辦人審閱、發出、約通話</li>
            <li>每週：每個合資格查詢嘅成本報告</li>
          </ol>
        </article>
        <article className="cs-card cs-workflow">
          <div className="cs-workflow__head"><span className="cs-pill cs-pill--warm">內容引擎</span><span className="cs-mono">流程示範</span></div>
          <h3>雙語文章：內容大綱 → 48 小時出街</h3>
          <p className="cs-workflow__scenario">SEO / AEO 差距報告每週指出香港創辦人正在搜緊嘅題目，AI 按品牌語氣草擬繁中 + 英文版本，市場推廣負責人直接編輯，結構化資料同內部連結自動駁好，每週監察引用情況。</p>
          <ol className="cs-workflow__steps">
            <li>內容大綱由 SEO / AEO 差距報告嚟</li>
            <li>用品牌語氣草擬繁中 + 英文</li>
            <li>市場推廣負責人直接編輯</li>
            <li>自動出街 + 內部連結 + 結構化資料</li>
            <li>每週：監察引用、更新最重要嘅 3 篇</li>
          </ol>
        </article>
      </div>
    </div>
  </section>
);

const TrustWithoutHype = () => (
  <section className="cs-section cs-section--warm">
    <div className="cs-container cs-why">
      <div>
        <span className="cs-eyebrow">可信，唔誇張</span>
        <h2 className="cs-section__title">我哋唔會用 AI 熱潮代替商業判斷。</h2>
      </div>
      <div className="cs-why__grid">
        {[
          ['唔承諾排名', 'SEO / AEO 可以提高被理解同被引用嘅機會，但唔應該保證排名或 AI 引用。'],
          ['唔迫你轉工具', '優先駁返你已經用緊嘅 CRM、廣告、網站同報告工具。'],
          ['唔用假案例', '未公開案例之前，只展示流程示範、診斷樣本同方法論。'],
          ['唔賣黑盒', '流程會留喺你嘅工具入面，交付物會寫清楚邏輯、負責人同下一步。'],
        ].map(([t,d])=>(
          <div key={t} className="cs-why__item">
            <div className="cs-why__check">✓</div>
            <h3>{t}</h3>
            <p>{d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Insights = () => (
  <section className="cs-section" id="insights">
    <div className="cs-container">
      <div className="cs-section__head">
        <div>
          <span className="cs-eyebrow">市場觀察</span>
          <h2 className="cs-section__title">由診斷現場帶返嚟嘅筆記。</h2>
        </div>
        <a className="cs-btn cs-btn--ghost" href="#blog">所有文章 →</a>
      </div>
      <div className="cs-insights">
        {[
          ['AEO', '點樣喺 2026 年俾 ChatGPT 引用', '8 分鐘 · 4 月 24 日'],
          ['SEO', '仲推得郁排名嘅結構化資料模式', '6 分鐘 · 4 月 18 日'],
          ['流程', '每週出貨嘅 4 角色內容引擎', '11 分鐘 · 4 月 11 日'],
        ].map(([tag,title,meta],i)=>(
          <a key={i} className="cs-card cs-insight" href="#">
            <div className="cs-insight__cover" data-i={i}></div>
            <div className="cs-insight__body">
              <span className="cs-pill cs-pill--orange">{tag}</span>
              <h3>{title}</h3>
              <span className="cs-mono cs-insight__meta">{meta}</span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const FAQ = () => {
  const items = [
    ['AI 會唔會取代我哋嘅市場推廣團隊？',
      '唔會。我哋嘅做法係將 AI 駁返你團隊已經做緊嘅嘢，例如草擬、研究、檢查同報告。AI 出第一稿，團隊做決策同審閱。產量會升，但決策權仍然喺人度。'],
    ['適唔適合中小企？',
      '我哋專做香港中小企同創辦人主導嘅市場推廣。一個老闆 + 1–3 人市場推廣團隊係最常見配置。如果你係千人企業，可以搵更大規模嘅顧問公司。'],
    ['SEO 同 AEO 有咩分別？',
      'SEO 係將內容寫到俾 Google 排名，AEO 即係答案引擎優化，目標係令 ChatGPT、Perplexity、Gemini 更容易理解同引用。兩者重疊，但結構化資料、長度、答案格式有分別。我哋兩樣都做，因為 2026 年嘅搜尋已經係雙線。'],
    ['幾耐先見到成效？',
      '14 日內你會收到一份診斷報告 + 頭 3 項按投資回報排序嘅優化建議。建立期通常係 4–8 週。第一個可量度嘅成效，多數係 SEO 排名、AEO 引用或查詢轉化，通常 6–10 週見到。'],
    ['我哋已經有網站，仲可以點樣改善？',
      '我哋多數情況下唔會推倒重來。我哋會睇你現有網站嘅 SEO / AEO 表現、轉化路徑、CRM 駁通情況，然後加流程、加結構化資料、優化現有頁面，唔係再建一個。'],
    ['免費 AI 市場推廣診斷包括啲咩？',
      '一個 30 分鐘通話、一個非同步深入審閱，包括 SEO、AEO、廣告同數據分析，再加一份 1 頁書面總結，列出頭 3 項按投資回報排序嘅修正建議。冇花巧簡報，冇硬銷。'],
    ['需唔需要轉工具？',
      '幾乎唔需要。我哋會駁返你已經用緊嘅工具，例如 HubSpot、Notion、Google Ads、Meta、Webflow。冇新工具要學。'],
    ['診斷之後嘅合作模式係點？',
      '4–8 週建立期，之後按月運作。冇 12 個月長約，邊個月覺得唔抵就可以取消。'],
  ];
  return (
    <section className="cs-section cs-section--warm" id="faq">
      <div className="cs-container cs-faq">
        <div>
          <span className="cs-eyebrow">常見問題</span>
          <h2 className="cs-section__title">客戶最常問嘅問題。</h2>
          <p className="cs-section__lead">如果你嘅問題唔喺度，喺診斷表單度問。我哋多數同日覆。</p>
        </div>
        <div className="cs-faq__list">
          {items.map(([q,a],i)=>(
            <details key={i} className="cs-faq__item" open={i===0}>
              <summary>{q}<span className="cs-faq__plus">+</span></summary>
              <p>{a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCTA = () => (
  <section className="cs-section cs-final" id="audit">
    <div className="cs-container cs-final__inner">
      <div className="cs-final__bg" aria-hidden></div>
      <span className="cs-eyebrow cs-eyebrow--on-dark">14 日診斷 · 固定範圍</span>
      <h2 className="cs-final__title">預約免費 AI 市場推廣診斷。</h2>
      <p className="cs-final__lead">一個 30 分鐘通話、一個非同步深入審閱，加一份 1 頁書面計劃，列出頭 3 項按投資回報排序嘅優化建議。冇花巧簡報。</p>
      <div className="cs-final__form" id="audit-form-slot" data-ghl-embed aria-label="預約免費診斷">
        {/* GHL_FORM_EMBED:START */}
        <a className="cs-btn cs-btn--primary cs-btn--lg" href="mailto:support@cheetahsolutions.com.hk?subject=預約免費診斷" data-ghl-fallback>預約免費診斷 →</a>
        {/* GHL_FORM_EMBED:END */}
      </div>
      <div className="cs-final__signals">
        <span>✓ 同日回覆</span>
        <span>✓ 繁中 / 英文</span>
        <span>✓ 冇長約壓力</span>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="cs-footer">
    <div className="cs-container cs-footer__grid">
      <div className="cs-footer__brand">
        <a className="footer-brand" href="#top" aria-label="思達科技公司首頁">
          <img src="/assets/cheetah-lockup-stacked.png" alt="" />
          <span>
            <strong>思達科技公司</strong>
            <small>Cheetah Solutions Co.</small>
          </span>
        </a>
        <p>為香港企業而設嘅 AI 優先市場推廣。診斷主導、流程落地、雙語預設。</p>
      </div>
      <div>
        <h4>服務</h4>
        <ul>
          <li><a href="/zh-hk/services/ai-marketing-strategy/">AI 市場推廣策略</a></li>
          <li><a href="/zh-hk/services/seo-aeo/">SEO 及 AEO 優化</a></li>
          <li><a href="/zh-hk/services/marketing-automation/">市場推廣自動化</a></li>
          <li><a href="/zh-hk/services/ai-content-system/">AI 內容系統</a></li>
          <li><a href="/zh-hk/services/paid-ads-optimization/">廣告成效優化</a></li>
          <li><a href="/zh-hk/services/analytics-reporting/">數據分析及報告</a></li>
        </ul>
      </div>
      <div>
        <h4>公司</h4>
        <ul>
          <li><a href="/zh-hk/about/">關於我哋</a></li>
          <li><a href="/zh-hk/cases/">客戶案例</a></li>
          <li><a href="/zh-hk/insights/">市場觀察</a></li>
          <li><a href="/zh-hk/careers/">招聘</a></li>
          <li><a href="/zh-hk/contact/">聯絡</a></li>
        </ul>
      </div>
      <div>
        <h4>紅磡 · 香港</h4>
        <ul><li>support@cheetahsolutions.com.hk</li><li>+852 92900393</li><li className="footer-address">FLAT/RM B 3/F<br />YUN TAT COMMERCIAL BUILDING<br />70-74 WUHU STREET<br />HUNG HOM K L</li></ul>
      </div>
    </div>
    <div className="cs-container cs-footer__legal">
      <span>© 2026 思達科技公司</span>
      <span><a href="/zh-hk/privacy/">私隱</a> · <a href="/zh-hk/terms/">條款</a></span>
    </div>
  </footer>
);

Object.assign(window, { TrustStrip, BrokenSystem, Solution, AuditDeliverables, HowItWorks, Workflows, TrustWithoutHype, Insights, FAQ, FinalCTA, Footer });