'use client';

import React from 'react';
import Image from 'next/image';
import { Moon, Sun, Languages, Phone } from 'lucide-react';
import { useTheme } from '@/context/ThemeContext';
import styles from './HeroSection.module.css';

export const HeroSection: React.FC = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <div className={styles.heroContentWrapper}>
      {/* Top Floating Controls */}
      <div className={styles.topBar}>
        <button
          onClick={toggleTheme}
          className={styles.iconButton}
          aria-label="Toggle theme"
          title={`Switch to ${theme === 'light' ? 'Dark' : 'Light'} Mode`}
        >
          {theme === 'light' ? (
            <Moon size={28} strokeWidth={1.8} className={styles.themeIcon} />
          ) : (
            <Sun size={28} strokeWidth={1.8} className={styles.controlIcon} />
          )}
        </button>

        <button
          className={styles.iconButton}
          aria-label="Switch Language"
          title="Farsi version coming soon"
        >
          <Languages size={28} strokeWidth={2} className={styles.controlIcon} />
        </button>
      </div>

      {/* Hero Central Content */}
      <div className={styles.heroContent}>
        {/* Avatar with double ring */}
        <div className={styles.avatarWrapper}>
          <div className={styles.avatarRingOuter}>
            <div className={styles.avatarContainer}>
              <Image
                src="/images/avatar.png"
                alt="Amirhossein Khalili"
                width={192}
                height={192}
                className={styles.avatarImg}
                priority
              />
            </div>
          </div>
        </div>

        {/* Display Typography */}
        <h1 className={`font-display ${styles.heroTitle}`}>
          Hi, I&apos;m Amirhossein Khalili
        </h1>

        <p className={styles.heroSubtitle}>
          A PASSIONATE PRODUCT ENGINEER
        </p>

        {/* Action Buttons */}
        <div className={styles.actionButtons}>
          <a href="#about" className={`pill-btn ${styles.heroButton} ${styles.heroButtonOutline}`}>
            About
          </a>
          <a href="#projects" className={`pill-btn ${styles.heroButton} ${styles.heroButtonOutline}`}>
            Work
          </a>
          <a href="#footer" className={`pill-btn ${styles.heroButton} ${styles.heroButtonPrimary}`}>
            Contact
          </a>
        </div>

        {/* Contact Info Strip */}
        <div className={styles.contactBar}>
          <a href="mailto:amirhosseinkhalili901@gmail.com" className={styles.contactItem}>
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              aria-hidden="true"
              className={styles.contactIcon}
            >
              <path
                fill="currentColor"
                d="M3 5h3l6 5 6-5h3v14h-3V9l-6 5-6-5v10H3V5Z"
              />
            </svg>
            <span>amirhosseinkhalili901@gmail.com</span>
          </a>

          <div className={styles.contactDivider} />

          <a href="tel:+989388263077" className={styles.contactItem}>
            <Phone size={20} strokeWidth={1.8} className={`${styles.contactIcon} ${styles.filledIcon}`} />
            <span>+98 9388263077</span>
          </a>

          <div className={styles.contactDivider} />

          <div className={styles.contactItem}>
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              aria-hidden="true"
              className={styles.contactIcon}
            >
              <path
                fill="currentColor"
                fillRule="evenodd"
                d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 4.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z"
                clipRule="evenodd"
              />
            </svg>
            <span>Karaj, Alborz, Iran</span>
          </div>
        </div>
      </div>
    </div>
  );
};