import React from 'react';

type LearnitiveWorkflow = {
  eyebrow: string;
  title: string;
  subtitle: string;
  copy: string;
  capabilities: string;
  image: string;
  alt: string;
  width: number;
  height: number;
  wide?: boolean;
};

const LEARNITIVE_WORKFLOWS: readonly LearnitiveWorkflow[] = [
  {
    eyebrow: 'Writing and research workspace',
    title: 'Learnitive Editor',
    subtitle: 'Write visually or work directly with Markdown and LaTeX.',
    copy: 'Create notes, articles, research papers, theses and technical documents with source editing, visual tools, citations, PDF preview and AI assistance in the same project.',
    capabilities: 'Markdown · LaTeX · Visual editing · Citations · PDF · Research · AI',
    image: '/learnitive_editor_home.webp',
    alt: 'Learnitive Editor with LaTeX source, PDF preview, project files and AI assistance',
    width: 1374,
    height: 1145,
  },
  {
    eyebrow: 'Advanced project tools',
    title: 'Project Terminal',
    subtitle: 'A real Ubuntu terminal when your project needs more.',
    copy: 'Use Git, LaTeX tooling, Python, scripts and other command-line tools alongside your Learnitive projects. It is available for advanced workflows without making the terminal the centre of the product.',
    capabilities: 'Ubuntu · Bash · Git · LaTeX · Python · Project tools · Local sync',
    image: '/learnitive_terminal_home.webp',
    alt: 'Learnitive Project Terminal running Python, JavaScript and LaTeX commands',
    width: 1254,
    height: 1254,
    wide: true,
  },
  {
    eyebrow: 'AI-assisted research and creation',
    title: 'AI Builder',
    subtitle: 'Turn questions, sources and ideas into structured work.',
    copy: 'Research a topic, work across web and academic sources, organise notes and citations, and use AI to turn what you discover into an outline, study resource or editable writing project.',
    capabilities: 'Research · Sources · PDFs · Citations · Notes · Synthesis · Drafting',
    image: '/learnitive_ai_builder_home.webp',
    alt: 'Learnitive AI research workspace for finding, analysing and synthesising sources',
    width: 1254,
    height: 1254,
  },
] as const;

export function HomeWorkflowsShowcase() {
  return (
    <section className="interactive-home-workflows" aria-labelledby="interactive-home-workflows-title" data-home-section="explore-learnitive">
      <div className="interactive-home-workflows-heading">
        <span className="interactive-eyebrow">Write · Research · AI · Learn</span>
        <h2 id="interactive-home-workflows-title">Explore Learnitive</h2>
        <p>Write, research, learn and work with AI in one local-first workspace, while keeping control of your projects and files.</p>
      </div>
      <div className="interactive-home-workflow-list">
        {LEARNITIVE_WORKFLOWS.map((workflow) => (
          <article className="interactive-home-workflow-card" key={workflow.title}>
            <div className="interactive-home-workflow-copy">
              <span className="interactive-home-workflow-eyebrow">{workflow.eyebrow}</span>
              <h3>{workflow.title}</h3>
              <strong className="interactive-home-workflow-subtitle">{workflow.subtitle}</strong>
              <p>{workflow.copy}</p>
              <p className="interactive-home-workflow-capabilities">{workflow.capabilities}</p>
            </div>
            <div className={`interactive-home-workflow-media${workflow.wide ? ' is-wide' : ''}`}>
              <img alt={workflow.alt} width={workflow.width} height={workflow.height} loading="lazy" decoding="async" src={workflow.image} />
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}