// ============================================================
// Olive Garden — GenAI 101 guided lesson cards
// Step-through introduction to Generative AI for non-tech visitors
// Exposed via window.LessonsContent for the WindowContent resolver
// ============================================================

const LESSONS = [
  {
    tag: 'BASICS · 1 / 6',
    title: 'What is Generative AI?',
    body: `Generative AI is software that creates new content — text, code, images, audio — by learning patterns from enormous amounts of existing examples. Unlike a calculator (fixed rules, deterministic answers) or a search engine (retrieves what exists), it generates something new each time.

The magic is scale: these models train on billions of examples until the learned patterns become useful enough to feel intelligent.`,
    exampleLabel: 'analogy',
    exampleLeft: { label: 'Old-school software', text: 'If rent > income → reject\nIf income > 3× rent → approve' },
    exampleRight: { label: 'Generative AI', text: 'Reads thousands of real applications, learns the nuanced patterns, generates a risk assessment in plain language.' },
  },
  {
    tag: 'BASICS · 2 / 6',
    title: 'What is a Prompt?',
    body: `A prompt is the instruction, question, or message you give to an AI. It's your side of the conversation. The AI has no context beyond what you give it — it doesn't know who you are, what you need, or why you're asking.

That's why phrasing matters. A vague prompt gets a generic answer. A specific, well-structured prompt gets a useful one.`,
    exampleLabel: 'example',
    exampleLeft: { label: '❌ vague', text: 'Write something about climate change.' },
    exampleRight: { label: '✅ specific', text: 'Write a 3-sentence explanation of the greenhouse effect for a 10-year-old. Use a simple analogy.' },
  },
  {
    tag: 'TECHNIQUE · 3 / 6',
    title: 'Writing better prompts',
    body: `Good prompts tend to have four ingredients — you don't need all four, but more specificity means better results:

· Role — who should the AI be? ("Act as a copywriter…")
· Task — what exactly do you want?
· Format — how should the output look? (bullet list, email, table…)
· Context — what background does the AI need to know?`,
    exampleLabel: 'example',
    exampleLeft: { label: '❌ under-specified', text: 'Help me write an email.' },
    exampleRight: { label: '✅ role + task + format + context', text: 'You are a professional copywriter. Write a 3-sentence follow-up email to a recruiter I met at a tech conference last week. Keep it warm but not overly casual.' },
  },
  {
    tag: 'CONCEPTS · 4 / 6',
    title: 'What are LLMs?',
    body: `LLM stands for Large Language Model — the engine behind tools like ChatGPT, Claude, or Gemini. These models are trained on billions of text examples and learn to predict which word (or token) is most likely to come next, over and over, until the predictions become remarkably useful.

They don't "understand" language the way humans do. They recognise extremely deep statistical patterns in it. That's both their power and their limit.`,
    exampleLabel: 'analogy',
    exampleLeft: { label: 'what you might think', text: '"The AI read everything and now understands the world."' },
    exampleRight: { label: 'what actually happens', text: '"The AI learned: when these words appear, these words tend to follow." — a very sophisticated autocomplete, at superhuman scale.' },
  },
  {
    tag: 'CONCEPTS · 5 / 6',
    title: 'Hallucinations',
    body: `AI can confidently state things that are completely wrong — fabricated names, invented citations, incorrect facts. This is called hallucination.

It happens because the model is always predicting the most plausible-sounding continuation, not looking up verified facts. It has no ability to say "I don't know" unless trained to do so. Always verify important information from an AI, especially names, dates, numbers, and citations.`,
    exampleLabel: 'example',
    exampleLeft: { label: '❌ risky prompt', text: 'What papers has [obscure researcher] published?' },
    exampleRight: { label: '⚠ what can happen', text: 'The AI generates 5 plausible-sounding paper titles with realistic co-authors and journal names — most of which don\'t exist.' },
  },
  {
    tag: 'ADVANCED · 6 / 6',
    title: 'What is RAG?',
    body: `RAG stands for Retrieval-Augmented Generation. It gives an AI access to a specific set of documents before it answers. Instead of relying purely on its training data, the model first searches the provided docs, then generates an answer grounded in what it finds.

This dramatically reduces hallucinations for knowledge-heavy tasks and lets you use AI on private or up-to-date information it was never trained on.`,
    exampleLabel: 'example',
    exampleLeft: { label: 'without RAG', text: 'AI answers from training data (may be outdated, may hallucinate company-specific details).' },
    exampleRight: { label: '✅ with RAG', text: 'AI first retrieves the 3 most relevant pages from your internal docs, then writes its answer citing exactly what it found.' },
  },
];

function LessonsContent() {
  const [idx, setIdx] = React.useState(0);
  const lesson = LESSONS[idx];
  const total = LESSONS.length;

  return (
    <div className="lessons-wrap" contentEditable={false}>
      {/* Header bar */}
      <div className="lessons-header">
        <span className="lessons-tag">{lesson.tag}</span>
      </div>

      {/* Card body */}
      <div className="lessons-body">
        <h2 className="lessons-title">{lesson.title}</h2>
        <p className="lessons-text">{lesson.body}</p>

        {/* Example block */}
        <div className="lessons-example">
          <div className="lessons-ex-label">{lesson.exampleLabel}</div>
          <div className="lessons-ex-cols">
            <div className="lessons-ex-cell">
              <div className="lessons-ex-cell-label">{lesson.exampleLeft.label}</div>
              <pre className="lessons-ex-pre">{lesson.exampleLeft.text}</pre>
            </div>
            <div className="lessons-ex-sep">→</div>
            <div className="lessons-ex-cell">
              <div className="lessons-ex-cell-label">{lesson.exampleRight.label}</div>
              <pre className="lessons-ex-pre">{lesson.exampleRight.text}</pre>
            </div>
          </div>
        </div>
      </div>

      {/* Navigation */}
      <div className="lessons-nav">
        <button
          className="lessons-btn"
          onClick={() => setIdx(i => Math.max(0, i - 1))}
          disabled={idx === 0}
          contentEditable={false}
        >
          ← prev
        </button>
        <div className="lessons-dots">
          {LESSONS.map((_, i) => (
            <button
              key={i}
              className={'lessons-dot' + (i === idx ? ' active' : '')}
              onClick={() => setIdx(i)}
              contentEditable={false}
              aria-label={`Go to lesson ${i + 1}`}
            />
          ))}
        </div>
        <button
          className="lessons-btn"
          onClick={() => setIdx(i => Math.min(total - 1, i + 1))}
          disabled={idx === total - 1}
          contentEditable={false}
        >
          next →
        </button>
      </div>
    </div>
  );
}

window.LessonsContent = LessonsContent;