import React from "react";
import Link from "next/link";

const styles: Record<string, React.CSSProperties> = {
  sectionTitle: {
    marginBottom: "20px",
    color: "#111",
  },

  row: {
    display: "flex",
    flexWrap: "wrap",
    gap: "20px",
  },

  col: {
    flex: "1 1 48%",
    minWidth: "280px",
  },

  card: {
    background: "#fff",
    borderRadius: "16px",
    padding: "25px",
    boxShadow: "0 10px 30px rgba(0,0,0,0.06)",
    transition: "0.3s ease",
    height: "100%",
  },

  cardTitle: {
    marginBottom: "15px",
    color: "#111",
    position: "relative",
    paddingBottom: "10px",
  },

  list: {
    listStyle: "none",
    padding: 0,
    margin: 0,
  },

  listItem: {
    position: "relative",
    paddingLeft: "20px",
    marginBottom: "10px",
    color: "#555",
    lineHeight: 1.6,
  },
};

const AiAgentsServiceDetailsContent = () => {
  return (

    <div className="services-details-area ptb-100">
      <div className="container">
        <div className="row">
          <div className="col-lg-8 col-md-12">
             <img
              alt="image"
              loading="lazy"
              width={750}
              height={450}
              decoding="async"
              className="w-100 mb-5"
              style={{ color: "transparent" }}
              src="/img/services/ai-solutions/ai-chatbot/AI-agents.webp"
            />
            <div className="services-details-desc">
              <h2>AI Agents</h2>
              <p>AI Agents are the next evolution beyond chatbots. Unlike simple bots that respond to prompts, our AI agents can reason, plan, and autonomously execute complex multi-step tasks — browsing the web, querying databases, calling APIs, writing code, and making decisions without constant human input.</p>
              <p>Digi Horizon Technologies builds custom AI agents that integrate into your business systems and work as a tireless digital employee — completing high-value tasks end to end, faster and more accurately than manual processes.</p>
              <h3>What AI Agents Can Handle</h3>
              <div className="row">
                <div className="col-lg-6 col-md-6 col-sm-6">
                  <div className="single-industries-serve-box" style={{ height: 'auto' }}>
                    <div className="icon"><i className="flaticon-analysis"></i></div>
                    <h3>Research & Data Gathering</h3>
                    <p>Autonomously search the web, scrape sources, and compile structured research reports on any topic.</p>
                  </div>
                </div>
                <div className="col-lg-6 col-md-6 col-sm-6">
                  <div className="single-industries-serve-box" style={{ height: 'auto' }}>
                    <div className="icon"><i className="flaticon-structure"></i></div>
                    <h3>Data Analysis & Reporting</h3>
                    <p>Pull data from multiple sources, run analysis, and generate actionable reports automatically on a schedule.</p>
                  </div>
                </div>
                <div className="col-lg-6 col-md-6 col-sm-6">
                  <div className="single-industries-serve-box" style={{ height: 'auto' }}>
                    <div className="icon"><i className="flaticon-rocket"></i></div>
                    <h3>Multi-Step Workflow Execution</h3>
                    <p>Execute complex workflows across tools like CRMs, ERPs, and databases with logic, conditions, and error handling.</p>
                  </div>
                </div>
                <div className="col-lg-6 col-md-6 col-sm-6">
                  <div className="single-industries-serve-box" style={{ height: 'auto' }}>
                    <div className="icon"><i className="flaticon-book"></i></div>
                    <h3>Code Generation & Testing</h3>
                    <p>Generate, review, and test code automatically — accelerating development cycles and reducing engineering overhead.</p>
                  </div>
                </div>
                <div className="col-lg-6 col-md-6 col-sm-6">
                  <div className="single-industries-serve-box" style={{ height: 'auto' }}>
                    <div className="icon"><i className="flaticon-team"></i></div>
                    <h3>Email & Communication Handling</h3>
                    <p>Draft, send, and manage emails, follow-ups, and notifications autonomously based on triggers and business rules.</p>
                  </div>
                </div>
                <div className="col-lg-6 col-md-6 col-sm-6">
                  <div className="single-industries-serve-box" style={{ height: 'auto' }}>
                    <div className="icon"><i className="flaticon-settings"></i></div>
                    <h3>API & System Orchestration</h3>
                    <p>Interact with third-party APIs, internal tools, and cloud services to complete end-to-end tasks across your stack.</p>
                  </div>
                </div>
              </div>
              <h3 style={styles.sectionTitle}>Technologies & Frameworks</h3>

              <div style={styles.row}>

                {/* AI Frameworks */}
                <div style={styles.col}>
                  <div style={styles.card}>

                    <h3 style={styles.cardTitle}>AI & Agent Frameworks</h3>

                    <ul style={styles.list}>
                      <li style={styles.listItem}>LangChain & LangGraph</li>
                      <li style={styles.listItem}>AutoGen (Microsoft)</li>
                      <li style={styles.listItem}>CrewAI</li>
                      <li style={styles.listItem}>OpenAI Assistants API</li>
                      <li style={styles.listItem}>Custom Agent Architectures</li>
                    </ul>

                  </div>
                </div>

                {/* Infrastructure */}
                <div style={styles.col}>
                  <div style={styles.card}>

                    <h3 style={styles.cardTitle}>Infrastructure</h3>

                    <ul style={styles.list}>
                      <li style={styles.listItem}>Python & FastAPI</li>
                      <li style={styles.listItem}>Vector Databases (Pinecone, Weaviate)</li>
                      <li style={styles.listItem}>AWS / GCP / Azure</li>
                      <li style={styles.listItem}>Docker & Kubernetes</li>
                      <li style={styles.listItem}>REST & GraphQL APIs</li>
                    </ul>

                  </div>
                </div>

              </div>
            </div>
          </div>
          <div className="col-lg-4 col-md-12">
            <div className="services-details-info">
              <ul className="services-list">
                <li><Link href="/service/ai-solutions-service/ai-chatbots/">AI Chatbots</Link></li>
                <li><Link className="active" href="/service/ai-solutions-service/ai-agents/">AI Agents</Link></li>
                <li><Link href="/service/ai-solutions-service/business-process-automation/">Business Process Automation</Link></li>
                <li><Link href="/service/ai-solutions-service/ai-powered-customer-support/">AI-Powered Customer Support</Link></li>
                <li><Link href="/service/ai-solutions-service/ai-content-generation/">AI Content Generation</Link></li>
              </ul>
              <div className="services-contact-info">
                <h3>Talk to Our AI Experts</h3>
                <ul>
                  <li>
                    <div className="icon"><i className="bx bx-user-pin"></i></div>
                    <span>Phone:</span>
                    <a href="tel:+918000361445">+91 80003 61445</a>
                  </li>
                  <li>
                    <div className="icon"><i className="bx bxs-envelope"></i></div>
                    <span>Email:</span>
                    <a href="mailto:ashvin@digihorizon.in">ashvin@digihorizon.in</a>
                  </li>
                </ul>
              </div>
              <div className="btn-box" style={{ marginTop: '20px' }}>
                <Link href="/request-a-quote/" className="default-btn">Request a Quote <span></span></Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AiAgentsServiceDetailsContent;