import { Quote, BarChart3 } from "lucide-react";
//import type { Testimonial } from "@/../product/sections/testimonials-and-partner/types";

export interface TestimonialCardProps {
  testimonial: object;
  index: number;
  onClick?: (id: string) => void;
}

export function TestimonialCard({
  testimonial,
  index,
  onClick,
}: TestimonialCardProps) {
  const isCase = testimonial.type === "case-study";

  return (
    <div className="group h-full">
      <div
        className="relative h-full flex flex-col overflow-hidden transition-all duration-300 cursor-pointer"
        style={{
          backgroundColor: "rgba(255,255,255,0.02)",
          border: "1px solid rgba(255,255,255,0.06)",
          borderRadius: "14px",
          padding: "clamp(24px, 2.5vw, 32px)",
        }}
        onClick={() => onClick?.(testimonial.id)}
        onMouseEnter={(e) => {
          e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.04)";
          e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)";
          e.currentTarget.style.transform = "translateY(-2px)";
          e.currentTarget.style.boxShadow =
            "0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.04)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.02)";
          e.currentTarget.style.borderColor = "rgba(255,255,255,0.06)";
          e.currentTarget.style.transform = "translateY(0)";
          e.currentTarget.style.boxShadow = "none";
        }}
      >
        {/* Corner ambient glow */}
        <div
          className="absolute -top-16 -right-16 w-32 h-32 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none"
          style={{
            background: isCase
              ? "radial-gradient(circle, rgba(94,106,210,0.08) 0%, transparent 70%)"
              : "radial-gradient(circle, rgba(210,94,111,0.08) 0%, transparent 70%)",
          }}
        />

        {/* Type indicator + metric */}
        <div className="flex items-start justify-between mb-5 gap-3">
          {/* Type badge */}
          <div
            className="inline-flex items-center gap-1.5 shrink-0"
            style={{
              fontFamily:
                "'Berkeley Mono', ui-monospace, SF Mono, Menlo, monospace",
              fontSize: "10px",
              fontWeight: 400,
              letterSpacing: "0.4px",
              textTransform: "uppercase",
              color: isCase ? "#5e6ad2" : "#8a8f98",
              backgroundColor: isCase
                ? "rgba(94,106,210,0.08)"
                : "rgba(255,255,255,0.04)",
              border: isCase
                ? "1px solid rgba(94,106,210,0.15)"
                : "1px solid rgba(255,255,255,0.08)",
              borderRadius: "9999px",
              padding: "3px 10px",
            }}
          >
            {isCase ? (
              <BarChart3 size={10} strokeWidth={1.5} />
            ) : (
              <Quote size={10} strokeWidth={1.5} />
            )}
            {isCase ? "Case Study" : "Quote"}
          </div>
        </div>

        {/* Metric highlight */}
        <div className="mb-5">
          <div
            style={{
              fontFamily: "'Quicksand', sans-serif",
              fontWeight: 580,
              fontSize: "clamp(28px, 3vw, 36px)",
              lineHeight: 1,
              letterSpacing: "-0.8px",
              color: isCase ? "#5e6ad2" : "#D25E6F",
            }}
          >
            {testimonial.metric.value}
          </div>
          <div
            className="mt-1.5"
            style={{
              fontFamily:
                "'Berkeley Mono', ui-monospace, SF Mono, Menlo, monospace",
              fontSize: "11px",
              fontWeight: 400,
              letterSpacing: "0.3px",
              color: "#62666d",
              textTransform: "uppercase",
            }}
          >
            {testimonial.metric.label}
          </div>
        </div>

        {/* Thin divider */}
        <div
          className="mb-5"
          style={{
            height: "1px",
            background:
              "linear-gradient(90deg, rgba(255,255,255,0.06), transparent)",
          }}
        />

        {/* Quote text */}
        <p
          className="flex-1"
          style={{
            fontFamily: "'Inter', sans-serif",
            fontFeatureSettings: '"cv01", "ss03"',
            fontWeight: 400,
            fontSize: "14px",
            lineHeight: 1.65,
            letterSpacing: "-0.1px",
            color: "#d0d6e0",
          }}
        >
          &ldquo;{testimonial.quote}&rdquo;
        </p>

        {/* Author */}
        <div
          className="flex items-center gap-3 mt-6 pt-5"
          style={{ borderTop: "1px solid rgba(255,255,255,0.05)" }}
        >
          {/* Avatar initials */}
          <div
            className="shrink-0 flex items-center justify-center"
            style={{
              width: "36px",
              height: "36px",
              borderRadius: "50%",
              backgroundColor: isCase
                ? "rgba(94,106,210,0.1)"
                : "rgba(210,94,111,0.1)",
              border: isCase
                ? "1px solid rgba(94,106,210,0.18)"
                : "1px solid rgba(210,94,111,0.18)",
              fontFamily: "'Inter', sans-serif",
              fontFeatureSettings: '"cv01", "ss03"',
              fontWeight: 590,
              fontSize: "12px",
              letterSpacing: "0.3px",
              color: isCase ? "#5e6ad2" : "#D25E6F",
            }}
          >
            {testimonial.author.initials}
          </div>

          <div className="min-w-0">
            <div
              style={{
                fontFamily: "'Inter', sans-serif",
                fontFeatureSettings: '"cv01", "ss03"',
                fontWeight: 510,
                fontSize: "13px",
                color: "#f7f8f8",
                letterSpacing: "-0.1px",
              }}
            >
              {testimonial.author.name}
            </div>
            <div
              className="truncate"
              style={{
                fontFamily: "'Inter', sans-serif",
                fontFeatureSettings: '"cv01", "ss03"',
                fontWeight: 400,
                fontSize: "12px",
                color: "#62666d",
                letterSpacing: "-0.05px",
              }}
            >
              {testimonial.author.role}, {testimonial.author.company}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

