// Hero.jsx — zh-Hant-HK
const auditLayers = [
  { label: 'SEO', status: '內容機會', detail: '技術結構、內部連結、搜尋意圖' },
  { label: 'AEO', status: '答案引擎', detail: '常見問答、結構化資料、可引用答案格式' },
  { label: '內容', status: '產能瓶頸', detail: '內容大綱、草稿、審稿、雙語流程' },
  { label: '廣告', status: '訊息斷層', detail: '廣告訊息、著陸頁、跟進流程' },
  { label: 'CRM', status: '跟進缺口', detail: '客戶評分、派發、回覆節奏' },
];

const AuditConsole = () => (
  <div className="cs-audit-console" aria-label="AI 市場推廣診斷介面">
    <div className="cs-audit-console__top">
      <span className="cs-pill cs-pill--orange-solid">
        <span className="cs-pill__dot"></span>AI 診斷系統
      </span>
      <span className="cs-mono">14 日診斷</span>
    </div>
    <div className="cs-audit-console__score">
      <span>市場推廣系統狀態</span>
      <strong>診斷中</strong>
    </div>
    <div className="cs-audit-console__layers">
      {auditLayers.map((layer, index) => (
        <div className="cs-audit-layer" style={{ '--i': index }} key={layer.label}>
          <div>
            <b>{layer.label}</b>
            <span>{layer.detail}</span>
          </div>
          <em>{layer.status}</em>
        </div>
      ))}
    </div>
    <div className="cs-audit-console__output">
      <span className="cs-mono">交付</span>
      <b>頭 3 項優先修正建議</b>
      <p>按業務影響、落地難度、14 日內可行性排序。</p>
    </div>
  </div>
);

const Hero = () => (
  <section className="cs-hero" id="top">
    <div className="cs-hero__bg" aria-hidden="true"></div>
    <div className="cs-container cs-hero__inner">
      <div className="cs-hero__copy">
        <span className="cs-eyebrow"><span className="cs-eyebrow__dot"></span>AI 優先 · 香港市場推廣</span>
        <h1 className="cs-hero__title cs-hero__title--tc">
          為香港企業打造 <span className="cs-grad-text">AI 優先</span> 嘅市場推廣系統。
        </h1>
        <p className="cs-hero__lead cs-hero__lead--tc">
          思達科技公司幫中小企、創辦人同市場推廣團隊，用 AI 改善潛在客戶開發、SEO / AEO 能見度、內容生產效率、廣告成效同客戶跟進流程。
          14 日內完成診斷，唔需要綁長約。
        </p>
        <div className="cs-hero__ctas">
          <a className="cs-btn cs-btn--primary cs-btn--lg" href="#audit">預約免費 AI 市場推廣診斷 →</a>
          <a className="cs-btn cs-btn--ghost cs-btn--lg" href="#services">了解服務</a>
        </div>
        <ul className="cs-hero__signals">
          <li><span className="cs-check">✓</span>14 日固定範圍診斷</li>
          <li><span className="cs-check">✓</span>繁中 / 英文同步交付</li>
          <li><span className="cs-check">✓</span>系統由你團隊持有</li>
        </ul>
      </div>
      <div className="cs-hero__art">
        <div className="cs-hero__streaks" aria-hidden="true">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div className="cs-hero__badge cs-hero__badge--small">
          <img src="/assets/cheetah-mark-orange.png" alt="" />
        </div>
        <AuditConsole />
      </div>
    </div>
  </section>
);
window.Hero = Hero;