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 AiChatbotsServiceDetailsContent = () => {
  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-chtbo.png"
            />
            <div className="services-details-desc">
              <h2>AI Chatbot Development</h2>
              <p>Digi Horizon Technologies builds intelligent AI chatbots trained on your business data to deliver instant, accurate, and personalised responses across web, mobile, and messaging platforms — 24 hours a day, 7 days a week.</p>
              <p>Our chatbots go beyond simple FAQ bots. Powered by large language models and custom fine-tuning, they understand context, handle complex queries, qualify leads, book appointments, and escalate to human agents when needed.</p>
              <h3>What Our AI Chatbots Can Do</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-user"></i></div>
                    <h3>24/7 Customer Support</h3>
                    <p>Resolve common queries instantly without human intervention, reducing support costs significantly.</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>Lead Qualification</h3>
                    <p>Capture visitor intent, collect contact details, and qualify leads automatically before handing off to sales.</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-calendar"></i></div>
                    <h3>Appointment Booking</h3>
                    <p>Let customers book, reschedule, or cancel appointments through a natural conversation interface.</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-shopping-cart"></i></div>
                    <h3>eCommerce Assistance</h3>
                    <p>Guide shoppers through product discovery, order tracking, returns, and personalised recommendations.</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="bxl-go-lang"></i></div>
                    <h3>Multi-Language Support</h3>
                    <p>Serve customers in their preferred language with built-in multilingual NLP capabilities.</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>CRM & Tool Integration</h3>
                    <p>Connect your chatbot with HubSpot, Salesforce, Zendesk, WhatsApp, and more for end-to-end automation.</p>
                  </div>
                </div>
              </div>
              <h3 style={styles.sectionTitle}>Technologies We Use</h3>

              <div style={styles.row}>

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

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

                    <ul style={styles.list}>
                      <li style={styles.listItem}>OpenAI GPT-4 / GPT-4o</li>
                      <li style={styles.listItem}>LangChain & LlamaIndex</li>
                      <li style={styles.listItem}>Hugging Face Transformers</li>
                      <li style={styles.listItem}>Dialogflow & Rasa</li>
                      <li style={styles.listItem}>Custom Fine-tuned LLMs</li>
                    </ul>

                  </div>
                </div>

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

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

                    <ul style={styles.list}>
                      <li style={styles.listItem}>Website & Web Apps</li>
                      <li style={styles.listItem}>WhatsApp Business API</li>
                      <li style={styles.listItem}>Facebook Messenger</li>
                      <li style={styles.listItem}>Slack & Microsoft Teams</li>
                      <li style={styles.listItem}>iOS & Android Mobile Apps</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  className="active" 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 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 AiChatbotsServiceDetailsContent;