import { InfiniteBoxCarousel } from "@/components/ui/sidescroller";

export default function Demo() {
  return (
    <div className="bg-background h-[500px]">
      <InfiniteBoxCarousel>
        {data.testimonials.map((testimonial, i) => (
          <TestimonialCard
            key={testimonial.id}
            testimonial={testimonial}
            index={i}
            onClick={() => alert(`Clicked on testimonial ${testimonial.id}`)}
          />
        ))}
      </InfiniteBoxCarousel>
    </div>
  );
}

const data = {
  _meta: {
    models: {
      testimonials:
        "Each testimonial is a customer story — either a direct quote or a short case study snippet — featuring a highlighted result metric, author info, and company.",
      partners:
        "Each partner represents a company, institution, or organization that collaborates with Sanitron, displayed as a logo in the scrolling ticker.",
      sectionHeader:
        "The introductory headline and subtext displayed above the testimonials.",
    },
    relationships: [
      "Testimonials are displayed in a horizontally scrollable row above the partner logo ticker",
      "Each testimonial has a type (quote or case-study) determining its visual treatment",
      "Partners are shown as a continuously scrolling logo marquee below the testimonials",
    ],
  },
  sectionHeader: {
    headline: "Trusted by Industry Leaders",
    subtext:
      "From airports to stadiums — organizations worldwide rely on Sanitron to turn wastewater into clean energy. Here's what they have to say.",
  },
  testimonials: [
    {
      id: "testimonial-001",
      type: "quote",
      quote:
        "Sanitron transformed our approach to facility energy management. The turbines practically run themselves — we just watch the savings stack up.",
      metric: {
        value: "38%",
        label: "Energy cost reduction",
      },
      author: {
        name: "Elena Marsh",
        role: "Director of Operations",
        company: "Frankfurt Airport Authority",
        initials: "EM",
      },
    },
    {
      id: "testimonial-002",
      type: "case-study",
      quote:
        "After installing 120 micro turbines across our terminal restrooms, we saw measurable results within the first quarter. The ROI timeline exceeded our projections.",
      metric: {
        value: "14 months",
        label: "Payback period",
      },
      author: {
        name: "James Okoro",
        role: "Head of Sustainability",
        company: "Heathrow Green Initiative",
        initials: "JO",
      },
    },
    {
      id: "testimonial-003",
      type: "quote",
      quote:
        "We were skeptical at first — energy from restroom water flow? But the numbers don't lie. Sanitron is now part of our long-term carbon strategy.",
      metric: {
        value: "215 tons",
        label: "CO₂ saved annually",
      },
      author: {
        name: "Laura Heinemann",
        role: "Chief Sustainability Officer",
        company: "City of Munich",
        initials: "LH",
      },
    },
    {
      id: "testimonial-004",
      type: "case-study",
      quote:
        "Across our 48 corporate office locations, Sanitron turbines generate enough energy to power all restroom lighting and ventilation — completely off-grid.",
      metric: {
        value: "€420K",
        label: "Annual savings",
      },
      author: {
        name: "Marcus Andersen",
        role: "VP Facilities Management",
        company: "Nordic Property Group",
        initials: "MA",
      },
    },
    {
      id: "testimonial-005",
      type: "quote",
      quote:
        "On match days, our stadium processes massive water volumes. Sanitron turns that flow into clean energy — it's the perfect fit for high-traffic venues.",
      metric: {
        value: "42%",
        label: "Energy savings on match days",
      },
      author: {
        name: "Sophie Brennan",
        role: "Venue Operations Manager",
        company: "Allianz Arena Services",
        initials: "SB",
      },
    },
    {
      id: "testimonial-006",
      type: "case-study",
      quote:
        "We piloted 30 units in our municipal water treatment facility. Within 8 months, we expanded to 180 units across the entire district. The data from the monitoring platform made the decision easy.",
      metric: {
        value: "6x",
        label: "Scale-up in under a year",
      },
      author: {
        name: "Tobias Richter",
        role: "District Utilities Director",
        company: "Stadtwerke Düsseldorf",
        initials: "TR",
      },
    },
  ],
  partners: [
    {
      id: "partner-001",
      name: "E.ON Energy",
      category: "energy",
    },
    {
      id: "partner-002",
      name: "Stadtwerke Berlin",
      category: "municipal-utility",
    },
    {
      id: "partner-003",
      name: "Siemens Energy",
      category: "engineering",
    },
    {
      id: "partner-004",
      name: "World Green Building Council",
      category: "ngo",
    },
    {
      id: "partner-005",
      name: "TU Munich",
      category: "research",
    },
    {
      id: "partner-006",
      name: "Veolia",
      category: "energy",
    },
    {
      id: "partner-007",
      name: "Fraunhofer Institute",
      category: "research",
    },
    {
      id: "partner-008",
      name: "ENGIE",
      category: "energy",
    },
    {
      id: "partner-009",
      name: "Arup Engineering",
      category: "engineering",
    },
    {
      id: "partner-010",
      name: "WWF Climate",
      category: "ngo",
    },
  ],
};
Infinite Side Carousel Pattern

Default

Demo

We use cookies
