import { ShieldOff } from 'lucide-react';

/** What the user can do to get HTTPS turned on (it lives on the hosting side). */
const STEPS = [
	{ text: 'Contact your hosting provider.' },
	{
		text: "Ask them to enable a Free SSL Certificate (Let's Encrypt).",
		hint: 'Most hosts have a one-click option.',
	},
	{ text: "Once it's active, I'll handle the rest." },
];

/**
 * Detail for the `sslexists` / `ssl_required` intervention (type `help`, blocking).
 *
 * HTTPS can only be enabled on the hosting side, so this is purely instructional.
 * No resolve call and no Undo: the scan verifies HTTPS on its next cycle and the
 * heartbeat auto-resolves the intervention.
 */
const SslRequired = () => (
	<div className="max-w-2xl mx-auto text-center">
		<h1 className="heading-h1 mt-0! leading-tight mb-3">
			Progress is paused.
		</h1>
		<div className="max-w-xl mx-auto mb-8">
			<p className="paragraph-regular text-muted-foreground mb-0!">
				I'm securing your site with HTTPS so browsers trust it and search
				engines rank it properly. This requires access to your hosting
				provider, which I don't control.
			</p>
		</div>

		<div className="rounded-2xl border border-border p-8">
			<h2 className="heading-h4 mt-0! mb-6">How we move forward</h2>
			<div className="space-y-5 text-left mt-4">
				{STEPS.map((step, index) => (
					<div key={step.text} className="flex items-start gap-4">
						<span className="flex items-center justify-center w-8 h-8 rounded-full border border-border text-muted-foreground small-semibold shrink-0">
							{index + 1}
						</span>
						<div>
							<p className="paragraph-regular text-foreground my-0! pt-0.5">
								{step.text}
							</p>
							{step.hint && (
								<p className="small-regular text-muted-foreground mt-1! mb-0!">
									{step.hint}
								</p>
							)}
						</div>
					</div>
				))}
			</div>
		</div>

		<div className="max-w-xl mx-auto mt-6 flex items-start justify-center gap-2 small-regular text-muted-foreground">
			<ShieldOff className="w-4 h-4 shrink-0 mt-0.5" />
			<span className="text-left">
				Without HTTPS, browsers flag your site as 'Not Secure' and search
				engines deprioritise it.
			</span>
		</div>
	</div>
);

export default SslRequired;