katheryn-website/frontend/src/app/in-your-own-skin/page.tsx

import { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';

export const metadata: Metadata = {
  title: 'In Your Own Skin',
  description: 'A worldwide art project inviting authenticity and happiness, connecting us all by revealing our hidden truths.',
};

const testimonials = [
  {
    quote: "Oh God. Yes. Wow! What a film! This is deeply cooked human nourishment. Film as true art, as medicine for the soul.",
    author: "Susannah Darling Khan",
    role: "co-director The School of Movement Medicine",
  },
  {
    quote: "What a wonderful journey of a film. So deeply touching, life-affirming and heart-opening.",
    author: "Jackie Juno",
    role: "performance poet and author",
  },
  {
    quote: "In Your Own Skin is a moving innovative project that has the potential to make Katheryn Trenshaw a household name.",
    author: "Malcolm Stern",
    role: "psychotherapist, TV presenter, & author of The Courage to Love",
  },
  {
    quote: "Spellbinding.",
    author: "Lizzie Hubbard",
    role: "",
  },
  {
    quote: "\u2026An inspiring visual anthem to humanity.",
    author: "Jamie Catto",
    role: "musician and film-maker",
  },
  {
    quote: "Poignant, playful, powerful, piercing.",
    author: "Matt Harvey",
    role: "author, performer",
  },
  {
    quote: "Celebrates and reveals not just a biodiversity of people but the diversity within each person.",
    author: "Matt Harvey",
    role: "author, performer",
  },
  {
    quote: "A fascinating concept, beautifully realized.",
    author: "Starhawk",
    role: "author and filmmaker, The Fifth Sacred Thing",
  },
];

export default function InYourOwnSkinPage() {
  return (
    <div className="min-h-screen bg-white">
      {/* Hero */}
      <div className="relative min-h-[60vh] flex items-center justify-center bg-gray-100">
        <div className="absolute inset-0">
          <Image
            src="/images/iyos-image.jpg"
            alt="In Your Own Skin"
            fill
            className="object-cover opacity-30"
            priority
          />
        </div>
        <div className="relative text-center px-4 py-20 max-w-4xl mx-auto">
          <h1 className="font-serif text-4xl md:text-6xl">In Your Own Skin</h1>
          <p className="mt-6 text-lg text-gray-700 max-w-2xl mx-auto italic">
            A worldwide art project inviting authenticity and happiness, connecting us all by revealing our hidden truths.
          </p>
          <h3 className="mt-6 text-xl font-semibold text-gray-800">
            What hidden truth would YOU share?
          </h3>
        </div>
      </div>

      {/* Video */}
      <div className="mx-auto max-w-4xl px-4 py-16">
        <div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
          <iframe
            className="absolute inset-0 w-full h-full"
            src="https://www.youtube.com/embed/ow02iHMtq6o"
            title="In Your Own Skin"
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          />
        </div>
      </div>

      {/* About the Project */}
      <div className="mx-auto max-w-3xl px-4 py-12">
        <p className="text-gray-700 leading-relaxed">
          In the film, video portraits capture the unique moment when a person shares a secret,
          summarized in a long-hidden word or phrase that is then painted onto their skin. Each of
          these powerful moments releases a generous contribution to the world, a buoyant reminder
          of living fully and the beauty and strength that comes from facing and embracing our
          vulnerability.
        </p>
        <hr className="my-8 border-gray-200" />
        <p className="text-gray-700 leading-relaxed">
          We would love to come and run Community Events &mdash; Screening with Q&amp;A &mdash; in the works in your hood.
        </p>
        <p className="mt-4 text-gray-700 leading-relaxed">
          And we are running a series of &ldquo;secret&rdquo; screenings at the prestigious Rancho La Puerta
          in Baja California in 2026. Come join us in the sunshine and the Cuevas at Professor Park in Tecate.
        </p>
      </div>

      {/* Testimonials */}
      <div className="bg-gray-50 py-16">
        <div className="mx-auto max-w-5xl px-4">
          <h2 className="font-serif text-3xl text-center mb-12">Testimonials</h2>
          <div className="grid gap-8 md:grid-cols-2">
            {testimonials.map((t, i) => (
              <blockquote key={i} className="bg-white p-6 border-l-4 border-gray-300">
                <p className="text-gray-700 italic">
                  &ldquo;{t.quote}&rdquo;
                </p>
                <footer className="mt-4 text-sm text-gray-500">
                  &mdash; {t.author}{t.role ? `, ${t.role}` : ''}
                </footer>
              </blockquote>
            ))}
          </div>
        </div>
      </div>

      {/* Featured Quote */}
      <div className="mx-auto max-w-3xl px-4 py-16 text-center">
        <blockquote className="font-serif text-2xl text-gray-700 italic leading-relaxed">
          &ldquo;Katheryn Trenshaw&rsquo;s In Your Own Skin Project confirms my faith in deep
          essential human beauty and the innate benevolence in us all. It is an inspiring visual
          anthem to humanity.&rdquo;
        </blockquote>
        <p className="mt-4 text-gray-500">&mdash; Jamie Catto, musician and film-maker</p>
      </div>

      {/* Origin Story */}
      <div className="bg-gray-50 py-16">
        <div className="mx-auto max-w-3xl px-4 space-y-6 text-gray-700 leading-relaxed">
          <p>
            Many years ago during a silent retreat I had an epiphany. I realized that the greatest
            treasure I hold is buried deep inside &mdash; the thing I least want anyone to know about.
            This ultimately birthed the <em>In Your Own Skin</em> Project.
          </p>
          <p>
            Social worker Bren&eacute; Brown, along with neurobiologists and other researchers,
            discovered that if you want to look at happiness you need to look at shame. To help free
            myself and others from our shame, so we can live more authentic, resilient lives, I went
            out into the world, armed with body paints and video and still cameras, to record people
            discussing their hidden truths. I then painted that word onto their skin and photographed
            their portraits.
          </p>
          <p>
            While creating the project, I met with over 200 people from more than 30 countries and
            all walks of life. Each of these powerful moments releases a generous contribution to the
            world, a buoyant reminder of living fully and the beauty and strength that comes from
            facing and embracing our vulnerability. This in turn grows our intimacy and presence.
          </p>
          <p>
            Each photograph and recorded exchange documents a personal story that resonates across
            cultures. We find what we have in common, what makes us human.
          </p>
        </div>
      </div>

      {/* Endorsement Image */}
      <div className="mx-auto max-w-4xl px-4 py-16">
        <Image
          src="/images/lizzie-endorsement.png"
          alt="Endorsement from Lizzie Hubbard"
          width={800}
          height={400}
          className="w-full"
        />
      </div>

      {/* Artist Statement */}
      <div className="mx-auto max-w-3xl px-4 py-12 space-y-6 text-gray-700 leading-relaxed">
        <p>
          As an artist and an art therapist, I have specialised all of my professional life in the
          masks we wear and the taboos that no-one wants to speak about &mdash; what American writer
          Robert Bly calls &ldquo;our shadow bags&rdquo;. These more hidden aspects of ourselves hold
          great treasures and vitality when they are freed. We are a living paradox and the sooner we
          learn to dance with this, the sooner we can live more fully alive.
        </p>
        <p>
          The project is made up of hundreds of individual images but they are all part of one giant
          human poem &mdash; all unique, but all part of the same poem forest. In the 1950s, it was
          discovered that a variety of Aspen tree, the Pando, while it looks like tens of thousands
          of trunks and crowns, is actually one living organism &mdash; they all have the exactly the
          same DNA. So while we see them as many, they are actually one. Just like us.
        </p>
        <p>
          We are living in unprecedented times of political, economic, ecological, social and
          emotional transition. <em>In Your Own Skin</em> portraits and stories reveal a living
          transformative story in a world searching for hope, wisdom and resilience &mdash; what keeps
          us connected and whole from the inside out.
        </p>
      </div>

      {/* Depression Portrait */}
      <div className="mx-auto max-w-4xl px-4 py-12">
        <figure>
          <Image
            src="/images/depression-portrait.png"
            alt="Hanging larger than life banners available to hire as part of the In Your Own Skin project"
            width={800}
            height={800}
            className="w-full"
          />
          <figcaption className="mt-3 text-center text-sm text-gray-500 italic">
            Hanging larger than life banners available to hire as part of the In Your Own Skin project
          </figcaption>
        </figure>
      </div>

      {/* More Links & Videos */}
      <div className="mx-auto max-w-3xl px-4 py-12 space-y-4 text-gray-700 leading-relaxed">
        <p>A few more inspirations on In Your Own Skin:</p>
        <ul className="space-y-2 list-none">
          <li>
            <a href="https://www.youtube.com/watch?v=HPR57Y_y1Ws" target="_blank" rel="noopener noreferrer" className="text-blue-700 underline hover:text-blue-900">
              Paradox talks about In Your Own Skin
            </a>
          </li>
          <li>
            <a href="https://www.youtube.com/watch?v=qk0V-WbHWOM&t=15s" target="_blank" rel="noopener noreferrer" className="text-blue-700 underline hover:text-blue-900">
              Moa from Sweden
            </a>
          </li>
          <li>
            <a href="https://www.youtube.com/watch?v=uco_4XrJ5bk" target="_blank" rel="noopener noreferrer" className="text-blue-700 underline hover:text-blue-900">
              Juliet Russell on In Your Own Skin
            </a>
          </li>
        </ul>
      </div>

      {/* Ali Donkin Interview */}
      <div className="mx-auto max-w-4xl px-4 py-12">
        <div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
          <iframe
            className="absolute inset-0 w-full h-full"
            src="https://www.youtube.com/embed/5eKKYhG8CXU"
            title="In Your Own Skin Interview - Ali Donkin, Dartington's Film Programmer with Katheryn Trenshaw"
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          />
        </div>
      </div>

      {/* Screening CTA */}
      <div className="mx-auto max-w-4xl px-4 py-12">
        <Link href="/contact">
          <figure>
            <Image
              src="/images/iyos-asset-1.jpeg"
              alt="Schedule a screening party to celebrate unity in diversity and the wonder of being human."
              width={800}
              height={400}
              className="w-full"
            />
            <figcaption className="mt-3 text-center text-sm text-gray-500 italic">
              Schedule a screening party to celebrate unity in diversity and the wonder of being human.
            </figcaption>
          </figure>
        </Link>
      </div>

      {/* CTA */}
      <div className="border-t border-gray-200 bg-white">
        <div className="mx-auto max-w-7xl px-4 py-16 text-center">
          <h3 className="font-serif text-2xl">Get Involved</h3>
          <p className="mt-4 text-gray-600">
            Host a screening, commission a portrait, or get in touch to learn more.
          </p>
          <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/contact" className="btn btn-primary">
              Get in Touch
            </Link>
            <a
              href="https://www.amazon.co.uk/dp/B07KQXNV1S"
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn-secondary"
            >
              Buy the Book
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}