const { useState: _useState2, useEffect: _useEffect2, useRef: _useRef2 } = React;

// ─── 4. SAMPLE WORK BY INDUSTRY ───────────────────────────────────────────
const INDUSTRIES = [
  { slug: 'tax', name: 'Tax Office', headline: 'Trusted help for individuals & small businesses.', problem: 'Looks generic, no clear list of services, hard to schedule a consultation, no Spanish content for bilingual clients.', solution: 'A trust-forward one-page site with clear service tiers, online appointment request, and a matching Instagram presence that shares filing reminders and tips year-round.', deliverables: ['One-page website', '6 branded posts', 'Appointment form', 'Bilingual content', 'Google Maps embed'], direction: 'Calm navy + warm gold. Clean serif headlines, practical sans-serif body. Conveys reliability without feeling cold.', images: { website: 'assets/tax.png', square1: 'assets/tax-lumen.png', square2: 'assets/tax-harborline.png', portrait: 'assets/tax-northstar.png' } },
  { slug: 'salon', name: 'Hair Salon', headline: 'Glow-up starts here.', problem: 'Booking lives in DMs, posts are mismatched phone photos, no clear price list, customers ask the same questions on Instagram every week.', solution: 'A vibrant brand refresh with a booking-focused site, branded post templates for promos and reviews, and Stories highlights that answer FAQs at a glance.', deliverables: ['One-page website', '12 branded posts', 'Story highlight covers', 'Booking link section', 'Bio cleanup'], direction: 'Soft pinks + deep plum. Editorial type pairing. Photo-forward, feminine without being cliché.', images: { website: 'assets/salon-website.png', square1: 'assets/salon-square1.png', square2: 'assets/salon.png', portrait: 'assets/salon-portrait.png' } },
  { slug: 'restaurant', name: 'Restaurant', headline: 'Made fresh. Served daily.', problem: 'Menu is a blurry PDF, hours are wrong on three different sites, no easy way to view daily specials or order takeout.', solution: 'A mouth-watering one-page site with a real digital menu, daily specials section, click-to-call ordering, and weekly social posts featuring the kitchen.', deliverables: ['One-page website', '12 branded posts', 'Digital menu', 'Click-to-call', 'Weekly specials template'], direction: 'Warm reds + cream. Appetizing, hand-drawn accents. Inviting and family-friendly.', images: { website: 'assets/restaurant-website.png', square1: 'assets/restaurant-square-1.png', square2: 'assets/restaurant-square-2.png', portrait: 'assets/restaurant-portrait.png' } },
];

