// Longworth Seeds — shared UI primitives
const { useState, useEffect, useRef, useCallback, useMemo } = React;

const PHONE_SEED = '0417 073 187';
const PHONE_SEED_HREF = 'tel:+61417073187';
const PHONE_CATTLE = '0438 950 900';
const PHONE_CATTLE_HREF = 'tel:+61438950900';

// "primary" phone shown in header
const PHONE = PHONE_SEED;
const PHONE_HREF = PHONE_SEED_HREF;

const ADDRESS_LINE1 = '69 Longworths Rd';
const ADDRESS_LINE2 = 'Harrington NSW 2427';
const ADDRESS = `${ADDRESS_LINE1}, ${ADDRESS_LINE2}`;
const REGION = 'Mid North Coast, NSW';

const EMAIL_SEED = 'david@longworthseeds.com.au';
const EMAIL_CATTLE = 'kundlepark@yahoo.com.au';
const EMAIL = EMAIL_SEED;

const FOUNDED = 1935;

const ROUTES = [
  { id: 'home',     label: 'Home' },
  { id: 'seed',     label: 'Seed' },
  { id: 'cattle',   label: 'Cattle & Hay' },
  { id: 'heritage', label: 'Heritage' },
  { id: 'contact',  label: 'Contact' },
];

// ---------- Icons ----------
const Icon = {
  phone: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z" />
    </svg>
  ),
  arrow: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  ),
  check: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M20 6 9 17l-5-5" />
    </svg>
  ),
  pin: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0Z" />
      <circle cx="12" cy="10" r="3" />
    </svg>
  ),
  mail: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="2" y="4" width="20" height="16" rx="2" />
      <path d="m22 6-10 7L2 6" />
    </svg>
  ),
};

// ---------- Cinematic photo ----------
// `src` — image asset path
// `alt` — accessible description
// `ratio` — CSS aspect-ratio (e.g. '4/5', '21/9')
// `pan`   — 'slow' | 'none'  -> applies Ken Burns drift
// `pos`   — object-position, default '50% 50%'
// `dark`  — overlay strength 0–1 for legibility over the image
function Photo({ src, alt = '', ratio, pos = '50% 50%', pan = 'none', dark = 0, label, coord, children, style, className = '' }) {
  return (
    <div className={`photo-frame ${className}`} style={{ aspectRatio: ratio, ...style }}>
      {src ? (
        <img
          src={src}
          alt={alt}
          className={pan === 'slow' ? 'kenburns' : ''}
          style={{ objectPosition: pos }}
        />
      ) : (
        <div className="photo-stripes" />
      )}
      {dark > 0 && <div className="photo-shade" style={{ background: `linear-gradient(180deg, rgba(8,14,28,${dark*0.4}) 0%, rgba(8,14,28,${dark*0.1}) 40%, rgba(8,14,28,${dark*0.85}) 100%)` }} />}
      {coord && <span className="photo-coord">{coord}</span>}
      {label && <span className="photo-label">▢ {label}</span>}
      {children}
    </div>
  );
}

// ---------- Header ----------
function Header({ route, onNav, transparent }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={`header ${transparent ? 'transparent' : ''} ${scrolled ? 'scrolled' : ''}`}>
      <div className="wrap header-inner">
        <a className="brand" href="#home" onClick={(e) => { e.preventDefault(); onNav('home'); }}>
          <div className="brand-mark">
            <img src="assets/longworth-logo.png" alt="Longworth Seeds" />
          </div>
          <div className="brand-text">
            <span className="wordmark">LONGWORTH</span>
            <span className="submark">SEEDS · EST. 1935</span>
          </div>
        </a>
        <nav className="nav">
          {ROUTES.map(r => (
            <a
              key={r.id}
              href={`#${r.id}`}
              className={route === r.id ? 'active' : ''}
              onClick={(e) => { e.preventDefault(); onNav(r.id); }}
            >{r.label}</a>
          ))}
        </nav>
        <a className="header-phone" href={PHONE_HREF}>
          <Icon.phone />
          <span>{PHONE}</span>
        </a>
      </div>
    </header>
  );
}

// ---------- Footer ----------
function Footer({ onNav }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 38, height: 38 }}>
                <img src="assets/longworth-logo.png" alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, color: '#fff' }}>
                <span style={{ fontWeight: 700, letterSpacing: '0.04em', fontSize: 16 }}>LONGWORTH</span>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.36em', marginTop: 4, opacity: 0.6 }}>SEEDS · EST. {FOUNDED}</span>
              </div>
            </div>
            <p className="footer-tagline">
              Fourth-generation Paspalum, Carpet Grass <em>&amp; tropical pasture seed.</em>
            </p>
            <a className="btn btn-primary" href={PHONE_HREF}>
              <Icon.phone />
              Call David · {PHONE_SEED}
            </a>
          </div>
          <div>
            <h4>Pages</h4>
            <ul>
              {ROUTES.map(r => (
                <li key={r.id}><a href={`#${r.id}`} onClick={(e)=>{e.preventDefault(); onNav(r.id);}}>{r.label}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h4>Seeds we grade</h4>
            <ul>
              <li><a href="#seed" onClick={(e)=>{e.preventDefault(); onNav('seed');}}>Paspalum dilatatum</a></li>
              <li><a href="#seed" onClick={(e)=>{e.preventDefault(); onNav('seed');}}>Carpet Grass</a></li>
              <li><a href="#seed" onClick={(e)=>{e.preventDefault(); onNav('seed');}}>Premier Digitaria</a></li>
              <li><a href="#seed" onClick={(e)=>{e.preventDefault(); onNav('seed');}}>Gatton · Bambatsi</a></li>
              <li><a href="#seed" onClick={(e)=>{e.preventDefault(); onNav('seed');}}>Green Panic</a></li>
            </ul>
          </div>
          <div>
            <h4>Get in touch</h4>
            <ul>
              <li>
                <span style={{ display: 'block', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.5, marginBottom: 2 }}>Seed · David</span>
                <a href={PHONE_SEED_HREF}>{PHONE_SEED}</a>
              </li>
              <li>
                <span style={{ display: 'block', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.5, marginBottom: 2 }}>Cattle &amp; Hay · Peter</span>
                <a href={PHONE_CATTLE_HREF}>{PHONE_CATTLE}</a>
              </li>
              <li style={{ opacity: 0.7 }}>{ADDRESS_LINE1}<br />{ADDRESS_LINE2}</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} LONGWORTH SEEDS · KUNDLE PARK PTY LTD</span>
          <span>FOURTH GENERATION · HARRINGTON NSW · EST. {FOUNDED}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  PHONE, PHONE_HREF, PHONE_SEED, PHONE_SEED_HREF, PHONE_CATTLE, PHONE_CATTLE_HREF,
  ADDRESS, ADDRESS_LINE1, ADDRESS_LINE2, REGION,
  EMAIL, EMAIL_SEED, EMAIL_CATTLE,
  FOUNDED, ROUTES,
  Icon, Photo, Header, Footer,
});