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 AiCustomerSupportServiceDetailsContent = () => {
  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-powered-c-support.webp"
            />
            <div className="services-details-desc">
              <h2>AI-Powered Customer Support</h2>
              <p>Customer expectations have never been higher. Digi Horizon Technologies helps you meet them with AI-powered support systems that resolve tickets instantly, suggest smart solutions, escalate intelligently to human agents, and continuously learn from every interaction.</p>
              <p>Whether you handle hundreds or hundreds of thousands of support queries, our AI support solutions reduce response times, cut operational costs, and dramatically improve customer satisfaction scores — without growing your support headcount.</p>
              <h3>Key Capabilities</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-segmentation"></i></div>
                    <h3>Instant Ticket Resolution</h3>
                    <p>AI auto-resolves common support tickets with accurate answers drawn from your knowledge base in seconds.</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>Smart Ticket Routing</h3>
                    <p>Automatically classify, prioritise, and route tickets to the right team or agent based on intent and urgency.</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>Agent Assist</h3>
                    <p>Real-time AI suggestions help human agents respond faster and more accurately during live conversations.</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-analytics"></i></div>
                    <h3>Sentiment Analysis</h3>
                    <p>Detect frustrated or at-risk customers in real time and flag them for immediate priority 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-agendas"></i></div>
                    <h3>Knowledge Base Integration</h3>
                    <p>Connect your help docs, FAQs, and SOPs so AI can find and deliver the right answer every time.</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-analytics"></i></div>
                    <h3>Performance Analytics</h3>
                    <p>Track resolution rates, CSAT scores, and AI accuracy with detailed dashboards and reporting.</p>
                  </div>
                </div>
              </div>
              <h3 style={styles.sectionTitle}>Platforms & Integrations</h3>

              <div style={styles.row}>

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

                    <h3 style={styles.cardTitle}>Help Desk Integrations</h3>

                    <ul style={styles.list}>
                      <li style={styles.listItem}>Zendesk</li>
                      <li style={styles.listItem}>Freshdesk</li>
                      <li style={styles.listItem}>Intercom</li>
                      <li style={styles.listItem}>HubSpot Service Hub</li>
                      <li style={styles.listItem}>Custom Help Desk Systems</li>
                    </ul>

                  </div>
                </div>

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

                    <h3 style={styles.cardTitle}>Support Channels</h3>

                    <ul style={styles.list}>
                      <li style={styles.listItem}>Website Live Chat</li>
                      <li style={styles.listItem}>WhatsApp Business API</li>
                      <li style={styles.listItem}>Email Support</li>
                      <li style={styles.listItem}>Facebook & Instagram DMs</li>
                      <li style={styles.listItem}>Mobile App In-Chat</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 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  className="active" 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 AiCustomerSupportServiceDetailsContent;