import Layout from '../components/Layout';
import SocialLinks from '../components/SocialLinks';
import AnimatedName from '../components/AnimatedName';
import SectionHeading from '../components/SectionHeading';
import Reveal from '../components/Reveal';
import Icon from '../components/Icon';
import { profile, stats, focusAreas, stack } from '../data/profile';

export default function Home() {
  return (
    <Layout>
      {/* HERO */}
      <section className="hero">
        <div className="hero-backdrop" aria-hidden="true" />
        <div className="shell hero-grid">
          <div className="hero-content">
            <h1 className="hero-title">
              Hey, I’m {profile.firstName}.
              <span className="hero-title-muted">{profile.tagline}</span>
            </h1>

            <p className="hero-subtitle">{profile.intro}</p>

            <div className="hero-actions">
              <a href={`mailto:${profile.email}`} className="button button-primary">
                Let’s work together
                <Icon name="arrowRight" size={16} />
              </a>
              <a href="https://github.com/jesseinit" target="_blank" rel="noopener noreferrer" className="button button-ghost">
                <Icon name="github" size={16} />
                View GitHub
              </a>
            </div>

            <div className="hero-meta">
              <span className="meta-item">
                <Icon name="pin" size={16} /> {profile.location}
              </span>
              <span className="meta-divider" />
              <SocialLinks variant="icons" />
            </div>
          </div>

          <div className="hero-visual">
            <div className="portrait">
              <img src="/hero.jpg" alt={profile.name} className="portrait-image" />
            </div>
            <div className="terminal-card" aria-hidden="true">
              <div className="terminal-bar">
                <span />
                <span />
                <span />
                <em>~/whoami</em>
              </div>
              <pre className="terminal-body">
                <code>
                  <span className="t-prompt">$</span> whoami{'\n'}
                  <span className="t-accent">
                    <AnimatedName />
                  </span>
                  {'\n'}
                  <span className="t-prompt">$</span> cat role.txt{'\n'}
                  <span className="t-muted">{profile.role.toLowerCase()} @ {profile.location.split(',')[0].toLowerCase()}</span>
                </code>
              </pre>
            </div>
          </div>
        </div>

        <div className="shell">
          <dl className="stats">
            {stats.map((stat, i) => (
              <Reveal key={stat.label} className="stat" delay={i * 80}>
                <dt className="stat-label">{stat.label}</dt>
                <dd className="stat-value">{stat.value}</dd>
              </Reveal>
            ))}
          </dl>
        </div>
      </section>

      {/* ABOUT */}
      <section id="about" className="section">
        <div className="shell">
          <SectionHeading index="01" eyebrow="About" title="Engineering for the long run." />
          <div className="about-grid">
            <Reveal className="about-copy">
              {profile.about.map((paragraph) => (
                <p key={paragraph}>{paragraph}</p>
              ))}
            </Reveal>
            <div className="focus-grid">
              {focusAreas.map((area, i) => (
                <Reveal key={area.title} className="focus-card" delay={i * 80}>
                  <span className="focus-icon">
                    <Icon name={area.icon} size={20} />
                  </span>
                  <h3 className="focus-title">{area.title}</h3>
                  <p className="focus-description">{area.description}</p>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* STACK */}
      <section id="stack" className="section">
        <div className="shell">
          <SectionHeading index="02" eyebrow="Stack" title="Tools I reach for.">
            The technologies I use day to day to design, build and run production systems.
          </SectionHeading>
          <div className="stack-grid">
            {stack.map((group, i) => (
              <Reveal key={group.group} className="stack-group" delay={i * 80}>
                <h3 className="stack-title">{group.group}</h3>
                <ul className="tag-list">
                  {group.items.map((item) => (
                    <li key={item} className="tag tag-large">
                      {item}
                    </li>
                  ))}
                </ul>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CONTACT */}
      <section id="contact" className="section">
        <div className="shell">
          <Reveal className="contact-card">
            <p className="eyebrow">
              <span className="eyebrow-index">03</span>
              Contact
            </p>
            <h2 className="contact-title">Have a system that needs to scale?</h2>
            <p className="contact-lead">
              I’m always happy to talk about backend architecture, interesting problems or new roles. My inbox is open.
            </p>
            <div className="hero-actions">
              <a href={`mailto:${profile.email}`} className="button button-primary">
                <Icon name="mail" size={16} />
                {profile.email}
              </a>
              <SocialLinks variant="pills" />
            </div>
          </Reveal>
        </div>
      </section>
    </Layout>
  );
}