import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';

const DIAMONDS = [
  { left: '5%',  top: '12%', size: 10, dur: '9s',  delay: '0s'   },
  { left: '18%', top: '58%', size: 8,  dur: '13s', delay: '2s'   },
  { left: '30%', top: '22%', size: 14, dur: '11s', delay: '0.5s' },
  { left: '48%', top: '72%', size: 7,  dur: '10s', delay: '1.5s' },
  { left: '58%', top: '20%', size: 16, dur: '12s', delay: '0.8s' },
  { left: '70%', top: '65%', size: 10, dur: '8s',  delay: '3s'   },
  { left: '82%', top: '30%', size: 13, dur: '14s', delay: '1s'   },
  { left: '90%', top: '75%', size: 9,  dur: '9s',  delay: '4s'   },
  { left: '38%', top: '45%', size: 6,  dur: '15s', delay: '2.5s' },
  { left: '62%', top: '88%', size: 11, dur: '11s', delay: '0.3s' },
  { left: '12%', top: '82%', size: 8,  dur: '13s', delay: '1.8s' },
  { left: '76%', top: '10%', size: 12, dur: '10s', delay: '3.5s' },
];
const RINGS = [
  { left: '10%', top: '35%', size: 60, dur: '7s',  delay: '0s'   },
  { left: '78%', top: '18%', size: 44, dur: '9s',  delay: '2.5s' },
  { left: '45%', top: '62%', size: 80, dur: '11s', delay: '1s'   },
  { left: '88%', top: '55%', size: 36, dur: '8s',  delay: '3.5s' },
];
const SCANLINES = [
  { top: '28%', width: '160px', left: '5%',  dur: '8s',  delay: '0s'   },
  { top: '52%', width: '120px', left: '74%', dur: '10s', delay: '3s'   },
  { top: '18%', width: '200px', left: '38%', dur: '12s', delay: '1.5s' },
  { top: '75%', width: '140px', left: '20%', dur: '9s',  delay: '2s'   },
];

const PAGE_CSS = `
  @keyframes faqFadeUp {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
  }
  @keyframes faqHeroPulse {
    0%,100% { opacity:.2; transform:translate(-50%,-50%) scale(1); }
    50%      { opacity:.38; transform:translate(-50%,-50%) scale(1.12); }
  }
  .fq-orb {
    position:absolute; top:50%; left:50%;
    width:900px; height:600px;
    background:radial-gradient(ellipse at center,
      rgba(245,197,24,.06) 0%, rgba(37,99,235,.04) 45%, transparent 70%);
    border-radius:50%; pointer-events:none;
    animation:faqHeroPulse 10s ease-in-out infinite;
  }
  .fq-nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    height:64px; display:flex; align-items:center;
    justify-content:space-between; padding:0 40px;
    background:rgba(7,8,15,.85);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .fq-nav__logo {
    font-family:'Russo One',sans-serif; font-size:19px;
    letter-spacing:.04em; text-transform:uppercase;
    color:#eceef8; text-decoration:none;
  }
  .fq-nav__logo span { color:#f5c518; }
  .fq-nav__links { display:flex; align-items:center; gap:28px; }
  .fq-nav-link {
    font-family:'Barlow Condensed',sans-serif; font-size:13px;
    font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:#7a85a8; text-decoration:none; cursor:pointer;
    background:none; border:none; padding:0; transition:color .2s;
  }
  .fq-nav-link:hover { color:#eceef8; }
  .fq-nav-signin {
    padding:8px 18px;
    background:rgba(245,197,24,.08); border:1px solid rgba(245,197,24,.35);
    border-radius:6px; font-family:'Barlow Condensed',sans-serif;
    font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:#f5c518; cursor:pointer; transition:background .2s, border-color .2s;
  }
  .fq-nav-signin:hover { background:rgba(245,197,24,.16); border-color:rgba(245,197,24,.6); }
  .fq-wrap { width:100%; max-width:800px; margin:0 auto; padding:0 24px; }
  .fq-eyebrow {
    font-family:'Barlow Condensed',sans-serif; font-size:11px;
    font-weight:700; letter-spacing:.3em; text-transform:uppercase;
    color:#f5c518; display:flex; align-items:center; justify-content:center;
    gap:12px; margin-bottom:14px;
  }
  .fq-eyebrow::before,.fq-eyebrow::after {
    content:''; display:block; width:36px; height:1px;
    background:rgba(245,197,24,.4);
  }
  .fq-item {
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .fq-item:first-child {
    border-top:1px solid rgba(255,255,255,.07);
  }
  .fq-question {
    width:100%; display:flex; align-items:center;
    justify-content:space-between; padding:22px 0;
    background:none; border:none; cursor:pointer; text-align:left; gap:16px;
    transition:opacity .15s;
  }
  .fq-question:hover .fq-q-text { color:#eceef8; }
  .fq-q-num {
    font-family:'Russo One',sans-serif; font-size:12px;
    color:rgba(245,197,24,.35); min-width:28px; flex-shrink:0;
    transition:color .2s;
  }
  .fq-item--open .fq-q-num { color:rgba(245,197,24,.7); }
  .fq-q-text {
    font-family:'Barlow Condensed',sans-serif; font-size:20px;
    font-weight:700; letter-spacing:.03em; color:#9ba5c4;
    transition:color .2s; flex:1;
  }
  .fq-item--open .fq-q-text { color:#eceef8; }
  .fq-chevron {
    flex-shrink:0; transition:transform .3s cubic-bezier(.16,1,.3,1);
  }
  .fq-item--open .fq-chevron { transform:rotate(180deg); }
  .fq-answer-wrap {
    overflow:hidden;
    transition:max-height .38s cubic-bezier(.16,1,.3,1);
  }
  .fq-answer {
    padding:0 0 26px 44px;
    font-family:'Barlow',sans-serif; font-size:15px;
    color:#7a85a8; line-height:1.75;
    transition:opacity .25s ease;
  }
  .fq-answer strong { color:#9ba5c4; font-weight:600; }
  .fq-footer-link {
    font-family:'Barlow Condensed',sans-serif; font-size:12px;
    letter-spacing:.12em; text-transform:uppercase;
    color:#7a85a8; text-decoration:none; transition:color .2s;
  }
  .fq-footer-link:hover { color:#eceef8; }
  @media (max-width:768px) {
    .fq-nav { padding:0 20px; }
    .fq-nav-link.fq-hide-mobile { display:none; }
    .fq-answer { padding-left:28px; }
  }
  @media (max-width:500px) {
    .fq-nav__links { gap:12px; }
    .fq-q-text { font-size:17px; }
  }
`;

