@extends('layouts.app')

@section('title', 'Solar for Home')

@section('content')
<section class="panel-systems-section section-shell">
    <div class="container">
        <div class="section-head text-center" data-animate="fade-up">
            <span class="section-tag">Solar Panel Systems</span>
            <h2>Types of Solar Panel Systems</h2>
            <p>Choose the best solar solution for your home or business — reliable, efficient, and eco-friendly.</p>
        </div>

        <div class="panel-systems-grid">
            <article class="panel-system-card on-grid" data-animate="fade-up">
                <h3>On-Grid Solar System</h3>
                <p>
                    Connected to the utility grid, it allows you to use solar energy and send excess power back to the grid for credits through net metering.
                </p>
            </article>

            <article class="panel-system-card off-grid" data-animate="fade-up" data-delay="80">
                <h3>Off-Grid Solar System</h3>
                <p>
                    Works independently without electricity grid using batteries to store power — perfect for remote or rural areas with unreliable supply.
                </p>
            </article>

            <article class="panel-system-card hybrid-grid" data-animate="fade-up" data-delay="160">
                <h3>Hybrid Solar System</h3>
                <p>
                    A smart combination of grid and battery systems — ensures continuous power supply while maximizing energy savings and efficiency.
                </p>
            </article>
        </div>
    </div>
</section>

    <section class="home-solar-hero section-shell">
        <div class="container home-solar-grid">
            <div class="home-solar-copy" data-animate="fade-up">
                <span class="section-tag">Residential Solar</span>
                <h1>Trusted by 20,000+ Happy Customers</h1>
                <p class="lead">
                    Solar power helps homeowners reduce monthly electricity bills, improve energy independence, and add long-term value to their property.
                </p>
                <p>
                    With a professionally designed residential system, your home can generate clean power efficiently while requiring very little day-to-day maintenance.
                </p>
                <p>
                    Solar 24 Solutions makes the transition simple with transparent guidance, quality components, and dependable installation support.
                </p>
                <a href="{{ url('/contact') }}" class="btn btn-primary">Contact Us</a>
            </div>

            <div class="home-solar-media" data-animate="slide-left">
                <img src="{{ asset('/home-hero.png') }}" alt="Residential solar rooftop installation">
            </div>
        </div>
    </section>

    <section class="section-shell">
        <div class="container home-feature-grid">
            <div class="home-feature-media" data-animate="slide-right">
                <img src="{{ asset('/home-feature.png') }}" alt="Solar for home solutions">
            </div>

            <div class="home-feature-copy" data-animate="fade-up">
                <span class="section-tag">Why Homeowners Choose Us</span>
                <h2>Going <span class="highlight-underline">Solar For Home</span> is easy with Solarium</h2>

                <div class="home-feature-list">
                    <article class="home-feature-item">
                        <span class="feature-icon">01</span>
                        <div>
                            <h3>Brand You Can Trust</h3>
                            <p>We bring dependable execution, quality-first project planning, and transparent communication at every step.</p>
                        </div>
                    </article>
                    <article class="home-feature-item">
                        <span class="feature-icon">02</span>
                        <div>
                            <h3>Customized Solar Solutions</h3>
                            <p>Each home system is designed around roof space, energy usage, and long-term savings goals.</p>
                        </div>
                    </article>
                    <article class="home-feature-item">
                        <span class="feature-icon">03</span>
                        <div>
                            <h3>Product Warranty &amp; Service Support</h3>
                            <p>Our solutions are backed by strong product assurance and responsive post-installation support.</p>
                        </div>
                    </article>
                </div>

                <div class="home-stats-inline">
                    <div>
                        <strong>20,000+</strong>
                        <span>Residential Homes Solarized</span>
                    </div>
                    <div>
                        <strong>65+</strong>
                        <span>Presence in Cities</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section-shell">
        <div class="container">
            <div class="section-head text-center" data-animate="fade-up">
                <span class="section-tag">Integrated Support</span>
                <h2>One-Stop Solar Solution For Your Home</h2>
                <p>From design and installation to financing support and local service guidance, we simplify every part of the residential solar journey.</p>
            </div>

            <div class="home-icon-grid">
                <article class="home-icon-item" data-animate="fade-up">
                    <span>01</span>
                    <h3>Engineered by IITians</h3>
                </article>
                <article class="home-icon-item" data-animate="fade-up" data-delay="50">
                    <span>02</span>
                    <h3>Directly from Manufacturer</h3>
                </article>
                <article class="home-icon-item" data-animate="fade-up" data-delay="100">
                    <span>03</span>
                    <h3>Complete Peace of Mind</h3>
                </article>
                <article class="home-icon-item" data-animate="fade-up" data-delay="150">
                    <span>04</span>
                    <h3>Best Quality System</h3>
                </article>
                <article class="home-icon-item" data-animate="fade-up" data-delay="200">
                    <span>05</span>
                    <h3>Easy Financing</h3>
                </article>
                <article class="home-icon-item" data-animate="fade-up" data-delay="250">
                    <span>06</span>
                    <h3>Local Expertise</h3>
                </article>
            </div>
        </div>
    </section>

    <section class="section-shell">
        <div class="container">
            <div class="section-head text-center" data-animate="fade-up">
                <span class="section-tag">Long-Term Benefits</span>
                <h2>Why Go Solar?</h2>
            </div>

            <div class="home-benefit-grid">
                <article class="home-benefit-card" data-animate="fade-up">
                    <h3>Make Money From Sun</h3>
                    <p>Turn unused rooftop space into a productive energy asset that helps lower your monthly operating costs.</p>
                </article>
                <article class="home-benefit-card" data-animate="fade-up" data-delay="60">
                    <h3>Attractive Solar Subsidy</h3>
                    <p>Eligible homeowners can benefit from supportive subsidy structures that reduce initial system investment.</p>
                </article>
                <article class="home-benefit-card" data-animate="fade-up" data-delay="120">
                    <h3>Reliability &amp; Low Maintenance</h3>
                    <p>Residential solar systems are durable, stable, and designed to deliver strong performance with minimal upkeep.</p>
                </article>
                <article class="home-benefit-card" data-animate="fade-up" data-delay="180">
                    <h3>Environmental Responsibility</h3>
                    <p>Reduce your carbon footprint by choosing a clean and renewable energy source for everyday household usage.</p>
                </article>
                <article class="home-benefit-card" data-animate="fade-up" data-delay="240">
                    <h3>Best Investment for your Home</h3>
                    <p>Solar supports long-term savings while improving your property's energy efficiency and market perception.</p>
                </article>
                <article class="home-benefit-card" data-animate="fade-up" data-delay="300">
                    <h3>Protection against rising Utility Costs</h3>
                    <p>Generate your own power and reduce exposure to future electricity tariff increases over time.</p>
                </article>
            </div>
        </div>
    </section>
@endsection