import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import LanguageSwitcher from './components/LanguageSwitcher';
import SiteFooter from './components/SiteFooter';
import './Home.css';

function Home() {
  const { t } = useTranslation();

  return (
    <div className="home-container" style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
      {/* Header */}
      <header className="header" style={{ backgroundColor: 'white', padding: '1rem', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
        <div className="nav-container">
          <div className="logo">
            <h2>{t('home.title')}</h2>
          </div>
          <nav className="nav-menu">
            <a href="#features">{t('navigation.features')}</a>
            <a href="#contact">{t('navigation.contact')}</a>
            <LanguageSwitcher />
            <Link to="/login" className="btn-outline">{t('common.clientLogin')}</Link>
            <Link to="/register" className="btn-primary">{t('common.getStarted')}</Link>
          </nav>
        </div>
      </header>

      {/* Hero Section */}
      <section className="hero">
        <div className="hero-content">
          <h1>{t('home.subtitle')}</h1>
          <p>{t('home.description')}</p>
          <div className="hero-buttons">
            <Link to="/register" className="btn-primary large">{t('common.getStarted')}</Link>
            <Link to="/api-docs" className="btn-secondary large">{t('navigation.apiDocs')}</Link>
          </div>
          <div className="hero-stats">
            <div className="stat">
              <h3>99.9%</h3>
              <p>{t('home.stats.uptime')}</p>
            </div>
            <div className="stat">
              <h3>50K+</h3>
              <p>{t('home.stats.merchants')}</p>
            </div>
            <div className="stat">
              <h3>$2B+</h3>
              <p>{t('home.stats.processed')}</p>
            </div>
          </div>
        </div>
        <div className="hero-visual">
          <div className="payment-card">
            <div className="card-header">
              <div className="card-chip"></div>
              <div className="card-logo">HicoinPay</div>
            </div>
            <div className="card-number">•••• •••• •••• 1234</div>
            <div className="card-footer">
              <div className="card-holder">JOHN DOE</div>
              <div className="card-expiry">12/25</div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="features">
        <div className="container">
          <h2>{t('home.features.title')}</h2>
          <div className="features-grid">
            <div className="feature-card">
              <div className="feature-icon">🔒</div>
              <h3>{t('home.features.secure.title')}</h3>
              <p>{t('home.features.secure.description')}</p>
            </div>
            <div className="feature-card">
              <div className="feature-icon">⚡</div>
              <h3>{t('home.features.fast.title')}</h3>
              <p>{t('home.features.fast.description')}</p>
            </div>
            <div className="feature-card">
              <div className="feature-icon">🌍</div>
              <h3>{t('home.features.global.title')}</h3>
              <p>{t('home.features.global.description')}</p>
            </div>
            <div className="feature-card">
              <div className="feature-icon">📱</div>
              <h3>{t('home.features.mobile.title')}</h3>
              <p>{t('home.features.mobile.description')}</p>
            </div>
            <div className="feature-card">
              <div className="feature-icon">📊</div>
              <h3>{t('home.features.analytics.title')}</h3>
              <p>{t('home.features.analytics.description')}</p>
            </div>
            <div className="feature-card">
              <div className="feature-icon">🔧</div>
              <h3>{t('home.features.integration.title')}</h3>
              <p>{t('home.features.integration.description')}</p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="cta">
        <div className="container">
          <h2>{t('home.cta.title')}</h2>
          <p>{t('home.cta.description')}</p>
          <div className="cta-buttons">
            <Link to="/register" className="btn-primary large">{t('common.getStarted')}</Link>
            <Link to="/api-docs" className="btn-secondary large">{t('navigation.apiDocs')}</Link>
          </div>
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}

export default Home;