const FAQS = [
  {
    q: 'What is EQAO?',
    a: 'EQAO stands for the Education Quality and Accountability Office. It\'s Ontario\'s standardized testing body, responsible for the province-wide assessments that all students in Grades 3, 6, and 9 take. The tests cover math and literacy. This app focuses on the math portion.',
  },
  {
    q: 'Is this official?',
    a: 'No. Ranked EQAO is an independent project — it has no affiliation with EQAO, the Ontario government, or any school board. It\'s built by one developer using publicly known curriculum expectations. Think of it as fan-made study content.',
  },
  {
    q: 'Is it free?',
    a: 'Yes, completely. No ads, no paywalls, no subscription, no premium tier. It costs nothing and always will. The goal is to be actually useful to students, and charging for it would work against that.',
  },
  {
    q: 'How does ranking work?',
    a: 'Ranked EQAO uses an ELO system — the same rating model used in chess and most competitive games. Everyone starts at 800. When you win a match, you gain points; when you lose, you lose points. How many you gain or lose depends on the difference in ratings between you and your opponent.\n\nFive tiers: Bronze (800), Silver (900), Gold (1100), Platinum (1300), Diamond (1500+).',
  },
  {
    q: 'What grades are supported?',
    a: 'Grade 3, Grade 6, and Grade 9 math. Each grade has its own separate queue, leaderboard, and ELO rating — so your Grade 6 rank doesn\'t affect your Grade 9 rank. You can play any grade you want.',
  },
  {
    q: 'How are questions generated?',
    a: 'Math questions are built from pre-written templates that match EQAO curriculum expectations for each grade. The values — numbers, units, names, scenarios — are randomized on every attempt, so you can\'t just memorize answers. The structure stays consistent with EQAO question style.',
  },
  {
    q: 'What is a ranked match?',
    a: 'A ranked match is a 1v1 race. You and an opponent from the matchmaking queue get the same set of questions at the same time. First player to correctly answer all questions wins the match and gains ELO. The other player loses ELO. Speed and accuracy both matter.',
  },
  {
    q: 'What happens if my opponent disconnects?',
    a: 'If your opponent goes inactive for more than 20 seconds — closes the tab, loses connection, or just stops responding — they\'re marked as a forfeit. You get the win and the ELO that comes with it. This avoids draws or unfair timeouts from connection issues.',
  },
  {
    q: 'Can I change my username?',
    a: 'Yes. Go to Settings from your dashboard and you\'ll see the option to update your username. Usernames must be 3–20 characters and can only contain letters, numbers, and underscores. Changes take effect immediately.',
  },
  {
    q: 'Why do I have to get 100% to advance?',
    a: "That's how the real EQAO test works — every question counts and there's no partial credit. This app reflects that. Getting 9 out of 11 correct isn't a pass in the actual test, and it's not a pass here either. The point is mastery, not getting close enough.",
  },
  {
    q: 'Is there a mobile app?',
    a: 'Not yet. There\'s no native iOS or Android app. The web app is built to be responsive and should work reasonably well on mobile browsers, but it\'s designed primarily for desktop play. A dedicated mobile app is something that could happen in the future.',
  },
  {
    q: 'Will English or language questions be added?',
    a: 'Yes — English is planned. The backend already has a Gemini integration for generating reading passages and comprehension questions, as well as checking free-response answers. It\'s partially built and will be available in a future update.',
  },
];

