<?php
/**
 * Template Name: Home
 * Home page template
 */
get_header();
?>

<!-- Hero Section -->
<section class="hero">
    <div class="hero-bg">
        <!-- Replace with actual hero image -->
        <?php echo payfrit_image('hero'); ?>
    </div>
    <div class="container">
        <div class="hero-content">
            <h1>Pay the way you already live.</h1>
            <p class="subhead">Order, pay, and get service from your phone — without waiting, scanning, or awkward moments.</p>
            <div class="hero-ctas">
                <?php echo payfrit_cta_button('signup', 'btn btn-primary', 'Create account'); ?>
                <a href="<?php echo home_url('/restaurants/'); ?>" class="btn btn-secondary">Restaurants</a>
            </div>
        </div>
    </div>
</section>

<!-- Why it feels better -->
<section class="features">
    <div class="container">
        <div class="features-header">
            <h2>Why it feels better</h2>
        </div>
        <div class="features-grid">
            <div class="feature-card">
                <h3>Sit anywhere</h3>
                <p>Pick your spot. The table, the bar, the patio. You're not waiting to be seated.</p>
            </div>
            <div class="feature-card">
                <h3>Order when you're ready</h3>
                <p>Browse the menu on your phone. Add things when you want them. No flagging anyone down.</p>
            </div>
            <div class="feature-card">
                <h3>Pay instantly</h3>
                <p>When you're done, you're done. No waiting for the check. No awkward card handoff.</p>
            </div>
            <div class="feature-card">
                <h3>Leave when you want</h3>
                <p>Your time is yours. Stay for another round or head out. You're in control.</p>
            </div>
        </div>
    </div>
</section>

<!-- For Restaurants -->
<section class="for-restaurants">
    <div class="container">
        <div class="split-content">
            <div class="split-text">
                <h2>For restaurants</h2>
                <p class="subhead">Modern ordering and payment — without replacing your POS.</p>
                <ul>
                    <li>Guests order and pay from their phone</li>
                    <li>Staff stays in control</li>
                    <li>Tables, bars, seats, anywhere</li>
                    <li>Cash, card, or balance — your rules</li>
                </ul>
                <?php echo payfrit_cta_button('signup', 'btn btn-primary', 'Restaurant onboarding'); ?>
                <p class="small-text">No contracts. Ever.</p>
            </div>
            <div class="split-image">
                <!-- Replace with actual KDS/kitchen image -->
                <?php echo payfrit_image('kds', 'Kitchen display system'); ?>
            </div>
        </div>
    </div>
</section>

<!-- How it works -->
<section class="how-it-works">
    <div class="container">
        <h2>How it works</h2>
        <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.</p>
            </div>
            <div class="step">
                <span class="step-number">2</span>
                <h3>Order and pay from your phone</h3>
                <p>Browse the menu, order what you want, pay when you're ready.</p>
            </div>
            <div class="step">
                <span class="step-number">3</span>
                <h3>Food and service arrive</h3>
                <p>That's it. Enjoy your meal.</p>
            </div>
        </div>
        <?php echo payfrit_cta_button('signup', 'btn btn-primary', 'Create account'); ?>
    </div>
</section>

<?php get_footer(); ?>
