export default function Portfolio() {
  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header className="fixed top-0 right-0 z-50 p-6">
        <h1 className="text-lg font-normal tracking-wide">
          Francisca Jimenez. ✶
        </h1>
      </header>

      {/* Main Content */}
      <main className="relative">
        {/* Project 1: The sum of all trees together */}
        <section className="min-h-screen relative flex items-center justify-center">
          <div className="absolute inset-0">
            <img
              src="https://ext.same-assets.com/2890208151/1935713715.jpeg"
              alt="White bird in snowy landscape"
              className="w-full h-full object-cover"
            />
          </div>
          <div className="relative z-10 text-center text-white px-6">
            <h2 className="text-2xl md:text-3xl font-light mb-4">
              The sum of all trees together - <em>La suma de todos los árboles juntos</em> - (2020)
            </h2>
          </div>
        </section>

        {/* Project 2: Todas las formas del fuego */}
        <section className="py-20 px-6 md:px-12">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-2xl md:text-3xl font-light mb-8 text-center">
              Todas las formas del fuego - All the forms of fire (2023)
            </h2>

            <div className="grid md:grid-cols-2 gap-8 mb-12">
              <div className="aspect-video bg-black rounded">
                <video
                  className="w-full h-full object-cover rounded"
                  controls
                  poster="https://ext.same-assets.com/2890208151/2641447279.png"
                >
                  <source src="https://ext.same-assets.com/2890208151/1812630838.mp4" type="video/mp4" />
                </video>
              </div>
              <div className="aspect-video bg-black rounded">
                <video
                  className="w-full h-full object-cover rounded"
                  controls
                  poster="https://ext.same-assets.com/2890208151/2641447279.png"
                >
                  <source src="https://ext.same-assets.com/2890208151/1812630838.mp4" type="video/mp4" />
                </video>
              </div>
            </div>

            <div className="grid md:grid-cols-2 gap-12 text-sm leading-relaxed">
              <div>
                <h3 className="font-medium mb-4">eng</h3>
                <p className="mb-4">
                  In a country of constant phenomena, it is thanks to its own territorial and cultural
                  construction, that Colombia becomes a repeated identification of codes, symbols, and
                  particular events that have shaped a social, moral and political structure. Festivals,
                  war, illnesses, climate change and the other gears that comprise certain essence of
                  "Colombianity" are called under the form of fire.
                </p>
                <p>
                  Here, its spark, its aesthetics, its ideal of danger and passion are manifested through
                  the thermal sensation of heat and its popular representation in Colombian visual culture.
                  Through this video installation, the construction of a common identity obeys the exercise
                  of unexpected, extreme, violent and natural events that have configured the ideal of "heat"
                  as a linguistic term and cultural phenomenon.
                </p>
              </div>
              <div>
                <h3 className="font-medium mb-4">esp</h3>
                <p className="mb-4">
                  En un país de fenómenos constantes, es gracias a su propia construcción territorial y
                  cultural, que Colombia se convierte en una repetida identificación de códigos, símbolos
                  y eventos particulares que han dado forma a una estructura social, moral y política.
                  Fiestas, guerra, enfermedades, cambio climático y demás engranajes que conforman cierta
                  esencia de la colombianidad son convocados bajo la forma del fuego.
                </p>
                <p>
                  Aquí, su chispa, su estética, su ideal de peligro y pasión se manifiestan a través de
                  la sensación térmica del calor y su representación popular en la cultura visual colombiana.
                  A través de esta videoinstalación, la construcción de una identidad común obedece al
                  ejercicio de eventos inesperados, extremos, violentos y naturales que han configurado
                  el ideal de calor como término lingüístico y fenómeno cultural.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Project 3: Hot land fictions */}
        <section className="min-h-screen bg-green-400 flex items-center justify-center px-6">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-light mb-8">
              Hot land fictions (2022)<br />
              Ficciones de tierra caliente (2022)
            </h2>

            <div className="grid md:grid-cols-2 gap-12 text-sm leading-relaxed mb-8 text-left">
              <div>
                <h3 className="font-medium mb-4">eng</h3>
                <p className="mb-4">
                  "Tierra Caliente" (hot land) is the term popularly used in Colombia to refer to territories with warm climates. Most of them are near the coast, the sea, or the river. It is also used to designate territories where the war has had a greater impact or where there are still high rates of violence to this day.
                </p>
                <p>
                  "Hot land fictions" is a visual and expanded film on the different narrative lines that emerge from the revision of the Colombian "hot" landscape. From the film montage, divided into three channels, I develop three narrative lines that make up the video installation. The first is a science fiction story based on the late twentieth-century war stories. The second is an anachronistic historical tale describing the world's origin in the Magdalena River bank, and the last one is a short story about the myth of the "Lizard Man".
                </p>
              </div>
              <div>
                <h3 className="font-medium mb-4">esp</h3>
                <p className="mb-4">
                  Tierra Caliente es el término utilizado popularmente en Colombia para referirse a los territorios de clima cálido. La mayoría de ellos están cerca de la costa, el mar o el río. También se utiliza para designar territorios donde la guerra ha tenido un mayor impacto o donde aún hoy existen altos índices de violencia.
                </p>
                <p>
                  Ficciones de la tierra caliente es una película visual y expandida sobre las diferentes líneas narrativas que surgen de la revisión del paisaje caliente colombiano. A partir del montaje fílmico, dividido en tres canales, desarrollo tres líneas narrativas que conforman la videoinstalación. La primera es una historia de ciencia ficción basada en los relatos bélicos de finales del siglo XX. La segunda es un relato histórico anacrónico que describe el origen del mundo en la ribera del río Magdalena, y la última es una breve historia sobre el mito del Hombre Lagarto.
                </p>
              </div>
            </div>

            <div className="flex justify-center gap-4 mt-12">
              <button className="px-6 py-2 border border-black rounded-full text-sm hover:bg-black hover:text-white transition-colors">
                Watch film
              </button>
              <button className="px-6 py-2 bg-red-500 text-white rounded-full text-sm hover:bg-red-600 transition-colors">
                Ver película
              </button>
            </div>
          </div>
        </section>

        {/* Project 4: El cuerpo más extenso */}
        <section className="min-h-screen bg-blue-500 flex items-center justify-center px-6">
          <div className="max-w-4xl mx-auto text-center text-white">
            <h2 className="text-3xl md:text-4xl font-light mb-8">
              El cuerpo más extenso después del universo mismo<br />
              <span className="text-2xl">(The largest body after the universe itself) (2021)</span>
            </h2>

            <div className="grid md:grid-cols-2 gap-12 text-sm leading-relaxed text-left">
              <div>
                <h3 className="font-medium mb-4">eng</h3>
                <p>
                  This installation is the historical and documentary reconstruction of a false event that represents the popular omen of the flooding of the Colombian Caribbean coast. This project is mainly crossed by common languages of historical representation and symbolic appropriations and concepts such as water-growth, new colonialism, the problems of aesthetic representation on the landscape, and the Colombian territory crisis.
                </p>
              </div>
              <div>
                <h3 className="font-medium mb-4">esp</h3>
                <p>
                  Esta instalación es la reconstrucción histórìca y documental de un falso acontecimiento que representa el presagio popular de la inundación de la costa Caribe colombiana. Este proyecto está atravesado principalmente por lenguajes comunes de representación histórica y apropiaciones simbólicas y conceptos como el agua-crecimiento, el nuevo colonialismo, los problemas de representación estética sobre el paisaje y la crisis del territorio colombiano.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Project 5: Esta no es una historia sobre China */}
        <section className="min-h-screen bg-gradient-to-r from-yellow-400 via-pink-500 to-red-500 flex items-center justify-center px-6">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-light mb-8">
              Esta no es una historia sobre - China<br />
              <span className="text-2xl italic">This is not a story about China (2020)</span>
            </h2>

            <div className="text-sm leading-relaxed mb-8 max-w-3xl mx-auto text-left">
              <p className="mb-4">
                This is not a story about China. It is a short film and an appropriation of a family and war archive that tells the story of Colombia's invasion of China. That, of course, never happened. The facts of this false history are narrated by a woman, a Chinese fictional character who narrates from her own experience the event that apparently took place in the 1980s.
              </p>
              <p className="mb-6">
                This fiction is constructed from the relationship between symbols such as nationalism, heroism, patriotic decadence and the subjective and narrative representation of Colombia's 60-year war.
              </p>

              <div className="text-xs mb-6">
                <strong>DISTINCTIONS AND AWARDS:</strong> Official selection. 68th edition of the San Sebastian Film Festival. Nest Film Students. San Sebastian, Spain. First place. Premio Arte Joven (Young Art Award) Colsanitas and Embassy of Spain in Colombia. Award nominated. Bienal de la Imagen en Movimiento (BIM). (Biennial of the Moving Image). UNTREF. Buenos Aires, Argentina.
              </div>
            </div>

            <div className="flex justify-center gap-4 mt-8">
              <button className="px-6 py-2 bg-black text-white rounded-full text-sm hover:bg-gray-800 transition-colors">
                Watch film
              </button>
              <button className="px-6 py-2 border border-black rounded-full text-sm hover:bg-black hover:text-white transition-colors">
                Ver película
              </button>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}