// 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={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom:60, gap:40, flexWrap:'wrap'}}>
          <div>
            <div className="eyebrow" style={{marginBottom:20}}>What we do</div>
            <h2 className="h-1" style={{margin:0, maxWidth:'14ch'}}>One partner. The full export stack.</h2>
          </div>
          <p className="lead" style={{margin:0, maxWidth:380}}>
            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>
  );
}

// Combined catalogue. months: 0-indexed (0=Jan).
// freq: 'Regular' | 'Occasional' | 'One-off' (= things you've actually ordered)
//       'On request' (= in your supplier catalogue but no order history yet)
const PRODUCTS = [
  // ─── Berries ─────────────────────────────────────────
  { name:'Strawberry Leticia', cat:'Berries', illo:'Strawberry', months:[1,2,3,4], origin:'ES', freq:'Regular', pack:'1 kg' },
  { name:'Strawberry Blanche (White)', cat:'Berries', illo:'Strawberry', months:[2,3,4], origin:'ES', freq:'Occasional', pack:'1 kg' },
  { name:'British Strawberry Vibrant', cat:'Berries', illo:'Strawberry', months:[4,5,6,7], origin:'GB', freq:'Occasional', pack:'8 × 1 kg' },
  { name:'British Strawberry Honeoye', cat:'Berries', illo:'Strawberry', months:[4,5,6], origin:'GB', freq:'Occasional', pack:'8 × 1 kg' },
  { name:'British Strawberry Malling™ Centenary', cat:'Berries', illo:'Strawberry', months:[5,6,7,8], origin:'GB', freq:'Occasional', pack:'8 × 1 kg' },
  { name:'British Strawberry Sonata', cat:'Berries', illo:'Strawberry', months:[5,6,7,8], origin:'GB', freq:'Occasional', pack:'8 × 1 kg' },
  { name:'British Strawberry Malwena', cat:'Berries', illo:'Strawberry', months:[6,7,8,9], origin:'GB', freq:'Occasional', pack:'8 × 1 kg' },
  { name:'Strawberry (Gariguette, Ciflorette, Magnum)', cat:'Berries', illo:'Strawberry', months:[2,3,4,5,6], origin:'FR, IT, MA', freq:'On request' },
  { name:'Blueberry', cat:'Berries', illo:'Strawberry', months:[2,3,4,5,6,7,8], origin:'MA, PE', freq:'Regular', pack:'12 × 125 g' },
  { name:'Raspberry', cat:'Berries', illo:'Strawberry', months:[2,3,4,5,6,7,8], origin:'PT, ES', freq:'One-off', pack:'12 × 125 g' },
  { name:'Blackberry (Mûre)', cat:'Berries', illo:'Strawberry', months:[5,6,7,8,9], origin:'Import', freq:'On request' },
  { name:'Redcurrant', cat:'Berries', illo:'Cherry', months:[2,3,4,5,6], origin:'NL', freq:'Occasional', pack:'12 × 125 g' },

  // ─── Cherries ────────────────────────────────────────
  { name:'Cherry Burlat (Cal 24/26/30/32/34)', cat:'Cherries', illo:'Cherry', months:[4,5], origin:'FR', freq:'On request' },
  { name:'Cherry Summit (Cal 24/26/30/32/34)', cat:'Cherries', illo:'Cherry', months:[4,5,6], origin:'FR', freq:'One-off', pack:'5 kg' },
  { name:'Cherry Folfer (Cal 24/26/30/32/34)', cat:'Cherries', illo:'Cherry', months:[5,6], origin:'FR', freq:'On request' },
  { name:'Cherry Giant Red (Cal 24/26/30/32/34)', cat:'Cherries', illo:'Cherry', months:[5,6], origin:'FR', freq:'On request' },
  { name:'Cherry Duroni (Cal 24/26/30/32/34)', cat:'Cherries', illo:'Cherry', months:[4,5,6], origin:'FR', freq:'Occasional', pack:'5 kg' },
  { name:'Cherry Kordia (Cal 24/26/30/32/34)', cat:'Cherries', illo:'Cherry', months:[5,6,7], origin:'BE', freq:'Occasional', pack:'5 kg' },
  { name:'Cherry Rainier (Cal 24/26/30/32/34)', cat:'Cherries', illo:'Cherry', months:[5,6,7], origin:'BE', freq:'Occasional', pack:'5 kg' },

  // ─── Stone Fruit ─────────────────────────────────────
  { name:'White Flat Peach (Plate)', cat:'Stone Fruit', illo:'Peach', months:[4,5,6,7,8], origin:'ES, FR', freq:'Regular', pack:'5 kg' },
  { name:'White Peach', cat:'Stone Fruit', illo:'Peach', months:[4,5,6,7,8], origin:'ES, FR', freq:'Regular' },
  { name:'Yellow Peach', cat:'Stone Fruit', illo:'Peach', months:[4,5,6,7,8], origin:'ES, FR, IT', freq:'Regular' },
  { name:'Vineyard Peach (Pêche de Vigne)', cat:'Stone Fruit', illo:'Peach', months:[5,6,7,8], origin:'FR', freq:'Regular' },
  { name:'White Nectarine', cat:'Stone Fruit', illo:'Peach', months:[4,5,6,7,8], origin:'ES, FR', freq:'Regular' },
  { name:'Yellow Nectarine', cat:'Stone Fruit', illo:'Peach', months:[4,5,6,7,8], origin:'ES, FR, IT', freq:'Regular' },
  { name:'Flat Nectarine', cat:'Stone Fruit', illo:'Peach', months:[4,5,6,7,8], origin:'ES, FR', freq:'On request' },
  { name:'Apricot (mixed varieties)', cat:'Stone Fruit', illo:'Peach', months:[4,5,6,7,8], origin:'FR, ES', freq:'Regular', pack:'5 kg' },
  { name:'Apricot (Bergeron / Bergarouge)', cat:'Stone Fruit', illo:'Peach', months:[5,6,7], origin:'FR', freq:'On request' },

  // ─── Plums ───────────────────────────────────────────
  { name:'Yellow Plum (Sunkiss)', cat:'Plums', illo:'Cherry', months:[5,6,7,8], origin:'FR', freq:'Regular' },
  { name:'Red Plum (Friandise / Fortune / TC Sun)', cat:'Plums', illo:'Cherry', months:[5,6,7,8], origin:'FR', freq:'Regular' },
  { name:'Grenadine Plum', cat:'Plums', illo:'Cherry', months:[6,7,8], origin:'FR', freq:'Regular' },
  { name:'Golden Plum', cat:'Plums', illo:'Cherry', months:[6,7,8], origin:'FR', freq:'Occasional', pack:'5 kg' },
  { name:'Greengage (Reine Claude Dorée)', cat:'Plums', illo:'Cherry', months:[5,6,7], origin:'FR', freq:'Occasional', pack:'5 kg' },
  { name:'Mirabelle Plum', cat:'Plums', illo:'Cherry', months:[7,8], origin:'FR', freq:'On request' },
  { name:'Quetsche Plum', cat:'Plums', illo:'Cherry', months:[7,8,9], origin:'FR', freq:'On request' },
  { name:'Stanley Plum', cat:'Plums', illo:'Cherry', months:[7,8,9], origin:'FR, IT', freq:'On request' },

  // ─── Figs ────────────────────────────────────────────
  { name:'Black Fig (Barbentane / Noire)', cat:'Figs', illo:'Cherry', months:[5,6,7,8,9], origin:'FR, ES, PE', freq:'Regular' },
  { name:'Green Fig', cat:'Figs', illo:'Cherry', months:[5,6,7,8], origin:'ES', freq:'One-off' },
  { name:'Fabiano Fig', cat:'Figs', illo:'Cherry', months:[2,3,4,5,6,7,8,9], origin:'BR', freq:'Occasional' },

  // ─── Grapes ──────────────────────────────────────────
  { name:'White Seedless Grape (Superior)', cat:'Grapes', illo:'Grape', months:[5,6,7,8,9,10], origin:'IT, PT', freq:'Regular' },
  { name:'Rosé / Pink Seedless Grape', cat:'Grapes', illo:'Grape', months:[6,7,8,9,10], origin:'IT', freq:'Regular' },
  { name:'Vittoria Grape', cat:'Grapes', illo:'Grape', months:[6,7,8], origin:'IT', freq:'One-off' },
  { name:'Italia Due Grape', cat:'Grapes', illo:'Grape', months:[7,8,9], origin:'IT', freq:'On request' },
  { name:'Candy / Bonbon Grape', cat:'Grapes', illo:'Grape', months:[7,8,9], origin:'IT', freq:'Occasional' },
  { name:'Muscat Grape', cat:'Grapes', illo:'Grape', months:[7,8,9], origin:'FR', freq:'One-off' },
  { name:'Chasselas Grape', cat:'Grapes', illo:'Grape', months:[7,8,9], origin:'FR', freq:'On request' },
  { name:'Lavallée Grape', cat:'Grapes', illo:'Grape', months:[7,8,9,10], origin:'FR', freq:'On request' },

  // ─── Citrus ──────────────────────────────────────────
  { name:'Blood Orange (Brio Sanguinelli)', cat:'Citrus', illo:'Lemon', months:[1,2,3,4], origin:'ES', freq:'Occasional' },
  { name:'Orange (juicing — Maltaise, Valencia Late, Tarocco)', cat:'Citrus', illo:'Lemon', months:[10,11,0,1,2,3,4], origin:'ES, MA, ZA', freq:'On request' },
  { name:'Orange (table — Navel, Lanelate, Naveline, Midnight)', cat:'Citrus', illo:'Lemon', months:[10,11,0,1,2,3,4,5], origin:'ES, MA, ZA, TN', freq:'On request' },
  { name:'Clementine (leafy, Clemenvilla, Orri)', cat:'Citrus', illo:'Lemon', months:[9,10,11,0,1,2], origin:'ES, MA, IL, ZA', freq:'On request' },
  { 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', freq:'On request' },
  { name:'Pomelo', cat:'Citrus', illo:'Lemon', months:[10,11,0,1,2,3], origin:'ES, IT', freq:'On request' },

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

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

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

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

  // ─── Asparagus ───────────────────────────────────────
  { name:'Green Asparagus', cat:'Asparagus', illo:'Cucumber', months:[2,3,4,5,6,7,8], origin:'PE, ES', freq:'Regular', pack:'500 g bundles' },
  { name:'White Asparagus', cat:'Asparagus', illo:'Cucumber', months:[2,3,4,5], origin:'FR, ES, PE', freq:'On request' },
  { name:'Purple Asparagus', cat:'Asparagus', illo:'Cucumber', months:[1,2,3], origin:'FR', freq:'One-off', pack:'5 kg' },
  { name:'Green Asparagus (counter-season)', cat:'Asparagus', illo:'Cucumber', months:[1,2], origin:'MX', freq:'One-off', pack:'420 g' },

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

  // ─── Tomato ──────────────────────────────────────────
  { name:'Cherry Tomato on Vine', cat:'Tomato', illo:'Tomato', months:[8,9,10,11,0,1,2,3], origin:'ES, BE', freq:'Regular', pack:'3 kg' },
  { name:'Mixed Coloured Cherry Tomato', cat:'Tomato', illo:'Tomato', months:[8,9,10,11,0,1,2,3], origin:'FR, ES', freq:'Occasional', pack:'3–5 kg' },
  { name:'Ananas Tomato (Pineapple)', cat:'Tomato', illo:'Tomato', months:[5,6,7,8], origin:'FR', freq:'One-off' },
  { name:'Heirloom Tomato (Cœur de Bœuf, Black Crimea, Marmande)', cat:'Tomato', illo:'Tomato', months:[5,6,7,8,9], origin:'FR', freq:'On request' },
  { name:'Round / Vine Tomato', cat:'Tomato', illo:'Tomato', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR, BE, ES', freq:'On request' },

  // ─── Pepper ──────────────────────────────────────────
  { name:'Bell Pepper (Yellow, Orange, Red, Green)', cat:'Vegetable', illo:'Pepper', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES, NL', freq:'On request' },
  { name:'Aubergine', cat:'Vegetable', illo:'Pepper', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES', freq:'On request' },
  { name:'Courgette (Green, Round, Coloured)', cat:'Vegetable', illo:'Cucumber', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES, BE, NL', freq:'On request' },
  { name:'Cucumber (Classic, Mini)', cat:'Vegetable', illo:'Cucumber', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'ES, NL', freq:'On request' },
  { name:'Cucumber (Noa)', cat:'Vegetable', illo:'Cucumber', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'JO', freq:'On request' },
  { name:'Petits Pois', cat:'Vegetable', illo:'Cucumber', months:[5,6,7,8], origin:'FR', freq:'Occasional', pack:'5 kg' },
  { name:'Butter Bean (Haricot Beurre)', cat:'Vegetable', illo:'Cucumber', months:[7,8,9], origin:'FR', freq:'One-off', pack:'4 kg' },
  { name:'Broad Beans (Fèves)', cat:'Vegetable', illo:'Cucumber', months:[3,4,5,6], origin:'FR, ES', freq:'On request' },
  { name:'Flat Coco Beans', cat:'Vegetable', illo:'Cucumber', months:[6,7,8,9], origin:'FR', freq:'On request' },
  { name:'Green Beans (5kg)', cat:'Vegetable', illo:'Cucumber', months:[5,6,7,8,9], origin:'FR', freq:'On request' },
  { name:'Artichoke (Camus, Calico, Castel)', cat:'Vegetable', illo:'Broccoli', months:[3,4,5,6,7,8,9], origin:'FR, ES', freq:'On request' },
  { name:'Poivrade Bouquet Artichoke', cat:'Vegetable', illo:'Broccoli', months:[3,4,5,6,7], origin:'FR, ES', freq:'On request' },

  // ─── Squash & Pumpkin ────────────────────────────────
  { name:'Pumpkin / Potimarron', cat:'Squash', illo:'Mango', months:[6,7,8,9,10,11], origin:'FR', freq:'Occasional', pack:'×12' },
  { name:'Butternut', cat:'Squash', illo:'Mango', months:[8,9,10,11,0,1,2], origin:'FR', freq:'On request' },
  { name:'Squash (winter)', cat:'Squash', illo:'Mango', months:[8,9,10,11,0,1,2], origin:'FR', freq:'On request' },

  // ─── Salads & Leaves ─────────────────────────────────
  { name:'Lettuce (Batavia, Butterhead, Oakleaf, Frisée)', cat:'Salad', illo:'Broccoli', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR, ES', freq:'On request' },
  { name:'Endive (Classic)', cat:'Salad', illo:'Broccoli', months:[8,9,10,11,0,1,2,3,4], origin:'FR, BE', freq:'On request' },
  { name:'Red Endive', cat:'Salad', illo:'Broccoli', months:[3,4,5,6], origin:'FR', freq:'Occasional', 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', freq:'On request' },
  { name:'Chard (Blette)', cat:'Salad', illo:'Broccoli', months:[3,4,5,6,7,8,9], origin:'FR', freq:'On request' },

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

  // ─── Root Veg ────────────────────────────────────────
  { name:'Carrot (Washed/Sand, Bunched/Loose)', cat:'Root Veg', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR, IT', freq:'On request' },
  { name:'Celery (Stick)', cat:'Root Veg', illo:'Cucumber', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR, IT', freq:'On request' },
  { name:'Celeriac', cat:'Root Veg', illo:'Onion', months:[8,9,10,11,0,1,2,3], origin:'FR, NL', freq:'On request' },
  { name:'Fennel', cat:'Root Veg', illo:'Cucumber', months:[8,9,10,11,0,1,2,3,4], origin:'FR, IT', freq:'On request' },
  { name:'Leek', cat:'Root Veg', illo:'Cucumber', months:[8,9,10,11,0,1,2,3,4], origin:'FR, BE', freq:'On request' },
  { name:'Beetroot (Raw, Cooked, Crapaudine)', cat:'Root Veg', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR', freq:'On request' },
  { name:'Turnip (Loose, Bunched, Golden Ball)', cat:'Root Veg', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR', freq:'On request' },
  { name:'Radish (Pink, Red, Black)', cat:'Root Veg', illo:'Onion', months:[0,1,2,3,4,5,6,7,8,9,10,11], origin:'FR', freq:'On request' },
  { name:'White Spring Onion (Bunched)', cat:'Root Veg', illo:'Onion', months:[2,3,4,5,6,7], origin:'FR', freq:'On request' },
  { name:'Red Onion (Bunched)', cat:'Root Veg', illo:'Onion', months:[2,3,4,5,6,7], origin:'FR', freq:'On request' },
  { name:'Shallot', cat:'Root Veg', illo:'Onion', months:[5,6,7,8], origin:'FR', freq:'One-off' },
  { name:'Pink Garlic', cat:'Root Veg', illo:'Onion', months:[6,7,8,9], origin:'FR', freq:'One-off', pack:'5 kg' },

  // ─── Heritage Veg ────────────────────────────────────
  { name:'Parsnip', cat:'Heritage Veg', illo:'Onion', months:[9,10,11,0,1,2,3], origin:'FR', freq:'On request' },
  { name:'Rutabaga (Swede)', cat:'Heritage Veg', illo:'Onion', months:[9,10,11,0,1,2,3], origin:'FR', freq:'On request' },
  { name:'Jerusalem Artichoke', cat:'Heritage Veg', illo:'Onion', months:[9,10,11,0,1,2], origin:'FR', freq:'On request' },

  // ─── Mini Vegetables ─────────────────────────────────
  { name:'Coloured Baby Carrot', cat:'Mini Veg', illo:'Onion', months:[4,5,6,7], origin:'FR', freq:'One-off', pack:'×6' },
  { name:'Mini Carrot', cat:'Mini Veg', illo:'Onion', months:[5,6,7,8], origin:'NL', freq:'One-off' },
  { name:'Mini Onion', cat:'Mini Veg', illo:'Onion', months:[5,6,7,8], origin:'NL', freq:'One-off' },
  { name:'Mini Turnip', cat:'Mini Veg', illo:'Onion', months:[5,6,7,8], origin:'NL', freq:'One-off' },
  { name:'Mini Beetroot', cat:'Mini Veg', illo:'Onion', months:[5,6,7,8], origin:'NL', freq:'One-off' },
  { name:'Mini Celery', cat:'Mini Veg', illo:'Cucumber', months:[5,6,7,8], origin:'NL', freq:'One-off' },

  // ─── Nuts ────────────────────────────────────────────
  { name:'Hazelnut', cat:'Nuts', illo:'Onion', months:[6,7,8,9,10,11], origin:'FR', freq:'One-off', pack:'5 kg' },
];

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'];

const FREQ_COLOR = {
  'Regular':   { bg:'rgba(45,80,53,0.08)',   fg:'var(--leaf)',   dot:'var(--leaf)' },
  'Occasional':{ bg:'rgba(232,154,60,0.12)', fg:'#9a5a14',       dot:'var(--amber)' },
  'One-off':   { bg:'rgba(0,0,0,0.04)',      fg:'var(--ink-3)',  dot:'var(--ink-3)' },
  'On request':{ bg:'rgba(0,0,0,0.04)',      fg:'var(--ink-3)',  dot:'var(--ink-3)' },
};

// 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 = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const formatMonths = (months) => {
    if (months.length === 12) return 'Year-round';
    if (months.length === 0) return '—';
    // Compact consecutive runs (e.g. "Mar–Jul, Oct").
    const sorted = [...months].sort((a,b)=>a-b);
    const runs = [];
    let start = sorted[0], prev = sorted[0];
    for (let i=1; i<sorted.length; i++){
      if (sorted[i] === prev+1) { prev = sorted[i]; continue; }
      runs.push(start === prev ? monthNames[start] : `${monthNames[start]}–${monthNames[prev]}`);
      start = prev = sorted[i];
    }
    runs.push(start === prev ? monthNames[start] : `${monthNames[start]}–${monthNames[prev]}`);
    return runs.join(', ');
  };

  const today = new Date().toLocaleDateString('en-GB', { day:'numeric', month:'long', year:'numeric' });
  const total = products.length;
  const regular = products.filter(p=>p.freq==='Regular').length;
  const onRequest = products.filter(p=>p.freq==='On request').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>
        <td class="freq"><span class="dot dot-${(p.freq||'').replace(/\s/g,'')}"></span>${p.freq}</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><th>Availability</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; }
  td.freq { width: 16%; color: #1a2419; }
  .dot { display: inline-block; width: 6pt; height: 6pt; border-radius: 50%; margin-right: 5pt; vertical-align: middle; }
  .dot-Regular { background: #2d5b3d; }
  .dot-Occasional { background: #b8923e; }
  .dot-Oneoff { background: #8a6d8a; }
  .dot-Onrequest { background: #a89f88; }
  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. Availability indicates current order frequency; lines marked "On request" can 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">${regular}</div><div class="label">Core / regular</div></div>
      <div class="stat"><div class="num">${onRequest}</div><div class="label">On request</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 ProductCatalogue(){
  const [cat, setCat] = useState('All');
  const [seasonOnly, setSeasonOnly] = useState(false);
  const [freqFilter, setFreqFilter] = useState('All');
  const [query, setQuery] = useState('');
  const month = new Date().getMonth();

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

  const regularCount = PRODUCTS.filter(p=>p.freq==='Regular').length;
  const onRequestCount = PRODUCTS.filter(p=>p.freq==='On request').length;

  return (
    <section id="produce" className="section-pad">
      <div className="container">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom:32, gap:40, flexWrap:'wrap'}}>
          <div>
            <div className="eyebrow" style={{marginBottom:20}}>The catalogue</div>
            <h2 className="h-1" style={{margin:0, maxWidth:'14ch'}}>{PRODUCTS.length} lines we can source.</h2>
            <p style={{margin:'14px 0 0', color:'var(--ink-2)', fontSize:16, maxWidth:'58ch', lineHeight:1.55}}>
              <strong style={{color:'var(--ink)'}}>{regularCount} core lines</strong> we ship every season, plus occasional and specialty items — wild mushrooms, vineyard peaches, Indonesian dragon fruit. A further <strong style={{color:'var(--ink)'}}>{onRequestCount} lines</strong> available on request from our supplier network.
            </p>
          </div>
          <div 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)}>
                <Icon.Leaf size={12}/> In season now
              </button>
              <button className="pill" onClick={()=>downloadCataloguePDF(PRODUCTS)} title="Open a printable list — save as PDF from the print dialog">
                <Icon.Download size={12}/> Download PDF
              </button>
              <span className="mono">{filtered.length} items</span>
            </div>
          </div>
        </div>

        {/* Category filter */}
        <div 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>

        {/* Frequency filter */}
        <div style={{display:'flex', gap:8, marginBottom:24, flexWrap:'wrap', alignItems:'center'}}>
          <span style={{fontSize:11, fontWeight:600, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--ink-3)', marginRight:6}}>Availability:</span>
          {['All','Regular','Occasional','One-off','On request'].map(f=>(
            <button key={f} className={`pill ${freqFilter===f?'pill-active':''}`} onClick={()=>setFreqFilter(f)}>
              {f !== 'All' && <span style={{display:'inline-block', width:6, height:6, borderRadius:'50%', background:FREQ_COLOR[f].dot, marginRight:6}}/>}
              {f}
            </button>
          ))}
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(240px, 1fr))', gap:0, border:'1px solid var(--line)', borderRadius:'var(--radius-lg)', overflow:'hidden'}}>
          {filtered.map((p)=>{
            const inSeason = p.months.includes(month);
            const Illo = Produce[p.illo];
            const fc = FREQ_COLOR[p.freq];
            return (
              <div key={p.name} style={{
                padding:'22px 22px 20px',
                borderRight:'1px solid var(--line-soft)',
                borderBottom:'1px solid var(--line-soft)',
                background:'var(--paper)',
                display:'flex', flexDirection:'column', gap:12,
                transition:'background 0.15s', cursor:'pointer',
                position:'relative', minHeight:260
              }}
              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', gap:8}}>
                  <span className="mono">{p.cat}</span>
                  {inSeason && <span style={{display:'inline-flex', alignItems:'center', gap:5, fontSize:11, fontWeight:600, color:'var(--leaf)', whiteSpace:'nowrap'}}><span style={{width:6, height:6, borderRadius:'50%', background:'var(--leaf)'}}/> In season</span>}
                </div>
                <div style={{flex:1, display:'flex', alignItems:'center', justifyContent:'center', minHeight:90}}>
                  <Illo size={88}/>
                </div>
                <div>
                  <div style={{fontFamily:'var(--serif)', fontSize:18, fontWeight:500, lineHeight:1.2}}>{p.name}</div>
                  <div style={{display:'flex', justifyContent:'space-between', gap:8, marginTop:8, alignItems:'center'}}>
                    <span style={{fontSize:11, color:'var(--ink-3)', fontFamily:'var(--sans)', letterSpacing:'0.04em'}}>{p.origin}{p.pack ? ` · ${p.pack}` : ''}</span>
                    <span style={{
                      fontSize:10, fontWeight:600, padding:'3px 8px', borderRadius:99,
                      background:fc.bg, color:fc.fg, letterSpacing:'0.04em', textTransform:'uppercase', whiteSpace:'nowrap'
                    }}>{p.freq}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {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>
        )}
      </div>
    </section>
  );
}

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

function Seasonality(){
  const month = new Date().getMonth();
  // 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)',
    'Rosé / Pink Seedless Grape',
    'Vineyard Peach (Pêche de Vigne)',
    'Green Asparagus',
    'Button Mushroom',
    '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={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom:48, flexWrap:'wrap', gap:40}}>
          <div>
            <div className="eyebrow" style={{color:'var(--amber)', marginBottom:20}}>Seasonality calendar</div>
            <h2 className="h-1" style={{margin:0, color:'var(--cream)', maxWidth:'18ch'}}>
              Plan your year, by what's at peak.
            </h2>
          </div>
          <p style={{margin:0, color:'rgba(244,239,226,0.75)', maxWidth:380, 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 style={{
          background:'rgba(0,0,0,0.18)', border:'1px solid rgba(255,255,255,0.1)',
          borderRadius:'var(--radius-lg)', overflow:'hidden'
        }}>
          <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, ProductCatalogue, Seasonality });