// Tryovi -- shared UI primitives
// =============================================================================

const TRYOVI = {
  brand: 'TRYOVI',
  tagline: 'Studio',
  loc: 'STORE 04 · MUMBAI',
};

// Photo URLs from Unsplash (curated fashion editorial shots)
const PEOPLE = {
  // Hero / welcome attract
  attract1: 'https://images.unsplash.com/photo-1581338834647-b0fb40704e21?w=900&q=80',
  attract2: 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=900&q=80',
  attract3: 'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=900&q=80',
  // Camera capture (live model in viewfinder) -- woman standing, neutral
  liveModel: 'https://images.unsplash.com/photo-1488161628813-04466f872be2?w=900&q=80',
  // Captured selfie (still)
  captured: 'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=900&q=80',
  // Result variations -- 4 full-body editorial shots
  result1: 'https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=900&q=80',
  result2: 'https://images.unsplash.com/photo-1485518882345-15568b007407?w=900&q=80',
  result3: 'https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&q=80',
  result4: 'https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=900&q=80',
};

const GARMENTS_WOMEN = [
  { id: 'w1', name: 'Aria Slip Dress', price: '₹4,890', tag: 'New', color: '#FF3D6E', img: 'https://images.unsplash.com/photo-1539008835657-9e8e9680c956?w=600&q=80' },
  { id: 'w2', name: 'Marlowe Blazer Set', price: '₹8,200', tag: 'Trending', color: '#0A0A0A', img: 'https://images.unsplash.com/photo-1554412933-514a83d2f3c8?w=600&q=80' },
  { id: 'w3', name: 'Solène Midi', price: '₹5,400', tag: '', color: '#E8FF4A', img: 'https://images.unsplash.com/photo-1583846783214-7229a91b20ed?w=600&q=80' },
  { id: 'w4', name: 'Linen Wrap Dress', price: '₹3,990', tag: '', color: '#D4502A', img: 'https://images.unsplash.com/photo-1572804013309-59a88b7e92f1?w=600&q=80' },
  { id: 'w5', name: 'Velvet Gown', price: '₹12,500', tag: 'Couture', color: '#7A1F8C', img: 'https://images.unsplash.com/photo-1566174053879-31528523f8ae?w=600&q=80' },
  { id: 'w6', name: 'Silk Co-ord', price: '₹6,790', tag: '', color: '#2540FF', img: 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=600&q=80' },
  { id: 'w7', name: 'Cotton Sundress', price: '₹2,890', tag: '', color: '#F7F2EA', img: 'https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=600&q=80' },
  { id: 'w8', name: 'Asymm. Knit Dress', price: '₹4,200', tag: 'New', color: '#0A0A0A', img: 'https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?w=600&q=80' },
];

const GARMENTS_MEN = [
  { id: 'm1', name: 'Tailored Shirt', price: '₹3,490', tag: '', color: '#F7F2EA', img: 'https://images.unsplash.com/photo-1602810316693-3667c854239a?w=600&q=80' },
  { id: 'm2', name: 'Linen Co-ord', price: '₹6,200', tag: 'Trending', color: '#D4502A', img: 'https://images.unsplash.com/photo-1622519407650-3df9883f76a5?w=600&q=80' },
  { id: 'm3', name: 'Bandhgala Jacket', price: '₹14,800', tag: 'Couture', color: '#0A0A0A', img: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&q=80' },
  { id: 'm4', name: 'Polo Knit', price: '₹2,490', tag: '', color: '#2540FF', img: 'https://images.unsplash.com/photo-1620012253295-c15cc3e65df4?w=600&q=80' },
  { id: 'm5', name: 'Kurta Set', price: '₹5,890', tag: 'New', color: '#E8FF4A', img: 'https://images.unsplash.com/photo-1610652492500-ded49ceeb378?w=600&q=80' },
  { id: 'm6', name: 'Wool Suit', price: '₹18,400', tag: '', color: '#1a1a1a', img: 'https://images.unsplash.com/photo-1594938298603-c8148c4dae35?w=600&q=80' },
  { id: 'm7', name: 'Denim Shacket', price: '₹4,790', tag: '', color: '#2540FF', img: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=600&q=80' },
  { id: 'm8', name: 'Crew Tee', price: '₹1,290', tag: '', color: '#FF3D6E', img: 'https://images.unsplash.com/photo-1581655353564-df123a1eb820?w=600&q=80' },
];

const GARMENTS_KIDS = [
  { id: 'k1', name: 'Stripe Tee Set', price: '₹1,490', tag: '', color: '#FF3D6E', img: 'https://images.unsplash.com/photo-1519278409-1f56fdda7fe5?w=600&q=80' },
  { id: 'k2', name: 'Dungaree', price: '₹2,290', tag: 'New', color: '#2540FF', img: 'https://images.unsplash.com/photo-1518831959646-742c3a14ebf7?w=600&q=80' },
  { id: 'k3', name: 'Party Frock', price: '₹3,490', tag: '', color: '#E8FF4A', img: 'https://images.unsplash.com/photo-1622290291468-a28f7a7dc6a8?w=600&q=80' },
  { id: 'k4', name: 'Hoodie & Pant', price: '₹2,690', tag: 'Trending', color: '#7A1F8C', img: 'https://images.unsplash.com/photo-1543854704-783ce63cd62b?w=600&q=80' },
  { id: 'k5', name: 'Cotton Romper', price: '₹1,790', tag: '', color: '#F7F2EA', img: 'https://images.unsplash.com/photo-1503944583220-79d8926ad5e2?w=600&q=80' },
  { id: 'k6', name: 'Kurta Pyjama', price: '₹2,490', tag: '', color: '#D4502A', img: 'https://images.unsplash.com/photo-1622445275576-721325763afe?w=600&q=80' },
  { id: 'k7', name: 'Denim Jacket', price: '₹2,990', tag: '', color: '#2540FF', img: 'https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?w=600&q=80' },
  { id: 'k8', name: 'Tutu Dress', price: '₹3,290', tag: 'New', color: '#FF3D6E', img: 'https://images.unsplash.com/photo-1518831959646-742c3a14ebf7?w=600&q=80' },
];

const ALL_GARMENTS = { women: GARMENTS_WOMEN, men: GARMENTS_MEN, kids: GARMENTS_KIDS };

// Status bar (kiosk chrome)
function StatusBar({ dark, time = '14:32', step, total }) {
  return (
    <div className={'status-bar' + (dark ? ' dark' : '')}>
      <div>TRYOVI · KIOSK 04</div>
      <div style={{ display: 'flex', gap: 18 }}>
        {step != null && <span>STEP {String(step).padStart(2,'0')} / {String(total).padStart(2,'0')}</span>}
        <span>{time}</span>
      </div>
    </div>
  );
}

// Logo lockup
function Logo({ size = 32, color }) {
  return (
    <span className="logo" style={{ fontSize: size, color: color || 'inherit' }}>
      Tryovi<span className="logo-dot"></span>
    </span>
  );
}

// Body silhouette outline (for camera viewfinder guide)
function BodyGuide({ stroke = '#E8FF4A', opacity = 0.85 }) {
  return (
    <svg viewBox="0 0 400 800" style={{ width: '100%', height: '100%', opacity }} fill="none" stroke={stroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="8 8">
      {/* head */}
      <ellipse cx="200" cy="120" rx="62" ry="78" />
      {/* shoulders + torso */}
      <path d="M 110 230 Q 140 215 200 215 Q 260 215 290 230 L 320 380 Q 290 460 280 560 L 270 720 L 220 720 L 215 580 L 200 580 L 185 580 L 180 720 L 130 720 L 120 560 Q 110 460 80 380 Z" />
      {/* arms */}
      <path d="M 110 230 Q 70 320 60 440 Q 58 510 75 560" />
      <path d="M 290 230 Q 330 320 340 440 Q 342 510 325 560" />
    </svg>
  );
}

// Hand / palm SVG (for palm-up screen)
function PalmIcon({ size = 320, color = '#FF3D6E' }) {
  return (
    <svg viewBox="0 0 200 240" style={{ width: size, height: 'auto' }} fill="none" stroke={color} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round">
      {/* palm */}
      <path d="M 60 200 L 60 130 Q 60 110 50 100 L 40 80 Q 32 64 46 56 Q 60 50 70 70 L 80 100 L 80 70 Q 80 50 96 50 Q 110 50 110 70 L 110 100 L 110 60 Q 110 40 126 40 Q 140 40 140 60 L 140 100 L 140 70 Q 140 52 154 52 Q 166 52 166 70 L 166 130 Q 166 180 145 210 L 100 230 Q 60 230 60 200 Z" />
      {/* palm lines */}
      <path d="M 80 150 Q 100 160 130 145" opacity="0.6" />
      <path d="M 85 175 Q 105 182 125 170" opacity="0.4" />
    </svg>
  );
}

// QR code (faked but plausible-looking pattern)
function QR({ size = 280 }) {
  // Generate a stable pseudo-random QR pattern
  const cells = [];
  const seed = 42;
  for (let i = 0; i < 21 * 21; i++) {
    const r = i / 7 + Math.sin(i * seed) * 100;
    cells.push(r % 1 < 0.5);
  }
  // Force finder patterns (corners)
  function setFinder(rx, ry) {
    for (let y = 0; y < 7; y++) {
      for (let x = 0; x < 7; x++) {
        const idx = (ry + y) * 21 + (rx + x);
        const onEdge = x === 0 || x === 6 || y === 0 || y === 6;
        const inner = x >= 2 && x <= 4 && y >= 2 && y <= 4;
        cells[idx] = onEdge || inner;
      }
    }
  }
  // clear corner regions then fill
  for (let y = 0; y < 9; y++) for (let x = 0; x < 9; x++) {
    if (x < 8 && y < 8) cells[y * 21 + x] = false;
    if (x < 8 && y < 8) cells[y * 21 + (20 - x)] = false;
    if (x < 8 && y < 8) cells[(20 - y) * 21 + x] = false;
  }
  setFinder(0, 0);
  setFinder(14, 0);
  setFinder(0, 14);
  return (
    <div className="qr" style={{ width: size, height: size }}>
      {cells.map((on, i) => <div key={i} className={on ? '' : 'off'} />)}
    </div>
  );
}

// Pulsing wave hand glyph for attract loop
function WaveHand({ size = 60 }) {
  return (
    <span style={{ display: 'inline-block', fontSize: size, transformOrigin: '70% 70%', animation: 'float 2.4s ease-in-out infinite' }}>
      <svg viewBox="0 0 64 64" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
        <path d="M 22 50 L 22 30 Q 22 22 26 22 Q 30 22 30 30 L 30 18 Q 30 12 34 12 Q 38 12 38 18 L 38 28 L 38 16 Q 38 10 42 10 Q 46 10 46 18 L 46 30 L 46 22 Q 46 16 50 16 Q 54 16 54 24 L 54 38 Q 54 52 42 56 L 30 56 Q 22 56 22 50 Z" />
      </svg>
    </span>
  );
}

// Decorative star / sparkle
function Sparkle({ size = 24, color = '#FF3D6E' }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill={color}>
      <path d="M12 0 L13.5 9 L24 12 L13.5 15 L12 24 L10.5 15 L0 12 L10.5 9 Z" />
    </svg>
  );
}

Object.assign(window, {
  TRYOVI, PEOPLE, GARMENTS_WOMEN, GARMENTS_MEN, GARMENTS_KIDS, ALL_GARMENTS,
  StatusBar, Logo, BodyGuide, PalmIcon, QR, WaveHand, Sparkle,
});