'use client'

import Image from 'next/image'
import Link from 'next/link'
import styles from './About.module.css'

export default function About() {
    return (
        <section className={styles.section} id="about">
            <div className={styles.container}>
                <div className={styles.imageWrapper}>
                    <Image
                        src="/images/home/about/about.webp"
                        alt="About Antalya Interior"
                        fill
                        className={styles.image}
                    />
                </div>
                <div className={styles.content}>
                    {/* Decorative Icon SVG */}
                    <svg className={styles.icon} viewBox="0 0 100 100" fill="currentColor">
                        <path d="M50 0 C60 20 80 40 100 50 C80 60 60 80 50 100 C40 80 20 60 0 50 C20 40 40 20 50 0 Z" />
                        <circle cx="50" cy="50" r="10" />
                    </svg>

                    <h2 className={styles.title}>About Antalya</h2>
                    <h3 className={styles.subtitle}>Experience Unforgettable Turkish Fusion</h3>

                    <p className={styles.text}>
                        Step into Antalya and savour a journey through Turkish culture crafted on the grill.
                        Every plate is prepared with care, honouring time-tested flavours while embracing a refined atmosphere.
                    </p>

                    <p className={styles.text}>
                        From warm service to signature classics, Antalya welcomes you to experience dining that feels memorable, comforting, and distinctly Turkish.
                    </p>

                    <Link href="/about-antalya-restaurant" className={styles.button}>
                        Learn More
                    </Link>
                </div>
            </div>
        </section>
    )
}
