/* Johnston Farms LLC — Custom Styles */

/* Base & Typography */
body {
  font-family: 'Lato', system-ui, sans-serif;
  color: #1a1a2e;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-serif {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* Smooth scroll offset for fixed nav */
section[id] {
  scroll-margin-top: 80px;
}

/* Navbar transition states */
#navbar.scrolled {
  background: rgba(17, 24, 39, 0.95) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

#navbar.scrolled .nav-logo-text,
#navbar.scrolled .nav-link-text {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Reveal animations — progressive enhancement */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal-up.revealed,
  .reveal-left.revealed,
  .reveal-right.revealed {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Gold accent line */
.gold-line {
  height: 3px;
  background: linear-gradient(90deg, transparent, #d4a017, transparent);
}

/* Hero gradient overlay refinement */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(17, 24, 39, 0.85) 0%,
    rgba(42, 53, 78, 0.7) 50%,
    rgba(17, 24, 39, 0.85) 100%
  );
  z-index: 1;
}

#hero > .relative {
  position: relative;
  z-index: 2;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #111827;
}
::-webkit-scrollbar-thumb {
  background: #34425e;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #d4a017;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #d4a017;
  outline-offset: 2px;
}

/* Subtle hover lift for cards */
.service-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Image lazy loading fade-in */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.6s ease;
}
img[loading="lazy"].loaded {
  opacity: 1;
}

/* Mobile menu animation */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
}
#mobile-menu.open {
  max-height: 400px;
  opacity: 1;
}

/* Gold shimmer effect for buttons */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.btn-gold-shimmer {
  background-size: 200% auto;
  background-image: linear-gradient(
    90deg,
    #d4a017 0%,
    #ecce6a 25%,
    #d4a017 50%,
    #b8860b 75%,
    #d4a017 100%
  );
  animation: shimmer 4s linear infinite;
}

/* Decorative pattern */
.pattern-dots {
  background-image: radial-gradient(circle, rgba(212, 160, 23, 0.1) 1px, transparent 1px);
  background-size: 24px 24px;
}
</style>

<sm-file path="script.js">
/**
 * Johnston Farms LLC — Interactive Scripts
 */

(function () {
  'use strict';

  // ─── Navbar scroll behavior ───────────────────────────────────────────────
  const navbar = document.getElementById('navbar');
  const navLogoText = document.querySelector('.nav-logo-text');
  const navLinkTexts = document.querySelectorAll('.nav-link-text');

  function handleNavbarScroll() {
    if (window.scrollY > 60) {
      navbar.classList.add('scrolled');
    } else {
      navbar.classList.remove('scrolled');
    }
  }

  window.addEventListener('scroll', handleNavbarScroll, { passive: true });
  handleNavbarScroll();

  // ─── Mobile menu toggle ───────────────────────────────────────────────────
  const mobileMenuBtn = document.getElementById('mobile-menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  const menuIconOpen = document.getElementById('menu-icon-open');
  const menuIconClose = document.getElementById('menu-icon-close');
  let menuOpen = false;

  mobileMenuBtn.addEventListener('click', function () {
    menuOpen = !menuOpen;
    if (menuOpen) {
      mobileMenu.classList.add('open');
      mobileMenu.classList.remove('hidden');
      menuIconOpen.classList.add('hidden');
      menuIconClose.classList.remove('hidden');
    } else {
      mobileMenu.classList.remove('open');
      setTimeout(() => {
        mobileMenu.classList.add('hidden');
      }, 300);
      menuIconOpen.classList.remove('hidden');
      menuIconClose.classList.add('hidden');
    }
  });

  // Close mobile menu when a link is clicked
  mobileMenu.querySelectorAll('a').forEach(function (link) {
    link.addEventListener('click', function () {
      menuOpen = false;
      mobileMenu.classList.remove('open');
      setTimeout(() => {
        mobileMenu.classList.add('hidden');
      }, 300);
      menuIconOpen.classList.remove('hidden');
      menuIconClose.classList.add('hidden');
    });
  });

  // ─── Scroll reveal animations (progressive enhancement) ──────────────────
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  if (!prefersReducedMotion) {
    const revealElements = document.querySelectorAll('.reveal-up, .reveal-left, .reveal-right');

    const revealObserver = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            entry.target.classList.add('revealed');
            revealObserver.unobserve(entry.target);
          }
        });
      },
      {
        threshold: 0.1,
        rootMargin: '0px 0px -60px 0px',
      }
    );

    revealElements.forEach(function (el) {
      revealObserver.observe(el);
    });
  } else {
    // If reduced motion is preferred, show everything immediately
    document.querySelectorAll('.reveal-up, .reveal-left, .reveal-right').forEach(function (el) {
      el.classList.add('revealed');
    });
  }

  // ─── Contact form handling ────────────────────────────────────────────────
  const contactForm = document.getElementById('contact-form');
  const formSuccess = document.getElementById('form-success');

  if (contactForm) {
    contactForm.addEventListener('submit', function (e) {
      e.preventDefault();

      // Basic validation
      const firstName = document.getElementById('first-name').value.trim();
      const lastName = document.getElementById('last-name').value.trim();
      const email = document.getElementById('email').value.trim();
      const message = document.getElementById('message').value.trim();

      if (!firstName || !lastName || !email || !message) {
        return;
      }

      // Simulate form submission
      const submitBtn = contactForm.querySelector('button[type="submit"]');
      const originalText = submitBtn.innerHTML;
      submitBtn.disabled = true;
      submitBtn.innerHTML = `
        <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        Sending...
      `;

      setTimeout(function () {
        contactForm.reset();
        contactForm.classList.add('hidden');
        formSuccess.classList.remove('hidden');
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;

        // Reset after 5 seconds
        setTimeout(function () {
          formSuccess.classList.add('hidden');
          contactForm.classList.remove('hidden');
        }, 5000);
      }, 1500);
    });
  }

  // ─── Smooth scroll for anchor links ───────────────────────────────────────
  document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
    anchor.addEventListener('click', function (e) {
      const targetId = this.getAttribute('href');
      if (targetId === '#') return;

      const targetElement = document.querySelector(targetId);
      if (targetElement) {
        e.preventDefault();
        const offsetTop = targetElement.getBoundingClientRect().top + window.pageYOffset - 80;
        window.scrollTo({
          top: offsetTop,
          behavior: 'smooth'
        });
      }
    });
  });

  // ─── Image lazy load fade-in ──────────────────────────────────────────────
  document.querySelectorAll('img[loading="lazy"]').forEach(function (img) {
    if (img.complete) {
      img.classList.add('loaded');
    } else {
      img.addEventListener('load', function () {
        img.classList.add('loaded');
      });
      img.addEventListener('error', function () {
        img.classList.add('loaded');
      });
    }
  });

})();