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

const styles: Record<string, React.CSSProperties> = {
  sectionTitle: {
    fontSize: "26px",
    fontWeight: 700,
    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: {
    fontSize: "18px",
    fontWeight: 600,
    marginBottom: "15px",
    color: "#111",
    position: "relative",
    paddingBottom: "10px",
  },

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

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

const AiContentGenerationServiceDetailsContent = () => {
  return (
    <section 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/Gen-AI-Content-Development.webp"
            />
            
            <div className="services-details-desc">
              <h2>AI Content Generation</h2>
              <p>Creating high-quality content at scale is one of the biggest challenges for modern businesses. Digi Horizon Technologies builds custom AI content generation systems powered by large language models — enabling you to produce on-brand, accurate, and engaging content across every channel, at a fraction of the time and cost.</p>
              <p>Unlike generic AI writing tools, our solutions are fine-tuned on your brand voice, product data, and content guidelines — ensuring every piece of output sounds like you, not a robot.</p>
              <h3>Content Types We Generate</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-structure"></i></div>
                    <h3>Product Descriptions</h3>
                    <p>Generate thousands of unique, SEO-optimised product descriptions from your catalogue data in minutes.</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-notebook"></i></div>
                    <h3>Blog & Article Writing</h3>
                    <p>Produce long-form, well-researched blog posts and articles tailored to your niche and target audience.</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-share"></i></div>
                    <h3>Social Media Content</h3>
                    <p>Auto-generate platform-specific social posts, captions, hashtags, and content calendars at scale.</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-family-insurance"></i></div>
                    <h3>Email Campaigns</h3>
                    <p>Create personalised email sequences, newsletters, and promotional campaigns tailored to each segment.</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-tracking"></i></div>
                    <h3>SEO Content & Meta Tags</h3>
                    <p>Auto-generate meta titles, descriptions, and keyword-optimised landing page content at scale.</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-analysis"></i></div>
                    <h3>Reports & Summaries</h3>
                    <p>Automatically summarise data, meeting notes, research documents, and reports into clear, concise outputs.</p>
                  </div>
                </div>
              </div>
              <h3 style={styles.sectionTitle}>Technologies We Use</h3>

                <div style={styles.row}>

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

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

                      <ul style={styles.list}>
                        <li style={styles.listItem}>OpenAI GPT-4 / GPT-4o</li>
                        <li style={styles.listItem}>Anthropic Claude</li>
                        <li style={styles.listItem}>Google Gemini</li>
                        <li style={styles.listItem}>Custom Fine-tuned LLMs</li>
                        <li style={styles.listItem}>LangChain Pipelines</li>
                      </ul>

                    </div>
                  </div>

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

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

                      <ul style={styles.list}>
                        <li style={styles.listItem}>WordPress & CMS Platforms</li>
                        <li style={styles.listItem}>Shopify & eCommerce Platforms</li>
                        <li style={styles.listItem}>HubSpot & Mailchimp</li>
                        <li style={styles.listItem}>Google Docs & Notion</li>
                        <li style={styles.listItem}>Custom APIs & Dashboards</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 href="/service/ai-solutions-service/ai-powered-customer-support/">AI-Powered Customer Support</Link></li>
                <li><Link className="active" 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>
    </section>
  );
};

export default AiContentGenerationServiceDetailsContent;