import { FeatureCard } from './FeatureCard';

type UnsplashFocalPoint = {
  crop: 'focalpoint';
  fpX: number; // 0.0 - 1.0
  fpY: number; // 0.0 - 1.0
  fpZ?: number; // zoom, optional
};

type UnsplashImageSpec = {
  /** Unsplash image CDN photo id suffix, e.g. "1503376780353-7e6692767b70" */
  photoId: string;
  alt: string;
  /** Defaults to 600x400 */
  width?: number;
  height?: number;
  /** Defaults to 80 */
  quality?: number;
  /** Defaults to "crop" */
  fit?: 'crop' | 'max' | 'fill' | 'fillmax' | 'min' | 'scale';
  /** Optional focal-point crop tuning */
  focal?: UnsplashFocalPoint;
};

type Feature = {
  title: string;
  description: string;
  image: UnsplashImageSpec;
  href: string;
};

// Centralize Unsplash identifiers so you only update them in one place if needed.
const UNSPLASH_IXLIB = 'rb-4.1.0';
const UNSPLASH_IXID = 'M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';

function buildUnsplashUrl(spec: UnsplashImageSpec): string {
  const {
    photoId,
    width = 600,
    height = 400,
    quality = 80,
    fit = 'crop',
    focal,
  } = spec;

  const url = new URL(`https://images.unsplash.com/photo-${photoId}`);
  const params = url.searchParams;

  // Unsplash / Imgix baseline params
  params.set('ixlib', UNSPLASH_IXLIB);
  params.set('ixid', UNSPLASH_IXID);
  params.set('auto', 'format');
  params.set('fit', fit);
  params.set('w', String(width));
  params.set('h', String(height));
  params.set('q', String(quality));

  // Optional focal-point cropping (great when the subject must remain centered)
  if (focal) {
    params.set('crop', focal.crop); // "focalpoint"
    params.set('fp-x', String(focal.fpX));
    params.set('fp-y', String(focal.fpY));
    if (typeof focal.fpZ === 'number') params.set('fp-z', String(focal.fpZ));
  }

  return url.toString();
}

const features: readonly Feature[] = [
  {
    title: 'Vehicle Management',
    description: 'Track all your vehicles in one centralized location with detailed information and history.',
    href: '/guide#vehicles',
    image: {
      photoId: '1503376780353-7e6692767b70',
      alt: 'Vehicle Management',
    },
  },
  {
    title: 'Fuel Log Tracking',
    description: 'Monitor fuel consumption, costs, and efficiency across all your vehicles.',
    href: '/guide#fuel-logs',
    image: {
      photoId: '1529369623266-f5264b696110',
      alt: 'Fuel Log Tracking',
    },
  },
  {
    title: 'Maintenance Records',
    description: 'Keep detailed maintenance logs and never miss scheduled service appointments.',
    href: '/guide#maintenance',
    image: {
      photoId: '1486262715619-67b85e0b08d3',
      alt: 'Maintenance Records',
    },
  },
  {
    title: 'Document Storage',
    description: 'Store and organize all vehicle documents, receipts, and important paperwork.',
    href: '/guide#documents',
    image: {
      photoId: '1568605117036-5fe5e7bab0b7',
      alt: 'Document Storage',
    },
  },
  {
    title: 'Fuel Stations',
    description: 'Find and track your favorite fuel locations. Community verified stations with Premium 93 Octane.',
    href: '/guide#gas-stations',
    image: {
      photoId: '1572281335102-5f780686ee91',
      alt: 'Fuel Stations',
      focal: { crop: 'focalpoint', fpX: 0.5, fpY: 0.6, fpZ: 1.35 },
    },
  },
  {
    title: 'Reports & Analytics',
    description: 'Generate detailed reports on costs, mileage, and vehicle performance.',
    href: '/guide#dashboard',
    image: {
      photoId: '1551288049-bebda4e38f71',
      alt: 'Reports & Analytics',
    },
  },
  {
    title: 'Reminders',
    description: 'Set up automated reminders for maintenance, registration, and insurance renewals.',
    href: '/guide#maintenance-schedules',
    image: {
      photoId: '1434494878577-86c23bcb06b9',
      alt: 'Reminders',
    },
  },
  {
    title: 'Data Export',
    description: 'Export your data in various formats for reporting and record keeping.',
    href: '/guide#data-import-and-export',
    image: {
      photoId: '1460925895917-afdab827c52f',
      alt: 'Data Export',
    },
  },
] as const;

export const FeaturesGrid = () => {
  return (
    <section className="py-16 px-4 md:px-8 bg-[#1D1A18] border-t border-white/5">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-12">
          <p className="text-primary-500 text-sm font-semibold uppercase tracking-wide mb-2">
            Our Features
          </p>
          <h2 className="text-3xl md:text-4xl font-bold text-avus">What We Offer</h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {features.map((feature) => (
            <FeatureCard
              key={feature.title}
              title={feature.title}
              description={feature.description}
              imageSrc={buildUnsplashUrl(feature.image)}
              imageAlt={feature.image.alt}
              href={feature.href}
            />
          ))}
        </div>

        <div className="text-center mt-12">
          <p className="text-lg text-titanio mb-6">We are a cloud-based platform accessible anywhere, anytime.</p>
        </div>
      </div>
    </section>
  );
};
