import { personalConfig } from '../config/personal';
import { useLanguage } from '../contexts/LanguageContext';
import { PageSeo } from '../components/PageSeo';

export default function ImprintPage() {
  const { texts: allTexts } = useLanguage();
  const texts = allTexts.imprint;

  return (
    <section className="imprint-page">
      <PageSeo
        title="Imprint | Sascha Bach"
        description="Legal information and imprint for Sascha Bach, freelance software developer."
        canonical="/imprint"
        noIndex
      />
      <div className="imprint-page__container">
        <div className="imprint-page__header">
          <h1 className="imprint-page__title">{texts.title}</h1>
          <p className="imprint-page__subtitle">{texts.subtitle}</p>
        </div>

        <div className="imprint-page__content">
          <div className="imprint-page__section">
            <h2 className="imprint-page__section-title">{texts.companyInfoTitle}</h2>
            <div className="imprint-page__info">
              <p><strong>Name:</strong> {personalConfig.name}</p>
              <p><strong>Adresse:</strong></p>
              <p>{texts.address.street}</p>
              <p>{texts.address.city}</p>
              <p>{texts.address.country}</p>
              <p>{texts.umsatzsteuerID || texts.vatID}</p>
            </div>
          </div>

          <div className="imprint-page__section">
            <h2 className="imprint-page__section-title">{texts.businessRegistrationTitle}</h2>
            <div className="imprint-page__info">
              <p><strong>{texts.businessRegistration.title}</strong></p>
              <p><strong>Datum der Erteilung:</strong> {texts.businessRegistration.dateIssued}</p>
              <p><strong>Erteilt von:</strong> {texts.businessRegistration.issuedBy}</p>
              <p>{texts.businessRegistration.authority}</p>
            </div>
          </div>

          <div className="imprint-page__section">
            <h2 className="imprint-page__section-title">{texts.contactTitle}</h2>
            <div className="imprint-page__info">
              <p><strong>E-Mail:</strong> {personalConfig.email.full}</p>
              <p><strong>Telefon:</strong> {texts.contact.phone}</p>
            </div>
          </div>

          <div className="imprint-page__section">
            <h2 className="imprint-page__section-title">{texts.responsibilityTitle}</h2>
            <div className="imprint-page__info">
              <p>{personalConfig.name}</p>
              <p>{texts.address.street}</p>
              <p>{texts.address.city}</p>
            </div>
          </div>

          <div className="imprint-page__section">
            <h2 className="imprint-page__section-title">{texts.disclaimerTitle}</h2>

            <div className="imprint-page__subsection">
              <h3 className="imprint-page__subsection-title">{texts.contentLiabilityTitle}</h3>
              {texts.contentLiabilityText.map((text: string) => (
                <p key={text.substring(0, 50)} className="imprint-page__text">
                  {text}
                </p>
              ))}
            </div>

            <div className="imprint-page__subsection">
              <h3 className="imprint-page__subsection-title">{texts.copyrightTitle}</h3>
              {texts.copyrightText.map((text: string) => (
                <p key={text.substring(0, 50)} className="imprint-page__text">
                  {text}
                </p>
              ))}
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}