<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MLA Question Builder</title>
    <link rel="stylesheet" href="assets/css/styles.css?v=2">
    <link rel="stylesheet" href="assets/css/app.css?v=63">
    <link rel="stylesheet" href="assets/css/theme.css?v=12">
</head>
<body class="app-shell page-home">
<?php require __DIR__ . '/partials/site_header.php'; ?>

    <div class="container">
        <div class="card page-hero home-landing-hero">
            <div class="home-hero-layout">
                <div class="home-hero-content">
                    <div class="home-hero-intro">
                        <h1 class="home-hero-title">Create and refine MLA-style questions</h1>
                        <p class="home-hero-subtitle">
                            Build tutor-reviewable single best answer questions from structured clinical inputs, or
                            create editable variants from existing questions. AI can help draft, review and suggest
                            improvements, but tutors remain responsible for final approval.
                        </p>
                    </div>

                    <div class="home-hero-middle">
                    <hr class="home-hero-divider home-hero-divider--after-intro" aria-hidden="true">

                    <div class="home-hero-workflows" aria-label="Workflows">
                        <article class="home-hero-action home-hero-action--create">
                            <span class="home-hero-action-icon home-hero-action-icon--create" aria-hidden="true">
                                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" focusable="false">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
                                    <path d="M14 2v6h6M12 18v-6M9 15h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                            </span>
                            <div class="home-hero-action-body">
                                <h2 class="home-hero-action-title">Create SBA Questions</h2>
                                <p class="home-hero-action-text">
                                    Generate new draft questions from specialty, condition, presentation, year level
                                    and selected skills.
                                </p>
                            </div>
                            <a href="generator.php" class="btn home-hero-action-btn home-hero-action-btn--create">
                                Create SBA Questions <span class="home-hero-action-arrow" aria-hidden="true">→</span>
                            </a>
                        </article>

                        <article class="home-hero-action home-hero-action--variants">
                            <span class="home-hero-action-icon home-hero-action-icon--variants" aria-hidden="true">
                                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" focusable="false">
                                    <rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/>
                                    <rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/>
                                    <rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/>
                                    <rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/>
                                </svg>
                            </span>
                            <div class="home-hero-action-body">
                                <h2 class="home-hero-action-title">Create SBA Variants</h2>
                                <p class="home-hero-action-text">
                                    Upload existing questions and generate editable variants that test the same
                                    knowledge while reducing simple pattern recognition.
                                </p>
                            </div>
                            <a href="variant_generator.php" class="btn home-hero-action-btn home-hero-action-btn--variants">
                                Create SBA Variants <span class="home-hero-action-arrow" aria-hidden="true">→</span>
                            </a>
                        </article>
                    </div>

                    <hr class="home-hero-divider home-hero-divider--before-advisory" aria-hidden="true">
                    </div>

                    <p class="home-hero-advisory" role="note">
                        <span class="home-hero-advisory-icon" aria-hidden="true">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" focusable="false">
                                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                                <path d="M12 8v5M12 16h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </span>
                        <span>AI support is advisory. Questions must be reviewed by a tutor before approval or export.</span>
                    </p>
                </div>

                <aside class="home-hero-aside" aria-label="Example question and review workflow">
                    <div class="home-preview-card">
                        <div class="home-preview-card-top">
                            <span class="home-preview-q-badge">Q1</span>
                            <span class="home-preview-status">Draft</span>
                        </div>
                        <p class="home-preview-stem">
                            A 72-year-old man presents with sudden-onset pleuritic chest pain and shortness of breath.
                            Examination reveals reduced air entry on the left.
                        </p>
                        <ul class="home-preview-options">
                            <li><span class="home-preview-opt-label">A.</span> Pulmonary embolism</li>
                            <li class="home-preview-opt--correct"><span class="home-preview-opt-label">B.</span> Pneumothorax <span class="home-preview-opt-check" aria-hidden="true">✓</span></li>
                            <li><span class="home-preview-opt-label">C.</span> Community-acquired pneumonia</li>
                            <li><span class="home-preview-opt-label">D.</span> Acute asthma</li>
                            <li><span class="home-preview-opt-label">E.</span> Heart failure</li>
                        </ul>
                        <div class="home-preview-meta">
                            <p><strong>Correct answer:</strong> B</p>
                            <p><strong>Justification:</strong> Reduced air entry with sudden pleuritic pain suggests pneumothorax.</p>
                        </div>
                    </div>

                    <ol class="home-workflow-timeline">
                        <li class="home-workflow-timeline-item">
                            <span class="home-workflow-timeline-marker home-workflow-timeline-marker--draft" aria-hidden="true">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 3l1.5 4.5H18l-3.5 2.5 1.5 4.5L12 12l-4 2.5 1.5-4.5L6 7.5h4.5L12 3z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
                            </span>
                            <div class="home-workflow-timeline-copy">
                                <strong>Draft question</strong>
                                <p>AI generates a draft from structured inputs or an uploaded source question.</p>
                            </div>
                        </li>
                        <li class="home-workflow-timeline-item">
                            <span class="home-workflow-timeline-marker home-workflow-timeline-marker--review" aria-hidden="true">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 3l1.5 4.5H18l-3.5 2.5 1.5 4.5L12 12l-4 2.5 1.5-4.5L6 7.5h4.5L12 3z" fill="currentColor" stroke="none"/></svg>
                            </span>
                            <div class="home-workflow-timeline-copy">
                                <strong>AI review</strong>
                                <p>AI checks clinical accuracy, style and educational value, then suggests improvements.</p>
                            </div>
                        </li>
                        <li class="home-workflow-timeline-item">
                            <span class="home-workflow-timeline-marker home-workflow-timeline-marker--edit" aria-hidden="true">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>
                            </span>
                            <div class="home-workflow-timeline-copy">
                                <strong>Tutor edit</strong>
                                <p>You review AI suggestions, edit the draft and decide what to keep.</p>
                            </div>
                        </li>
                        <li class="home-workflow-timeline-item">
                            <span class="home-workflow-timeline-marker home-workflow-timeline-marker--approve" aria-hidden="true">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="2"/></svg>
                            </span>
                            <div class="home-workflow-timeline-copy">
                                <strong>Ready for approval</strong>
                                <p>Approve when satisfied. Export only after tutor review.</p>
                            </div>
                        </li>
                    </ol>
                </aside>
            </div>
        </div>
    </div>

<script src="assets/js/theme.js?v=1"></script>
</body>
</html>
