/* global React */
const { useEffect: useEffectS, useRef: useRefS } = React;

function Photo({ variant = 'a', tag, aspect, src }) {
  return (
    <div className={'ph variant-' + variant} style={aspect ? { aspectRatio: aspect } : undefined}>
      {src && <img className="ph-img" src={src} alt="" loading="lazy" />}
      {!src && tag && <span className="ph-tag">{tag}</span>}
    </div>
  );
}

function Intro() {
  return (
    <section className="tight" id="about-preview">
      <div className="container intro">
        <div className="left reveal">
          <span className="eyebrow">Hola, I'm Jorge</span>
          <h2>I make <em>honest content</em> for the brands, businesses and families I work with on Sydney's Northern Beaches.</h2>
        </div>
        <div className="right reveal" style={{ transitionDelay: '120ms' }}>
          <p className="lead">Most clients come to me because their last shoot looked too staged, or too try-hard, or too much like everyone else's. I shoot lifestyle, which is just a word for letting things actually happen and being ready when they do.</p>
          <p>For brands that means content your audience trusts and shares. For families it means photos your kids will recognise as themselves. Same approach, different subject. Originally from Venezuela, based in Dee Why since the move.</p>
          <div className="signature">— Jorge</div>
        </div>
      </div>
    </section>
  );
}

