'use client';

import { ArrowLeft, Mail, Phone, MapPin, Building2, User, FileText } from 'lucide-react';
import Link from 'next/link';

/**
 * Bot-proof Impressum page
 * Contact info is rendered via CSS/JS to prevent simple scraping
 * 
 * TO FILL IN: Edit the IMPRESSUM_DATA object below
 */

// ==========================================
// HIER AUSFÜLLEN - Deine Impressumsdaten
// ==========================================
const IMPRESSUM_DATA = {
    // Verantwortlicher
    name: 'Robin Schmidt',  // TODO: Dein Name

    // Adresse
    street: 'Bergstraße 43',  // TODO: Straße + Hausnummer
    city: '67067 Ludwigshafen',    // TODO: PLZ + Stadt
    country: 'Deutschland',

    // Kontakt (wird bot-sicher dargestellt)
    email: {
        user: 'iamrobinschmidt',         // TODO: Teil vor dem @
        domain: 'icloud.com',   // TODO: Teil nach dem @
    },
    phone: {
        prefix: '+49',           // TODO: Ländervorwahl
        area: '123',             // TODO: Vorwahl
        number: '4567890',       // TODO: Rufnummer
    },

    // Optional: Firma
    company: '',  // TODO: Firmenname (leer lassen wenn Privatperson)

    // Optional: Handelsregister
    registry: '',     // z.B. 'HRB 12345'
    registryCourt: '', // z.B. 'Amtsgericht München'

    // Optional: USt-IdNr.
    vatId: '',  // z.B. 'DE123456789'

    // Optional: Berufsbezeichnung / Aufsichtsbehörde (für bestimmte Berufe)
    profession: '',
    supervisoryAuthority: '',
};
// ==========================================

/**
 * Bot-proof email display component
 * Renders email in a way that's hard for bots to scrape
 */
function BotProofEmail({ user, domain }: { user: string; domain: string }) {
    return (
        <span
            className="inline-flex items-center gap-1.5 text-orange-500 cursor-pointer hover:underline"
            onClick={() => {
                window.location.href = `mailto:${user}@${domain}`;
            }}
            title="E-Mail senden"
        >
            <Mail size={16} />
            <span className="select-none" aria-hidden="true">
                {user}<span className="text-zinc-500">[at]</span>{domain}
            </span>
            <span className="sr-only">{user}@{domain}</span>
        </span>
    );
}

/**
 * Bot-proof phone display component
 */
function BotProofPhone({ prefix, area, number }: { prefix: string; area: string; number: string }) {
    const fullNumber = `${prefix}${area}${number}`;
    return (
        <span
            className="inline-flex items-center gap-1.5 text-orange-500 cursor-pointer hover:underline"
            onClick={() => {
                window.location.href = `tel:${fullNumber}`;
            }}
            title="Anrufen"
        >
            <Phone size={16} />
            <span className="select-none" aria-hidden="true">
                {prefix} ({area}) {number.slice(0, 3)}-{number.slice(3)}
            </span>
            <span className="sr-only">{fullNumber}</span>
        </span>
    );
}

export default function ImpressumPage() {
    const data = IMPRESSUM_DATA;

    return (
        <div className="min-h-screen bg-zinc-950">
            {/* Header */}
            <header className="sticky top-0 z-40 bg-zinc-950/80 backdrop-blur-lg border-b border-zinc-800">
                <div className="max-w-2xl mx-auto px-4 py-4 flex items-center gap-4">
                    <Link
                        href="/"
                        className="p-2 -ml-2 text-zinc-400 hover:text-white transition-colors"
                    >
                        <ArrowLeft size={20} />
                    </Link>
                    <div className="flex items-center gap-2">
                        <FileText size={20} className="text-orange-500" />
                        <h1 className="text-lg font-bold text-white">Impressum</h1>
                    </div>
                </div>
            </header>

            {/* Content */}
            <main className="max-w-2xl mx-auto px-4 py-8 space-y-8">
                {/* Anbieter */}
                <section className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
                    <h2 className="text-sm font-bold uppercase tracking-widest text-zinc-500 mb-4 flex items-center gap-2">
                        <User size={14} />
                        Angaben gemäß § 5 TMG
                    </h2>

                    <div className="space-y-3">
                        {data.company && (
                            <div className="flex items-center gap-2 text-white">
                                <Building2 size={16} className="text-zinc-500" />
                                <span className="font-bold">{data.company}</span>
                            </div>
                        )}

                        <div className="text-white font-bold">
                            {data.name}
                        </div>

                        <div className="flex items-start gap-2 text-zinc-400">
                            <MapPin size={16} className="text-zinc-500 mt-0.5" />
                            <div>
                                <div>{data.street}</div>
                                <div>{data.city}</div>
                                <div>{data.country}</div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Kontakt */}
                <section className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
                    <h2 className="text-sm font-bold uppercase tracking-widest text-zinc-500 mb-4">
                        Kontakt
                    </h2>

                    <div className="space-y-3">
                        <div>
                            <BotProofEmail user={data.email.user} domain={data.email.domain} />
                        </div>
                        {data.phone.number && (
                            <div>
                                <BotProofPhone
                                    prefix={data.phone.prefix}
                                    area={data.phone.area}
                                    number={data.phone.number}
                                />
                            </div>
                        )}
                    </div>
                </section>

                {/* Registerdaten */}
                {(data.registry || data.vatId) && (
                    <section className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
                        <h2 className="text-sm font-bold uppercase tracking-widest text-zinc-500 mb-4">
                            Registereintrag
                        </h2>

                        <div className="space-y-2 text-zinc-400 text-sm">
                            {data.registry && (
                                <div>
                                    <span className="text-zinc-500">Handelsregister:</span>{' '}
                                    {data.registry}
                                    {data.registryCourt && `, ${data.registryCourt}`}
                                </div>
                            )}
                            {data.vatId && (
                                <div>
                                    <span className="text-zinc-500">USt-IdNr.:</span>{' '}
                                    {data.vatId}
                                </div>
                            )}
                        </div>
                    </section>
                )}

                {/* Berufshaftpflicht / Aufsicht */}
                {(data.profession || data.supervisoryAuthority) && (
                    <section className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
                        <h2 className="text-sm font-bold uppercase tracking-widest text-zinc-500 mb-4">
                            Berufsrechtliche Angaben
                        </h2>

                        <div className="space-y-2 text-zinc-400 text-sm">
                            {data.profession && (
                                <div>
                                    <span className="text-zinc-500">Berufsbezeichnung:</span>{' '}
                                    {data.profession}
                                </div>
                            )}
                            {data.supervisoryAuthority && (
                                <div>
                                    <span className="text-zinc-500">Zuständige Aufsichtsbehörde:</span>{' '}
                                    {data.supervisoryAuthority}
                                </div>
                            )}
                        </div>
                    </section>
                )}

                {/* Hinweis */}
                <div className="text-center text-xs text-zinc-600 py-4">
                    Stand: {new Date().toLocaleDateString('de-DE', { month: 'long', year: 'numeric' })}
                </div>

                {/* Links */}
                <div className="flex justify-center gap-6 text-sm">
                    <Link href="/privacy" className="text-zinc-500 hover:text-orange-500 transition-colors">
                        Datenschutz
                    </Link>
                    <Link href="/" className="text-zinc-500 hover:text-orange-500 transition-colors">
                        Zurück zur App
                    </Link>
                </div>
            </main>
        </div>
    );
}
