portfolio/src/components/Experience/custom/CustomStripe.tsx

import { TFunction } from "i18next";

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

                <section className="space-y-4">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.stripe.overview.title')}</h3>
                    <p className="text-secondary/70">{t('experience.customs.stripe.overview.description')}</p>
                </section>

                <section className="space-y-6">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.stripe.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.stripe.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.stripe.architecture.frontend.tech')}:</span>
                                <span>JavaScript natif, jQuery</span>
                            </li>
                            <li className="flex gap-2">
                                <span className="font-semibold text-accent">{t('experience.customs.stripe.architecture.frontend.features')}:</span>
                                <span>{t('experience.customs.stripe.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.stripe.architecture.backend.title')}</h4>
                        <ul className="list-disc list-inside space-y-2 text-secondary/70">
                            <li>{t('experience.customs.stripe.architecture.backend.integration')}</li>
                            <li>{t('experience.customs.stripe.architecture.backend.abstraction')}</li>
                            <li>{t('experience.customs.stripe.architecture.backend.extensibility')}</li>
                            <li>{t('experience.customs.stripe.architecture.backend.logging')}</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.stripe.architecture.security.title')}</h4>
                        <ul className="list-disc list-inside space-y-2 text-secondary/70">
                            <li>{t('experience.customs.stripe.architecture.security.webhooks')}</li>
                            <li>{t('experience.customs.stripe.architecture.security.idempotence')}</li>
                            <li>{t('experience.customs.stripe.architecture.security.reconciliation')}</li>
                        </ul>
                    </div>
                </section>

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

                <section className="space-y-6">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.stripe.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.stripe.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>JavaScript natif</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>jQuery</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.stripe.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>PHP</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>API Stripe</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>MySQL</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.stripe.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>Webhooks Stripe</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>{t('experience.customs.stripe.stack.tools.abstraction')}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>

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

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