// Services + Products + Seasonality

// Map our `illo` keys to Unsplash photo IDs. Using stable, curated IDs of well-shot,
// editorial produce photography (license-free under the Unsplash license). Served
// directly from images.unsplash.com with auto crop + width param so each card gets
// a fast, square thumbnail. Replace with real P&L photography when available.
const PRODUCT_PHOTOS = {
  Strawberry: '1464965911861-746a04b4bca6',     // strawberries punnet
  Cherry:     '1528821128474-27f963b062bf',     // glossy red cherries
  Peach:      '1595124854949-2ad65d31c4cf',     // peaches close up
  Lemon:      '1590502593747-42a996133562',     // lemons on branch
  Grape:      '1599819177626-d1aab98f2b5b',     // grapes vineyard
  Apple:      '1568702846914-96b305d2aaeb',     // red apples
  Mango:      '1605027990121-3b2c6093e4b3',     // mangoes
  Tomato:     '1592924357228-91a4daadcfea',     // ripe tomatoes
  Pepper:     '1563565375-f3fdfdbefa83',        // mixed peppers
  Cucumber:   '1604977042946-1eecc30f269e',     // cucumbers
  Onion:      '1518977676601-b53f82aba655',     // red onions
  Broccoli:   '1459411552884-841db9b3cc2a',     // broccoli
};

// Returns a square Unsplash image URL for a product. The width=400 keeps file
// sizes reasonable; the auto=format,compress and fit=crop params let the CDN
// pick the right format and centre-crop the produce.
function productPhoto(illo, w=400){
  const id = PRODUCT_PHOTOS[illo] || PRODUCT_PHOTOS.Apple;
  return `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=${w}&q=75`;
}

const SERVICES = [
  { icon:'Tag', title:'Supplier Pricing', body:'Direct sourcing from UK & European wholesale markets. Transparent margins, competitive landed cost.', stat:'40+ partner farms' },
  { icon:'Globe', title:'Global Reach', body:'Delivering to 20+ destinations across Africa, the Middle East, and select global markets.', stat:'20+ countries' },
  { icon:'Doc', title:'Documentation', body:'Phytosanitary, EUR.1, Certificate of Origin, AWBs, packing lists. Fully handled in-house.', stat:'72h turnaround' },
  { icon:'Plane', title:'Air Freight Logistics', body:'Coordinated end-to-end via Emirates, Qatar, KLM fresh cargo. 2–8°C handled throughout.', stat:'2–8°C cold chain' },
];

function Services(){
  return (
    <section id="services" className="section-pad" style={{background:'var(--paper-2)'}}>
      <div className="container">
        <div style={{textAlign:'center', marginBottom:60}}>
          <div className="eyebrow" style={{marginBottom:20}}>What we do</div>
          <h2 className="h-1" style={{margin:'0 auto', maxWidth:'14ch'}}>One partner. <em>The full export stack.</em></h2>
          <p className="lead" style={{margin:'20px auto 0', maxWidth:480}}>
            From a single peach order to a full pallet programme. Pricing, paperwork and air freight handled by one team.
          </p>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:0, border:'1px solid var(--line)', borderRadius:'var(--radius-lg)', overflow:'hidden', background:'var(--paper)'}} className="svc-grid">
          {SERVICES.map((s,i)=>{
            const I = Icon[s.icon];
            return (
              <div key={i} style={{
                padding:'40px 40px 36px',
                borderRight: i%2===0 ? '1px solid var(--line)' : 'none',
                borderBottom: i<2 ? '1px solid var(--line)' : 'none',
                display:'flex', flexDirection:'column', gap:18, minHeight:260,
                position:'relative', transition:'background 0.2s'
              }}
              onMouseEnter={e=>e.currentTarget.style.background='var(--paper-2)'}
              onMouseLeave={e=>e.currentTarget.style.background='var(--paper)'}>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'start'}}>
                  <div style={{
                    width:48, height:48, borderRadius:12,
                    background:'var(--forest)', color:'var(--cream)',
                    display:'flex', alignItems:'center', justifyContent:'center'
                  }}>
                    <I size={22}/>
                  </div>
                  <span className="mono">0{i+1} / 04</span>
                </div>
                <h3 className="h-3" style={{margin:'8px 0 0'}}>{s.title}</h3>
                <p style={{margin:0, fontSize:15, color:'var(--ink-2)', lineHeight:1.55, flex:1}}>{s.body}</p>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:14, borderTop:'1px solid var(--line-soft)'}}>
                  <span style={{fontSize:13, fontWeight:600, color:'var(--tomato)'}}>{s.stat}</span>
                  <Icon.Arrow size={16}/>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <style>{`
        @media (max-width: 800px) {
          .svc-grid { grid-template-columns: 1fr !important; }
          .svc-grid > div { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
          .svc-grid > div:last-child { border-bottom: none !important; }
        }
      `}</style>
    </section>
  );
}

// Season formatting lives at module scope — both the catalogue rows and the PDF
// export need it, so it must not be trapped inside either one.
const MONTH_NAMES = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
function formatMonthRange(months){
  if (!months || months.length === 0) return '—';
  if (months.length === 12) return 'Year-round';
  const set = new Set(months);
  // Treat the year as a circle so winter windows read "Oct–Mar", not "Jan–Mar, Oct–Dec".
  // A run starts at any month whose predecessor is absent.
  const runs = [];
  for (let m = 0; m < 12; m++){
    if (!set.has(m) || set.has((m + 11) % 12)) continue;
    let end = m;
    while (set.has((end + 1) % 12) && (end + 1) % 12 !== m) end = (end + 1) % 12;
    runs.push(m === end ? MONTH_NAMES[m] : `${MONTH_NAMES[m]}–${MONTH_NAMES[end]}`);
  }
  return runs.join(', ');
}

