<t t-name="website.ai-services">
  <t t-call="website.layout">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
    <![CDATA[
    <style>
      body {font-family: 'Poppins', sans-serif; color: #333; background: #f9fafc; line-height: 1.6;}
      header.hero {background: url('https://source.unsplash.com/1600x600/?ai,technology') center/cover no-repeat; color: #fff; padding: 5rem 2rem; text-align: center; position: relative;}
      header.hero::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4);}
      header.hero h1, header.hero p {position: relative; z-index: 2;}
      section {padding: 3rem 2rem; max-width: 1200px; margin: auto;}
      h2 {text-align: center; margin-bottom: 1rem; color: #111827;}
      .services, .industries, .benefits {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;}
      .card {background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 5px 20px rgba(0,0,0,0.05); transition: transform 0.3s ease;}
      .card:hover {transform: translateY(-5px);}
      .icon {font-size: 2rem; color: #4f46e5; margin-bottom: 1rem;}
    </style>
    ]]>

    <header class="hero">
      <h1><i class="fa-solid fa-microchip"></i> AI Solutions for Your Business</h1>
      <p>We provide cutting-edge AI services to automate, optimize, and innovate your business processes.</p>
    </header>

    <section>
      <h2>Our AI Services</h2>
      <div class="services">
        <div class="card"><div class="icon"><i class="fa-solid fa-robot"></i></div><h3>AI Chatbots</h3><p>Custom chatbots powered by GPT for support, sales, and engagement.</p></div>
        <div class="card"><div class="icon"><i class="fa-solid fa-chart-line"></i></div><h3>Predictive Analytics</h3><p>Forecast trends, demand, and risks with AI-driven insights.</p></div>
        <div class="card"><div class="icon"><i class="fa-solid fa-language"></i></div><h3>Natural Language Processing</h3><p>Extract meaning, sentiment, and automate language-based tasks.</p></div>
      </div>
    </section>

    <section>
      <h2>Industries We Serve</h2>
      <div class="industries">
        <div class="card"><div class="icon"><i class="fa-solid fa-heart-pulse"></i></div><h3>Healthcare</h3><p>AI diagnostics, patient support chatbots, and health monitoring.</p></div>
        <div class="card"><div class="icon"><i class="fa-solid fa-store"></i></div><h3>Retail</h3><p>Personalized recommendations, inventory prediction, and customer insights.</p></div>
        <div class="card"><div class="icon"><i class="fa-solid fa-graduation-cap"></i></div><h3>Education</h3><p>Automated grading, virtual tutors, and personalized learning paths.</p></div>
      </div>
    </section>

    <section>
      <h2>Why Choose Our AI Solutions?</h2>
      <div class="benefits">
        <div class="card"><div class="icon"><i class="fa-solid fa-bolt"></i></div><h3>Faster Decision Making</h3><p>Empower your team with real-time AI insights.</p></div>
        <div class="card"><div class="icon"><i class="fa-solid fa-scale-balanced"></i></div><h3>Scalable  Flexible</h3><p>Our AI solutions grow with your business needs.</p></div>
        <div class="card"><div class="icon"><i class="fa-solid fa-hand-holding-dollar"></i></div><h3>Cost-Effective</h3><p>Automate repetitive tasks and reduce operational costs.</p></div>
      </div>
    </section>

    <footer>
      <p>© 2025 AI Solutions – Innovating Your Business with Artificial Intelligence</p>
    </footer>
  </t>
</t>