function BrandPreview() {
  return (
    <section id="brand">
      <div className="container">
        <div className="brand-preview">
          <div className="brand-grid reveal-stagger">
            <div className="slot ph variant-a"><span className="ph-tag">brand · outdoor</span></div>
            <div className="slot ph variant-b"><span className="ph-tag">product in use</span></div>
            <div className="slot ph variant-c"><span className="ph-tag">lifestyle</span></div>
          </div>
          <div className="copy reveal">
            <span className="eyebrow">Brand &amp; Lifestyle</span>
            <h2 className="section-title">Lifestyle photography for brands that want to feel real.</h2>
            <p>Half-day and full-day shoots for outdoor brands, wellness, food, activewear and small product makers. You get a clear deliverable, a relaxed shoot day, and content your team will actually want to use.</p>
            <a href="pages/brand-lifestyle.html" className="btn">See brand work <span className="arr">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

const PERSONAL_CATEGORIES = [
  { num: '01', title: 'Maternity', blurb: 'Quiet, unposed sessions in the weeks before everything changes.', variant: 'd', href: 'pages/maternity.html', src: 'assets/Photos/Maternity/Kavya-11.jpg' },
  { num: '02', title: 'Families', blurb: 'The way your kids move, play, cling, wander off and find you again.', variant: 'e', href: 'pages/families.html', src: 'assets/Photos/Family/PJNMS-15.jpg' },
  { num: '03', title: 'Couples & Weddings', blurb: 'Relaxed days. The small looks. The bit where nobody is watching.', variant: 'b', href: 'pages/couples-engagements.html', src: 'assets/Photos/Couples%20%26%20Engagements/EmilyRiley-24.jpg' },
];

function PersonalPreview() {
  return (
    <section className="cream" id="personal">
      <div className="container">
        <div className="personal-head">
          <div className="copy reveal">
            <span className="eyebrow">Personal sessions</span>
            <h2 className="section-title">Natural moments, real life, Northern Beaches.</h2>
            <p>Maternity, newborn, families, couples, weddings and elopements. Same warm approach, scaled to whatever life looks like right now.</p>
          </div>
          <div className="meta reveal">Five chapters · One photographer</div>
        </div>
        <div className="personal-grid reveal-stagger">
          {PERSONAL_CATEGORIES.map((c) => (
            <a className="personal-card hoverable" href={c.href} key={c.num}>
              <Photo variant={c.variant} tag={c.title.toLowerCase()} src={c.src} />
              <div className="meta-row">
                <h3>{c.title}</h3>
                <span className="num">{c.num} / 05</span>
              </div>
              <p className="blurb">{c.blurb}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const TESTIMONIALS = [
  {
    quote: 'Jorge did an incredible job capturing our maternity shoot. The whole experience was so comfortable and enjoyable.',
    name: 'Sandhya',
    where: 'Maternity · NSW',
  },
  {
    quote: 'Had an amazing experience with Jorge. He was professional, easygoing, and captured incredible shots of our family.',
    name: 'Josh',
    where: 'Families · NSW',
  },
  {
    quote: 'Jorge has been my chosen photographer to capture the most important moments of my life. He just gets it.',
    name: 'Mirella',
    where: 'Weddings · NSW',
    loyalty: 'Booked 3 times',
  },
];

function Testimonials() {
  return (
    <section className="testimonials" id="words">
      <div className="container">
        <div className="reveal">
          <span className="eyebrow">In their words</span>
          <h2 className="section-title" style={{ maxWidth: '20ch' }}>The kind of trust I'm trying to earn.</h2>
        </div>
        <div className="testi-grid reveal-stagger">
          {TESTIMONIALS.map((t) => (
            <div className="testi" key={t.name}>
              <span className="mark">"</span>
              <blockquote>{t.quote}</blockquote>
              <div className="who">
                <strong>{t.name}</strong>
                {t.where}
                {t.loyalty && <div className="loyalty-pill">{t.loyalty}</div>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="final-cta" id="contact">
      <div className="container inner">
        <div className="reveal">
          <span className="eyebrow" style={{ color: 'var(--sand)' }}>Let's make something</span>
          <h2>Tell me about your <em>brand</em>, your <em>baby</em>, or the <em>weekend</em> you've got coming up.</h2>
          <p>One email is enough. I'll write back the same day with a few honest questions and, if it feels like a fit, we'll find a date.</p>
          <div className="actions">
            <a href="pages/contact.html" className="btn" style={{ background: 'var(--sand)', borderColor: 'var(--sand)', color: 'var(--ink)' }}>Book a session <span className="arr">→</span></a>
            <a href="pages/brand-lifestyle.html" className="btn ghost">Brand enquiry <span className="arr">→</span></a>
          </div>
        </div>
        <div className="side reveal">
          <div className="row">
            <span className="label">Email</span>
            <span className="val">hello@jpazphotography.com</span>
          </div>
          <div className="row">
            <span className="label">Phone</span>
            <span className="val">0479 039 539</span>
          </div>
          <div className="row">
            <span className="label">Studio</span>
            <span className="val">Dee Why · Sydney</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="foot-top">
          <div className="logo-row">
            <img src="assets/logo.png" alt="JPaz Photography" />
            <p className="blurb">Sydney lifestyle photographer creating genuine content that shows the real feeling of your brand, your products and your life.</p>
          </div>
          <div>
            <h4>Personal</h4>
            <ul>
              <li><a href="pages/maternity.html">Maternity</a></li>
              <li><a href="pages/newborn.html">Newborn</a></li>
              <li><a href="pages/families.html">Families</a></li>
              <li><a href="pages/couples-engagements.html">Couples</a></li>
              <li><a href="pages/weddings-elopements.html">Weddings</a></li>
            </ul>
          </div>
          <div>
            <h4>Studio</h4>
            <ul>
              <li><a href="pages/brand-lifestyle.html">Brand &amp; Lifestyle</a></li>
              <li><a href="pages/about.html">About Jorge</a></li>
              <li><a href="pages/blog.html">Blog</a></li>
              <li><a href="pages/contact.html">Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Elsewhere</h4>
            <ul>
              <li><a href="#">Instagram</a></li>
              <li><a href="#">Client galleries</a></li>
              <li><a href="mailto:hello@jpazphotography.com">hello@jpazphotography.com</a></li>
              <li><a href="tel:+61479039539">0479 039 539</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 JPaz Photography. All rights reserved.</span>
          <span className="ack">I acknowledge the Gayamaygal and Garigal people, the traditional custodians of the land on which I live and work, and pay my respects to their Elders past, present and emerging.</span>
        </div>
      </div>
    </footer>
  );
}

function setupReveals() {
  if (!window.gsap || !window.ScrollTrigger) return;
  const ST = window.ScrollTrigger;
  const targets = document.querySelectorAll('.reveal, .reveal-stagger, .split');
  targets.forEach((el) => {
    if (el.classList.contains('in')) return;
    ST.create({
      trigger: el,
      start: 'top 85%',
      onEnter: () => el.classList.add('in'),
    });
  });
}

window.setupReveals = setupReveals;
window.Intro = Intro;
window.BrandPreview = BrandPreview;
window.PersonalPreview = PersonalPreview;
window.Testimonials = Testimonials;
window.FinalCTA = FinalCTA;
window.Footer = Footer;