import React from 'react';
import { useNavigate } from 'react-router-dom';
import { SOLUTIONS } from '../data/solutions';
import { SolutionCard } from '../components/SolutionCard';

const liveCount = SOLUTIONS.filter((s) => s.status === 'live').length;

export const HomePage: React.FC = () => {
  const navigate = useNavigate();

  return (
    <main>
      {/* Hero */}
      <section className="hero">
        <div className="container hero-inner">
          <span className="hero-eyebrow">지오정보기술 · GUARDiA Platform</span>
          <h1 className="hero-title">
            GUARDiA <span className="hero-grad">솔루션 포털</span>
          </h1>
          <p className="hero-sub">
            15개 솔루션 시연 가이드 · 접속 정보 · 모바일 앱
          </p>
          <div className="hero-actions">
            <button className="btn-primary" onClick={() => navigate('/catalog')}>
              전체 솔루션 보기
            </button>
            <a className="btn-ghost" href="http://101.79.17.164:9001/app" target="_blank" rel="noreferrer">
              모바일 앱 다운로드
            </a>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="stats-strip">
        <div className="container stats-inner">
          <div className="stat">
            <span className="stat-value">15개</span>
            <span className="stat-label">솔루션</span>
          </div>
          <div className="stat">
            <span className="stat-value">{liveCount}개</span>
            <span className="stat-label">LIVE 운영 중</span>
          </div>
          <div className="stat">
            <span className="stat-value">온프레미스</span>
            <span className="stat-label">AI (Ollama)</span>
          </div>
        </div>
      </section>

      {/* Grid */}
      <section className="section">
        <div className="container">
          <h2 className="section-title">솔루션 카탈로그</h2>
          <p className="section-sub">카드를 클릭하면 접속 정보와 단계별 시연 가이드를 확인할 수 있습니다.</p>
          <div className="card-grid">
            {SOLUTIONS.map((s) => (
              <SolutionCard key={s.id} solution={s} onClick={() => navigate(`/solution/${s.slug}`)} />
            ))}
          </div>
        </div>
      </section>

      {/* Footer info */}
      <footer className="home-footer">
        <div className="container">
          <p>서버 IP: <code>101.79.17.164</code></p>
          <p>
            모바일 앱 다운로드:{' '}
            <a href="http://101.79.17.164:9001/app" target="_blank" rel="noreferrer">
              http://101.79.17.164:9001/app
            </a>
          </p>
          <p className="home-footer-copy">© 2026 지오정보기술 GUARDiA Platform</p>
        </div>
      </footer>
    </main>
  );
};

export default HomePage;
