'use client';

import { MessageCircle, Vote, Users } from 'lucide-react';

const ZIGZAG_POINTS = [
  40, 0, 20, 10, 30, 50, 20, 15, 0, 20, 25, 50, 10, 20, 0, 15, 10, 25, 20, 50, 0, 20, 40, 20, 25,
  10, 0, 15, 0, 20, 0, 40, 10, 0,
];

function generateZigzagClipPath(yValues: number[]): string {
  const lastIndex = yValues.length - 1;
  const getX = (i: number) => `${(i / lastIndex) * 100}%`;

  const topEdge = yValues.map((y, i) => `${getX(i)} ${y}px`).join(', ');
  const bottomEdge = [...yValues]
    .map((y, i) => [getX(i), y] as const)
    .reverse()
    .map(([x, y]) => `${x} calc(100% - 50px + ${y}px)`)
    .join(', ');

  return `polygon(${topEdge}, ${bottomEdge})`;
}

export const styles = `
  .shape-future {
    clip-path: ${generateZigzagClipPath(ZIGZAG_POINTS)};
  }

  .metal-texture {
    position: relative;
    overflow: hidden;
  }

  .metal-texture::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.5;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 10;
  }

  .shape-future-title {
    font-family: 'Caveat', cursive;
  }
`;

const features = [
  { icon: MessageCircle, text: 'Direct feedback channel' },
  { icon: Vote, text: 'Feature voting' },
  { icon: Users, text: 'Early adopter community' },
];

export function ShapeTheFutureSection() {
  return (
    <div className="relative my-[60px]">
      <section className="shape-future metal-texture bg-[#2a2a2a] relative z-[2]">
        <section className="shape-future bg-black absolute w-full h-[500px] top-[-446px] left-[2px] opacity-30 z-[2] " />
        <div className="absolute h-[200px] w-full blur-sm">
          <section className="shape-future bg-black absolute  w-full h-[500px] top-[-430px] left-[2px] opacity-30 z-[2] " />
        </div>
        <div className="absolute h-[200px] bottom-[-50px] w-full blur-sm">
          <section className="shape-future bg-black absolute w-full h-[500px] bottom-[-388px] left-[2px] opacity-20 z-[2] " />
        </div>
        <section className="shape-future bg-white absolute w-full h-[500px] bottom-[-449px] left-[1px] opacity-30 z-[2] " />
        <div className="relative z-[6] pt-[100px] pb-[60px] px-10 text-center max-w-[700px] mx-auto">
          <h2 className="shape-future-title text-5xl font-semibold text-[#f5f5f5] mb-4 leading-tight">
            Shape the future of Banatie
          </h2>

          <p className="text-[1.05rem] text-[#a0a0a0] mb-6 leading-relaxed">
            We&apos;re building this for developers like you. Early adopters get direct influence on
            our roadmap — suggest features, vote on priorities, and help us build exactly what you
            need.
          </p>

          <div className="flex flex-wrap gap-6 justify-center text-[0.95rem] text-[#888] mb-20">
            {features.map((feature, i) => (
              <span key={i} className="flex items-center gap-2">
                <feature.icon className="w-4 h-4" />
                {feature.text}
              </span>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}