@extends('layouts.app')

@section('title', 'Home')

@section('content')
<section class="hero premium-hero">
    <div class="container hero-wrapper">
        <div class="hero-left" data-animate="fade-up">
            <span class="section-tag">Solar solutions for homes, businesses, and infrastructure</span>
            <h1>Reduce your electricity bill to Rs 0 with modern solar design.</h1>
            <p class="hero-copy">
                We engineer premium solar systems that combine performance, intelligent planning, and elegant execution for households, businesses, and institutional projects.
            </p>

            <div class="hero-buttons">
                <a href="{{ url('/product') }}" class="btn btn-primary glow-button">View Product</a>
                <a href="{{ url('/contact') }}" class="btn btn-secondary btn-outline-premium">Talk to Our Experts</a>
            </div>

            <div class="hero-stats">
                <div class="mini-stat" data-animate="fade-up">
                    <strong>25 Years</strong>
                    <span>Performance assurance</span>
                </div>
                <div class="mini-stat" data-animate="fade-up" data-delay="100">
                    <strong>7 Days</strong>
                    <span>Average site onboarding</span>
                </div>
                <div class="mini-stat" data-animate="fade-up" data-delay="200">
                    <strong>24/7</strong>
                    <span>Monitoring support</span>
                </div>
            </div>
        </div>

        <div class="hero-right" data-animate="slide-left">
            <div class="hero-visual-card">
                <div class="hero-floating-badge">
                    <span>Live Output</span>
                    <strong>98.2% Efficiency</strong>
                </div>
                <img
                    id="heroSlider"
                    src="{{ asset('hero1.png') }}"
                    alt="Premium rooftop solar installation"
                    data-images='@json([asset("hero1.png"), asset("hero2.png")])'
                >
                <div class="hero-metric-strip">
                    <div>
                        <span>Average savings</span>
                        <strong>35%+</strong>
                    </div>
                    <div>
                        <span>Installed systems</span>
                        <strong>2000+</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="journey section-shell">
    <div class="container">
        <div class="section-head text-center" data-animate="fade-up">
            <span class="section-tag">Trusted Scale</span>
            <h2>Our Journey</h2>
            <p>
                We have built a strong delivery footprint across residential, commercial, and public-sector energy programs with measurable outcomes and reliable service.
            </p>
        </div>

        <div class="journey-grid">
            <article class="journey-card" data-animate="fade-up">
                <h3 class="count-up" data-target="2" data-suffix="MW+">0</h3>
                <p>Residential Projects</p>
            </article>
            <article class="journey-card" data-animate="fade-up" data-delay="80">
                <h3 class="count-up" data-target="1" data-suffix="MW+">0</h3>
                <p>Rooftop Projects</p>
            </article>
            <article class="journey-card" data-animate="fade-up" data-delay="160">
                <h3 class="count-up" data-target="0.5" data-suffix="MW+">0</h3>
                <p>Ground Mount Capacity</p>
            </article>
            <article class="journey-card" data-animate="fade-up" data-delay="240">
                <h3 class="count-up" data-target="20" data-suffix="+">0</h3>
                <p>Team Strength</p>
            </article>
            <article class="journey-card" data-animate="fade-up">
                <h3 class="count-up" data-target="20" data-suffix="+">0</h3>
                <p>Technology Partners</p>
            </article>
            <article class="journey-card" data-animate="fade-up" data-delay="80">
                <h3 class="count-up" data-target="2000" data-suffix="+">0</h3>
                <p>Homes Powered</p>
            </article>
            <article class="journey-card" data-animate="fade-up" data-delay="160">
                <h3 class="count-up" data-target="5" data-suffix="+">0</h3>
                <p>Cities Served</p>
            </article>
        </div>
    </div>
</section>

<section class="solutions section-shell">
    <div class="container">
        <div class="section-head text-center" data-animate="fade-up">
            <span class="section-tag">Tailored Offerings</span>
            <h2>Solar Solutions</h2>
            <p>Choose a solar pathway designed for your property type, energy demand, and long-term growth plans.</p>
        </div>

        <div class="solutions-grid">
            <article class="solution-card" data-animate="fade-up">
                <div class="solution-media">
                    <img src="{{ asset('home.png') }}" alt="Solar for Home">
                </div>
                <div class="solution-body">
                    <h3>Solar for Home</h3>
                    <p>High-efficiency rooftop systems for households looking for smarter savings and reliable daily output.</p>
                    <a href="{{ url('/solar-home') }}" class="solution-link">Learn More <span>&rarr;</span></a>
                </div>
            </article>

            <article class="solution-card" data-animate="fade-up" data-delay="100">
                <div class="solution-media">
                    <img src="{{ asset('business.png') }}" alt="Solar for Business">
                </div>
                <div class="solution-body">
                    <h3>Solar for Business</h3>
                    <p>Scalable solar systems for factories, offices, and commercial spaces that need long-term efficiency.</p>
                    <a href="{{ url('/solar-business') }}" class="solution-link">Learn More <span>&rarr;</span></a>
                </div>
            </article>

            <article class="solution-card" data-animate="fade-up" data-delay="200">
                <div class="solution-media">
                    <img src="{{ asset('govt.png') }}" alt="Government Projects">
                </div>
                <div class="solution-body">
                    <h3>Government Projects</h3>
                    <p>Large-scale execution support for public infrastructure, institutions, and strategic energy initiatives.</p>
                    <a href="{{ url('/contact') }}" class="solution-link">Learn More <span>&rarr;</span></a>
                </div>
            </article>
        </div>
    </div>
</section>
@endsection