/* global React, FadeUp, SectionHead */
const { useState } = React;

function Features() {
  const items = [
    { num: "01", glyph: "AI", h: "AI 智能數據", p: "深度學習 + 600 個特徵因子，回測驗證每一個訊號的獲利能力。" },
    { num: "02", glyph: "$", h: "即時最佳賠率", p: "整合主流盤口，幫你找到隱含勝率最高的下注點。" },
    { num: "03", glyph: "★", h: "個性化建議", p: "依你的策略偏好，匹配低風險高回報的賽事組合。" },
    { num: "04", glyph: "⌘", h: "知名聯賽全覆蓋", p: "EPL、UCL、NBA、MLB、MLS、CS2 — 每天上千場賽事即時追蹤。" },
  ];
  return (
    <FadeUp className="section" id="why">
      <SectionHead eyebrow="// 為何選擇 Sports365" title="不只給你結果，給你結果背後的理由" sub="從原始資料 → 特徵因子 → 模型訊號 → 倉位建議，每一步都可追溯" />
      <div className="feature-grid">
        {items.map((f) => (
          <div className="feature" key={f.num}>
            <div className="glyph">{f.glyph}</div>
            <div className="num">FEATURE {f.num}</div>
            <h4>{f.h}</h4>
            <p>{f.p}</p>
          </div>
        ))}
      </div>
    </FadeUp>
  );
}

function Cta() {
  return (
    <FadeUp className="section" id="cta">
      <div className="cta-band">
        <h2>立即開始你的 <span style={{color:'var(--accent)'}}>AI 投注之旅</span></h2>
        <p>免費試用，不需信用卡。每天 3 場 AI 推薦免費送你。</p>
        <div className="actions">
          <button className="btn btn-primary">立即免費試用 →</button>
          <button className="btn btn-ghost">了解更多</button>
        </div>
      </div>
      <footer className="foot">
        <div>© 2026 Sports365 · 數據分析準確度並非百分之百，僅供參考</div>
        <div className="links">
          <a href="#">使用條款</a>
          <a href="#">隱私政策</a>
          <a href="#">聯絡客服</a>
        </div>
      </footer>
    </FadeUp>
  );
}

window.Features = Features;
window.Cta = Cta;