import { TFunction } from "i18next";
import OverlayPicture from "../../utility/OverlayPicture";

export const CustomInfra = ({ t }: { t: TFunction }) => {
    return (
        <div className="mt-4">
            <div className="mt-8 space-y-8">
                <header className="border-b border-secondary/10 pb-4">
                    <h2 className="text-2xl font-semibold text-secondary mb-2">{t('experience.customs.infrastructure.title')}</h2>
                    <p className="text-secondary/60">{t('experience.customs.infrastructure.subtitle')}</p>
                </header>

                <section className="space-y-4">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.infrastructure.overview.title')}</h3>
                    <p className="text-secondary/70">{t('experience.customs.infrastructure.overview.description')}</p>
                    <OverlayPicture
                        src="/images/infra_diagram.png"
                        alt="Diagramme de l'infrastructure cloud automatisée"
                        className="mt-4 w-full"
                    />
                </section>

                <section className="space-y-6">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.infrastructure.architecture.title')}</h3>

                    <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
                        <h4 className="text-lg font-medium text-secondary">{t('experience.customs.infrastructure.architecture.provisioning.title')}</h4>
                        <ul className="space-y-2 text-secondary/70">
                            <li className="flex gap-2 flex-wrap">
                                <span className="font-semibold text-accent">Terraform/OpenTofu:</span>
                                <span>{t('experience.customs.infrastructure.architecture.provisioning.terraform')}</span>
                            </li>
                            <li className="flex gap-2 flex-wrap">
                                <span className="font-semibold text-accent">Ansible:</span>
                                <span>{t('experience.customs.infrastructure.architecture.provisioning.ansible')}</span>
                            </li>
                            <li className="flex gap-2 flex-wrap">
                                <span className="font-semibold text-accent">DNS OVH:</span>
                                <span>{t('experience.customs.infrastructure.architecture.provisioning.dns')}</span>
                            </li>
                        </ul>
                    </div>

                    <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
                        <h4 className="text-lg font-medium text-secondary">{t('experience.customs.infrastructure.architecture.services.title')}</h4>
                        <ul className="space-y-2 text-secondary/70">
                            <li className="flex gap-2 flex-wrap">
                                <span className="font-semibold text-accent">{t('experience.customs.infrastructure.architecture.services.website.name')}:</span>
                                <code className="bg-secondary/10 px-2 py-0.5 rounded text-accent text-sm">louisemard.dev</code>
                                <span>- {t('experience.customs.infrastructure.architecture.services.website.description')}</span>
                            </li>
                            <li className="flex gap-2 flex-wrap">
                                <span className="font-semibold text-accent">{t('experience.customs.infrastructure.architecture.services.gitea.name')}:</span>
                                <code className="bg-secondary/10 px-2 py-0.5 rounded text-accent text-sm">git.louisemard.dev</code>
                                <span>- {t('experience.customs.infrastructure.architecture.services.gitea.description')}</span>
                            </li>
                            <li className="flex gap-2 flex-wrap">
                                <span className="font-semibold text-accent">{t('experience.customs.infrastructure.architecture.services.infisical.name')}:</span>
                                <code className="bg-secondary/10 px-2 py-0.5 rounded text-accent text-sm">vault.louisemard.dev</code>
                                <span>- {t('experience.customs.infrastructure.architecture.services.infisical.description')}</span>
                            </li>
                        </ul>
                    </div>

                    <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
                        <h4 className="text-lg font-medium text-secondary">{t('experience.customs.infrastructure.architecture.security.title')}</h4>
                        <ul className="list-disc list-inside space-y-2 text-secondary/70">
                            <li>{t('experience.customs.infrastructure.architecture.security.ssl')}</li>
                            <li>{t('experience.customs.infrastructure.architecture.security.nginx')}</li>
                            <li>{t('experience.customs.infrastructure.architecture.security.firewall')}</li>
                            <li>{t('experience.customs.infrastructure.architecture.security.docker')}</li>
                        </ul>
                    </div>
                </section>

                <section className="space-y-6">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.infrastructure.challenges.title')}</h3>

                    <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-2">
                        <h4 className="text-lg font-medium text-secondary">{t('experience.customs.infrastructure.challenges.secrets.title')}</h4>
                        <p className="text-secondary/70">{t('experience.customs.infrastructure.challenges.secrets.description')}</p>
                    </div>

                    <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-2">
                        <h4 className="text-lg font-medium text-secondary">{t('experience.customs.infrastructure.challenges.multiservice.title')}</h4>
                        <p className="text-secondary/70">{t('experience.customs.infrastructure.challenges.multiservice.description')}</p>
                    </div>

                    <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-2">
                        <h4 className="text-lg font-medium text-secondary">{t('experience.customs.infrastructure.challenges.automation.title')}</h4>
                        <p className="text-secondary/70">{t('experience.customs.infrastructure.challenges.automation.description')}</p>
                    </div>
                </section>

                <section className="space-y-6">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.infrastructure.stack.title')}</h3>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
                            <h4 className="text-lg font-medium text-secondary">{t('experience.customs.infrastructure.stack.infrastructure.title')}</h4>
                            <ul className="space-y-2 text-secondary/70 text-sm">
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>{t('experience.customs.infrastructure.stack.infrastructure.cloud')}</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>{t('experience.customs.infrastructure.stack.infrastructure.os')}</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>{t('experience.customs.infrastructure.stack.infrastructure.iac')}</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>{t('experience.customs.infrastructure.stack.infrastructure.containers')}</span>
                                </li>
                            </ul>
                        </div>

                        <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
                            <h4 className="text-lg font-medium text-secondary">{t('experience.customs.infrastructure.stack.applications.title')}</h4>
                            <ul className="space-y-2 text-secondary/70 text-sm">
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>{t('experience.customs.infrastructure.stack.applications.webserver')}</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>{t('experience.customs.infrastructure.stack.applications.gitea')}</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>{t('experience.customs.infrastructure.stack.applications.infisical')}</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>{t('experience.customs.infrastructure.stack.applications.ssl')}</span>
                                </li>
                            </ul>
                        </div>

                        <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
                            <h4 className="text-lg font-medium text-secondary">{t('experience.customs.infrastructure.stack.security.title')}</h4>
                            <ul className="space-y-2 text-secondary/70 text-sm">
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>{t('experience.customs.infrastructure.stack.security.firewall')}</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>{t('experience.customs.infrastructure.stack.security.ids')}</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>{t('experience.customs.infrastructure.stack.security.smtp')}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>

                <section className="space-y-4">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.infrastructure.results.title')}</h3>
                    <ul className="space-y-2 text-secondary/70">
                        <li className="flex items-start gap-2">
                            <span className="text-accent mt-1">✓</span>
                            <span>{t('experience.customs.infrastructure.results.automation')}</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="text-accent mt-1">✓</span>
                            <span>{t('experience.customs.infrastructure.results.availability')}</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="text-accent mt-1">✓</span>
                            <span>{t('experience.customs.infrastructure.results.security')}</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="text-accent mt-1">✓</span>
                            <span>{t('experience.customs.infrastructure.results.maintainability')}</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="text-accent mt-1">✓</span>
                            <span>{t('experience.customs.infrastructure.results.cost')}</span>
                        </li>
                    </ul>
                </section>

                <section className="space-y-4 border-t border-secondary/10 pt-6">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.infrastructure.links.title')}</h3>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <a
                            onClick={e => {
                                e.preventDefault();
                                alert(t('experience.customs.infrastructure.links.alert'));
                            }}
                            href="https://louisemard.dev"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="px-4 py-3 bg-accent/10 hover:bg-accent/20 text-accent rounded-lg transition-colors border border-accent/30 text-center font-medium"
                        >
                            {t('experience.customs.infrastructure.links.website')}
                        </a>
                        <a
                            href="https://git.louisemard.dev"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="px-4 py-3 bg-accent/10 hover:bg-accent/20 text-accent rounded-lg transition-colors border border-accent/30 text-center font-medium"
                        >
                            {t('experience.customs.infrastructure.links.gitea')}
                        </a>
                        <a
                            href="https://vault.louisemard.dev"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="px-4 py-3 bg-accent/10 hover:bg-accent/20 text-accent rounded-lg transition-colors border border-accent/30 text-center font-medium"
                        >
                            {t('experience.customs.infrastructure.links.infisical')}
                        </a>
                        <a
                            href="https://github.com/LouisDrame/louisemard_infrastructure"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="px-4 py-3 bg-accent/10 hover:bg-accent/20 text-accent rounded-lg transition-colors border border-accent/30 text-center font-medium"
                        >
                            {t('experience.customs.infrastructure.links.source')}
                        </a>
                    </div>
                </section>
            </div>
        </div>
    );
};
