@extends('layouts.app')

@section('content')
<!-- Banner -->
  <section class="page-banner" style="background-image: url('images/hero_roofing.png');">
    <div class="container page-banner-content">
      <span class="badge badge-accent">i-Roof Technology</span>
      <h1>ASA Polymer Roofing</h1>
      <p>Tropical-grade roofing sheets protected by ASA weather polymer. Anti-corrosive, sound insulating, and heat-reflective roofing systems.</p>
    </div>
  </section>

  <!-- Layers graphics -->
  <section class="section-padding container">
    <div class="grid-2 align-center">
      <div class="layer-graphic-col">
        <div class="graphic-stack">
          <div class="graphic-layer layer-1-box">
            <span>ASA Polymer UV Shield</span>
          </div>
          <div class="graphic-layer layer-2-box">
            <span>Heat & Rain Sound Dampening Core</span>
          </div>
          <div class="graphic-layer layer-3-box">
            <span>High Density Tensile Underlay</span>
          </div>
        </div>
      </div>
      
      <div class="layer-text-col">
        <span class="section-subtitle-badge">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="M12 20v2"/><path d="m19.07 19.07-1.41-1.41"/><path d="M2 12h2"/><path d="m17.66 6.34 1.41-1.41"/><path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"/></svg> Technology Structure
        </span>
        <h3>Three-Layer Co-Extrusion Technology</h3>
        <p class="layer-intro-p">i-Roof sheets are co-extruded in a single thermal bond to provide maximum protection and stability in high-humidity climates.</p>
        
        <div class="layers-accordion">
          <div class="layer-item-box">
            <h5>Layer 1: ASA Weather Layer</h5>
            <p>Top surface coated with Acrylonitrile Styrene Acrylate (ASA). Provides high UV protection, resists fading, and shields against tropical solar radiation.</p>
          </div>
          <div class="layer-item-box">
            <h5>Layer 2: Thermal & Acoustic Core</h5>
            <p>Mid core composite structures containing cellular voids. Isolates heat (up to 6°C cooling effect) and dampens heavy monsoon rain noise (up to 30dB reduction).</p>
          </div>
          <div class="layer-item-box">
            <h5>Layer 3: Tensile Base Layer</h5>
            <p>Underlayer featuring high-density PVC composite. Prevents leaks, resists chemical corrosion from coastal air, and guarantees rigidity.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Color Selector Showcase -->
  <section class="color-showcase-section section-padding">
    <div class="container">
      <div class="section-title">
        <h2>Fade-Resistant Colors</h2>
        <p>Our ASA polymer coat keeps its original pigmentation for decades, even under intense tropical sunlight.</p>
      </div>

      <div class="color-selector-grid">
        <div class="color-selector-sidebar glass">
          <h4>Choose a Color Profile</h4>
          <p class="sidebar-helper-text">Click to preview active roofing sheet color variants.</p>
          
          <div class="color-buttons-list">
            <button class="color-select-row active" data-color="Charcoal Grey" data-code="IR-G03">
              <span class="color-circle" style="background-color: #374151;"></span>
              <div class="color-btn-lbls">
                <span class="col-name">Charcoal Grey</span>
                <span class="col-code">IR-G03</span>
              </div>
            </button>
            
            <button class="color-select-row" data-color="Brick Red" data-code="IR-R01">
              <span class="color-circle" style="background-color: #991b1b;"></span>
              <div class="color-btn-lbls">
                <span class="col-name">Brick Red</span>
                <span class="col-code">IR-R01</span>
              </div>
            </button>

            <button class="color-select-row" data-color="Forest Green" data-code="IR-F05">
              <span class="color-circle" style="background-color: #065f46;"></span>
              <div class="color-btn-lbls">
                <span class="col-name">Forest Green</span>
                <span class="col-code">IR-F05</span>
              </div>
            </button>
          </div>

          <div class="color-sidebar-action">
            <button class="btn btn-primary w-full" data-trigger="modal" data-product="roof-standard">Request Quote for Charcoal Grey</button>
          </div>
        </div>

        <div class="color-preview-box card">
          <div class="color-preview-img-wrapper">
            <img src="images/hero_roofing.png" alt="Roofing Preview" class="color-preview-img" />
            <div class="color-preview-overlay">
              <span>Simulated Charcoal Grey Installation Preview</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Technical Specs -->
  <section class="section-padding container">
    <div class="grid-2">
      <!-- Performance indicators -->
      <div class="performance-col">
        <h3>Engineered Performance Indicators</h3>
        <p class="perf-intro-p">Unlike corrugated cement panels or galvanized zinc sheets, i-Roof offers specific biological and physical resistance attributes:</p>
        
        <div class="perf-list">
          <div class="perf-item">
            <svg class="perf-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="M12 20v2"/><path d="m19.07 19.07-1.41-1.41"/><path d="M2 12h2"/><path d="m17.66 6.34 1.41-1.41"/><path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"/></svg>
            <div>
              <h5>Heat Reduction</h5>
              <p>Keeps indoor temperatures up to 6°C cooler, reducing the cost of mechanical air-conditioning.</p>
            </div>
          </div>
          <div class="perf-item">
            <svg class="perf-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 14v6"/><path d="M8 14v6"/><path d="M12 16v6"/></svg>
            <div>
              <h5>Sound Absorption</h5>
              <p>Significantly quieter than metal sheets during heavy downpours, offering a peaceful indoor environment.</p>
            </div>
          </div>
          <div class="perf-item">
            <svg class="perf-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>
            <div>
              <h5>Extreme Impact Resistance</h5>
              <p>Flexible structure resists damage from falling branches, heavy winds, or hailstorms.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Tech Specs Table -->
      <div class="specs-table-col glass">
        <h4>Technical Specifications Table</h4>
        <div class="specs-data-list">
          <div class="spec-item-row">
            <span class="spec-lbl">Overall Thickness</span>
            <span class="spec-val">2.5 mm / 3.0 mm</span>
          </div>
          <div class="spec-item-row">
            <span class="spec-lbl">Effective Width</span>
            <span class="spec-val">3.1 ft (960 mm)</span>
          </div>
          <div class="spec-item-row">
            <span class="spec-lbl">Total Width</span>
            <span class="spec-val">3.4 ft (1040 mm)</span>
          </div>
          <div class="spec-item-row">
            <span class="spec-lbl">Pitch Requirements</span>
            <span class="spec-val">Min. 12 Degrees</span>
          </div>
          <div class="spec-item-row">
            <span class="spec-lbl">Support Purlin Distance</span>
            <span class="spec-val">Max. 660 mm</span>
          </div>
        </div>
        <div class="spec-bottom-note">
          <svg class="shield-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          <span>Conforms to ISO 9001:2015 Quality Standards. Passed Sri Lankan Industrial Tech Institute testing.</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Accessories -->
  <section class="accessories-section section-padding">
    <div class="container">
      <div class="section-title">
        <h2>Waterproof Roofing Accessories</h2>
        <p>Ensure a flawless watertight seal with color-matched accessories designed specifically for i-Roof sheets.</p>
      </div>
      
      <div class="grid-3">
        <!-- Accessory 1 -->
        <div class="card card-hover accessory-card">
          <div class="acc-image-wrapper">
            <img src="images/hero_roofing.png" alt="Top Ridge Tile" class="acc-image">
          </div>
          <div class="acc-content">
            <h4>i-Roof Top Ridge Tile</h4>
            <p>Apex sealer tile to prevent heavy water seepage along peak junctions.</p>
            <button class="btn btn-outline btn-sm-padding w-full" data-trigger="modal" data-product="general">Inquire Accessory</button>
          </div>
        </div>
        
        <!-- Accessory 2 -->
        <div class="card card-hover accessory-card">
          <div class="acc-image-wrapper">
            <img src="images/hero_roofing.png" alt="Barge Board" class="acc-image">
          </div>
          <div class="acc-content">
            <h4>Barge Board Flashing</h4>
            <p>Sides/gable finish board designed to deflect high winds and run-off rain.</p>
            <button class="btn btn-outline btn-sm-padding w-full" data-trigger="modal" data-product="general">Inquire Accessory</button>
          </div>
        </div>

        <!-- Accessory 3 -->
        <div class="card card-hover accessory-card">
          <div class="acc-image-wrapper">
            <img src="images/hero_roofing.png" alt="Roof Screws" class="acc-image">
          </div>
          <div class="acc-content">
            <h4>Anti-Corrosive Screw Sets</h4>
            <p>Self-tapping waterproof metal fasteners fitted with thick polymer washers.</p>
            <button class="btn btn-outline btn-sm-padding w-full" data-trigger="modal" data-product="general">Inquire Accessory</button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
@endsection