function IndustryCard({ ind }) {
  const { t } = useLang();
  const sw = t('sampleWork');
  const [activeImg, setActiveImg] = _useState2(0);
  const [hov, setHov] = _useState2(false);
  const images = Object.values(ind.images || {}).filter(Boolean);
  const prev = () => setActiveImg(i => (i - 1 + images.length) % images.length);
  const next = () => setActiveImg(i => (i + 1) % images.length);

  return (
    <div onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} className="glass" style={{
      borderRadius: 20, padding: 22,
      transition: 'transform 0.3s ease, box-shadow 0.3s ease',
      transform: hov ? 'translateY(-4px)' : 'translateY(0)',
      boxShadow: hov ? '0 12px 40px rgba(110,2,64,0.15)' : '0 4px 20px rgba(110,2,64,0.06)',
      display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <h3 style={{ fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 700, color: '#2A0E1A', letterSpacing: '-0.01em' }}>{ind.name}</h3>
        <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 10, color: 'rgba(42,14,26,0.35)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{sw.concept}</span>
      </div>

      {/* Full-size image viewer */}
      <div style={{ position: 'relative', borderRadius: 12, overflow: 'hidden', background: 'rgba(42,14,26,0.03)', border: '1px solid rgba(42,14,26,0.07)' }}>
        <img
          key={activeImg}
          src={images[activeImg]}
          alt={ind.name}
          style={{ width: '100%', height: 300, objectFit: 'contain', objectPosition: 'center', display: 'block', animation: 'fadeSlideIn 0.22s ease' }}
        />
        {images.length > 1 && (
          <>
            <button onClick={e => { e.stopPropagation(); prev(); }} aria-label="Previous" style={{
              position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)',
              width: 32, height: 32, borderRadius: '50%', border: 'none', zIndex: 2,
              background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(8px)',
              cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 2px 8px rgba(42,14,26,0.14)',
            }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#2A0E1A" strokeWidth="2.5"><path d="M15 18l-6-6 6-6"/></svg>
            </button>
            <button onClick={e => { e.stopPropagation(); next(); }} aria-label="Next" style={{
              position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)',
              width: 32, height: 32, borderRadius: '50%', border: 'none', zIndex: 2,
              background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(8px)',
              cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 2px 8px rgba(42,14,26,0.14)',
            }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#2A0E1A" strokeWidth="2.5"><path d="M9 18l6-6-6-6"/></svg>
            </button>
          </>
        )}
      </div>

      {/* Thumbnail strip */}
      {images.length > 1 && (
        <div style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 2 }}>
          {images.map((img, i) => (
            <button key={i} onClick={() => setActiveImg(i)} style={{
              flexShrink: 0, width: 62, height: 62,
              borderRadius: 8, overflow: 'hidden', padding: 0,
              border: i === activeImg ? '2.5px solid #D60457' : '2px solid rgba(42,14,26,0.1)',
              cursor: 'pointer', background: 'transparent', outline: 'none',
              transition: 'border-color 0.2s',
            }}>
              <img src={img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function IndustryModal({ ind, onClose }) {
  const { t } = useLang();
  const sw = t('sampleWork');
  const m = sw.modal;
  _useEffect2(() => {
    const onKey = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, []);

  if (!ind) return null;
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(42,14,26,0.55)', backdropFilter: 'blur(8px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, animation: 'fadeSlideIn 0.3s ease' }}>
      <div onClick={e => e.stopPropagation()} className="glass" style={{ background: '#FFF8F0', maxWidth: 720, width: '100%', maxHeight: '90vh', overflowY: 'auto', borderRadius: 20, padding: '36px 38px', position: 'relative' }}>
        <button onClick={onClose} aria-label="Close" style={{ position: 'absolute', top: 16, right: 16, width: 36, height: 36, borderRadius: '50%', border: '1px solid rgba(42,14,26,0.12)', background: 'rgba(255,255,255,0.6)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2A0E1A" strokeWidth="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
        </button>

        <div style={{ marginBottom: 8 }}><span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(42,14,26,0.4)' }}>{ind.name} · {sw.concept}</span></div>
        <h3 style={{ fontFamily: 'Fraunces, serif', fontSize: 30, fontWeight: 700, color: '#2A0E1A', letterSpacing: '-0.02em', lineHeight: 1.15, marginBottom: 24 }}>{ind.headline}</h3>

        <div style={{ marginBottom: 22 }}>
          <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#F62E33', marginBottom: 8 }}>{m.problem}</div>
          <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 15.5, lineHeight: 1.65, color: 'rgba(42,14,26,0.7)' }}>{ind.problem}</p>
        </div>

        <div style={{ marginBottom: 22 }}>
          <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#6E0240', marginBottom: 8 }}>{m.solution}</div>
          <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 15.5, lineHeight: 1.65, color: 'rgba(42,14,26,0.7)' }}>{ind.solution}</p>
        </div>

        <div style={{ marginBottom: 22 }}>
          <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#D60457', marginBottom: 10 }}>{m.deliverables}</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
            {ind.deliverables.map((d, i) => (
              <span key={i} style={{ padding: '5px 12px', borderRadius: 100, background: 'rgba(214,4,87,0.08)', border: '1px solid rgba(214,4,87,0.22)', fontFamily: 'DM Sans, sans-serif', fontSize: 12.5, fontWeight: 500, color: '#6E0240' }}>{d}</span>
            ))}
          </div>
        </div>

        <div style={{ marginBottom: 28, padding: '14px 18px', borderRadius: 12, background: 'rgba(255,199,28,0.08)', border: '1px solid rgba(255,199,28,0.22)' }}>
          <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#FB761F', marginBottom: 5 }}>{m.visualDirection}</div>
          <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, lineHeight: 1.55, color: 'rgba(42,14,26,0.65)', fontStyle: 'italic' }}>{ind.direction}</p>
        </div>

        <a href="#quote-form" onClick={onClose} className="btn-primary" style={{ width: '100%', justifyContent: 'center' }}>
          {m.getQuote}
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </a>
      </div>
    </div>
  );
}

function SampleWorkByIndustry() {
  const { t } = useLang();
  const sw = t('sampleWork');
  const [ref, inView] = useInView(0.05);

  return (
    <section id="sample-work" style={{ padding: '120px 48px' }}>
      <div ref={ref} style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 60, opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(22px)', transition: 'opacity 0.7s, transform 0.7s' }}>
          <div style={{ marginBottom: 12 }}><span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(42,14,26,0.35)' }}>{sw.eyebrow}</span></div>
          <h2 style={{ fontFamily: 'Fraunces, serif', fontSize: 'clamp(30px,3.2vw,46px)', fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em', color: '#2A0E1A', marginBottom: 14 }}>{sw.title}</h2>
          <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 17, color: 'rgba(42,14,26,0.5)', maxWidth: 560, margin: '0 auto' }}>{sw.subtitle}</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }} className="services-grid">
          {INDUSTRIES.map((ind) => <IndustryCard key={ind.slug} ind={ind} />)}
        </div>
      </div>
    </section>
  );
}

window.SampleWorkByIndustry = SampleWorkByIndustry;