// src/shared.jsx — small components, data, helpers shared across artboards
// Exposes to window so other Babel script files can use them.

// ─────────────────────────────────────────────────────────────
// Icons — Lucide-style line, hand-traced as SVG so we don't pull a library.
// All 24×24, currentColor.
// ─────────────────────────────────────────────────────────────
const LC_Icon = ({ d, size = 20, stroke = 1.6, className, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={stroke}
       strokeLinecap="round" strokeLinejoin="round"
       className={className} style={style}>
    {typeof d === 'string' ? <path d={d} /> : d}
  </svg>
);

const Icon = {
  search: (p) => <LC_Icon {...p} d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" />,
  plus:   (p) => <LC_Icon {...p} d="M12 5v14M5 12h14" />,
  edit:   (p) => <LC_Icon {...p} d="M12 20h9M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4 12.5-12.5z" />,
  trash:  (p) => <LC_Icon {...p} d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M10 11v6M14 11v6M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14" />,
  share:  (p) => <LC_Icon {...p} d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4-4 4M12 2v14" />,
  sun:    (p) => <LC_Icon {...p} d="M12 4V2M12 22v-2M4 12H2M22 12h-2M5.6 5.6L4.2 4.2M19.8 19.8l-1.4-1.4M5.6 18.4l-1.4 1.4M19.8 4.2l-1.4 1.4M16 12a4 4 0 11-8 0 4 4 0 018 0z" />,
  bulb:   (p) => <LC_Icon {...p} d="M9 18h6M10 22h4M12 2a7 7 0 00-4 12.7c.6.5 1 1.3 1 2.3v1h6v-1c0-1 .4-1.8 1-2.3A7 7 0 0012 2z" />,
  camera: (p) => <LC_Icon {...p} d="M3 9a2 2 0 012-2h2.5l2-3h5l2 3H21a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V9zM13 17a4 4 0 100-8 4 4 0 000 8z" />,
  link:   (p) => <LC_Icon {...p} d="M10 13a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1M14 11a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1" />,
  upload: (p) => <LC_Icon {...p} d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12" />,
  list:   (p) => <LC_Icon {...p} d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />,
  grid:   (p) => <LC_Icon {...p} d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" />,
  chevD:  (p) => <LC_Icon {...p} d="M6 9l6 6 6-6" />,
  chevR:  (p) => <LC_Icon {...p} d="M9 6l6 6-6 6" />,
  check:  (p) => <LC_Icon {...p} d="M20 6L9 17l-5-5" />,
  x:      (p) => <LC_Icon {...p} d="M18 6L6 18M6 6l12 12" />,
  filter: (p) => <LC_Icon {...p} d="M3 4h18l-7 9v6l-4 2v-8L3 4z" />,
  sort:   (p) => <LC_Icon {...p} d="M3 6h12M3 12h8M3 18h4M17 7v12M17 19l3-3M17 19l-3-3" />,
  user:   (p) => <LC_Icon {...p} d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z" />,
  bookmark:(p)=> <LC_Icon {...p} d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2v16z" />,
  clock:  (p) => <LC_Icon {...p} d="M12 22a10 10 0 100-20 10 10 0 000 20zM12 6v6l4 2" />,
  flame:  (p) => <LC_Icon {...p} d="M12 22c4 0 7-3 7-7 0-2-1-4-2-5-1 2-3 3-3 3 0-3-1-6-4-9 0 4-3 5-4 8a8 8 0 00-1 4c0 4 3 6 7 6z" />,
  arrow:  (p) => <LC_Icon {...p} d="M5 12h14M13 5l7 7-7 7" />,
  more:   (p) => <LC_Icon {...p} d="M12 13a1 1 0 100-2 1 1 0 000 2zM5 13a1 1 0 100-2 1 1 0 000 2zM19 13a1 1 0 100-2 1 1 0 000 2z" />,
  eye:    (p) => <LC_Icon {...p} d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 15a3 3 0 100-6 3 3 0 000 6z" />,
  sparkle:(p) => <LC_Icon {...p} d="M12 3l1.5 5L18 9.5 13.5 11 12 16l-1.5-5L6 9.5 10.5 8 12 3zM20 14l.7 2.3L23 17l-2.3.7L20 20l-.7-2.3L17 17l2.3-.7L20 14zM5 16l.5 1.5L7 18l-1.5.5L5 20l-.5-1.5L3 18l1.5-.5L5 16z" />,
  expand: (p) => <LC_Icon {...p} d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />,
  undo:   (p) => <LC_Icon {...p} d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8M3 3v5h5" />,
};

// ─────────────────────────────────────────────────────────────
// Stars — fractional via overlaying filled over empty
// ─────────────────────────────────────────────────────────────
const Star = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" stroke="none">
    <path d="M12 2.5l2.95 6 6.55.95-4.75 4.6 1.12 6.5L12 17.55 6.13 20.55l1.12-6.5L2.5 9.45l6.55-.95L12 2.5z" />
  </svg>
);

