import { Quote } from 'lucide-react';

function StripeWordmark() {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width='512'
      height='214'
      viewBox='0 0 512 214'
      fill='none'
      role='img'
      aria-label='Stripe'
      className='h-auto w-16 shrink-0 lg:w-20'
    >
      <path
        fill='currentColor'
        d='M512 110.08c0-36.409-17.636-65.138-51.342-65.138-33.85 0-54.33 28.73-54.33 64.854 0 42.808 24.179 64.426 58.88 64.426 16.925 0 29.725-3.84 39.396-9.244v-28.445c-9.67 4.836-20.764 7.823-34.844 7.823-13.796 0-26.027-4.836-27.591-21.618h69.547c0-1.85.284-9.245.284-12.658m-70.258-13.511c0-16.071 9.814-22.756 18.774-22.756 8.675 0 17.92 6.685 17.92 22.756zm-90.31-51.627c-13.939 0-22.899 6.542-27.876 11.094l-1.85-8.818h-31.288v165.83l35.555-7.537.143-40.249c5.12 3.698 12.657 8.96 25.173 8.96 25.458 0 48.64-20.48 48.64-65.564-.142-41.245-23.609-63.716-48.498-63.716m-8.534 97.991c-8.391 0-13.37-2.986-16.782-6.684l-.143-52.765c3.698-4.124 8.818-6.968 16.925-6.968 12.942 0 21.902 14.506 21.902 33.137 0 19.058-8.818 33.28-21.902 33.28M241.493 36.551l35.698-7.68V0l-35.698 7.538zm0 10.809h35.698v124.444h-35.698zm-38.257 10.524L200.96 47.36h-30.72v124.444h35.556V87.467c8.39-10.951 22.613-8.96 27.022-7.396V47.36c-4.551-1.707-21.191-4.836-29.582 10.524m-71.112-41.386-34.702 7.395-.142 113.92c0 21.05 15.787 36.551 36.836 36.551 11.662 0 20.195-2.133 24.888-4.693V140.8c-4.55 1.849-27.022 8.391-27.022-12.658V77.653h27.022V47.36h-27.022zM35.982 83.484c0-5.546 4.551-7.68 12.09-7.68 10.808 0 24.461 3.272 35.27 9.103V51.484c-11.804-4.693-23.466-6.542-35.27-6.542C19.2 44.942 0 60.018 0 85.192c0 39.252 54.044 32.995 54.044 49.92 0 6.541-5.688 8.675-13.653 8.675-11.804 0-26.88-4.836-38.827-11.378v33.849c13.227 5.689 26.596 8.106 38.827 8.106 29.582 0 49.92-14.648 49.92-40.106-.142-42.382-54.329-34.845-54.329-50.774'
      />
    </svg>
  );
}

export default function BrandQuoteTestimonial() {
  return (
    <section className='bg-bg-white-0 w-full py-10 lg:py-20 xl:py-24'>
      <div className='mx-auto w-full max-w-7xl px-6 md:px-7'>
        <figure className='bg-bg-weak-50 flex flex-col gap-12 rounded-[28px] px-6 py-8 lg:gap-20 lg:rounded-[36px] lg:px-16 lg:py-18 xl:px-20'>
          <Quote
            className='text-text-soft-400 fill-text-soft-400 size-6 shrink-0 drop-shadow-sm lg:size-8'
            aria-hidden='true'
          />

          <blockquote>
            <p className='text-title-h5 md:text-title-h4 text-text-strong-950 max-w-5xl font-semibold tracking-[-0.02em] text-balance before:mr-1 before:content-["\201C"] after:ml-1 after:content-["\201D"]'>
              Using Stunning UI has felt like unlocking a secret design
              superpower. It strikes the perfect balance between simplicity and
              versatility, helping us create interfaces that are both beautiful
              and user-friendly.
            </p>
          </blockquote>

          <figcaption className='flex flex-col gap-6 sm:flex-row sm:items-center'>
            <div className='text-primary-base'>
              <StripeWordmark />
            </div>
            <div className='border-stroke-soft-200 flex flex-col gap-1 border-t pt-5 sm:border-t-0 sm:border-l sm:pt-0 sm:pl-6'>
              <div className='text-label-lg text-text-strong-950'>John Doe</div>
              <div className='text-text-soft-400'>
                Founder &amp; CEO, Stripe
              </div>
            </div>
          </figcaption>
        </figure>
      </div>
    </section>
  );
}