<?php
/**
 * Sección de introducción del formulario - Con clases corregidas
 */
?>
<!-- Sección 2: Introducción -->
<section class="form-section" data-section="2">
    <div class="section-header">
        <h2 class="section-title"><i class="fas fa-paragraph"></i> <?php echo $text['introduction']; ?></h2>
        <p class="section-description"><?php echo $text['introductionDesc']; ?></p>
    </div>
    
    <div class="form-content">
        <div class="form-group">
            <label for="introduction" class="required"><?php echo $text['introduction']; ?></label>
            <textarea id="introduction" name="introduction" required placeholder="<?php echo $text['introductionPlaceholder']; ?>"></textarea>
            <div class="word-count" id="introduction-word-count">
                <span>0/190 <?php echo $text['words']; ?></span>
                <div class="word-progress-bar"><div class="progress" style="width: 0%"></div></div>
            </div>
            <span class="help-text"><i class="fas fa-info-circle"></i> <?php echo $text['introductionHelpText']; ?></span>
            <span class="error-message" id="introduction-error"><i class="fas fa-exclamation-circle"></i> <?php echo $text['introductionErrorText']; ?></span>
        </div>
        <div id="total-word-count">
            <span><?php echo $text['totalWords']; ?>: 0/750</span>
            <div class="total-progress-container">
                <div class="total-progress-bar" style="width: 0%"></div>
            </div>
        </div>
    </div>
    
    <div class="form-navigation">
        <button type="button" class="btn btn-prev" data-prev="1"><i class="fas fa-arrow-left"></i> <?php echo $text['previous']; ?></button>
        <button type="button" class="btn btn-next" data-next="3"><?php echo $text['next']; ?> <i class="fas fa-arrow-right"></i></button>
    </div>
</section>