import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import api from '../api/client.js';

export default function Home() {
  const [vendors, setVendors] = useState([]);

  useEffect(() => {
    api.get('/vendors').then(({ data }) => setVendors(data.vendors)).catch(() => {});
  }, []);

  return (
    <div>
      <section className="hero">
        <div className="container">
          <span className="badge">Practice • Exam • AI explanations</span>
          <h1 className="mt-2">Master your certification exams with confidence</h1>
          <p className="mt-2">
            Real exam-style questions for Cisco, AWS, VMware and more. Practice with instant feedback
            or simulate the real thing in secure exam mode.
          </p>
          <div className="row mt-3 wrap">
            <Link to="/vendors" className="btn btn-lg btn-white">Browse exams →</Link>
            <Link to="/register" className="btn btn-lg btn-ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.4)' }}>
              Create free account
            </Link>
          </div>
        </div>
      </section>

      <section className="container page">
        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))' }}>
          {[
            { icon: '🎯', title: 'Practice mode', text: 'See the correct answer and explanation immediately after each question.' },
            { icon: '⏱️', title: 'Exam mode', text: 'Answer all questions first, then review your full score and solutions.' },
            { icon: '🔒', title: 'Secure testing', text: 'Copy-paste, screenshots and tab-switching are restricted during exams.' },
            { icon: '🤖', title: 'AI explanations', text: 'Stuck on a concept? Get a clear AI-generated explanation on demand.' },
          ].map((f) => (
            <div className="card card-hover" key={f.title} style={{ cursor: 'default' }}>
              <div className="icon-chip">{f.icon}</div>
              <h3 className="mt-3">{f.title}</h3>
              <p className="muted" style={{ marginBottom: 0 }}>{f.text}</p>
            </div>
          ))}
        </div>

        <div className="row-between mt-4 mb-2">
          <h2 style={{ margin: 0 }}>Popular vendors</h2>
          <Link to="/vendors" className="btn btn-ghost btn-sm">View all</Link>
        </div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))' }}>
          {vendors.map((v) => (
            <Link to={`/vendors/${v.slug}`} key={v.id} className="card card-hover tile">
              <div className="tile-top">
                <span className="tile-mark">{(v.name || '?').charAt(0).toUpperCase()}</span>
                <span className="badge">{v._count?.courses || 0} exams</span>
              </div>
              <h3 className="tile-title">{v.name}</h3>
              <p className="muted tile-desc">{v.description}</p>
              <span className="tile-cta">View exams →</span>
            </Link>
          ))}
        </div>
      </section>
    </div>
  );
}
