import React from 'react';
import { PRICING_TIERS } from '../constants';

export const PricingTiers: React.FC = () => {
  return (
    <section id="editions" className="py-16 md:py-20 px-6 border-t hairline bg-white">
      <div className="max-w-6xl mx-auto">
        <div className="mb-10">
          <div className="mono text-[11px] uppercase tracking-[0.18em] text-slate-500 mb-2">Editions & services</div>
          <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight text-slate-900">Choose an engagement</h2>
          <p className="text-slate-700 mt-3 max-w-2xl">
            The public drops are free. Paid editions fund ongoing work and include the working files. Custom dossiers are limited in capacity.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-6">
          {PRICING_TIERS.map((tier) => (
            <div
              key={tier.name}
              className={`rounded-xl border hairline p-7 flex flex-col ${
                tier.variant === 'premium' ? 'bg-slate-900 text-white shadow-sm' : 'bg-white text-slate-900'
              }`}
            >
              <div className="mb-6">
                <div className={`mono text-[11px] uppercase tracking-[0.18em] ${tier.variant === 'premium' ? 'text-white/70' : 'text-slate-500'}`}>
                  {tier.name}
                </div>
                <div className="mt-3 text-3xl font-extrabold">{tier.price}</div>
                <p className={`mt-3 text-sm leading-relaxed ${tier.variant === 'premium' ? 'text-white/80' : 'text-slate-700'}`}>
                  {tier.description}
                </p>
              </div>

              <ul className={`flex-1 space-y-3 text-sm ${tier.variant === 'premium' ? 'text-white/85' : 'text-slate-700'}`}>
                {tier.features.map((f, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <span className={`${tier.variant === 'premium' ? 'text-white' : 'text-red-ink'} mt-0.5 font-bold`}>✓</span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              {(() => {
                const enabled = (tier.enabled !== false) && !!tier.actionUrl;
                const isMailto = (tier.actionUrl || '').startsWith('mailto');

                return (
                  <div className="mt-8">
                    <button
                      type="button"
                      disabled={!enabled}
                      onClick={() => {
                        if (!enabled || !tier.actionUrl) return;
                        window.open(tier.actionUrl, isMailto ? '_self' : '_blank', isMailto ? undefined : 'noopener,noreferrer');
                      }}
                      className={`w-full rounded-md py-3 text-sm font-semibold transition-colors ${
                        !enabled
                          ? 'bg-slate-200 text-slate-500 cursor-not-allowed'
                          : tier.variant === 'premium'
                            ? 'bg-white text-slate-900 hover:bg-slate-100'
                            : 'bg-slate-900 text-white hover:bg-slate-800'
                      }`}
                      title={!enabled ? (tier.disabledHint || 'Not available yet') : undefined}
                    >
                      {tier.cta}
                    </button>

                    {!enabled && tier.disabledHint ? (
                      <div className="mt-2 text-xs text-slate-500 leading-relaxed">{tier.disabledHint}</div>
                    ) : null}
                  </div>
                );
              })()}

</div>
          ))}
        </div>
      </div>
    </section>
  );
};