const Stars = ({ value = 0, size = 14 }) => {
  const stars = [];
  for (let i = 0; i < 5; i++) {
    const filled = i < Math.round(value);
    stars.push(
      <span key={i} style={{ color: filled ? 'var(--star)' : 'var(--paper-3)', display: 'inline-flex' }}>
        <Star size={size} />
      </span>
    );
  }
  return <span className="lc-stars" style={{ gap: 1 }}>{stars}</span>;
};

// ─────────────────────────────────────────────────────────────
// Wordmark — Name + italic "Cooks."
// ─────────────────────────────────────────────────────────────
const Wordmark = ({ name = 'Luis', size = 22, color }) => (
  <span style={{
    fontFamily: 'var(--serif)',
    fontWeight: 500,
    fontSize: size,
    letterSpacing: '-0.01em',
    color: color || 'var(--ink)',
    display: 'inline-flex',
    alignItems: 'baseline',
    gap: '0.25em',
    whiteSpace: 'nowrap',
  }}>
    <span>{name}</span>
    <span style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--olive)' }}>Cooks.</span>
  </span>
);

// ─────────────────────────────────────────────────────────────
// Cost-per-serving chip
// ─────────────────────────────────────────────────────────────
const CostPerServing = ({ amount = '4.20', estimated = true, size = 'm' }) => {
  const big = size === 'l';
  return (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6 }}>
      <span style={{
        fontFamily: 'var(--serif)',
        fontWeight: 500,
        fontSize: big ? 22 : 17,
        color: 'var(--ink)',
        letterSpacing: '-0.01em',
      }}>${amount}</span>
      <span style={{
        fontFamily: 'var(--sans)',
        fontSize: 12,
        color: 'var(--ink-3)',
        fontWeight: 400,
      }}>/ serving</span>
      {estimated && (
        <span className="lc-ai" style={{ marginLeft: 4, padding: '2px 6px', fontSize: 9 }}>
          <span className="lc-ai-dot" style={{ width: 5, height: 5 }} />
          EST
        </span>
      )}
    </span>
  );
};

// ─────────────────────────────────────────────────────────────
// Recipe Card — used in library grid
// width is the card width; height auto. Photo is a square.
// ─────────────────────────────────────────────────────────────
const RecipeCard = ({ recipe, width = 260, showHover = false }) => {
  const r = recipe;
  return (
    <div style={{
      width,
      display: 'flex',
      flexDirection: 'column',
      gap: 12,
      cursor: 'pointer',
      transform: showHover ? 'translateY(-2px)' : 'none',
      transition: 'transform .15s',
    }}>
      <Thumbnail recipe={r} size={width} showHover={showHover} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <h3 style={{
          fontFamily: 'var(--serif)',
          fontWeight: 500,
          fontSize: 19,
          lineHeight: 1.2,
          color: 'var(--ink)',
          margin: 0,
          letterSpacing: '-0.01em',
        }}>{r.name}</h3>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 4 }}>
          {r.rating > 0 ? <Stars value={r.rating} size={12} /> : (
            <span style={{ fontFamily: 'var(--sans)', fontSize: 11, color: 'var(--ink-4)',
              letterSpacing: '0.1em', textTransform: 'uppercase' }}>Unrated</span>
          )}
          <span style={{ width: 1, height: 10, background: 'var(--hairline)' }} />
          <span style={{
            fontFamily: 'var(--serif)',
            fontSize: 14,
            color: 'var(--ink-2)',
          }}>${r.cost} <span style={{ fontFamily: 'var(--sans)', fontSize: 10, color: 'var(--ink-3)' }}>/ serv</span></span>
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 4, flexWrap: 'wrap' }}>
          {r.categories.slice(0, 2).map((c, i) => (
            <span key={i} style={{
              fontFamily: 'var(--sans)',
              fontSize: 11,
              fontWeight: 500,
              letterSpacing: '0.04em',
              color: 'var(--ink-3)',
              textTransform: 'lowercase',
            }}>{c}{i < Math.min(r.categories.length, 2) - 1 ? '  ·' : ''}</span>
          ))}
        </div>
      </div>
    </div>
  );
};

