// views/faq.jsx — SEO-oriented FAQ for the 2026 World Cup. Grouped, accordion,
// with a standing CTA to ask the live agent anything not covered.
function FaqView({ onRoute }) {
  const M = window.WCL_2026.meta;
  const groups = [
    { cat: 'Dates & schedule', qs: [
      { q: 'When is the 2026 World Cup?', a: `The FIFA World Cup 26 runs from June 11 to July 19, 2026 — ${M.days} days. The opening match is in Mexico City; the final is at MetLife Stadium in East Rutherford, New Jersey on July 19.` },
      { q: 'How many matches are there?', a: `${M.matches} matches — up from 64 — across the expanded 48-team format. Each team plays at least three group games; the eventual finalists play eight matches in total.` },
      { q: 'How long does the tournament last?', a: 'About five and a half weeks: a group stage from June 11–27, then the Round of 32, Round of 16, quarter-finals, semi-finals, the third-place play-off (July 18) and the final (July 19).' },
    ]},
    { cat: 'Teams & format', qs: [
      { q: 'How many teams qualify for 2026?', a: '48 teams — the largest field in World Cup history. They are drawn into 12 groups of four.' },
      { q: 'How does the new 48-team format work?', a: M.format + '. The top two from each group, plus the eight best third-placed teams, advance to a new Round of 32.' },
      { q: 'Who are the defending champions?', a: 'Argentina, who beat France on penalties in the 2022 final in Qatar — Lionel Messi\u2019s long-awaited World Cup.' },
      { q: 'Which teams are debuting in 2026?', a: 'Four nations make their World Cup debut: ' + M.debutants.join(', ') + '.' },
    ]},
    { cat: 'Host cities & venues', qs: [
      { q: 'Which countries host the 2026 World Cup?', a: 'Three: the United States, Canada and Mexico — the first World Cup co-hosted by three nations. The US stages 78 matches, with 13 each in Mexico and Canada.' },
      { q: 'How many host cities and stadiums are there?', a: `16 host cities and 16 stadiums across the three countries (${M.citiesByCountry.USA} in the US, ${M.citiesByCountry.MEX} in Mexico, ${M.citiesByCountry.CAN} in Canada).` },
      { q: 'Which stadium hosts the final?', a: 'MetLife Stadium (the "New York New Jersey Stadium") in East Rutherford, NJ. AT&T Stadium in Dallas hosts the most matches overall, with nine.' },
      { q: 'Is Estadio Azteca involved again?', a: 'Yes — now Estadio Banorte, it is the only stadium to have hosted matches at three World Cups (1970, 1986, 2026), and Mexico becomes the first nation to host or co-host three times.' },
    ]},
    { cat: 'Watching & following', qs: [
      { q: 'How can I follow matches live here?', a: 'The Live Today page shows in-play scores, a win-probability model and a match timeline during the tournament window. Outside it, you\u2019ll see fixtures and a countdown.' },
      { q: 'What is Pick\u2019em?', a: 'A free prediction game: call 1 / X / 2 on every match before kick-off, get scored against the forecast model, and climb a global leaderboard with daily streaks.' },
      { q: 'Where do the player photos and bios come from?', a: 'The Players page pulls images and biographies live from Wikipedia. The forecast and odds come from a Poisson model blended with market consensus.' },
    ]},
    { cat: 'History & the competition', qs: [
      { q: 'Who has won the most World Cups?', a: 'Brazil, with five titles (1958, 1962, 1970, 1994, 2002). Germany and Italy have four each; Argentina three.' },
      { q: 'How often is the World Cup held?', a: 'Every four years since 1930, with the only gap being 1942 and 1946 (cancelled because of the Second World War).' },
      { q: 'Where will future World Cups be held?', a: '2030 is shared by Morocco, Portugal and Spain — with centenary opening matches in Uruguay, Argentina and Paraguay — and 2034 goes to Saudi Arabia.' },
    ]},
  ];

  const [open, setOpen] = React.useState('0-0');

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="breadcrumb" style={{ display: 'flex', gap: 6, color: 'var(--foreground-muted)', fontSize: 12, marginBottom: 8 }}>
            <a className="link" onClick={() => onRoute('home')}>Home</a><I.ChevR size={12} /><span>FAQ</span>
          </div>
          <h1 className="type-h1" style={{ margin: 0 }}>World Cup 2026 — frequently asked questions</h1>
          <div className="sub">Everything fans search for about the tournament — dates, format, host cities, teams and how to follow it.</div>
        </div>
        <button className="btn btn-primary btn-sm" onClick={() => onRoute('agent')}><I.Chat size={14} /> Ask the agent</button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        {groups.map((g, gi) => (
          <section key={g.cat}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>{g.cat}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {g.qs.map((item, qi) => {
                const key = gi + '-' + qi;
                const isOpen = open === key;
                return (
                  <div key={key} style={{ border: '1px solid var(--border)', borderRadius: 'var(--radius-md)', background: 'var(--card)', overflow: 'hidden' }}>
                    <button onClick={() => setOpen(isOpen ? null : key)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '14px 16px', background: 'transparent', border: 'none', cursor: 'pointer', color: 'var(--foreground)', fontFamily: 'inherit', textAlign: 'left' }}>
                      <span className="strong" style={{ fontSize: 14, fontWeight: 600 }}>{item.q}</span>
                      <I.ChevDown size={16} style={{ flexShrink: 0, color: 'var(--foreground-muted)', transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }} />
                    </button>
                    {isOpen && (
                      <div style={{ padding: '0 16px 16px', fontSize: 14, lineHeight: 1.6, color: 'var(--foreground-subtle)', textWrap: 'pretty' }}>{item.a}</div>
                    )}
                  </div>
                );
              })}
            </div>
          </section>
        ))}
      </div>

      <section className="panel" style={{ marginTop: 22, textAlign: 'center', padding: '28px 24px' }}>
        <div className="strong" style={{ fontSize: 18, fontWeight: 600, marginBottom: 6 }}>Didn&rsquo;t find your answer?</div>
        <div className="subtle" style={{ fontSize: 14, marginBottom: 16 }}>WorldCupAI knows every edition since 1930, every team and the model behind the odds.</div>
        <button className="btn btn-primary btn-sm" onClick={() => onRoute('agent')}><I.Chat size={14} /> Ask WorldCupAI</button>
      </section>
    </div>
  );
}
Object.assign(window, { FaqView });