"use client"
import React from 'react';
import Link from 'next/link';

// group { 1. Banner Settings }
const backgroundImage = $(backgroundImage:Image="https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=1600&q=80");
const overlayColor = $(overlayColor:Color="#0A1929");
const overlayOpacity = $(overlayOpacity:Number=0.65);
const fontFamily = $(fontFamily:Dropdown[Proxima Nova|proxima-nova,Roboto|Roboto,Bakersfield|Bakersfield]="proxima-nova";required=true);
const textColor = $(textColor:Color="#FFFFFF");
const accentColor = $(accentColor:Color="#E8C547");
const bannerEyebrow = $(bannerEyebrow:RichText="EXCLUSIVE OFFER");
const bannerHeadline = $(bannerHeadline:RichText="Everything You Need, All In One Place");
// endgroup

// group { 2. Column 1 }
const col1Title = $(col1Title:RichText="Fast Delivery");
const col1Body = $(col1Body:RichText="Free 2-day shipping on every order over $50, delivered straight to your door.");
// endgroup

// group { 3. Column 2 }
const col2Title = $(col2Title:RichText="Premium Quality");
const col2Body = $(col2Body:RichText="Hand-picked products from trusted brands, backed by our satisfaction guarantee.");
// endgroup

// group { 4. Column 3 }
const col3Title = $(col3Title:RichText="24/7 Support");
const col3Body = $(col3Body:RichText="Our team is always available to help — chat, call, or email anytime, anywhere.");
// endgroup

// group { 5. Call to Action }
const ctaText = $(ctaText:RichText="Shop Now");
const ctaUrl = $(ctaUrl:String="/shop";required=true);
const ctaBackgroundColor = $(ctaBackgroundColor:Color="#E8C547");
const ctaTextColor = $(ctaTextColor:Color="#0A1929");
// endgroup

const DemoClaude: React.FC<{ id?: string }> = ({ id = 'demo-claude' }) => {
  const columns = [
    { title: col1Title, body: col1Body, varPrefix: 'col1' },
    { title: col2Title, body: col2Body, varPrefix: 'col2' },
    { title: col3Title, body: col3Body, varPrefix: 'col3' },
  ];

  return (
    <>
      <style>{`
        .${id}-banner {
          position: relative;
          width: 100%;
          padding: 80px 24px;
          background-image: url('${backgroundImage}');
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          font-family: ${fontFamily}, sans-serif;
          color: ${textColor};
          box-sizing: border-box;
          overflow: hidden;
        }
        .${id}-banner-overlay {
          position: absolute;
          inset: 0;
          background-color: ${overlayColor};
          opacity: ${overlayOpacity};
          pointer-events: none;
        }
        .${id}-banner-inner {
          position: relative;
          max-width: 1200px;
          margin: 0 auto;
          text-align: center;
        }
        .${id}-banner-eyebrow {
          font-size: clamp(12px, 1.2vw, 14px);
          font-weight: 700;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: ${accentColor};
          margin: 0 0 16px;
        }
        .${id}-banner-headline {
          font-size: clamp(28px, 4vw, 48px);
          font-weight: 700;
          line-height: 1.1;
          letter-spacing: -0.02em;
          margin: 0 0 48px;
          max-width: 800px;
          margin-left: auto;
          margin-right: auto;
        }
        .${id}-banner-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 32px;
          margin-bottom: 48px;
        }
        @media (min-width: 768px) {
          .${id}-banner-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
          }
        }
        .${id}-banner-col {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0 16px;
        }
        .${id}-banner-col-title {
          font-size: clamp(18px, 1.8vw, 22px);
          font-weight: 700;
          letter-spacing: -0.01em;
          margin: 0 0 12px;
        }
        .${id}-banner-col-body {
          font-size: clamp(14px, 1.2vw, 16px);
          line-height: 1.6;
          margin: 0;
          opacity: 0.85;
          max-width: 320px;
        }
        .${id}-banner-cta {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          font-size: clamp(15px, 1.3vw, 17px);
          font-weight: 700;
          letter-spacing: 0.02em;
          padding: 16px 36px;
          border-radius: 8px;
          text-decoration: none;
          background-color: ${ctaBackgroundColor};
          color: ${ctaTextColor};
          border: none;
          cursor: pointer;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .${id}-banner-cta:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(0,0,0,0.25);
        }
        .${id}-banner-cta-arrow {
          transition: transform 0.2s ease;
        }
        .${id}-banner-cta:hover .${id}-banner-cta-arrow {
          transform: translateX(4px);
        }
      `}</style>

      <section className={`${id}-banner`}>
        <div className={`${id}-banner-overlay`} />
        <div className={`${id}-banner-inner`}>
          {bannerEyebrow && (
            <p
              className={`${id}-banner-eyebrow`}
              data-bildit-var-name="bannerEyebrow"
              data-bildit-var-type="RichText"
            >
              {bannerEyebrow}
            </p>
          )}
          {bannerHeadline && (
            <h2
              className={`${id}-banner-headline`}
              data-bildit-var-name="bannerHeadline"
              data-bildit-var-type="RichText"
            >
              {bannerHeadline}
            </h2>
          )}

          <div className={`${id}-banner-grid`}>
            {columns.map((col, i) => (
              <div key={i} className={`${id}-banner-col`}>
                <h3
                  className={`${id}-banner-col-title`}
                  data-bildit-var-name={`${col.varPrefix}Title`}
                  data-bildit-var-type="RichText"
                >
                  {col.title}
                </h3>
                <p
                  className={`${id}-banner-col-body`}
                  data-bildit-var-name={`${col.varPrefix}Body`}
                  data-bildit-var-type="RichText"
                >
                  {col.body}
                </p>
              </div>
            ))}
          </div>

          <Link href={ctaUrl} className={`${id}-banner-cta`}>
            <span
              data-bildit-var-name="ctaText"
              data-bildit-var-type="RichText"
            >
              {ctaText}
            </span>
            <svg
              className={`${id}-banner-cta-arrow`}
              width="18"
              height="18"
              viewBox="0 0 16 16"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M3 8h10M9 4l4 4-4 4" />
            </svg>
          </Link>
        </div>
      </section>
    </>
  );
};

export default DemoClaude;