// Thumbnail — either an image-slot for hero recipes, or a CSS placeholder
const Thumbnail = ({ recipe, size = 260, showHover = false }) => {
  const r = recipe;
  if (r.photo === 'slot') {
    return (
      <image-slot id={`thumb-${r.id}`}
        style={{
          width: size, height: size,
          display: 'block',
          borderRadius: 6,
          overflow: 'hidden',
          boxShadow: showHover ? '0 10px 28px rgba(31,26,20,0.18)' : '0 2px 6px rgba(31,26,20,0.06)',
        }}
        placeholder={r.placeholder || r.name.toLowerCase()}
        shape="rounded"
        radius="6"
      />
    );
  }
  // CSS placeholder — warm, monochrome, monospace label
  return (
    <div style={{
      width: size, height: size,
      borderRadius: 6,
      overflow: 'hidden',
      background: r.bg || '#d9c9a8',
      position: 'relative',
      display: 'flex',
      alignItems: 'flex-end',
      padding: 14,
      boxShadow: showHover ? '0 10px 28px rgba(31,26,20,0.18)' : '0 2px 6px rgba(31,26,20,0.06)',
    }}>
      {/* faint stripes pattern */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `repeating-linear-gradient(${r.angle || 35}deg, rgba(255,255,255,0.06) 0 14px, transparent 14px 28px)`,
      }} />
      <span style={{
        position: 'relative',
        fontFamily: 'var(--mono)',
        fontSize: 11,
        color: 'rgba(31,26,20,0.55)',
        letterSpacing: '0.02em',
      }}>{r.placeholder || r.name.toLowerCase()}</span>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Recipe data — real-feeling, not lorem
// `photo` is 'slot' (drop your own), 'placeholder' (CSS), or 'none'
// ─────────────────────────────────────────────────────────────
const RECIPES = [
  {
    id: 'sichuan-chicken',
    name: 'Sichuan-style cold chicken with chilli oil',
    description: 'A weeknight standby — poach, shock in ice water, dress in the chilli oil while everything\'s cold. Better the next day.',
    rating: 5, cost: '4.20',
    categories: ['Mains', 'Asian', 'Chicken', 'Quick'],
    photo: 'slot', placeholder: 'sichuan chicken w/ chilli oil',
    bg: '#b85a3a',
    prep: '15 mins', cook: '20 mins', total: '35 mins', servings: 'serves 4', difficulty: 'easy',
    source: 'adapted from Fuchsia Dunlop',
    ingredients: [
      'For the chicken:',
      '1 whole chicken (about 1.5 kg)',
      '6 spring onions, white parts only',
      '2 thumbs of ginger, smashed',
      '2 tbsp Shaoxing wine',
      '',
      'For the chilli oil:',
      '½ cup neutral oil',
      '3 tbsp Sichuan chilli flakes',
      '1 tsp Sichuan peppercorns, lightly toasted and ground',
      '3 cloves garlic, finely grated',
      '1 tbsp light soy sauce',
      '2 tsp Chinkiang vinegar',
      '½ tsp sugar',
      '1 tbsp toasted sesame seeds',
      'Coriander and spring onion greens to finish',
    ],
    directions: [
      'Bring a large pot of water to the boil with the spring onion whites, ginger and Shaoxing. Lower the chicken in, breast down. Bring back to a bare simmer, cover, and turn off the heat. Leave for 45 minutes — do not lift the lid.',
      'Lift the chicken out and plunge into a big bowl of iced water. Leave 10 minutes. Pat dry, joint into pieces, then slice off the bone into bite-sized chunks. Arrange on a plate.',
      'For the oil: heat the neutral oil until it shimmers. Combine the chilli flakes, ground peppercorns and garlic in a heatproof bowl. Pour the hot oil over and stand back — it will bloom violently for 30 seconds. Stir in the soy, vinegar and sugar.',
      'Spoon the chilli oil generously over the chicken. Scatter with sesame, coriander and the green tops of the spring onions. Serve cold or at room temperature — never hot.',
    ],
    notes: 'Doubled the garlic last time, better. Save the poaching liquid for noodles — it\'s practically stock.',
  },
  {
    id: 'lamb-shoulder',
    name: 'Slow-roast lamb shoulder with white beans',
    description: 'Sunday lunch food. Goes in the oven mid-morning and you forget about it until the kitchen smells like a restaurant.',
    rating: 5, cost: '6.80',
    categories: ['Mains', 'Sunday', 'Lamb'],
    photo: 'slot', placeholder: 'lamb shoulder, white beans',
    bg: '#8c6a4a',
    prep: '20 mins', cook: '4 hrs', total: '4 hrs 20', servings: 'serves 6', difficulty: 'easy',
    source: 'Diana Henry, A Bird in the Hand',
    ingredients: [
      '1 lamb shoulder, bone-in (~2 kg)',
      '6 cloves garlic, sliced',
      '2 sprigs rosemary',
      '2 anchovies, finely chopped',
      'Olive oil, salt, pepper',
      '500g dried cannellini, soaked overnight',
      '1 onion, halved',
      '2 bay leaves',
      '300ml white wine',
      '500ml chicken stock',
      'Lemon, for serving',
    ],
    directions: [
      'Heat oven to 220°C. Make small incisions all over the lamb and push slivers of garlic, rosemary leaves and anchovy into them. Rub all over with oil, salt, pepper.',
      'Roast for 30 minutes to colour. Drop the oven to 140°C.',
      'Meanwhile, drain the beans and put them in a deep roasting tin with the onion, bay, wine and stock. Set the lamb on top, cover tightly with foil, and roast for 3½ hours.',
      'Uncover for the last 30 minutes to brown again. Rest 15 minutes. Pull the meat apart at the table with two forks.',
      'Serve with the beans, a squeeze of lemon, and a green salad sharp with vinegar.',
    ],
    notes: 'The Chinese fermented chilli paste in the back of the fridge is genuinely brilliant stirred through the beans at the end.',
  },
  {
    id: 'pumpkin-freekeh',
    name: 'Roast pumpkin, freekeh, burnt-butter yoghurt',
    description: '',
    rating: 4, cost: '3.10',
    categories: ['Mains', 'Vegetarian'],
    photo: 'placeholder', placeholder: 'roast pumpkin, freekeh',
    bg: '#c08a3a', angle: 28,
    prep: '15 mins', cook: '45 mins', total: '1 hr', servings: 'serves 4', difficulty: 'easy',
  },
  {
    id: 'tom-yum',
    name: 'Tom yum noodle soup',
    rating: 5, cost: '3.40',
    categories: ['Mains', 'Asian', 'Soup'],
    photo: 'placeholder', placeholder: 'tom yum, prawn, lime',
    bg: '#a83a22', angle: 50,
    prep: '10 mins', cook: '20 mins',
  },
  {
    id: 'tomato-sauce',
    name: 'Marcella Hazan\'s tomato sauce',
    rating: 5, cost: '1.20',
    categories: ['Pantry', 'Italian', 'Vegetarian'],
    photo: 'placeholder', placeholder: 'butter + tomato + onion',
    bg: '#c8533a', angle: 65,
  },
  {
    id: 'broccoli-anchovy',
    name: 'Charred broccoli with anchovy crumbs',
    rating: 4, cost: '2.40',
    categories: ['Sides', 'Vegetarian'],
    photo: 'placeholder', placeholder: 'charred broccoli + crumbs',
    bg: '#5a6b3a', angle: 18,
  },
  {
    id: 'cauliflower',
    name: 'Whole roast cauliflower, tahini, pomegranate',
    rating: 5, cost: '2.90',
    categories: ['Mains', 'Vegetarian'],
    photo: 'placeholder', placeholder: 'whole roast cauliflower',
    bg: '#d1a85a', angle: 75,
  },
  {
    id: 'pancakes',
    name: 'Buttermilk pancakes',
    rating: 5, cost: '1.10',
    categories: ['Breakfast', 'Sunday'],
    photo: 'placeholder', placeholder: 'pancakes, syrup',
    bg: '#cf9b50', angle: 42,
  },
  {
    id: 'black-beans',
    name: 'Smoky black beans with charred onion',
    rating: 4, cost: '1.80',
    categories: ['Mains', 'Vegetarian', 'Mexican'],
    photo: 'placeholder', placeholder: 'black beans, smoky',
    bg: '#3a2e22', angle: 12,
  },
  {
    id: 'miso-eggplant',
    name: 'Miso-glazed eggplant',
    rating: 5, cost: '2.20',
    categories: ['Mains', 'Asian', 'Vegetarian'],
    photo: 'placeholder', placeholder: 'miso eggplant, halves',
    bg: '#6b5d2e', angle: 60,
  },
  {
    id: 'pizza-dough',
    name: 'Saturday-night pizza dough',
    rating: 5, cost: '0.80',
    categories: ['Pantry', 'Italian', 'Saturday'],
    photo: 'placeholder', placeholder: 'pizza dough, semolina',
    bg: '#e3d0a0', angle: 25,
  },
  {
    id: 'soda-bread',
    name: 'Brown soda bread',
    rating: 0, cost: '0.60',
    categories: ['Baking', 'Pantry'],
    photo: 'placeholder', placeholder: 'soda bread loaf',
    bg: '#9c7d54', angle: 38,
  },
];

Object.assign(window, {
  LC_Icon, Icon, Star, Stars, Wordmark, CostPerServing, RecipeCard, Thumbnail, RECIPES,
});
