'use client';

import React from 'react';

import Link from "next/link";
import Image from "next/image";
import { useTranslations } from '../../hooks/useTranslations';

export default function Home() {
    const { t } = useTranslations();
    return (
        <div className="min-h-screen pt-20">
            {/* Hero Section */}
            <section
                className="relative py-36 px-4 sm:px-6 lg:px-8 hero-bg-mobile-home hero-bg-desktop-home"
            >
                {/* Content Box */}
                <div className="relative z-10 max-w-4xl mx-auto">
                    <div className="bg-white rounded-2xl p-8 shadow-2xl hover:shadow-3xl transition-all duration-200" style={{ backgroundColor: 'rgba(255, 255, 255, 0.9125)' }}>
                        <div className="text-left">
                            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-6" style={{ color: '#0B2545' }}>
                                {t('home.hero.title')}
                            </h1>
                            <p className="text-lg sm:text-xl mb-6 max-w-4xl leading-relaxed" style={{ color: '#13315C' }}>
                                {t('home.hero.description')}<br />
                                {t('home.hero.description2')}<br />
                                {t('home.hero.description3')}
                            </p>
                            <p className="text-lg sm:text-xl font-bold mb-10 max-w-4xl" style={{ color: '#134074' }}>
                                {t('home.hero.value')}
                            </p>
                            <div className="flex flex-col sm:flex-row gap-4 justify-center">
                                <Link
                                    href="/en/services"
                                    className="text-white hover:opacity-90 font-semibold py-3 px-8 rounded-full transition-colors duration-200 shadow-lg"
                                    style={{ backgroundColor: '#134074' }}
                                >
                                    {t('home.hero.cta1')}
                                </Link>
                                <Link
                                    href="/en/contact"
                                    className="border-2 hover:text-white font-semibold py-3 px-8 rounded-full transition-colors duration-200"
                                    style={{ borderColor: '#134074', color: '#134074' }}
                                    onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { (e.target as HTMLElement).style.backgroundColor = '#134074'; (e.target as HTMLElement).style.color = '#EEF4ED'; }}
                                    onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { (e.target as HTMLElement).style.backgroundColor = 'transparent'; (e.target as HTMLElement).style.color = '#134074'; }}
                                >
                                    {t('home.hero.cta2')}
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Company Intro */}
            <section className="py-8 px-4 sm:px-6 lg:px-8 bg-orange-25">
                <div className="max-w-4xl mx-auto space-y-6 text-slate-600 text-lg sm:text-xl">
                    <p>
                        Siren & Tuomala Taloushallintopalvelut Oy was founded when Stefan Hörhammer, the owner of Tilitoimisto Hörhammer Oy, retired. The young accounting professionals who had been employed by the company and had acquired their professional expertise and skills in the field there, decided to continue their operations in a new company. In this way, Siren & Tuomala Taloushallintopalvelut Oy continues the traditions and operations of the respected Tilitoimisto Hörhammer Oy, which was founded in 1948. The most important values for the company are customer satisfaction, excellent level of expertise and professionalism in the field and mutual trust in customer relationships.
                    </p>
                    <p>
                        We provide all financial management services from one place and we tailor them to your needs. In addition to your company&apos;s accounting and financial statements, our services include other financial management services such as monthly reporting, official notifications, payroll, tax advice and solving tax problems. We provide services in Finnish, Swedish and English.
                        <br />
                        <Link href="/en/services" className="text-blue-600 hover:text-blue-700 font-medium underline underline-offset-4">Read more</Link>
                    </p>
                    <p>
                        Our customers include Finnish limited liability companies, partnerships, associations, foundations and foreign subsidiaries from a wide range of industries. We use Procountor electronic accounting software, which allows us to meet your company&apos;s technical accounting needs. We are a Procountor Gold level partner, which means that we have strong expertise in the system in question and it is widely used by our customers. Our company&apos;s partners have completed the KLT qualification, which is highly respected in the industry, which is a testament to their professionalism and perseverance. Our accounting firm is also an accounting firm partner of Suomen Taloushallintoliitto ry.
                    </p>
                </div>
            </section>

            {/* Logos Section */}
            <section className="py-12 px-4 sm:px-6 lg:px-8 bg-orange-25">
                <div className="max-w-4xl mx-auto">
                    <div className="bg-white p-8 rounded-2xl shadow-lg" style={{ border: '2px solid #E2E8F0' }}>
                        <div className="flex flex-col sm:flex-row items-center justify-center gap-8 sm:gap-12">
                            <Image
                                src="/legacy/TAL-Tlit-Kumppani-Black-RGB.png"
                                alt="Taloushallintoliiton tilitoimistokumppani"
                                width={364}
                                height={116}
                                className="h-28 w-auto"
                                unoptimized
                            />
                            <Image
                                src="/legacy/procountor_kultapartneri_finago.jpg"
                                alt="Procountor Kulta-tason partneri"
                                width={240}
                                height={80}
                                className="h-20 w-auto"
                                unoptimized
                            />
                            <Image
                                src="/legacy/KK_jasenlogo.png"
                                alt="KK jäsenlogo"
                                width={200}
                                height={64}
                                className="h-16 w-auto"
                                unoptimized
                            />
                        </div>
                    </div>
                </div>
            </section>

            {/* Services Overview */}
            <section className="py-20 px-4 sm:px-6 lg:px-8 bg-orange-25">
                <div className="max-w-7xl mx-auto">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl sm:text-4xl font-bold text-slate-700 mb-4">
                            {t('home.services.title')}
                        </h2>
                        <p className="text-xl text-slate-600 max-w-2xl mx-auto">
                            {t('home.services.description')}
                        </p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        {/* Accounting and financial statements */}
                        <div className="bg-white p-8 rounded-2xl ring-1 ring-blue-200 hover:ring-blue-300 transition-all duration-200 flex flex-col justify-between h-full shadow-lg hover:shadow-xl">
                            <div>
                                <h3 className="text-xl font-semibold text-slate-700 mb-4">{t('home.services.accounting.title')}</h3>
                                <p className="text-slate-600">
                                    {t('home.services.accounting.description')}
                                </p>
                            </div>
                            <Link href="/en/services/accounting" className="text-blue-400 hover:text-blue-500 font-medium mt-4">
                                {t('home.services.cta')} →
                            </Link>
                        </div>

                        {/* Payroll */}
                        <div className="bg-white p-8 rounded-2xl ring-1 ring-pink-200 hover:ring-pink-300 transition-all duration-200 flex flex-col justify-between h-full shadow-lg hover:shadow-xl">
                            <div>
                                <h3 className="text-xl font-semibold text-slate-700 mb-4">{t('home.services.payroll.title')}</h3>
                                <p className="text-slate-600">
                                    {t('home.services.payroll.description')}
                                </p>
                            </div>
                            <Link href="/en/services/payroll" className="text-pink-400 hover:text-pink-500 font-medium mt-4">
                                {t('home.services.cta')} →
                            </Link>
                        </div>

                        {/* Taxation and other expert services */}
                        <div className="bg-white p-8 rounded-2xl ring-1 ring-green-200 hover:ring-green-300 transition-all duration-200 flex flex-col justify-between h-full shadow-lg hover:shadow-xl">
                            <div>
                                <h3 className="text-xl font-semibold text-slate-700 mb-4">{t('home.services.taxation.title')}</h3>
                                <p className="text-slate-600">
                                    {t('home.services.taxation.description')}
                                </p>
                            </div>
                            <Link href="/en/services/taxation" className="text-green-400 hover:text-green-500 font-medium mt-4">
                                {t('home.services.cta')} →
                            </Link>
                        </div>
                    </div>
                </div>
            </section>

            {/* CTA Section */}
            <section className="py-20 px-4 sm:px-6 lg:px-8 bg-orange-25">
                <div className="max-w-4xl mx-auto">
                    <div className="rounded-2xl p-8 shadow-2xl" style={{ backgroundColor: 'rgba(241, 245, 249, 0.95)', border: '2px solid #134074' }}>
                        <div className="text-center">
                            <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold mb-8" style={{ color: '#134074' }}>
                                {t('home.finalcta.title')}
                            </h2>
                            <div className="flex flex-col sm:flex-row gap-4 justify-center">
                                <Link
                                    href="/en/contact"
                                    className="text-white hover:opacity-90 font-semibold py-3 px-8 rounded-full transition-colors duration-200 shadow-lg"
                                    style={{ backgroundColor: '#134074' }}
                                >
                                    {t('home.finalcta.button1')}
                                </Link>
                                <Link
                                    href="/en/services"
                                    className="border-2 font-semibold py-3 px-8 rounded-full transition-colors duration-200"
                                    style={{ borderColor: '#134074', color: '#134074' }}
                                    onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { (e.target as HTMLElement).style.backgroundColor = '#134074'; (e.target as HTMLElement).style.color = '#EEF4ED'; }}
                                    onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { (e.target as HTMLElement).style.backgroundColor = 'transparent'; (e.target as HTMLElement).style.color = '#134074'; }}
                                >
                                    {t('home.finalcta.button2')}
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}
