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

// group { 1. Section Settings }
const sectionBackgroundColor = $(sectionBackgroundColor:Color="#F5F5F5");
const fontFamily = $(fontFamily:Dropdown[Proxima Nova|proxima-nova,Roboto|Roboto,Bakersfield|Bakersfield]="proxima-nova";required=true);
const textColor = $(textColor:Color="#1A1A1A");
const sectionTitle = $(sectionTitle:RichText="Shop Our Top Picks");
// endgroup

// group { 2. Column 1 }
const col1Eyebrow = $(col1Eyebrow:RichText="NEW ARRIVAL");
const col1Headline = $(col1Headline:RichText="Spring Collection");
const col1Body = $(col1Body:RichText="Fresh styles for the season. Lightweight fabrics and vibrant prints to refresh your wardrobe.");
const col1CtaText = $(col1CtaText:RichText="Shop Spring");
const col1CtaUrl = $(col1CtaUrl:String="/spring";required=true);
const col1BackgroundColor = $(col1BackgroundColor:Color="#FFFFFF");
const col1AccentColor = $(col1AccentColor:Color="#D4A574");
// endgroup

// group { 3. Column 2 }
const col2Eyebrow = $(col2Eyebrow:RichText="LIMITED TIME");
const col2Headline = $(col2Headline:RichText="Up to 40% Off");
const col2Body = $(col2Body:RichText="Don't miss our biggest sale of the season. Top brands at unbeatable prices while supplies last.");
const col2CtaText = $(col2CtaText:RichText="Shop Sale");
const col2CtaUrl = $(col2CtaUrl:String="/sale";required=true);
const col2BackgroundColor = $(col2BackgroundColor:Color="#1A1A1A");
const col2AccentColor = $(col2AccentColor:Color="#E8C547");
// endgroup

// group { 4. Column 3 }
const col3Eyebrow = $(col3Eyebrow:RichText="TRENDING NOW");
const col3Headline = $(col3Headline:RichText="Designer Picks");
const col3Body = $(col3Body:RichText="Curated selections from your favorite designers. Elevate your everyday look with premium pieces.");
const col3CtaText = $(col3CtaText:RichText="Shop Designers");
const col3CtaUrl = $(col3CtaUrl:String="/designers";required=true);
const col3BackgroundColor = $(col3BackgroundColor:Color="#FFFFFF");
const col3AccentColor = $(col3AccentColor:Color="#7BA5B5");
// endgroup

