@extends('frontend.layouts.app')

@section('title','SHAOXING SHUOLE TEXTILE CO.,LTD - About Us')

@section('content')

<style>
/* =====================
   GLOBAL
===================== */
.about-wrapper{
    font-family:'Poppins',sans-serif;
    color:#333;
}
section{
    padding:90px 0;
}
.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}
h1,h2,h3{
    font-weight:600;
}

/* =====================
   FULL WIDTH IMAGE
===================== */
.full-width-img{
    width:100%;
    height:520px;
    overflow:hidden;
}
.full-width-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* =====================
   HERO OVERLAY
===================== */
.hero-overlay{
    position:relative;
}
.hero-text{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    background:rgba(0,0,0,.55);
}
.hero-text .container{
    color:#fff;
}
.hero-text h1{
    font-size:46px;
    letter-spacing:2px;
}
.hero-text p{
    font-size:18px;
    margin-top:15px;
}

/* =====================
   INTRO
===================== */
.intro{
    text-align:center;
}
.intro p{
    max-width:850px;
    margin:20px auto;
    font-size:17px;
}

/* =====================
   STATS
===================== */
.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
    margin-top:60px;
}
.stat-card{
    background:#fff;
    padding:40px 20px;
    border-radius:16px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.3s;
}
.stat-card:hover{
    transform:translateY(-8px);
}
.stat-card h3{
    font-size:32px;
    color:#c89b3c;
}

/* =====================
   PROCESS
===================== */
.process{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}
.process img{
    width:100%;
    border-radius:18px;
}
.process li{
    margin-bottom:10px;
}

/* =====================
   TIMELINE
===================== */
.timeline{
    margin-top:50px;
    border-left:3px solid #c89b3c;
    padding-left:40px;
}
.timeline-item{
    margin-bottom:40px;
}
.timeline-item span{
    font-weight:600;
    color:#c89b3c;
}

/* =====================
   VALUES
===================== */
.values{
    background:#f8f8f8;
    text-align:center;
}
.value-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:30px;
    margin-top:50px;
}
.value-item{
    background:#fff;
    padding:30px;
    border-radius:14px;
    box-shadow:0 10px 25px rgba(0,0,0,.07);
}

/* =====================
   RESPONSIVE
===================== */
@media(max-width:768px){
    .process{
        grid-template-columns:1fr;
    }
    .hero-text h1{
        font-size:32px;
    }
    .full-width-img{
        height:360px;
    }
}
</style>

<div class="about-wrapper">

    <!-- ================= TOP FULL WIDTH IMAGE ================= -->
    <div class="hero-overlay">
        <div class="full-width-img">
            <img src="{{ asset('assets/frontend/images/about_2.jpg') }}" alt="Shuole Textile Factory">
        </div>
        <div class="hero-text">
            <div class="container">
                <h1>SHAOXING SHUOLE TEXTILE</h1>
                <p>Professional Woven & Knitted Fabric Manufacturer Since 2008</p>
            </div>
        </div>
    </div>

    <!-- ================= COMPANY INTRO ================= -->
    <section>
        <div class="container intro">
            <h2>Company Introduction</h2>
            <p>
                Shaoxing Shuole Textile BD Ltd. was founded in 2008 and has developed into
                a leading textile manufacturer in China, specializing in woven and knitted fabrics.
            </p>

            <div class="stats">
                <div class="stat-card">
                    <h3>85,000M</h3>
                    <p>Factory Area</p>
                </div>
                <div class="stat-card">
                    <h3>900+</h3>
                    <p>Employees</p>
                </div>
                <div class="stat-card">
                    <h3>80M</h3>
                    <p>Meters / Year</p>
                </div>
                <div class="stat-card">
                    <h3>10,000T</h3>
                    <p>Knitted Fabrics</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ================= MIDDLE FULL WIDTH IMAGE ================= -->
    <div class="full-width-img">
        <img src="{{ asset('assets/frontend/images/about_1.jpg') }}" alt="Textile Production Line">
    </div>

    <!-- ================= JET PADDING ================= -->
    <section>
        <div class="container process">
            <div>
                <h2>Jet Padding Technology</h2>
                <p>
                    Our advanced Jet Padding technology ensures excellent color penetration,
                    uniform chemical application and long-lasting fabric performance.
                </p>
                <ul>
                    <li>✔ High color fastness</li>
                    <li>✔ Smooth & soft finishing</li>
                    <li>✔ Eco-friendly processing</li>
                </ul>
            </div>
            <img src="{{ asset('assets/frontend/images/about_2.jpg') }}" alt="Jet Padding Machine">
        </div>
    </section>

    <!-- ================= TIMELINE ================= -->
    <section>
        <div class="container">
            <h2>Manufacturing Strength</h2>
            <div class="timeline">
                <div class="timeline-item">
                    <span>Woven Factory</span>
                    <p>280 Air Jet, 400 Water Jet & 200 Loom Machines</p>
                </div>
                <div class="timeline-item">
                    <span>Knitting Mill</span>
                    <p>80 Single-Face & 50 Double-Face Circular Machines</p>
                </div>
                <div class="timeline-item">
                    <span>Annual Output</span>
                    <p>80 Million Meters & 10,000 Tons</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ================= VALUES ================= -->
    <section class="values">
        <div class="container">
            <h2>Our Core Values</h2>
            <div class="value-grid">
                <div class="value-item">Service</div>
                <div class="value-item">Quality</div>
                <div class="value-item">Sharing</div>
                <div class="value-item">Mutual Benefit</div>
                <div class="value-item">Honesty & Credibility</div>
            </div>
        </div>
    </section>

</div>
@endsection