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

export const CustomVeggie = ({ 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.veggie.title')}</h2>
                    <p className="text-secondary/60">{t('experience.customs.veggie.subtitle')}</p>
                </header>

                <section className="space-y-4">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.veggie.overview.title')}</h3>
                    <p className="text-secondary/70">{t('experience.customs.veggie.overview.description')}</p>
                    <p className="text-secondary/70">{t('experience.customs.veggie.overview.evolution')}</p>
                    <OverlayPicture
                        src="/images/les-serres-du-pre-marais.pages.dev_.png"
                        alt={t('experience.customs.veggie.overview.image_alt')}
                        className="mt-4 w-full"
                    />
                </section>

                <section className="space-y-6">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.veggie.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.veggie.architecture.frontend.title')}</h4>
                        <ul className="space-y-2 text-secondary/70">
                            <li className="flex gap-2">
                                <span className="font-semibold text-accent">{t('experience.customs.veggie.architecture.frontend.hosting')}:</span>
                                <span>Cloudflare Pages</span>
                            </li>
                            <li className="flex gap-2">
                                <span className="font-semibold text-accent">{t('experience.customs.veggie.architecture.frontend.tech')}:</span>
                                <span>HTML/CSS/JS vanilla</span>
                            </li>
                            <li className="flex gap-2">
                                <span className="font-semibold text-accent">{t('experience.customs.veggie.architecture.frontend.features')}:</span>
                                <span>{t('experience.customs.veggie.architecture.frontend.features_list')}</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.veggie.architecture.backend.title')}</h4>
                        <ul className="list-disc list-inside space-y-2 text-secondary/70">
                            <li>{t('experience.customs.veggie.architecture.backend.webhooks')}</li>
                            <li>{t('experience.customs.veggie.architecture.backend.pipeline')}</li>
                            <li>{t('experience.customs.veggie.architecture.backend.emailing')}</li>
                            <li>{t('experience.customs.veggie.architecture.backend.logistics')}</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.veggie.architecture.security.title')}</h4>
                        <ul className="list-disc list-inside space-y-2 text-secondary/70">
                            <li>{t('experience.customs.veggie.architecture.security.payment')}</li>
                            <li>{t('experience.customs.veggie.architecture.security.access')}</li>
                            <li>{t('experience.customs.veggie.architecture.security.backup')}</li>
                        </ul>
                    </div>
                </section>

                <section className="space-y-6">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.veggie.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.veggie.challenges.iteration.title')}</h4>
                        <p className="text-secondary/70">{t('experience.customs.veggie.challenges.iteration.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.veggie.challenges.cohorts.title')}</h4>
                        <p className="text-secondary/70">{t('experience.customs.veggie.challenges.cohorts.description')}</p>
                    </div>
                </section>

                <section className="space-y-6">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.veggie.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.veggie.stack.frontend.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>HTML, CSS, JavaScript</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>Cloudflare Pages</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.veggie.stack.backend.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>Node.js</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>Stripe Webhooks</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>Brevo / MailerLite</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.veggie.stack.tools.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>Stripe Payment Links</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>Make (PoC)</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>Google Sheets (PoC)</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>

                <section className="space-y-4">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.veggie.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.veggie.results.deployment')}</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="text-accent mt-1">✓</span>
                            <span>{t('experience.customs.veggie.results.reliability')}</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="text-accent mt-1">✓</span>
                            <span>{t('experience.customs.veggie.results.scalability')}</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="text-accent mt-1">✓</span>
                            <span>{t('experience.customs.veggie.results.maintenance')}</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="text-accent mt-1">✓</span>
                            <span>{t('experience.customs.veggie.results.cost')}</span>
                        </li>
                    </ul>
                </section>

                <footer className="border-t border-secondary/10 pt-6">
                    <p className="text-sm text-secondary/60 italic">{t('experience.customs.veggie.tags')}</p>
                </footer>
            </div>
        </div>
    );
};
