<?php
/**
 * Template Name: How It Works
 * How It Works page template
 */
get_header();
?>

<!-- Page Header -->
<section class="page-header">
    <div class="container">
        <h1>How Payfrit Works</h1>
        <p class="subhead">Three steps. That's it.</p>
    </div>
</section>

<!-- Steps -->
<section class="how-it-works" style="padding-top: 0;">
    <div class="container">
        <div class="steps">
            <div class="step">
                <span class="step-number">1</span>
                <h3>Sit anywhere</h3>
                <p>Pick a table, grab a seat at the bar, find your spot. No waiting to be seated.</p>
            </div>
            <div class="step">
                <span class="step-number">2</span>
                <h3>Order and pay from your phone</h3>
                <p>Browse the menu, add what you want, pay when you're ready. All from your phone.</p>
            </div>
            <div class="step">
                <span class="step-number">3</span>
                <h3>Food and service arrive</h3>
                <p>Your order goes to the kitchen. Food shows up. That's it.</p>
            </div>
        </div>
    </div>
</section>

<!-- Visual Section -->
<section class="content-section">
    <div class="container">
        <div class="split-content">
            <div class="split-image">
                <?php echo payfrit_image('diners-table', 'Friends at restaurant'); ?>
            </div>
            <div class="split-text">
                <h2>No app to download</h2>
                <p class="subhead">Works in your browser. Just open and order.</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="how-it-works">
    <div class="container">
        <h2>Ready to try it?</h2>
        <?php echo payfrit_cta_button('signup', 'btn btn-primary', 'Create account'); ?>
    </div>
</section>

<?php get_footer(); ?>
