import React from "react";
import Link from "next/link";
import Image from "next/image";
import { ScrollReveal } from "@/animations/Reveal";
import { getAdjacentPosts, getRelatedPosts } from "@/data/blog";

export default function BlogPostFooter({ slug }: { slug: string }) {
  const { prev, next } = getAdjacentPosts(slug);
  const related = getRelatedPosts(slug, 3);

  return (
    <section className="dm-blog-footer" aria-label="More articles">
      <style dangerouslySetInnerHTML={{ __html: STYLES }} />

      <div className="dm-blog-footer-inner">
        {/* Previous / Next */}
        {(prev || next) && (
          <nav className="dm-prevnext" aria-label="Article navigation">
            {prev ? (
              <Link href={`/blog/${prev.slug}`} className="dm-prevnext-card dm-prevnext-prev">
                <span className="dm-prevnext-thumb">
                  <Image src={prev.image} alt={prev.title} fill sizes="80px" style={{ objectFit: "cover" }} />
                </span>
                <span className="dm-prevnext-text">
                  <span className="dm-prevnext-label">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                      <line x1="19" y1="12" x2="5" y2="12" /><polyline points="12 19 5 12 12 5" />
                    </svg>
                    Previous
                  </span>
                  <span className="dm-prevnext-cat">{prev.category}</span>
                  <span className="dm-prevnext-title">{prev.title}</span>
                </span>
              </Link>
            ) : (
              <span className="dm-prevnext-placeholder" />
            )}
            {next ? (
              <Link href={`/blog/${next.slug}`} className="dm-prevnext-card dm-prevnext-next">
                <span className="dm-prevnext-text">
                  <span className="dm-prevnext-label">
                    Next
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                      <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
                    </svg>
                  </span>
                  <span className="dm-prevnext-cat">{next.category}</span>
                  <span className="dm-prevnext-title">{next.title}</span>
                </span>
                <span className="dm-prevnext-thumb">
                  <Image src={next.image} alt={next.title} fill sizes="80px" style={{ objectFit: "cover" }} />
                </span>
              </Link>
            ) : (
              <span className="dm-prevnext-placeholder" />
            )}
          </nav>
        )}

        {/* Related Articles */}
        {related.length > 0 && (
          <div className="dm-related">
            <h2 className="dm-related-heading">Related Articles</h2>
            <div className="dm-related-grid">
              {related.map((post, i) => (
                <ScrollReveal key={post.slug} delay={i * 0.08} duration={0.7} yOffset={30}>
                  <Link href={`/blog/${post.slug}`} className="dm-related-card">
                    <div className="dm-related-img">
                      <Image
                        src={post.image}
                        alt={post.title}
                        fill
                        sizes="(max-width: 700px) 100vw, (max-width: 1024px) 50vw, 33vw"
                        style={{ objectFit: "cover" }}
                      />
                      <span className="dm-related-badge">{post.category}</span>
                    </div>
                    <div className="dm-related-body">
                      <h3 className="dm-related-card-title">{post.title}</h3>
                      <p className="dm-related-card-excerpt">{post.excerpt}</p>
                      <span className="dm-related-readmore">
                        Read More
                        <svg className="dm-related-readmore-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                          <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
                        </svg>
                      </span>
                    </div>
                  </Link>
                </ScrollReveal>
              ))}
            </div>
          </div>
        )}

        {/* Contact CTA banner */}
        <div className="dm-blog-contact-cta">
          <div className="dm-blog-contact-cta-content">
            <span className="dm-blog-contact-eyebrow">Let&apos;s talk logistics</span>
            <h2 className="dm-blog-contact-title">
              Ready to move smarter with Doormile?
            </h2>
            <p className="dm-blog-contact-sub">
              Tell us about your fleet and routes — we&apos;ll show you where the
              distance, vehicles and emissions are hiding.
            </p>
          </div>
          <Link href="/contact" className="dm-blog-contact-btn">
            Get in Touch
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
            </svg>
          </Link>
        </div>
      </div>
    </section>
  );
}