// Combined catalogue. months: 0-indexed (0=Jan).
// Seasons are an estimate of each line's growing window at the origin recorded.
const PRODUCTS = [
  // ─── Berries ─────────────────────────────────────────
  { name:'Strawberry, Leticia', cat:'Berries', illo:'Strawberry', months:[1,2,3,4,5], origin:'ES', pack:'1 kg' },
  { name:'Strawberry, Blanche (White)', cat:'Berries', illo:'Strawberry', months:[1,2,3,4,5], origin:'ES', pack:'1 kg' },
  { name:'Strawberry, British (Vibrant, Honeoye, Malling™ Centenary)', cat:'Berries', illo:'Strawberry', months:[4,5,6,7,8], origin:'GB', pack:'8 × 1 kg' },
  { name:'Strawberry, Gariguette (Ciflorette, Magnum)', cat:'Berries', illo:'Strawberry', months:[1,2,3,4,5], origin:'FR, IT, MA' },
  { name:'Blueberry', cat:'Berries', illo:'Strawberry', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'MA, PE', pack:'12 × 125 g' },
  { name:'Raspberry', cat:'Berries', illo:'Strawberry', months:[3,4,5,6,7,8,9], origin:'PT, ES', pack:'12 × 125 g' },
  { name:'Blackberry', cat:'Berries', illo:'Strawberry', months:[5,6,7,8], origin:'Import' },
  { name:'Redcurrant', cat:'Berries', illo:'Cherry', months:[5,6,7], origin:'NL', pack:'12 × 125 g' },
  { name:'Charlotte Strawberry', cat:'Berries', illo:'Strawberry', months:[2,3,4,5], origin:'FR' },
  { name:'Mara des Bois Strawberry', cat:'Berries', illo:'Strawberry', months:[2,3,4,5], origin:'FR' },

  // ─── Cherries ────────────────────────────────────────
  { name:'Cherry Burlat (Cal 24/26/30/32/34)', cat:'Cherries', illo:'Cherry', months:[4,5,6], origin:'FR' },
  { name:'Cherry Summit (Cal 24/26/30/32/34)', cat:'Cherries', illo:'Cherry', months:[4,5,6], origin:'FR', pack:'5 kg' },
  { name:'Cherry Folfer (Cal 24/26/30/32/34)', cat:'Cherries', illo:'Cherry', months:[4,5,6], origin:'FR' },
  { name:'Cherry Giant Red (Cal 24/26/30/32/34)', cat:'Cherries', illo:'Cherry', months:[4,5,6], origin:'FR' },
  { name:'Cherry Duroni (Cal 24/26/30/32/34)', cat:'Cherries', illo:'Cherry', months:[4,5,6], origin:'FR', pack:'5 kg' },
  { name:'Cherry Kordia (Cal 24/26/30/32/34)', cat:'Cherries', illo:'Cherry', months:[5,6,7], origin:'BE', pack:'5 kg' },
  { name:'Cherry Rainier (Cal 24/26/30/32/34)', cat:'Cherries', illo:'Cherry', months:[5,6,7], origin:'BE', pack:'5 kg' },
  { name:'Cherry (Sweetheart, Skeena, Lapins) (Cal 28/30/32/34)', cat:'Cherries', illo:'Cherry', months:[6,7], origin:'CA', pack:'5 kg' },

  // ─── Stone Fruit ─────────────────────────────────────
  { name:'Flat Peach, White Flesh', cat:'Stone Fruit', illo:'Peach', months:[5,6,7,8], origin:'ES, FR', pack:'5 kg' },
  { name:'Peach, White Flesh', cat:'Stone Fruit', illo:'Peach', months:[5,6,7,8], origin:'ES, FR' },
  { name:'Peach, Yellow Flesh', cat:'Stone Fruit', illo:'Peach', months:[5,6,7,8], origin:'ES, FR, IT' },
  { name:'Vineyard Peach (Pêche de Vigne)', cat:'Stone Fruit', illo:'Peach', months:[7,8], origin:'FR' },
  { name:'Nectarine, White Flesh', cat:'Stone Fruit', illo:'Peach', months:[5,6,7,8], origin:'ES, FR' },
  { name:'Nectarine, Yellow Flesh', cat:'Stone Fruit', illo:'Peach', months:[5,6,7,8], origin:'ES, FR, IT' },
  { name:'Flat Nectarine', cat:'Stone Fruit', illo:'Peach', months:[5,6,7,8], origin:'ES, FR' },
  { name:'Apricot, Orange type', cat:'Stone Fruit', illo:'Peach', months:[5,6,7], origin:'FR, ES', pack:'5 kg' },
  { name:'Apricot (Bergeron / Bergarouge)', cat:'Stone Fruit', illo:'Peach', months:[5,6,7], origin:'FR' },

  // ─── Plums ───────────────────────────────────────────
  { name:'Red Plum', cat:'Plums', illo:'Cherry', months:[6,7,8], origin:'FR' },
  { name:'Plum, Grenadine (Red)', cat:'Plums', illo:'Cherry', months:[6,7,8], origin:'FR' },
  { name:'Plum, Golden (Yellow)', cat:'Plums', illo:'Cherry', months:[6,7,8], origin:'FR', pack:'5 kg' },
  { name:'Plum, Greengage (Reine-Claude Dorée)', cat:'Plums', illo:'Cherry', months:[6,7], origin:'FR', pack:'5 kg' },
  { name:'Plum, Mirabelle (Yellow)', cat:'Plums', illo:'Cherry', months:[7,8], origin:'FR' },
  { name:'Plum, Quetsche (Blue)', cat:'Plums', illo:'Cherry', months:[7,8,9], origin:'FR' },
  { name:'Plum, Stanley (Purple)', cat:'Plums', illo:'Cherry', months:[6,7,8], origin:'FR, IT' },

  // ─── Figs ────────────────────────────────────────────
  { name:'Fig, Black', cat:'Figs', illo:'Cherry', months:[6,7,8,9], origin:'ES' },
  { name:'Fig, Green', cat:'Figs', illo:'Cherry', months:[6,7,8,9], origin:'EU' },

  // ─── Grapes ──────────────────────────────────────────
  { name:'Grape, White Seedless (Italia Due, Cotton Candy)', cat:'Grapes', illo:'Grape', months:[7,8,9,10], origin:'IT, PT' },
  { name:'Grape, Pink Seedless (Rosé)', cat:'Grapes', illo:'Grape', months:[7,8,9,10], origin:'IT' },
  { name:'Grape, White Seeded (Vittoria)', cat:'Grapes', illo:'Grape', months:[7,8,9,10], origin:'IT' },
  { name:'Grape, Black Seeded (Muscat Hamburg)', cat:'Grapes', illo:'Grape', months:[7,8,9], origin:'FR' },
  { name:'Grape, White Wine (Chasselas)', cat:'Grapes', illo:'Grape', months:[7,8,9], origin:'FR' },
  { name:'Grape, Black Seeded (Lavallée)', cat:'Grapes', illo:'Grape', months:[7,8,9,10], origin:'FR' },
  { name:'Grape, Black Seedless (Black Magic)', cat:'Grapes', illo:'Grape', months:[7,8,9,10], origin:'IT' },
  { name:'Grape, Red Seeded (Red Globe)', cat:'Grapes', illo:'Grape', months:[7,8,9,10], origin:'IT' },

  // ─── Citrus ──────────────────────────────────────────
  { name:'Orange, Blood (Brio Sanguinelli)', cat:'Citrus', illo:'Lemon', months:[0,1,2,3], origin:'ES' },
  { name:'Orange, Juicing (Maltaise, Valencia Late, Tarocco)', cat:'Citrus', illo:'Lemon', months:[10,11,0,1,2,3,4], origin:'ES, MA, ZA' },
  { name:'Orange, Table (Navel, Lanelate, Naveline, Midnight)', cat:'Citrus', illo:'Lemon', months:[10,11,0,1,2,3,4], origin:'ES, MA, ZA, TN' },
  { name:'Clementine, Leafy (Clemenvilla, Orri)', cat:'Citrus', illo:'Lemon', months:[9,10,11,0,1], origin:'ES, MA, IL, ZA' },
  { name:'Lemon (Eureka, Primofiore, Verna)', cat:'Citrus', illo:'Lemon', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES, IT' },
  { name:'Pomelo', cat:'Citrus', illo:'Lemon', months:[10,11,0,1,2,3], origin:'ES, IT' },
  { name:'Lime', cat:'Citrus', illo:'Lemon', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'BR, MX' },

  // ─── Pears ───────────────────────────────────────────
  { name:'Pear, William / Bartlett', cat:'Pears', illo:'Apple', months:[7,8,9,10,11,0,1], origin:'FR' },
  { name:'Pear, Conference', cat:'Pears', illo:'Apple', months:[8,9,10,11,0,1,2,3], origin:'NL', pack:'4.5 kg' },
  { name:'Pear, Qtée / Xenia', cat:'Pears', illo:'Apple', months:[7,8,9,10,11,0,1], origin:'FR' },
  { name:'Pear, Comice', cat:'Pears', illo:'Apple', months:[7,8,9,10,11,0,1], origin:'FR' },
  { name:'Pear, Angelys', cat:'Pears', illo:'Apple', months:[7,8,9,10,11,0,1], origin:'FR' },
  { name:'Pear, Passe-Crassane', cat:'Pears', illo:'Apple', months:[7,8,9,10,11,0,1], origin:'FR' },
  { name:'Pear, Sweet Sensation', cat:'Pears', illo:'Apple', months:[7,8,9,10,11,0,1], origin:'FR, BE' },
  { name:'Pear, Forelle', cat:'Pears', illo:'Apple', months:[2,3,4,5,6,7], origin:'ZA, FR' },
  { name:'Pear, Louise Bonne', cat:'Pears', illo:'Apple', months:[7,8,9,10,11,0,1], origin:'FR' },
  { name:'Pear, Packham', cat:'Pears', illo:'Apple', months:[1,2,3,4,5,6], origin:'ZA, AR' },
  { name:'Pear, Beurre Hardy', cat:'Pears', illo:'Apple', months:[7,8,9,10,11,0,1], origin:'FR' },
  { name:'Pear, Guyot', cat:'Pears', illo:'Apple', months:[6,7], origin:'FR' },

  // ─── Apples ──────────────────────────────────────────
  { name:'Apple, Gala', cat:'Apples', illo:'Apple', months:[8,9,10,11,0,1,2,3,4,5], origin:'FR' },
  { name:'Apple, Golden Delicious', cat:'Apples', illo:'Apple', months:[8,9,10,11,0,1,2,3,4,5], origin:'FR' },
  { name:'Apple, Granny Smith', cat:'Apples', illo:'Apple', months:[8,9,10,11,0,1,2,3,4,5], origin:'FR' },
  { name:'Apple, Pink Lady / Cripps Pink', cat:'Apples', illo:'Apple', months:[8,9,10,11,0,1,2,3,4,5], origin:'FR' },
  { name:'Apple, Braeburn', cat:'Apples', illo:'Apple', months:[8,9,10,11,0,1,2,3,4,5], origin:'FR' },
  { name:'Apple, Fuji / Fujissime', cat:'Apples', illo:'Apple', months:[8,9,10,11,0,1,2,3,4,5], origin:'FR, Import' },
  { name:'Apple, Jazz', cat:'Apples', illo:'Apple', months:[8,9,10,11,0,1,2,3,4,5], origin:'FR' },
  { name:'Apple, Joya', cat:'Apples', illo:'Apple', months:[8,9,10,11,0,1,2,3,4,5], origin:'FR' },
  { name:'Apple, Reinette / Canada / Boskoop', cat:'Apples', illo:'Apple', months:[8,9,10,11,0,1,2,3,4,5], origin:'FR' },
  { name:'Apple, Chantecler / Choupette / Clochard', cat:'Apples', illo:'Apple', months:[8,9,10,11,0,1,2,3,4,5], origin:'FR' },
  { name:'Apple, Elstar / Idared / Jonagored', cat:'Apples', illo:'Apple', months:[8,9,10,11,0,1,2,3,4,5], origin:'FR' },
  { name:'Apple, Red Chief / Skyfresh / Tentation / Opale', cat:'Apples', illo:'Apple', months:[8,9,10,11,0,1,2,3,4,5], origin:'FR' },
  { name:'Apple, Organic (Juliet / Crimson / Anisée / Pixie)', cat:'Apples', illo:'Apple', months:[8,9,10,11,0,1,2,3,4,5], origin:'FR' },

  // ─── Exotic ──────────────────────────────────────────
  { name:'Persimmon / Kaki', cat:'Exotic', illo:'Tomato', months:[9,10,11,0], origin:'ES' },
  { name:'Kaki, Oreto', cat:'Exotic', illo:'Tomato', months:[9,10,11,0], origin:'ES' },
  { name:'Guava', cat:'Exotic', illo:'Mango', months:[1,2,3,4,5,6,7], origin:'BR', pack:'2 kg' },
  { name:'Pomegranate', cat:'Exotic', illo:'Tomato', months:[8,9,10,11,0], origin:'PE, IL' },
  { name:'Jujube', cat:'Exotic', illo:'Cherry', months:[8,9], origin:'FR, ES' },
  { name:'Cherimoya / Annona', cat:'Exotic', illo:'Mango', months:[9,10,11,0,1,2,3], origin:'ES' },
  { name:'Pineapple, Victoria', cat:'Exotic', illo:'Mango', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'CR' },
  { name:'Pineapple, Sweet', cat:'Exotic', illo:'Mango', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'CR' },
  { name:'Pineapple, Sugarloaf', cat:'Exotic', illo:'Mango', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'CR' },
  { name:'Avocado, Hass', cat:'Exotic', illo:'Apple', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES, PE' },
  { name:'Avocado, Organic', cat:'Exotic', illo:'Apple', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES, PE' },
  { name:'Banana', cat:'Exotic', illo:'Mango', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'Import' },
  { name:'Lychee', cat:'Exotic', illo:'Cherry', months:[10,11,0], origin:'MG, RE' },
  { name:'Passion Fruit, Purple', cat:'Exotic', illo:'Cherry', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'VN' },
  { name:'Kiwi (Green / Yellow)', cat:'Exotic', illo:'Apple', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR, NZ' },
  { name:'Dates, Branch / Medjoul', cat:'Exotic', illo:'Cherry', months:[8,9,10,11,0], origin:'TN, DZ, IL' },
  { name:'Ginger', cat:'Exotic', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'CN' },
  { name:'Sweet Potato', cat:'Exotic', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'Import' },
  { name:'Durian', cat:'Exotic', illo:'Mango', months:[6,7,8,9], origin:'ID', pack:'13 kg foambox' },
  { name:'Snake Fruit / Salak', cat:'Exotic', illo:'Mango', months:[6,7,8,9], origin:'ID', pack:'8 kg basket' },
  { name:'Dragon Fruit, Red', cat:'Exotic', illo:'Tomato', months:[6,7,8,9], origin:'ID', pack:'6 kg basket' },
  { name:'Mango, Kent', cat:'Exotic', illo:'Mango', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'PE, BR' },
  { name:'Rhubarb', cat:'Exotic', illo:'Cucumber', months:[2,3,4,5], origin:'FR, NL' },

  // ─── Mediterranean / Melons ──────────────────────────
  { name:'Melon, Charentais', cat:'Mediterranean', illo:'Mango', months:[5,6,7,8], origin:'FR, ES, MA' },
  { name:'Melon, Honeydew (Boule de Miel)', cat:'Mediterranean', illo:'Mango', months:[5,6,7,8], origin:'ES, MA' },
  { name:'Watermelon, Seedless', cat:'Mediterranean', illo:'Tomato', months:[5,6,7,8], origin:'ES, MA' },
  { name:'Melon, Charentais Yellow', cat:'Mediterranean', illo:'Mango', months:[5,6,7,8], origin:'FR, ES' },
  { name:'Watermelon, Striped Elongated', cat:'Mediterranean', illo:'Tomato', months:[5,6,7,8], origin:'ES, MA' },

  // ─── Asparagus ───────────────────────────────────────
  { name:'Asparagus, Green', cat:'Asparagus', illo:'Cucumber', months:[2,3,4,5], origin:'PE, ES', pack:'500 g bundles' },
  { name:'Asparagus, White', cat:'Asparagus', illo:'Cucumber', months:[2,3,4,5], origin:'FR, ES, PE' },
  { name:'Asparagus, Purple', cat:'Asparagus', illo:'Cucumber', months:[2,3,4,5], origin:'FR', pack:'5 kg' },
  { name:'Asparagus, Green (Counter-Season)', cat:'Asparagus', illo:'Cucumber', months:[0,1], origin:'MX', pack:'420 g' },

  // ─── Mushrooms ───────────────────────────────────────
  { name:'Mushroom, Button', cat:'Mushrooms', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'PL', pack:'6 × 250 g' },
  { name:'Mushroom, Whole (Pied Entier)', cat:'Mushrooms', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'PL', pack:'3 kg' },
  { name:'Mushroom, Oyster', cat:'Mushrooms', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR', pack:'2 kg' },
  { name:'Mushroom, Shiitake', cat:'Mushrooms', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES', pack:'2 kg' },
  { name:'Mushroom, Hedgehog (Pied de Mouton)', cat:'Mushrooms', illo:'Onion', months:[8,9,10,11], origin:'FR', pack:'3 kg' },
  { name:'Mushroom, Chanterelle', cat:'Mushrooms', illo:'Onion', months:[5,6,7,8,9], origin:'LT', pack:'2.5 kg' },

  // ─── Tomato ──────────────────────────────────────────
  { name:'Tomato, Cherry, On-the-Vine', cat:'Tomato', illo:'Tomato', months:[2,3,4,5,6,7,8,9,10], origin:'ES, BE', pack:'3 kg' },
  { name:'Tomato, Mixed Coloured Varieties', cat:'Tomato', illo:'Tomato', months:[2,3,4,5,6,7,8,9,10], origin:'FR, ES', pack:'3–5 kg' },
  { name:'Tomato, Yellow Pineapple', cat:'Tomato', illo:'Tomato', months:[5,6,7,8], origin:'FR' },
  { name:'Tomato, Beefsteak (Coeur de Boeuf)', cat:'Tomato', illo:'Tomato', months:[5,6,7,8], origin:'FR' },
  { name:'Tomato, Round, On-the-Vine', cat:'Tomato', illo:'Tomato', months:[2,3,4,5,6,7,8,9,10], origin:'FR, BE, ES' },
  { name:'Tomato, Cherry', cat:'Tomato', illo:'Tomato', months:[2,3,4,5,6,7,8,9,10], origin:'ES, FR' },
  { name:'Tomato, Black Crimea', cat:'Tomato', illo:'Tomato', months:[5,6,7,8], origin:'FR' },
  { name:'Tomato, Green Zebra', cat:'Tomato', illo:'Tomato', months:[5,6,7,8], origin:'FR' },
  { name:'Tomato, Ribbed (Aumônière)', cat:'Tomato', illo:'Tomato', months:[5,6,7,8], origin:'FR' },
  { name:'Tomato, Ribbed Black', cat:'Tomato', illo:'Tomato', months:[5,6,7,8], origin:'FR' },
  { name:'Tomato, Ribbed Yellow', cat:'Tomato', illo:'Tomato', months:[5,6,7,8], origin:'FR' },

  // ─── Pepper ──────────────────────────────────────────
  { name:'Pepper, Red Block', cat:'Vegetable', illo:'Pepper', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES, NL' },
  { name:'Aubergine', cat:'Vegetable', illo:'Pepper', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES' },
  { name:'Courgette, Green', cat:'Vegetable', illo:'Cucumber', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES, BE, NL' },
  { name:'Cucumber', cat:'Vegetable', illo:'Cucumber', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES, NL' },
  { name:'Cucumber (Noa)', cat:'Vegetable', illo:'Cucumber', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'JO' },
  { name:'Pea, Shelling', cat:'Vegetable', illo:'Cucumber', months:[4,5,6], origin:'FR', pack:'5 kg' },
  { name:'Bean, Butter (Haricot Beurre)', cat:'Vegetable', illo:'Cucumber', months:[5,6,7,8], origin:'FR', pack:'4 kg' },
  { name:'Bean, Broad', cat:'Vegetable', illo:'Cucumber', months:[3,4,5], origin:'FR, ES' },
  { name:'Shelling Bean, Coco de Paimpol PDO', cat:'Vegetable', illo:'Cucumber', months:[5,6,7,8], origin:'FR' },
  { name:'Bean, Green', cat:'Vegetable', illo:'Cucumber', months:[5,6,7,8], origin:'FR' },
  { name:'Artichoke (Camus, Calico, Castel)', cat:'Vegetable', illo:'Broccoli', months:[3,4,5,6,7,8,9], origin:'FR, ES' },
  { name:'Artichoke, Poivrade Bouquet', cat:'Vegetable', illo:'Broccoli', months:[3,4,5,6,7,8,9], origin:'FR, ES' },
  { name:'Pepper, Yellow Block', cat:'Vegetable', illo:'Pepper', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES, NL' },
  { name:'Pepper, Green Block', cat:'Vegetable', illo:'Pepper', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES, NL' },
  { name:'Courgette, Round', cat:'Vegetable', illo:'Cucumber', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR, ES' },
  { name:'Cucumber, Mini', cat:'Vegetable', illo:'Cucumber', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES, NL' },

  // ─── Squash & Pumpkin ────────────────────────────────
  { name:'Pumpkin / Potimarron', cat:'Squash', illo:'Mango', months:[8,9,10,11,0,1], origin:'FR', pack:'×12' },
  { name:'Squash, Butternut', cat:'Squash', illo:'Mango', months:[8,9,10,11,0,1], origin:'FR' },
  { name:'Squash, Winter', cat:'Squash', illo:'Mango', months:[8,9,10,11,0,1], origin:'FR' },

  // ─── Salads & Leaves ─────────────────────────────────
  { name:'Lettuce, Batavia Blonde', cat:'Salad', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR, ES' },
  { name:'Chicory / Endive', cat:'Salad', illo:'Broccoli', months:[9,10,11,0,1,2,3], origin:'FR, BE' },
  { name:'Chicory / Endive, Red', cat:'Salad', illo:'Broccoli', months:[9,10,11,0,1,2,3], origin:'FR', pack:'2.5 kg' },
  { name:'Spinach', cat:'Salad', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR, ES' },
  { name:'Chard (Blette)', cat:'Salad', illo:'Broccoli', months:[3,4,5,6,7,8,9], origin:'FR' },
  { name:'Lettuce, Iceberg', cat:'Salad', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES, FR' },
  { name:'Lettuce, Oak Leaf Blond', cat:'Salad', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Lettuce, Oak Leaf Red', cat:'Salad', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Endive, Curly (Frisée)', cat:'Salad', illo:'Broccoli', months:[9,10,11,0,1,2,3], origin:'FR' },
  { name:'Endive, Escarole', cat:'Salad', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Salad Leaves, Mixed', cat:'Salad', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },

  // ─── Cabbages ────────────────────────────────────────
  { name:'Broccoli', cat:'Cabbage', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES, IT' },
  { name:'Cauliflower', cat:'Cabbage', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR, ES' },
  { name:'Sprouts, Brussels', cat:'Cabbage', illo:'Broccoli', months:[9,10,11,0], origin:'FR, BE' },
  { name:'Romanesco', cat:'Cabbage', illo:'Broccoli', months:[8,9,10,11,0], origin:'FR, IT' },
  { name:'Cabbage, White', cat:'Cabbage', illo:'Broccoli', months:[8,9,10,11,0,1,2,3], origin:'FR' },
  { name:'Kohlrabi', cat:'Cabbage', illo:'Broccoli', months:[3,4,5,6,7,8,9], origin:'FR' },
  { name:'Cabbage, Green', cat:'Cabbage', illo:'Broccoli', months:[8,9,10,11,0,1,2,3], origin:'FR' },
  { name:'Cabbage, Red', cat:'Cabbage', illo:'Broccoli', months:[8,9,10,11,0,1,2,3], origin:'FR' },
  { name:'Cabbage, Chinese', cat:'Cabbage', illo:'Broccoli', months:[8,9,10,11,0,1,2,3], origin:'FR, NL' },

  // ─── Root Veg ────────────────────────────────────────
  { name:'Carrot', cat:'Root Veg', illo:'Onion', months:[8,9,10,11,0,1,2,3], origin:'FR, IT' },
  { name:'Celery Stick, Green', cat:'Root Veg', illo:'Cucumber', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR, IT' },
  { name:'Celeriac', cat:'Root Veg', illo:'Onion', months:[8,9,10,11,0,1,2,3], origin:'FR, NL' },
  { name:'Fennel', cat:'Root Veg', illo:'Cucumber', months:[9,10,11,0,1,2,3,4], origin:'FR, IT' },
  { name:'Leek', cat:'Root Veg', illo:'Cucumber', months:[8,9,10,11,0,1,2,3], origin:'FR, BE' },
  { name:'Beetroot, Red, Round, Raw', cat:'Root Veg', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Turnip, Round, Purple', cat:'Root Veg', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Radish', cat:'Root Veg', illo:'Onion', months:[2,3,4,5,6,7,8,9], origin:'FR' },
  { name:'Onion, White, Fresh', cat:'Root Veg', illo:'Onion', months:[5,6,7], origin:'FR' },
  { name:'Onion, Red (Bunched)', cat:'Root Veg', illo:'Onion', months:[5,6,7,8], origin:'FR' },
  { name:'Shallot, Fresh', cat:'Root Veg', illo:'Onion', months:[5,6,7,8], origin:'FR' },
  { name:'Shallot, Dry', cat:'Root Veg', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Pink Garlic (Ail Rose)', cat:'Root Veg', illo:'Onion', months:[5,6,7], origin:'FR', pack:'5 kg' },
  { name:'Garlic, Purple Dried', cat:'Root Veg', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR, ES' },
  { name:'Beetroot, Red, Round, Cooked', cat:'Root Veg', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Garlic, Fresh', cat:'Root Veg', illo:'Onion', months:[5,6,7], origin:'FR' },
  { name:'Garlic, White Dried', cat:'Root Veg', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR, ES' },

  // ─── Heritage Veg ────────────────────────────────────
  { name:'Parsnip', cat:'Heritage Veg', illo:'Onion', months:[9,10,11,0,1,2], origin:'FR' },
  { name:'Rutabaga / Swede', cat:'Heritage Veg', illo:'Onion', months:[9,10,11,0,1,2], origin:'FR' },
  { name:'Jerusalem Artichoke', cat:'Heritage Veg', illo:'Onion', months:[3,4,5,6,7,8,9], origin:'FR' },

  // ─── Mini Vegetables ─────────────────────────────────
  { name:'Carrot, Coloured Baby', cat:'Mini Veg', illo:'Onion', months:[4,5,6,7,8], origin:'FR', pack:'×6' },
  { name:'Carrot, Mini', cat:'Mini Veg', illo:'Onion', months:[4,5,6,7,8], origin:'NL' },
  { name:'Onion, Mini', cat:'Mini Veg', illo:'Onion', months:[4,5,6,7,8], origin:'NL' },
  { name:'Turnip, Mini', cat:'Mini Veg', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'NL' },
  { name:'Beetroot, Mini', cat:'Mini Veg', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'NL' },
  { name:'Celery, Mini', cat:'Mini Veg', illo:'Cucumber', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'NL' },

  // ─── Nuts ────────────────────────────────────────────
  { name:'Hazelnut, Dried', cat:'Nuts', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR', pack:'5 kg' },
  { name:'Hazelnut, Fresh', cat:'Nuts', illo:'Onion', months:[8,9], origin:'FR' },
  { name:'Walnut, Grenoble PDO, Dried', cat:'Nuts', illo:'Onion', months:[9,10,11,0], origin:'FR' },

  // ─── Herbs ───────────────────────────────────────────
  { name:'Basil', cat:'Herbs', illo:'Broccoli', months:[4,5,6,7,8], origin:'FR' },
  { name:'Bay Leaf', cat:'Herbs', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Chives', cat:'Herbs', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Coriander', cat:'Herbs', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Dill', cat:'Herbs', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Mint', cat:'Herbs', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Parsley, Curly', cat:'Herbs', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Parsley, Flat-Leaf', cat:'Herbs', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Rosemary', cat:'Herbs', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Sage', cat:'Herbs', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Sorrel', cat:'Herbs', illo:'Broccoli', months:[3,4,5,6,7,8,9], origin:'FR' },
  { name:'Tarragon', cat:'Herbs', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
  { name:'Thyme', cat:'Herbs', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR' },
];

const CATS = ['All','Berries','Cherries','Stone Fruit','Plums','Figs','Grapes','Citrus','Pears','Apples','Exotic','Mediterranean','Asparagus','Mushrooms','Tomato','Vegetable','Squash','Salad','Cabbage','Root Veg','Heritage Veg','Mini Veg','Nuts','Herbs'];

// Generates a printable catalogue document in a new window and triggers
// the browser's print dialog. Users save as PDF from there. Avoids bundling
// a heavy PDF library — print-to-PDF is universally supported and gives
// users format control (paper size, margins).
function downloadCataloguePDF(products){
  const byCat = {};
  products.forEach(p => {
    (byCat[p.cat] = byCat[p.cat] || []).push(p);
  });
  const monthNames = MONTH_NAMES;
  const formatMonths = formatMonthRange;

  const today = new Date().toLocaleDateString('en-GB', { day:'numeric', month:'long', year:'numeric' });
  const thisMonth = new Date().getMonth();
  const inSeasonCount = products.filter(p => p.months.includes(thisMonth)).length;
  const yearRoundCount = products.filter(p => p.months.length === 12).length;
  const total = products.length;

  const catOrder = ['Stone fruit','Berries','Citrus','Top fruit','Vine fruit','Tropical','Vegetables','Salad & leaf','Alliums & roots','Brassicas','Mushrooms','Herbs & specialty'];
  const orderedCats = [
    ...catOrder.filter(c => byCat[c]),
    ...Object.keys(byCat).filter(c => !catOrder.includes(c)),
  ];

  const sectionsHTML = orderedCats.map(cat => {
    const items = byCat[cat].slice().sort((a,b)=>a.name.localeCompare(b.name));
    const rows = items.map(p => `
      <tr>
        <td class="name">${p.name}</td>
        <td class="origin">${p.origin || '—'}</td>
        <td class="pack">${p.pack || '—'}</td>
        <td class="season">${formatMonths(p.months)}</td>
      </tr>`).join('');
    return `
      <section class="cat">
        <h2>${cat} <span class="count">${items.length}</span></h2>
        <table>
          <thead>
            <tr><th>Product</th><th>Origin</th><th>Pack</th><th>Season</th></tr>
          </thead>
          <tbody>${rows}</tbody>
        </table>
      </section>`;
  }).join('');

  const html = `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>P&L England · Produce Catalogue (${today})</title>
<style>
  @page { size: A4; margin: 16mm 14mm 16mm 14mm; }
  * { box-sizing: border-box; }
  html, body { margin:0; padding:0; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    color: #1a2419;
    font-size: 10pt;
    line-height: 1.4;
    background: #fff;
  }
  h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 28pt; margin: 0 0 6pt; letter-spacing: -0.01em; }
  .lede { color: #4a554a; font-size: 11pt; margin: 0 0 16pt; max-width: 60ch; }
  .cover {
    border-bottom: 1.5pt solid #1a2419;
    padding-bottom: 18pt;
    margin-bottom: 22pt;
  }
  .cover-meta {
    display: flex; justify-content: space-between; align-items: end; gap: 24pt; flex-wrap: wrap;
  }
  .stats { display: flex; gap: 18pt; }
  .stat { }
  .stat .num { font-family: 'Fraunces', Georgia, serif; font-size: 22pt; font-weight: 600; color: #1a2419; line-height: 1; }
  .stat .label { font-size: 8pt; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7569; margin-top: 4pt; }
  .brand {
    text-align: right;
  }
  .brand .mark { font-family:'Fraunces', Georgia, serif; font-weight:700; color:#C84A2D; font-size:14pt; }
  .brand .tag { font-size: 7.5pt; letter-spacing: 0.2em; text-transform: uppercase; color:#6b7569; margin-top: 2pt; }
  .brand .meta { font-size: 8.5pt; color: #6b7569; margin-top: 8pt; line-height: 1.5; }
  section.cat {
    margin-top: 18pt;
    page-break-inside: auto;
  }
  section.cat:first-of-type { margin-top: 0; }
  section.cat h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 15pt;
    font-weight: 600;
    margin: 0 0 8pt;
    padding-bottom: 4pt;
    border-bottom: 0.5pt solid #d8d2bf;
    display: flex; align-items: baseline; gap: 8pt;
  }
  section.cat h2 .count {
    font-family: 'Inter', sans-serif;
    font-size: 8pt;
    font-weight: 500;
    color: #6b7569;
    letter-spacing: 0.08em;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
  }
  thead th {
    text-align: left;
    font-size: 7.5pt;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b7569;
    font-weight: 600;
    padding: 4pt 6pt 4pt 0;
    border-bottom: 0.5pt solid #d8d2bf;
  }
  tbody td {
    padding: 5pt 6pt 5pt 0;
    border-bottom: 0.25pt solid #ece6d3;
    vertical-align: top;
  }
  tbody tr { page-break-inside: avoid; }
  td.name { font-weight: 500; color: #1a2419; width: 40%; }
  td.origin { width: 8%; color: #4a554a; font-family: 'Inter', monospace; font-size: 8.5pt; letter-spacing: 0.04em; }
  td.pack { width: 14%; color: #4a554a; }
  td.season { width: 22%; color: #4a554a; }
  footer {
    margin-top: 24pt;
    padding-top: 10pt;
    border-top: 0.5pt solid #d8d2bf;
    font-size: 8pt;
    color: #6b7569;
    display: flex;
    justify-content: space-between;
    gap: 16pt;
    flex-wrap: wrap;
  }
  @media print {
    .actions { display: none !important; }
    section.cat { break-inside: auto; }
    section.cat h2 { break-after: avoid; }
  }
  .actions {
    position: fixed; top: 12px; right: 12px; display: flex; gap: 8px; z-index: 999;
  }
  .actions button {
    font-family: inherit; font-size: 12px; font-weight: 600;
    padding: 8px 14px; border-radius: 999px; border: 1px solid #1a2419;
    background: #1a2419; color: #f6f1de; cursor: pointer;
  }
  .actions button.alt { background: #fff; color: #1a2419; }
</style>
</head>
<body>
  <div class="actions">
    <button onclick="window.print()">Save as PDF</button>
    <button class="alt" onclick="window.close()">Close</button>
  </div>
  <header class="cover">
    <div class="cover-meta">
      <div>
        <h1>Produce Catalogue</h1>
        <p class="lede">A complete list of fresh produce P&amp;L England can source from European and global growers, organised by category. Season shows the estimated availability window for each origin. Lines outside their window can usually still be sourced from our supplier network on enquiry.</p>
      </div>
      <div class="brand">
        <div class="mark">P&amp;L England</div>
        <div class="tag">Simply Fresh</div>
        <div class="meta">
          sales@plengland.co.uk<br>
          +44 7808 034216<br>
          ${today}
        </div>
      </div>
    </div>
    <div class="stats" style="margin-top: 14pt;">
      <div class="stat"><div class="num">${total}</div><div class="label">Total lines</div></div>
      <div class="stat"><div class="num">${inSeasonCount}</div><div class="label">In season now</div></div>
      <div class="stat"><div class="num">${yearRoundCount}</div><div class="label">Year-round</div></div>
      <div class="stat"><div class="num">${orderedCats.length}</div><div class="label">Categories</div></div>
    </div>
  </header>
  ${sectionsHTML}
  <footer>
    <span>P&amp;L England Ltd · Companies House 11684967 · VAT GB 494 0985 47</span>
    <span>Page generated ${today}</span>
  </footer>
  <script>
    // Auto-open print dialog once fonts/layout settle.
    window.addEventListener('load', () => { setTimeout(() => window.print(), 400); });
  <\/script>
</body>
</html>`;

  const w = window.open('', '_blank');
  if (!w) {
    alert('Please allow pop-ups to download the catalogue PDF.');
    return;
  }
  w.document.open();
  w.document.write(html);
  w.document.close();
}

function ProductCatalogueBody(){
  const [cat, setCat] = useState('All');
  const [seasonOnly, setSeasonOnly] = useState(false);
  const [query, setQuery] = useState('');
  const [expanded, setExpanded] = useState(false);
  const month = new Date().getMonth();
  // Auto-expand if the user has filtered/searched (they clearly want to see results)
  const isFiltered = cat !== 'All' || seasonOnly || query.trim() !== '';
  const showList = expanded || isFiltered;

  const filtered = PRODUCTS.filter(p =>
    (cat==='All' || p.cat===cat) &&
    (!seasonOnly || p.months.includes(month)) &&
    (!query.trim() || (p.name + ' ' + (p.detail||'') + ' ' + p.origin).toLowerCase().includes(query.toLowerCase()))
  );


  return (
    <>
      <div className="cat-header" style={{marginBottom:24, display:'flex', justifyContent:'space-between', alignItems:'end', gap:24, flexWrap:'wrap'}}>
        <div>
          <div style={{fontFamily:'var(--sans)', fontWeight:500, fontSize:20, color:'var(--ink)'}}>Browse all {PRODUCTS.length} produce lines</div>
          <div style={{fontSize:13.5, color:'var(--ink-2)', marginTop:4}}>
Seasonal availability shown per line, estimated from the growing window of each origin.
          </div>
        </div>
        <div className="cat-controls" style={{display:'flex', flexDirection:'column', gap:10, alignItems:'flex-end'}}>
          <div style={{position:'relative'}}>
            <span style={{position:'absolute', left:14, top:'50%', transform:'translateY(-50%)', color:'var(--ink-3)', display:'flex'}}>
              <Icon.Search size={14}/>
            </span>
            <input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Search produce, origin…"
              style={{paddingLeft:38, width:240, fontSize:13.5}}/>
          </div>
          <div style={{display:'flex', gap:8, alignItems:'center'}}>
            <button className={`pill ${seasonOnly?'pill-active':''}`} onClick={()=>{ setSeasonOnly(!seasonOnly); setExpanded(true); }}>
              <Icon.Leaf size={12}/> In season now
            </button>
            <button className="pill" onClick={()=>downloadCataloguePDF(PRODUCTS)} title="Open a printable list, then save as PDF from the print dialog">
              <Icon.Download size={12}/> Download PDF
            </button>
            <span className="mono">{filtered.length} items</span>
          </div>
        </div>
      </div>

      {!showList && (
          <button className="catalogue-teaser" onClick={()=>setExpanded(true)} style={{
            width:'100%', padding:'28px 32px',
            display:'flex', justifyContent:'space-between', alignItems:'center', gap:20,
            border:'1px solid var(--line)', borderRadius:'var(--radius-lg)',
            background:'var(--paper)', textAlign:'left', cursor:'pointer',
            transition:'background 0.15s, border-color 0.15s'
          }}
          onMouseEnter={e=>{ e.currentTarget.style.background='var(--paper-2)'; e.currentTarget.style.borderColor='var(--ink-3)'; }}
          onMouseLeave={e=>{ e.currentTarget.style.background='var(--paper)'; e.currentTarget.style.borderColor='var(--line)'; }}
          >
            <div className="catalogue-teaser-copy" style={{display:'flex', alignItems:'center', gap:18}}>
              <span className="catalogue-teaser-icons" style={{display:'flex', gap:-4}}>
                <Produce.Strawberry size={36}/>
                <Produce.Cherry size={36} style={{marginLeft:-10}}/>
                <Produce.Peach size={36} style={{marginLeft:-10}}/>
                <Produce.Lemon size={36} style={{marginLeft:-10}}/>
              </span>
              <div>
                <div style={{fontFamily:'var(--serif)', fontSize:'clamp(20px, 2vw, 24px)', fontWeight:500, color:'var(--ink)'}}>Browse all {PRODUCTS.length} produce lines</div>
                <div style={{fontSize:13.5, color:'var(--ink-2)', marginTop:4}}>Filter by category or season, or search by name.</div>
              </div>
            </div>
            <span className="catalogue-teaser-btn" style={{
              display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8,
              padding:'10px 18px', borderRadius:999,
              background:'var(--ink)', color:'var(--cream)',
              fontSize:13.5, fontWeight:600, whiteSpace:'nowrap', flexShrink:0
            }}>
              View catalogue <Icon.Arrow size={14}/>
            </span>
          </button>
        )}
      <style>{`
        @media (max-width: 640px) {
          .catalogue-teaser { flex-direction: column !important; align-items: stretch !important; gap: 20px !important; }
          .catalogue-teaser-icons { display: none !important; }
          .catalogue-teaser-btn { width: 100% !important; padding: 14px 18px !important; }
        }
      `}</style>

        {showList && (<>
        {/* Category filter */}
        <div className="filter-row" style={{display:'flex', gap:8, marginBottom:14, flexWrap:'wrap'}}>
          {CATS.map(c=>(
            <button key={c} className={`pill ${cat===c?'pill-active':''}`} onClick={()=>setCat(c)}>{c}</button>
          ))}
        </div>

        <div className="product-grid" style={{display:'flex', flexDirection:'column', border:'1px solid var(--line)', borderRadius:'var(--radius-lg)', overflow:'hidden'}}>
          {filtered.map((p)=>{
            const inSeason = p.months.includes(month);
            return (
              <div key={p.name} style={{
                padding:'14px 20px',
                borderBottom:'1px solid var(--line-soft)',
                background:'var(--paper)',
                display:'flex', alignItems:'center', gap:16,
                transition:'background 0.15s', cursor:'pointer'
              }}
              onMouseEnter={e=>e.currentTarget.style.background='var(--paper-2)'}
              onMouseLeave={e=>e.currentTarget.style.background='var(--paper)'}>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontFamily:'var(--sans)', fontWeight:500, fontSize:15.5, lineHeight:1.2}}>{p.name}</div>
                  <div style={{fontSize:11.5, color:'var(--ink-3)', marginTop:3}}>{p.cat} · {p.origin}{p.pack ? ` · ${p.pack}` : ''}</div>
                </div>
                <span style={{fontSize:11.5, color:'var(--ink-2)', whiteSpace:'nowrap', flexShrink:0}}>{formatMonthRange(p.months)}</span>
                {inSeason && <span style={{display:'inline-flex', alignItems:'center', gap:5, fontSize:11, fontWeight:600, color:'var(--leaf)', whiteSpace:'nowrap', flexShrink:0}}><span style={{width:6, height:6, borderRadius:'50%', background:'var(--leaf)'}}/> In season</span>}
              </div>
            );
          })}
        </div>

        {showList && filtered.length === 0 && (
          <div style={{padding:'60px 20px', textAlign:'center', color:'var(--ink-3)', border:'1px dashed var(--line)', borderRadius:'var(--radius-lg)'}}>
            No matches. Try a different search.
          </div>
        )}

        {showList && expanded && !isFiltered && (
          <div style={{marginTop:18, textAlign:'center'}}>
            <button onClick={()=>setExpanded(false)} className="pill">
              Collapse catalogue
            </button>
          </div>
        )}
        </>)}
    </>
  );
}

const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

function Seasonality(){
  const month = new Date().getMonth();
  const scrollRef = React.useRef(null);
  const nudge = (dir) => {
    const el = scrollRef.current;
    if (!el) return;
    // ~3 month columns per nudge — column width ≈ 44px on mobile
    el.scrollBy({ left: dir * 132, behavior: 'smooth' });
  };
  // Hand-picked from the Regular tier — your shipping backbone.
  const featured = [
    'Strawberry, Leticia',
    'Blueberry',
    'Cherry Burlat (Cal 24/26/30/32/34)',
    'White Flat Peach (Plate)',
    'Yellow Peach',
    'White Nectarine',
    'Apricot (mixed varieties)',
    'Yellow Plum (Sunkiss)',
    'Black Fig (Barbentane / Noire)',
    'White Seedless Grape (Superior)',
    'Grape, Pink Seedless (Rosé)',
    'Vineyard Peach (Pêche de Vigne)',
    'Asparagus, Green',
    'Mushroom, Button',
    'Cherry Tomato on Vine',
  ];
  const rows = featured
    .map(n => PRODUCTS.find(p => p.name === n))
    .filter(Boolean);

  return (
    <section className="section-pad" style={{background:'var(--forest)', color:'var(--cream)'}}>
      <div className="container">
        <div style={{textAlign:'center', marginBottom:48}}>
          <div className="eyebrow" style={{color:'var(--amber)', marginBottom:20}}>Seasonality calendar</div>
          <h2 className="h-1" style={{margin:'0 auto', color:'var(--cream)', maxWidth:'18ch'}}>
            Plan your year, <em>by what's at peak.</em>
          </h2>
          <p style={{margin:'20px auto 0', color:'rgba(244,239,226,0.75)', maxWidth:480, fontSize:16, lineHeight:1.5}}>
            Production windows for the lines we ship every season. Highlighted column is the current month. Message us for spot pricing.
          </p>
        </div>

        <div className="season-scroll-controls" aria-hidden="true">
          <button type="button" className="season-nudge" onClick={()=>nudge(-1)} aria-label="Scroll months left">‹</button>
          <span className="season-scroll-hint-text">Swipe or tap arrows</span>
          <button type="button" className="season-nudge" onClick={()=>nudge(1)} aria-label="Scroll months right">›</button>
        </div>
        <div className="season-table" ref={scrollRef} style={{
          background:'rgba(0,0,0,0.18)', border:'1px solid rgba(255,255,255,0.1)',
          borderRadius:'var(--radius-lg)'
        }}>
          <div style={{display:'grid', gridTemplateColumns:'240px repeat(12, 1fr)', borderBottom:'1px solid rgba(255,255,255,0.1)', fontSize:11, fontWeight:600, letterSpacing:'0.08em', textTransform:'uppercase', color:'rgba(244,239,226,0.6)'}}>
            <div style={{padding:'14px 18px'}}>Product</div>
            {MONTHS.map((m,i)=>(
              <div key={m} style={{
                padding:'14px 0', textAlign:'center',
                background: i===month ? 'rgba(232,154,60,0.18)' : 'transparent',
                color: i===month ? 'var(--amber)' : 'rgba(244,239,226,0.6)'
              }}>{m}</div>
            ))}
          </div>
          {rows.map((p,ri)=>(
            <div key={p.name} style={{display:'grid', gridTemplateColumns:'240px repeat(12, 1fr)', borderBottom: ri<rows.length-1 ? '1px solid rgba(255,255,255,0.06)' : 'none'}}>
              <div style={{padding:'12px 18px', display:'flex', alignItems:'center', gap:10, fontSize:13.5}}>
                <span style={{opacity:0.85}}>{p.name}</span>
              </div>
              {MONTHS.map((_,mi)=>{
                const active = p.months.includes(mi);
                const isThisMonth = mi===month;
                return (
                  <div key={mi} style={{
                    padding:'12px 6px',
                    background: isThisMonth ? 'rgba(232,154,60,0.06)' : 'transparent',
                    display:'flex', alignItems:'center', justifyContent:'center'
                  }}>
                    {active && (
                      <div style={{
                        width:'100%', height:8, borderRadius:4,
                        background: isThisMonth ? 'var(--amber)' : 'var(--leaf)'
                      }}/>
                    )}
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services, ProductCatalogueBody, Seasonality });