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

const styles: Record<string, React.CSSProperties> = {
  sectionTitle: {
    marginBottom: "50px",
    marginTop: "50px",
    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 AiSolutionsServiceTopContent = () => {
  return (
    <div className="services-content-section subscribe-area pt-70 pb-70">
      <div className="container">
        <div className="row">
          <div className="col-12">
            <div className="page-content_box service-inner-content">
              <div className="section-heading">
                <h2>Intelligent AI Solutions for Modern Businesses</h2>
                <p>
                  Digi Horizon Technologies empowers businesses with cutting-edge
                  Artificial Intelligence solutions — from AI chatbots and autonomous
                  agents to business process automation and AI-powered customer support.
                  We turn your data into decisions and ideas into intelligent,
                  production-ready products.
                </p>
                <p>
                  With a dedicated team of AI/ML engineers and 10+ years of software
                  development expertise, we build custom AI solutions that integrate
                  seamlessly into your existing workflows, helping you reduce costs,
                  automate operations, and stay ahead of the competition.
                </p>
                <h3 style={styles.sectionTitle}>
                  Why Choose Digi Horizon for AI Development?
                </h3>

                <div style={styles.row}>
                  <div style={styles.col}>
                    <div style={styles.card}>
                      <div style={styles.header}>
                        <h4 style={styles.heading}>Our Strengths</h4>
                      </div>

                      <ul style={styles.list}>
                        <li style={styles.listItem}>End-to-end AI development from ideation to deployment</li>
                        <li style={styles.listItem}>Custom solutions trained on your business data</li>
                        <li style={styles.listItem}>Seamless integration with existing systems</li>
                        <li style={styles.listItem}>Scalable, cost-efficient, production-ready builds</li>
                        <li style={styles.listItem}>Transparent milestone-based delivery</li>
                        <li style={styles.listItem}>Post-deployment monitoring and support</li>
                      </ul>
                    </div>
                  </div>

                  <div style={styles.col}>
                    <div style={styles.card}>
                      <div style={styles.header}>
                        <h4 style={styles.heading}>Technologies We Use</h4>
                      </div>

                      <ul style={styles.list}>
                        <li style={styles.listItem}>Python, TensorFlow, PyTorch</li>
                        <li style={styles.listItem}>OpenAI API, LangChain, Hugging Face</li>
                        <li style={styles.listItem}>AWS SageMaker, Google Vertex AI</li>
                        <li style={styles.listItem}>CrewAI, AutoGen, LangGraph</li>
                        <li style={styles.listItem}>Docker, Kubernetes, FastAPI</li>
                        <li style={styles.listItem}>Vector Databases (Pinecone, Weaviate)</li>
                      </ul>
                    </div>
                  </div>
                </div>
                <h3  style={styles.sectionTitle}>Our AI Services</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-loupe"></i></div>
                      <h3>AI Chatbots</h3>
                      <p>Intelligent conversational bots trained on your data for 24/7 customer support and lead generation.</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-idea"></i></div>
                      <h3>AI Agents</h3>
                      <p>Autonomous agents that reason, plan, and execute complex multi-step tasks without human input.</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>Business Process Automation</h3>
                      <p>End-to-end workflow automation using intelligent RPA and AI-driven process orchestration.</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-user"></i></div>
                      <h3>AI-Powered Customer Support</h3>
                      <p>AI support systems that resolve tickets instantly and learn from every customer interaction.</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-laptop"></i></div>
                      <h3>AI Content Generation</h3>
                      <p>Generate on-brand content at scale — blogs, product descriptions, emails, and social posts.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="vector-shape6">
          <Image
            src="/img/shape/vector-shape6.png"
            alt="image"
            width={533}
            height={413}
          />
      </div>
    </div>
  );
};

export default AiSolutionsServiceTopContent;