import React from "react";

const Biography = () => {
  return (
    <div className="min-h-screen bg-cover bg-center p-6 flex flex-col items-center" style={{ backgroundImage: "url('BABYDONTHURTME.png')" }}>
      <div className="max-w-3xl bg-white bg-opacity-90 shadow-lg rounded-2xl p-6 text-center">
        <img 
          src="BILLCITHESCIENCEGUY.png" 
          alt="Profile" 
          className="w-32 h-32 rounded-full mx-auto mb-4 border-4 border-white shadow-md"
        />
        <h1 className="text-4xl font-bold mb-2">[ReRetry!!!]</h1>
        <p className="text-gray-700 mb-6">Despierta mi interes . Quemar bosques en invierno.</p>
        
        <section className="mb-6">
          <h2 className="text-2xl font-semibold mb-2">About Me</h2>
          <p className="text-gray-600">
            Hi, I'm [Retroo]. I specialize in le se al marketing pero soy flojo xd.
          </p>
        </section>
        
        <section className="mb-6">
          <h2 className="text-2xl font-semibold mb-2">My Journey</h2>
          <p className="text-gray-600">
            From [your early experiences] to where I am today, my path has been shaped by.
          </p>
        </section>
        
        <section className="mb-6">
          <h2 className="text-2xl font-semibold mb-2">Connect with Me</h2>
          <div className="flex justify-center space-x-4">
            <a href="https://discordapp.com/users/reretry" className="text-blue-600 text-xl" aria-label="Discord"><i className="fab fa-discord"></i></a>
            <a href="#" className="text-blue-700 text-xl" aria-label="LinkedIn"><i className="fab fa-linkedin"></i></a>
            <a href="#" className="text-gray-900 text-xl" aria-label="GitHub"><i className="fab fa-github"></i></a>
          </div>
        </section>
      </div>
    </div>
  );
};

export default Biography;