export default function FAQ() {
  const navigate = useNavigate();
  const [openIndex, setOpenIndex] = useState(null);

  function toggle(i) {
    setOpenIndex(prev => (prev === i ? null : i));
  }

  return (
    <>
      <style>{PAGE_CSS}</style>

      {/* Background */}
      <div className="arena-bg">
        <div className="arena-grain" />
        <div className="arena-shapes">
          {DIAMONDS.map((d, i) => (
            <div key={i} className="shape shape--diamond" style={{ left: d.left, top: d.top, width: d.size, height: d.size, animationDuration: d.dur, animationDelay: d.delay }} />
          ))}
          {RINGS.map((r, i) => (
            <div key={i} className="shape shape--ring" style={{ left: r.left, top: r.top, width: r.size, height: r.size, animationDuration: r.dur, animationDelay: r.delay }} />
          ))}
          {SCANLINES.map((s, i) => (
            <div key={i} className="shape shape--line" style={{ top: s.top, left: s.left, width: s.width, animationDuration: s.dur, animationDelay: s.delay }} />
          ))}
        </div>
      </div>

      {/* Nav */}
      <nav className="fq-nav">
        <a href="/" className="fq-nav__logo">RANKED<span>EQAO</span></a>
        <div className="fq-nav__links">
          <a href="/#how-it-works" className="fq-nav-link fq-hide-mobile">How It Works</a>
          <a href="/#leaderboard"  className="fq-nav-link fq-hide-mobile">Leaderboard</a>
          <a href="/about"         className="fq-nav-link fq-hide-mobile">About</a>
          <a href="/#signin"       className="fq-nav-signin">Sign In</a>
        </div>
      </nav>

      <div style={{ position: 'relative', zIndex: 1 }}>

        {/* HERO */}
        <section style={{
          minHeight: '50vh', display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center',
          padding: '120px 0 60px', textAlign: 'center',
          position: 'relative', overflow: 'hidden',
        }}>
          <div className="fq-orb" />
          <div style={{ position: 'relative', zIndex: 1, width: '100%' }}>
            <p style={{
              fontFamily: "'Barlow Condensed',sans-serif", fontSize: 11, fontWeight: 700,
              letterSpacing: '0.3em', textTransform: 'uppercase', color: '#f5c518',
              marginBottom: 20, opacity: 0, animation: 'faqFadeUp .6s .05s ease both',
            }}>
              Got Questions?
            </p>
            <h1 style={{
              fontFamily: "'Russo One',sans-serif",
              fontSize: 'clamp(72px,16vw,160px)',
              lineHeight: 0.85, letterSpacing: '-0.02em',
              textTransform: 'uppercase', color: '#f5c518',
              textShadow: '0 0 80px rgba(245,197,24,.3)',
              marginBottom: 28, opacity: 0,
              animation: 'faqFadeUp .7s .15s cubic-bezier(.16,1,.3,1) both',
            }}>
              FAQ
            </h1>
            <p style={{
              fontFamily: "'Barlow Condensed',sans-serif",
              fontSize: 'clamp(14px,2.2vw,18px)', fontWeight: 500,
              letterSpacing: '0.08em', textTransform: 'uppercase',
              color: '#7a85a8', opacity: 0,
              animation: 'faqFadeUp .6s .35s ease both',
            }}>
              Everything you need to know about Ranked EQAO
            </p>
          </div>
        </section>

        {/* ACCORDION */}
        <section style={{
          padding: '60px 0 100px',
          background: 'rgba(13,15,28,.78)',
          backdropFilter: 'blur(2px)', WebkitBackdropFilter: 'blur(2px)',
        }}>
          <div className="fq-wrap">
            {FAQS.map((item, i) => {
              const isOpen = openIndex === i;
              return (
                <div
                  key={i}
                  className={`fq-item${isOpen ? ' fq-item--open' : ''}`}
                >
                  <button className="fq-question" onClick={() => toggle(i)} aria-expanded={isOpen}>
                    <span className="fq-q-num">{String(i + 1).padStart(2, '0')}</span>
                    <span className="fq-q-text">{item.q}</span>
                    <svg
                      className="fq-chevron"
                      width="20" height="20" viewBox="0 0 24 24"
                      fill="none" stroke="rgba(122,133,168,.6)"
                      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                    >
                      <polyline points="6 9 12 15 18 9" />
                    </svg>
                  </button>
                  <div
                    className="fq-answer-wrap"
                    style={{ maxHeight: isOpen ? '600px' : '0' }}
                  >
                    <p
                      className="fq-answer"
                      style={{ opacity: isOpen ? 1 : 0 }}
                    >
                      {item.a.split('\n\n').map((para, pi) => (
                        <span key={pi} style={{ display: 'block', marginBottom: pi < item.a.split('\n\n').length - 1 ? 14 : 0 }}>
                          {para}
                        </span>
                      ))}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Bottom CTA */}
          <div style={{ textAlign: 'center', marginTop: 72, padding: '0 24px' }}>
            <p style={{
              fontFamily: "'Barlow Condensed',sans-serif", fontSize: 16,
              letterSpacing: '0.06em', color: '#4a5470', marginBottom: 20,
            }}>
              Still have a question?
            </p>
            <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
              <Link
                to="/about"
                style={{
                  padding: '12px 28px',
                  background: 'rgba(245,197,24,.08)', border: '1px solid rgba(245,197,24,.35)',
                  borderRadius: 8, fontFamily: "'Barlow Condensed',sans-serif",
                  fontSize: 13, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
                  color: '#f5c518', textDecoration: 'none', display: 'inline-block',
                  transition: 'background .2s, border-color .2s',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = 'rgba(245,197,24,.16)'; e.currentTarget.style.borderColor = 'rgba(245,197,24,.6)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'rgba(245,197,24,.08)'; e.currentTarget.style.borderColor = 'rgba(245,197,24,.35)'; }}
              >
                Read About The Project
              </Link>
              <button
                onClick={() => navigate('/')}
                style={{
                  padding: '12px 28px', background: 'transparent', color: '#eceef8',
                  border: '1.5px solid rgba(255,255,255,.15)', borderRadius: 8,
                  fontFamily: "'Barlow Condensed',sans-serif",
                  fontSize: 13, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
                  cursor: 'pointer', transition: 'border-color .2s',
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,.4)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,.15)'; }}
              >
                Back to Home
              </button>
            </div>
          </div>
        </section>

        {/* FOOTER */}
        <footer style={{
          background: 'rgba(7,8,15,.95)',
          borderTop: '1px solid rgba(255,255,255,.07)',
          padding: '40px 24px',
        }}>
          <div className="fq-wrap" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18, maxWidth: 1100 }}>
            <Link to="/" style={{ textDecoration: 'none' }}>
              <span style={{ fontFamily: "'Russo One',sans-serif", fontSize: 16, letterSpacing: '0.04em', color: '#eceef8' }}>
                RANKED<span style={{ color: '#f5c518' }}>EQAO</span>
              </span>
            </Link>
            <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', justifyContent: 'center' }}>
              <Link to="/" className="fq-footer-link">Home</Link>
              <Link to="/about" className="fq-footer-link">About</Link>
            </div>
            <p style={{
              fontFamily: "'Barlow',sans-serif", fontSize: 11,
              color: 'rgba(122,133,168,.45)', letterSpacing: '0.04em', textAlign: 'center',
            }}>
              Ranked EQAO — Built for Ontario students &nbsp;·&nbsp; Not affiliated with EQAO or the Ontario government.
            </p>
          </div>
        </footer>

      </div>
    </>
  );
}
