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

const _em  = () => atob('aGVsbG9AanBhenBob3RvZ3JhcGh5LmNvbQ==');
const _eml = () => 'mailto:' + _em();

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>real images</em> for 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.</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"><img className="ph-img" src="assets/Photos/Brand/Willow%20Sage%20Events-3.webp" alt="Brand lifestyle photography" loading="lazy" /></div>
            <div className="slot ph variant-b"><img className="ph-img" src="assets/Photos/Brand/Sunrise%20Breath-Manly-25.webp" alt="Brand product photography" loading="lazy" /></div>
            <div className="slot ph variant-c"><img className="ph-img" src="assets/Photos/Brand/Sunrise%20Breath-Manly-44.webp" alt="Lifestyle photography" loading="lazy" /></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="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, natural sessions in the weeks before everything changes.', variant: 'd', href: 'maternity.html', src: 'assets/Photos/Maternity/Kavya-11.webp' },
  { num: '02', title: 'Newborn', blurb: 'At-home first days. Available light, no props, no beanbag poses.', variant: 'a', href: 'newborn.html', src: 'assets/Photos/Newborn/LuisArturo-40.webp' },
  { num: '03', title: 'Families', blurb: 'The way your kids move, play, cling, wander off and find you again.', variant: 'e', href: 'families.html', src: 'assets/Photos/Family/PJNMS-15.webp' },
  { num: '04', title: 'Couples & Engagements', blurb: 'Slow walks, soft light, the bit where nobody is watching.', variant: 'b', href: 'couples-engagements.html', src: 'assets/Photos/Couples%20%26%20Engagements/EmilyRiley-24.webp' },
  { num: '05', title: 'Weddings & Elopements', blurb: 'From intimate elopements to full days. Warm, documentary coverage.', variant: 'c', href: 'weddings-elopements.html', src: 'assets/Photos/Weddings/M&J-97.webp' },
];

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>
        <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>
              </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.',
    name: 'Josh',
    where: 'Couples · NSW',
  },
  {
    quote: 'Jorge has been my chosen photographer to capture the most important moments of my life.',
    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 GiftVouchers() {
  return (
    <section className="gift-strip">
      <div className="container">
        <div className="gift-inner reveal">
          <div className="copy">
            <span className="eyebrow">Gift Vouchers</span>
            <h3>Give someone a session they'll actually remember.</h3>
            <p>Know someone expecting, a new family, or a couple marking something big? A session makes a gift that lasts a lot longer than anything you'd wrap.</p>
          </div>
          <a href="contact.html" className="btn">Enquire about a voucher <span className="arr">→</span></a>
        </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>occasion</em>, or the <em>weekend</em> you've got coming up.</h2>
          <p>One email is enough. I'll write back within 24 hours. If it sounds like a fit, we'll find a date.</p>
          <div className="actions">
            <a href="contact.html" className="btn" style={{ background: 'var(--sand)', borderColor: 'var(--sand)', color: 'var(--ink)' }}>Book a session <span className="arr">→</span></a>
            <a href="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"><a href={_eml()}>{_em()}</a></span>
          </div>
          <div className="row">
            <span className="label">Phone</span>
            <span className="val">0479 039 539</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="foot-top">
          <div className="logo-row">
            <img src="assets/logo.webp" 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="maternity.html">Maternity</a></li>
              <li><a href="newborn.html">Newborn</a></li>
              <li><a href="families.html">Families</a></li>
              <li><a href="couples-engagements.html">Couples</a></li>
              <li><a href="weddings-elopements.html">Weddings</a></li>
            </ul>
          </div>
          <div>
            <h4>Studio</h4>
            <ul>
              <li><a href="brand-lifestyle.html">Brand &amp; Lifestyle</a></li>
              <li><a href="about.html">About Jorge</a></li>
              <li><a href="blog.html">Journal</a></li>
              <li><a href="contact.html">Contact</a></li>
              <li><a href="contact.html">Gift Vouchers</a></li>
            </ul>
          </div>
          <div>
            <h4>Elsewhere</h4>
            <ul>
              <li><a href="https://www.instagram.com/jpaz.photography" target="_blank" rel="noopener noreferrer">Instagram</a></li>
              <li><a href="https://jpazphotography.pic-time.com/client" target="_blank" rel="noopener noreferrer">Client galleries</a></li>
              <li><a href={_eml()}>{_em()}</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>
          <div className="foot-legal">
            <a href="privacy-policy.html">Privacy Policy</a>
            <a href="terms-conditions.html">Terms &amp; Conditions</a>
          </div>
          <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.GiftVouchers = GiftVouchers;
window.FinalCTA = FinalCTA;
window.Footer = Footer;