const Demo: React.FC<{ id?: string }> = ({ id = 'demo' }) => {
  const columns = [
    { eyebrow: col1Eyebrow, headline: col1Headline, body: col1Body, ctaText: col1CtaText, ctaUrl: col1CtaUrl, bg: col1BackgroundColor, accent: col1AccentColor, varPrefix: 'col1' },
    { eyebrow: col2Eyebrow, headline: col2Headline, body: col2Body, ctaText: col2CtaText, ctaUrl: col2CtaUrl, bg: col2BackgroundColor, accent: col2AccentColor, varPrefix: 'col2' },
    { eyebrow: col3Eyebrow, headline: col3Headline, body: col3Body, ctaText: col3CtaText, ctaUrl: col3CtaUrl, bg: col3BackgroundColor, accent: col3AccentColor, varPrefix: 'col3' },
  ];

  const isDark = (color: string) => {
    const hex = color.replace('#', '');
    const r = parseInt(hex.substring(0, 2), 16);
    const g = parseInt(hex.substring(2, 4), 16);
    const b = parseInt(hex.substring(4, 6), 16);
    return (r * 299 + g * 587 + b * 114) / 1000 < 128;
  };

  return (
    <>
      <style>{`
        .${id}-promo-section {
          background-color: ${sectionBackgroundColor};
          font-family: ${fontFamily}, sans-serif;
          color: ${textColor};
          padding: 48px 24px;
          width: 100%;
          box-sizing: border-box;
        }
        .${id}-promo-title {
          text-align: center;
          font-size: clamp(24px, 3vw, 36px);
          font-weight: 700;
          margin: 0 0 40px;
          letter-spacing: -0.02em;
        }
        .${id}-promo-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        @media (min-width: 768px) {
          .${id}-promo-grid {
            grid-template-columns: repeat(3, 1fr);
          }
        }
        .${id}-promo-card {
          display: flex;
          flex-direction: column;
          border-radius: 12px;
          overflow: hidden;
          text-decoration: none;
          color: inherit;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .${id}-promo-card:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        }
        .${id}-promo-accent {
          height: 4px;
          width: 100%;
        }
        .${id}-promo-content {
          padding: 32px 28px;
          display: flex;
          flex-direction: column;
          flex: 1;
        }
        .${id}-promo-eyebrow {
          font-size: clamp(11px, 1.2vw, 13px);
          font-weight: 700;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          margin: 0 0 12px;
        }
        .${id}-promo-headline {
          font-size: clamp(22px, 2.4vw, 30px);
          font-weight: 700;
          line-height: 1.15;
          letter-spacing: -0.02em;
          margin: 0 0 16px;
        }
        .${id}-promo-body {
          font-size: clamp(14px, 1.2vw, 16px);
          line-height: 1.6;
          margin: 0 0 24px;
          opacity: 0.8;
          flex: 1;
        }
        .${id}-promo-cta {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: clamp(14px, 1.2vw, 16px);
          font-weight: 700;
          letter-spacing: 0.02em;
          padding: 12px 24px;
          border-radius: 6px;
          text-decoration: none;
          color: inherit;
          border: 2px solid currentColor;
          background: transparent;
          cursor: pointer;
          transition: opacity 0.2s ease;
          align-self: flex-start;
        }
        .${id}-promo-cta:hover {
          opacity: 0.75;
        }
        .${id}-promo-cta-arrow {
          transition: transform 0.2s ease;
        }
        .${id}-promo-cta:hover .${id}-promo-cta-arrow {
          transform: translateX(4px);
        }
      `}</style>

      <section className={`${id}-promo-section`}>
        {sectionTitle && (
          <h2
            className={`${id}-promo-title`}
            data-bildit-var-name="sectionTitle"
            data-bildit-var-type="RichText"
          >
            {sectionTitle}
          </h2>
        )}

        <div className={`${id}-promo-grid`}>
          {columns.map((col, i) => {
            const dark = isDark(col.bg);
            const textStyle = dark ? '#FFFFFF' : textColor;

            return (
              <Link
                key={i}
                href={col.ctaUrl}
                className={`${id}-promo-card`}
                style={{ backgroundColor: col.bg, color: textStyle }}
              >
                <div className={`${id}-promo-accent`} style={{ backgroundColor: col.accent }} />
                <div className={`${id}-promo-content`}>
                  {col.eyebrow && (
                    <p
                      className={`${id}-promo-eyebrow`}
                      style={{ color: col.accent }}
                      data-bildit-var-name={`${col.varPrefix}Eyebrow`}
                      data-bildit-var-type="RichText"
                    >
                      {col.eyebrow}
                    </p>
                  )}
                  <h3
                    className={`${id}-promo-headline`}
                    data-bildit-var-name={`${col.varPrefix}Headline`}
                    data-bildit-var-type="RichText"
                  >
                    {col.headline}
                  </h3>
                  <p
                    className={`${id}-promo-body`}
                    data-bildit-var-name={`${col.varPrefix}Body`}
                    data-bildit-var-type="RichText"
                  >
                    {col.body}
                  </p>
                  <span className={`${id}-promo-cta`}>
                    <span
                      data-bildit-var-name={`${col.varPrefix}CtaText`}
                      data-bildit-var-type="RichText"
                    >
                      {col.ctaText}
                    </span>
                    <svg
                      className={`${id}-promo-cta-arrow`}
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path d="M3 8h10M9 4l4 4-4 4" />
                    </svg>
                  </span>
                </div>
              </Link>
            );
          })}
        </div>
      </section>
    </>
  );
};

export default Demo;