const STYLES = `
  .dm-blog-footer {
    font-family: var(--font-manrope), sans-serif; --dm-red: #c01227; --dm-red-hover: #e31d32;
    /* The global theme applies 72px top/bottom section padding — strip it so the
       inner container is the single source of vertical rhythm (no double gap). */
    padding: 0 !important;
  }
  /* Neutralize the global theme's 120/80/60px UPPERCASE heading rules */
  .dm-blog-footer :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-manrope), sans-serif !important;
    text-transform: none !important;
    font-style: normal !important;
    font-weight: 800;
  }
  /* Neutralize the theme's .elementor-kit-5 a (red color + underline) */
  .dm-blog-footer a { text-decoration: none !important; }
  /* Shared content container — mirrors SingleBlog's .dm-blog-wrap (same 1280px
     max-width + 20→40px horizontal padding) so Prev/Next, Related and the CTA
     align to the exact same left/right edges as the article body above.
     Vertical rhythm: ~64px from the article end to the Prev/Next divider, then a
     consistent ~64–72px section→section gap (no 120px+ voids). */
  .dm-blog-footer-inner {
    max-width: 1280px; margin: 0 auto;
    /* Compact vertical rhythm on an 8px system. Top padding sets the
       article→Prev/Next gap (~24–32px); the inter-section gap sets the
       Prev/Next→Related gap (~32–48px). No large arbitrary voids. */
    /* Minimal bottom padding — the global site footer already contributes its
       own 20px top inset, so the CTA banner sits close to it without a void. */
    padding: clamp(24px, 3vw, 32px) clamp(20px, 4vw, 40px) clamp(8px, 1.5vw, 16px);
    display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px);
  }
  @media (max-width: 767px) {
    .dm-blog-footer-inner {
      padding-left: 16px;
      padding-right: 16px;
    }
  }

  /* Prev / Next */
  .dm-prevnext {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    /* Halved from 40px: tight divider→cards spacing without crowding. */
    padding-top: clamp(16px, 2vw, 24px); border-top: 1px solid rgba(15,23,42,0.08);
  }
  @media (max-width: 640px) { .dm-prevnext { grid-template-columns: 1fr; } }
  .dm-prevnext-placeholder { display: block; }
  .dm-prevnext-card {
    display: flex; gap: 16px; align-items: center; padding: 16px;
    background: #fff; border: 1px solid rgba(15,23,42,0.09); border-radius: 22px;
    text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .dm-prevnext-card:hover {
    transform: translateY(-4px); border-color: rgba(192,18,39,0.2);
    box-shadow: 0 16px 34px rgba(192,18,39,0.10);
  }
  .dm-prevnext-thumb {
    position: relative; flex: 0 0 80px; width: 80px; height: 80px;
    border-radius: 16px; overflow: hidden; background: #f1f5f9;
  }
  .dm-prevnext-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .dm-prevnext-next { text-align: right; }
  .dm-prevnext-next .dm-prevnext-text { align-items: flex-end; }
  .dm-prevnext-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--dm-red);
  }
  .dm-prevnext-cat { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; }
  .dm-prevnext-title {
    font-size: 15.5px; font-weight: 700; color: #1e293b; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color .2s ease;
  }
  .dm-prevnext-card:hover .dm-prevnext-title { color: var(--dm-red); }

  /* Related */
  .dm-related-heading {
    font-size: clamp(22px, 2.2vw, 28px) !important; font-weight: 850 !important; letter-spacing: -.4px !important;
    line-height: 1.25 !important; color: #0f172a !important; margin: 0 0 24px;
  }
  .dm-related-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  }
  @media (max-width: 1024px) { .dm-related-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 700px) { .dm-related-grid { grid-template-columns: 1fr; gap: 24px; } }

  .dm-related-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid rgba(15,23,42,0.09); border-radius: 22px;
    overflow: hidden; box-shadow: 0 4px 24px rgba(15,23,42,0.05); text-decoration: none;
    transition: transform .4s cubic-bezier(0.2,0.8,0.2,1), box-shadow .4s ease, border-color .4s ease;
  }
  .dm-related-card:hover {
    transform: translateY(-8px); box-shadow: 0 22px 44px rgba(192,18,39,0.13);
    border-color: rgba(192,18,39,0.2);
  }
  .dm-related-img {
    position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #f1f5f9;
  }
  .dm-related-img img { transition: transform .5s cubic-bezier(0.2,0.8,0.2,1); }
  .dm-related-card:hover .dm-related-img img { transform: scale(1.05); }
  .dm-related-badge {
    position: absolute; top: 14px; left: 14px; z-index: 5; background: var(--dm-red); color: #fff;
    font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px;
    padding: 5px 11px; border-radius: 8px; box-shadow: 0 4px 12px rgba(192,18,39,0.25);
  }
  .dm-related-body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
  .dm-related-card-title {
    font-size: 17px !important; font-weight: 800 !important; color: #1e293b !important; line-height: 1.4 !important;
    letter-spacing: -.2px !important; margin: 0 0 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color .2s ease;
  }
  .dm-related-card:hover .dm-related-card-title { color: var(--dm-red); }
  .dm-related-card-excerpt {
    font-size: 13.5px; font-weight: 500; color: #64748b; line-height: 1.6; margin: 0 0 18px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .dm-related-readmore {
    margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 800; color: var(--dm-red);
    text-transform: uppercase; letter-spacing: .6px;
  }
  .dm-related-readmore-arrow { transition: transform .3s cubic-bezier(0.2,0.8,0.2,1); }
  .dm-related-card:hover .dm-related-readmore-arrow { transform: translateX(5px); }

  /* Contact CTA banner */
  .dm-blog-contact-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d1417 100%);
    border-radius: 30px; padding: clamp(32px, 4vw, 56px);
    position: relative; overflow: hidden;
  }
  .dm-blog-contact-cta::after {
    content: ""; position: absolute; right: -80px; top: -80px; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(192,18,39,0.40), transparent 70%);
    pointer-events: none;
  }
  .dm-blog-contact-cta-content { position: relative; z-index: 1; max-width: 640px; }
  .dm-blog-contact-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1.4px; color: #ff8088; margin-bottom: 14px;
  }
  .dm-blog-contact-title {
    font-size: clamp(22px, 2.2vw, 28px) !important; font-weight: 800 !important; line-height: 1.25 !important;
    letter-spacing: -.3px !important; color: #ffffff !important; margin: 0 0 12px; text-wrap: balance;
  }
  .dm-blog-contact-sub {
    font-size: 15.5px; line-height: 1.65; color: #e2e2e2; margin: 0; font-weight: 450;
  }
  .dm-blog-contact-btn {
    position: relative; z-index: 1; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--dm-red); color: #fff !important; font-size: 15px; font-weight: 700;
    padding: 16px 32px; border-radius: 16px; text-decoration: none;
    box-shadow: 0 10px 26px rgba(192,18,39,0.34);
    transition: background .2s ease, transform .2s ease;
  }
  .dm-blog-contact-btn:hover { background: var(--dm-red-hover); transform: translateY(-2px); }
  @media (max-width: 720px) {
    .dm-blog-contact-cta { flex-direction: column; align-items: flex-start; gap: 26px; }
    .dm-blog-contact-btn { width: 100%; }
  }
`;