// Trade variant — hand-built family-trader x trade-publication.
// Workhorse sans (system stack), dense rules, manifest tables, no Fraunces,
// no oversized italic accents, no floating "live shipment" data card.
// Goal: feels like a working produce trader's site, not a SaaS landing page.

const TRADE_PALETTE_NAVY = '#0E2A47';
const TRADE_PALETTE_CREAM = '#F4EFE2';
const TRADE_PALETTE_RULE = '#1E1A14';

// Tiny inline stamp/rosette — ink-on-paper feel, not a slick logo.
function TradeStamp({ size = 64, color = TRADE_PALETTE_NAVY }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" style={{display:'block'}}>
      <circle cx="32" cy="32" r="29" fill="none" stroke={color} strokeWidth="1.2"/>
      <circle cx="32" cy="32" r="24" fill="none" stroke={color} strokeWidth="0.6" strokeDasharray="2 2"/>
      <text x="32" y="22" textAnchor="middle" fontSize="6" fontFamily="ui-monospace,Menlo,monospace" fill={color} letterSpacing="1">EST. 2014</text>
      <text x="32" y="36" textAnchor="middle" fontSize="9" fontFamily="ui-monospace,Menlo,monospace" fontWeight="700" fill={color}>P&amp;L</text>
      <text x="32" y="46" textAnchor="middle" fontSize="5" fontFamily="ui-monospace,Menlo,monospace" fill={color} letterSpacing="0.5">LONDON · NBO</text>
    </svg>
  );
}

// Ticker — fake market-line strip across the top, the way a trade pub would.
function TradeTicker(){
  const lines = [
    'NBO→LHR · KQ100 · 14:30 GMT · 4.2T mango+passion',
    'AMS→DXB · KL427 · 09:15 GMT · 1.8T mixed pallet',
    'JRO→LHR · KQ102 · transit MBA · arr Mon 06:00',
    'Wk 18 · Kenyan mango supply normal · prices steady',
    'Wk 18 · Avocado Hass fair · Peruvian arrivals up',
    'Wk 18 · Passion fruit firm · Colombia·Vietnam tight',
  ];
  const all = [...lines, ...lines, ...lines];
  return (
    <div style={{
      borderTop:`1px solid ${TRADE_PALETTE_RULE}`,
      borderBottom:`1px solid ${TRADE_PALETTE_RULE}`,
      background: TRADE_PALETTE_CREAM,
      overflow:'hidden', whiteSpace:'nowrap',
      fontFamily:'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
      fontSize:12, letterSpacing:'0.04em',
      color: TRADE_PALETTE_NAVY,
      padding:'9px 0'
    }}>
      <div style={{display:'inline-flex', gap:48, animation:'marquee 60s linear infinite', paddingLeft:48}}>
        {all.map((l,i)=> <span key={i}>· {l}</span>)}
      </div>
    </div>
  );
}

// Masthead — newspaper-ish. Title set HUGE in the same workhorse sans, all caps,
// with a thin rule above and below + an issue line. No giant serif.
function TradeMasthead(){
  const today = new Date();
  const wk = (() => {
    const d = new Date(today); d.setHours(0,0,0,0);
    d.setDate(d.getDate() + 4 - (d.getDay()||7));
    const ys = new Date(d.getFullYear(),0,1);
    return Math.ceil((((d - ys)/86400000)+1)/7);
  })();
  const dateStr = today.toLocaleDateString('en-GB', { weekday:'long', day:'numeric', month:'long', year:'numeric' });
  return (
    <header style={{background: TRADE_PALETTE_CREAM, borderTop:`3px solid ${TRADE_PALETTE_RULE}`}}>
      <div className="container" style={{padding:'14px 32px 0'}}>
        <div style={{
          display:'flex', justifyContent:'space-between', alignItems:'baseline',
          fontFamily:'ui-monospace, "SF Mono", Menlo, monospace',
          fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase',
          color: TRADE_PALETTE_NAVY, paddingBottom:14
        }}>
          <span>Vol. XII · No. {wk}</span>
          <span>{dateStr}</span>
          <span>Wholesale · Export · B2B</span>
        </div>
        <div style={{borderTop:`1px solid ${TRADE_PALETTE_RULE}`, paddingTop:18, paddingBottom:6}}>
          <h1 style={{
            margin:0,
            fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif',
            fontWeight:900,
            fontSize:'clamp(56px, 11vw, 168px)',
            letterSpacing:'-0.04em',
            lineHeight:0.86,
            color: TRADE_PALETTE_NAVY,
            textTransform:'none'
          }}>
            P<span style={{fontWeight:300}}>&amp;</span>L England
          </h1>
          <div style={{
            display:'flex', justifyContent:'space-between', alignItems:'baseline',
            paddingTop:14,
            fontFamily:'ui-monospace, "SF Mono", Menlo, monospace',
            fontSize:12, letterSpacing:'0.12em', textTransform:'uppercase',
            color: TRADE_PALETTE_NAVY, fontWeight:600
          }}>
            <span>Fresh produce · sourced · packed · flown</span>
            <span>London · Nairobi · Mombasa</span>
            <span style={{opacity:0.6}}>Founded MMXIV</span>
          </div>
        </div>
      </div>
      <nav style={{
        background: TRADE_PALETTE_NAVY, color: TRADE_PALETTE_CREAM,
        marginTop:14
      }}>
        <div className="container" style={{
          display:'flex', gap:32, padding:'14px 32px',
          fontFamily:'ui-monospace, "SF Mono", Menlo, monospace',
          fontSize:12, letterSpacing:'0.18em', textTransform:'uppercase', fontWeight:600
        }}>
          {['Letter from the desk','This week','Catalogue','Manifest','Routes','Quote'].map((l,i)=>(
            <a key={i} href={'#trade-'+i} style={{color:'inherit'}}>{l}</a>
          ))}
          <span style={{marginLeft:'auto', opacity:0.7}}>+44 ___ ___ ____</span>
        </div>
      </nav>
    </header>
  );
}

// "Letter from the desk" — short, signed, dated. The anti-hero.
function TradeLetter(){
  const today = new Date().toLocaleDateString('en-GB', { day:'numeric', month:'long', year:'numeric' });
  return (
    <section id="trade-0" style={{background: TRADE_PALETTE_CREAM, borderBottom:`1px solid ${TRADE_PALETTE_RULE}`}}>
      <div className="container" style={{padding:'72px 32px', display:'grid', gridTemplateColumns:'1.1fr 2fr 0.9fr', gap:56, alignItems:'start'}}>
        <div>
          <TradeStamp size={96}/>
          <div style={{
            marginTop:18,
            fontFamily:'ui-monospace, "SF Mono", Menlo, monospace',
            fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase',
            color: TRADE_PALETTE_NAVY, fontWeight:600, lineHeight:1.6
          }}>
            <div>From the desk of</div>
            <div style={{opacity:0.6}}>P. England · Director</div>
            <div style={{opacity:0.6}}>{today}</div>
          </div>
        </div>
        <div>
          <div style={{
            fontFamily:'ui-monospace, "SF Mono", Menlo, monospace',
            fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase',
            color: TRADE_PALETTE_NAVY, fontWeight:600, marginBottom:22
          }}>Letter from the desk — Wk 18, Spring</div>
          <div style={{
            fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif',
            fontSize:22, lineHeight:1.5, color: TRADE_PALETTE_NAVY, fontWeight:400, letterSpacing:'-0.005em'
          }}>
            <p style={{margin:'0 0 18px'}}>
              We are a small family trader. We source fruit and vegetables from growers we know personally — chiefly Kenya, Spain, France, Peru and Vietnam — and we fly them, mostly belly-cargo on Emirates, Qatar and KLM, to retailers and wholesalers across the UK, the Gulf and East Africa.
            </p>
            <p style={{margin:'0 0 18px'}}>
              The work is unglamorous: phone calls at 5am, manifests, AWBs, cold chain, customs. We don't run a portal or a marketplace. We answer the phone. If you want to test us with one pallet, that's how most of our long-standing accounts started.
            </p>
            <p style={{margin:0, fontWeight:600}}>
              — P. England, Director
            </p>
          </div>
        </div>
        <aside style={{borderLeft:`1px solid ${TRADE_PALETTE_RULE}`, paddingLeft:24}}>
          <div style={{
            fontFamily:'ui-monospace, "SF Mono", Menlo, monospace',
            fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase',
            color: TRADE_PALETTE_NAVY, fontWeight:700, marginBottom:14
          }}>Direct to the desk</div>
          <ul style={{listStyle:'none', padding:0, margin:0, fontFamily:'ui-monospace, Menlo, monospace', fontSize:13, lineHeight:2, color: TRADE_PALETTE_NAVY}}>
            <li>WhatsApp · 24h</li>
            <li>Phone · UK +44</li>
            <li>Phone · KE +254</li>
            <li>Email · trade@</li>
            <li style={{opacity:0.6}}>No web form. We will reply.</li>
          </ul>
        </aside>
      </div>
    </section>
  );
}

// "This week" — two columns, hand-typed feel. Market notes you'd actually
// pick up at New Spitalfields.
function TradeThisWeek(){
  const notes = [
    { tag:'KENYA', body:'Mango supply normal at origin (Embu, Machakos). Strong export demand from the Gulf — Manica orchards are running 6 days. Prices steady. Brix excellent.' },
    { tag:'PERU', body:'Hass avocado season opening. First arrivals into LHR landed Sun. Quality is correct. Sizing 18 / 20 readily available; 14 short and priced firm.' },
    { tag:'COLOMBIA', body:'Yellow passion fruit tight at origin — recent rain. We are filling demand from Vietnam direct (slightly lower brix; price reflects this). Honest substitution offered before booking.' },
    { tag:'SPAIN', body:'Strawberry season closing. Last good Leticia week 19. Charlotte holds longer. Customers eyeing French Gariguette + Italian after that.' },
    { tag:'FRANCE', body:'White peach + nectarine arrivals from Roussillon week 20. Vineyard peach (Pêche de Vigne) booking now for early July. Limited; chefs first.' },
    { tag:'CARGO', body:'KQ100 stable. EK002 belly-hold space tight Wed–Fri (passenger rebound). KL427 unaffected. We can route via DXB / DOH if LHR slots fail.' },
  ];
  return (
    <section id="trade-1" style={{background:'#FFFFFF', borderBottom:`1px solid ${TRADE_PALETTE_RULE}`}}>
      <div className="container" style={{padding:'56px 32px 64px'}}>
        <div style={{
          display:'flex', justifyContent:'space-between', alignItems:'baseline',
          borderBottom:`1px solid ${TRADE_PALETTE_RULE}`, paddingBottom:14, marginBottom:32
        }}>
          <h2 style={{
            margin:0, fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif',
            fontSize:'clamp(32px,4vw,52px)', fontWeight:800, letterSpacing:'-0.02em', color: TRADE_PALETTE_NAVY
          }}>This week — at origin &amp; in the air</h2>
          <span style={{fontFamily:'ui-monospace, Menlo, monospace', fontSize:12, letterSpacing:'0.12em', textTransform:'uppercase', color: TRADE_PALETTE_NAVY, opacity:0.6}}>
            Updated by hand · {new Date().toLocaleDateString('en-GB',{day:'numeric', month:'short'})}
          </span>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:0}}>
          {notes.map((n,i)=>(
            <div key={i} style={{
              padding:'24px 28px',
              borderRight: (i % 3 !== 2) ? `1px solid ${TRADE_PALETTE_RULE}` : 'none',
              borderTop: i >= 3 ? `1px solid ${TRADE_PALETTE_RULE}` : 'none'
            }}>
              <div style={{
                fontFamily:'ui-monospace, Menlo, monospace', fontSize:11, fontWeight:700,
                letterSpacing:'0.16em', color: TRADE_PALETTE_NAVY, marginBottom:10
              }}>{n.tag}</div>
              <p style={{
                margin:0, fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif',
                fontSize:15, lineHeight:1.55, color:'#1E2A3A'
              }}>{n.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Manifest — actual flight log table. Looks like the document a buyer would see.
function TradeManifest(){
  const rows = [
    { awb:'706-44218731', carrier:'KQ100', from:'NBO', to:'LHR', etd:'14:30', eta:'21:05', product:'Mango Apple, Avocado Hass, Passion Fruit', wt:'4,180 kg', status:'In transit'},
    { awb:'176-99182203', carrier:'EK002', from:'DXB', to:'LHR', etd:'02:50', eta:'06:35', product:'Mixed pallet · cherry, plum, peach', wt:'1,820 kg', status:'On board'},
    { awb:'074-77234012', carrier:'KL427', from:'AMS', to:'DXB', etd:'09:15', eta:'18:40', product:'Asparagus, fennel, baby leaf', wt:'2,640 kg', status:'Cleared MEX'},
    { awb:'706-44218519', carrier:'KQ102', from:'JRO', to:'LHR', etd:'Mon 04:00', eta:'Mon 11:50', product:'Avocado, mango, French bean', wt:'5,210 kg', status:'Booked'},
    { awb:'176-99182481', carrier:'EK006', from:'DXB', to:'MAN', etd:'Tue 01:10', eta:'Tue 05:25', product:'Stone fruit (cherry cal 26)', wt:'960 kg', status:'Confirmed'},
  ];
  return (
    <section id="trade-3" style={{background: TRADE_PALETTE_CREAM, borderBottom:`1px solid ${TRADE_PALETTE_RULE}`}}>
      <div className="container" style={{padding:'56px 32px 64px'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', borderBottom:`1px solid ${TRADE_PALETTE_RULE}`, paddingBottom:14, marginBottom:24}}>
          <h2 style={{margin:0, fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif', fontSize:'clamp(28px,3.6vw,44px)', fontWeight:800, letterSpacing:'-0.02em', color: TRADE_PALETTE_NAVY}}>Daily manifest</h2>
          <span style={{fontFamily:'ui-monospace, Menlo, monospace', fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase', color: TRADE_PALETTE_NAVY, fontWeight:600}}>
            <span style={{display:'inline-block', width:8, height:8, borderRadius:'50%', background:'#22C55E', marginRight:8, verticalAlign:'middle'}}/>
            Live · 5 active AWBs
          </span>
        </div>
        <div style={{overflow:'auto'}}>
          <table style={{
            width:'100%', borderCollapse:'collapse',
            fontFamily:'ui-monospace, "SF Mono", Menlo, monospace', fontSize:13,
            color: TRADE_PALETTE_NAVY
          }}>
            <thead>
              <tr style={{borderBottom:`1px solid ${TRADE_PALETTE_RULE}`, textAlign:'left', textTransform:'uppercase', fontSize:11, letterSpacing:'0.12em', fontWeight:700}}>
                <th style={{padding:'10px 14px 10px 0'}}>AWB</th>
                <th style={{padding:'10px 14px'}}>Flight</th>
                <th style={{padding:'10px 14px'}}>Origin</th>
                <th style={{padding:'10px 14px'}}>Destination</th>
                <th style={{padding:'10px 14px'}}>ETD</th>
                <th style={{padding:'10px 14px'}}>ETA</th>
                <th style={{padding:'10px 14px'}}>Product</th>
                <th style={{padding:'10px 14px'}}>Wt.</th>
                <th style={{padding:'10px 0 10px 14px'}}>Status</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r,i)=>(
                <tr key={i} style={{borderBottom:`1px dotted ${TRADE_PALETTE_RULE}`}}>
                  <td style={{padding:'14px 14px 14px 0'}}>{r.awb}</td>
                  <td style={{padding:'14px', fontWeight:700}}>{r.carrier}</td>
                  <td style={{padding:'14px'}}>{r.from}</td>
                  <td style={{padding:'14px'}}>{r.to}</td>
                  <td style={{padding:'14px'}}>{r.etd}</td>
                  <td style={{padding:'14px'}}>{r.eta}</td>
                  <td style={{padding:'14px', fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif'}}>{r.product}</td>
                  <td style={{padding:'14px'}}>{r.wt}</td>
                  <td style={{padding:'14px 0 14px 14px'}}>
                    <span style={{
                      display:'inline-block', padding:'3px 8px', border:`1px solid ${TRADE_PALETTE_RULE}`,
                      fontSize:11, letterSpacing:'0.06em', textTransform:'uppercase'
                    }}>{r.status}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p style={{
          marginTop:24, fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif',
          fontSize:14, color: TRADE_PALETTE_NAVY, opacity:0.7
        }}>
          Manifest is sample data, kept honest by hand. We'll send your real AWB by WhatsApp when your shipment is booked.
        </p>
      </div>
    </section>
  );
}

// Catalogue — the wholesale spec sheet. Dense table grouped by category.
// We re-use the existing PRODUCTS array from products.jsx (window scope).
function TradeCatalogue(){
  const items = (typeof PRODUCTS !== 'undefined') ? PRODUCTS : [];
  const cats = {};
  items.forEach(p => { (cats[p.cat] = cats[p.cat] || []).push(p); });
  const order = ['Berries','Cherries','Stone Fruit','Plums','Tropical','Citrus','Vegetables','Herbs','Roots','Salads','Mushrooms','Other'];
  const sortedCats = Object.keys(cats).sort((a,b)=> {
    const ai = order.indexOf(a), bi = order.indexOf(b);
    return (ai<0?99:ai) - (bi<0?99:bi);
  });

  const monthShort = ['J','F','M','A','M','J','J','A','S','O','N','D'];

  return (
    <section id="trade-2" style={{background:'#FFFFFF', borderBottom:`1px solid ${TRADE_PALETTE_RULE}`}}>
      <div className="container" style={{padding:'56px 32px 72px'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', borderBottom:`1px solid ${TRADE_PALETTE_RULE}`, paddingBottom:14, marginBottom:32}}>
          <h2 style={{margin:0, fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif', fontSize:'clamp(32px,4vw,52px)', fontWeight:800, letterSpacing:'-0.02em', color: TRADE_PALETTE_NAVY}}>Catalogue</h2>
          <span style={{fontFamily:'ui-monospace, Menlo, monospace', fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase', color: TRADE_PALETTE_NAVY, fontWeight:600}}>
            {items.length} lines · spring '26
          </span>
        </div>

        <p style={{
          maxWidth:'70ch', margin:'0 0 32px',
          fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif',
          fontSize:16, lineHeight:1.55, color: TRADE_PALETTE_NAVY
        }}>
          What we ship. <strong>Regular</strong> = we move it every week in season. <strong>Occasional</strong> = booked to order, two-week notice. <strong>On request</strong> = in supplier catalogue, ask before you commit volume.
        </p>

        {sortedCats.map((cat, ci) => (
          <div key={cat} style={{marginBottom: ci < sortedCats.length-1 ? 36 : 0}}>
            <div style={{
              display:'flex', alignItems:'baseline', gap:14,
              borderBottom:`1px solid ${TRADE_PALETTE_RULE}`, paddingBottom:8, marginBottom:0
            }}>
              <h3 style={{
                margin:0, fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif',
                fontSize:18, fontWeight:800, letterSpacing:'-0.005em', textTransform:'uppercase', color: TRADE_PALETTE_NAVY
              }}>{cat}</h3>
              <span style={{fontFamily:'ui-monospace, Menlo, monospace', fontSize:11, color: TRADE_PALETTE_NAVY, opacity:0.6, letterSpacing:'0.08em'}}>
                {cats[cat].length} lines
              </span>
            </div>
            <table style={{
              width:'100%', borderCollapse:'collapse',
              fontFamily:'ui-monospace, "SF Mono", Menlo, monospace', fontSize:12.5,
              color: TRADE_PALETTE_NAVY
            }}>
              <thead>
                <tr style={{textAlign:'left', textTransform:'uppercase', fontSize:10.5, letterSpacing:'0.12em', fontWeight:700, color: TRADE_PALETTE_NAVY, opacity:0.6}}>
                  <th style={{padding:'10px 14px 10px 0', width:'34%'}}>Line</th>
                  <th style={{padding:'10px 14px', width:'14%'}}>Origin</th>
                  <th style={{padding:'10px 14px', width:'14%'}}>Pack</th>
                  <th style={{padding:'10px 14px', width:'24%'}}>Season</th>
                  <th style={{padding:'10px 0 10px 14px', width:'14%'}}>Cadence</th>
                </tr>
              </thead>
              <tbody>
                {cats[cat].map((p,i) => (
                  <tr key={i} style={{borderTop:`1px dotted ${TRADE_PALETTE_RULE}`}}>
                    <td style={{padding:'10px 14px 10px 0', fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif', fontSize:14}}>{p.name}</td>
                    <td style={{padding:'10px 14px'}}>{p.origin}</td>
                    <td style={{padding:'10px 14px', opacity: p.pack ? 1 : 0.4}}>{p.pack || '—'}</td>
                    <td style={{padding:'10px 14px'}}>
                      <span style={{display:'inline-flex', gap:2}}>
                        {monthShort.map((m, mi) => {
                          const on = (p.months || []).includes(mi);
                          return (
                            <span key={mi} style={{
                              display:'inline-block', width:14, textAlign:'center',
                              fontWeight: on ? 700 : 400,
                              color: on ? TRADE_PALETTE_NAVY : TRADE_PALETTE_NAVY,
                              opacity: on ? 1 : 0.18,
                              borderBottom: on ? `2px solid ${TRADE_PALETTE_NAVY}` : '2px solid transparent'
                            }}>{m}</span>
                          );
                        })}
                      </span>
                    </td>
                    <td style={{padding:'10px 0 10px 14px'}}>
                      <span style={{
                        fontSize:10.5, letterSpacing:'0.08em', textTransform:'uppercase',
                        fontWeight: p.freq === 'Regular' ? 700 : 500,
                        opacity: p.freq === 'On request' ? 0.6 : 1
                      }}>{p.freq}</span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ))}
      </div>
    </section>
  );
}

// Routes — minimal, named airlines, no glossy SVG world map. Just facts.
function TradeRoutes(){
  const rows = [
    { lane:'Nairobi (NBO) → London (LHR)', carriers:'Kenya Airways · BA Cargo', tt:'9h direct', cad:'Mon · Wed · Fri'},
    { lane:'Nairobi (NBO) → Dubai (DXB)', carriers:'Emirates SkyCargo · Qatar Airways', tt:'5h via DOH avail.', cad:'Daily'},
    { lane:'Mombasa (MBA) → London (LHR)', carriers:'KQ + transit NBO', tt:'12–14h incl. transit', cad:'Mon · Thu'},
    { lane:'Madrid (MAD) → Manchester (MAN)', carriers:'Truck + RoRo · refrigerated', tt:'3 days', cad:'Bi-weekly'},
    { lane:'Lima (LIM) → London (LHR)', carriers:'Avianca Cargo · KLM via AMS', tt:'~24h', cad:'Wed (avo season)'},
    { lane:'Ho Chi Minh (SGN) → London (LHR)', carriers:'Vietnam Airlines · KLM', tt:'~22h via AMS', cad:'On booking'},
  ];
  return (
    <section id="trade-4" style={{background: TRADE_PALETTE_CREAM, borderBottom:`1px solid ${TRADE_PALETTE_RULE}`}}>
      <div className="container" style={{padding:'56px 32px 64px'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', borderBottom:`1px solid ${TRADE_PALETTE_RULE}`, paddingBottom:14, marginBottom:24}}>
          <h2 style={{margin:0, fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif', fontSize:'clamp(28px,3.6vw,44px)', fontWeight:800, letterSpacing:'-0.02em', color: TRADE_PALETTE_NAVY}}>Routes &amp; carriers</h2>
          <span style={{fontFamily:'ui-monospace, Menlo, monospace', fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase', color: TRADE_PALETTE_NAVY, fontWeight:600}}>2–8°C cold chain · door-to-door</span>
        </div>
        <table style={{width:'100%', borderCollapse:'collapse', fontFamily:'ui-monospace, Menlo, monospace', fontSize:13, color: TRADE_PALETTE_NAVY}}>
          <thead>
            <tr style={{textAlign:'left', textTransform:'uppercase', fontSize:11, letterSpacing:'0.12em', fontWeight:700, opacity:0.7}}>
              <th style={{padding:'10px 14px 10px 0', width:'30%'}}>Lane</th>
              <th style={{padding:'10px 14px', width:'30%'}}>Carriers we book</th>
              <th style={{padding:'10px 14px', width:'18%'}}>Transit</th>
              <th style={{padding:'10px 0 10px 14px', width:'22%'}}>Cadence</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r,i)=>(
              <tr key={i} style={{borderTop:`1px dotted ${TRADE_PALETTE_RULE}`}}>
                <td style={{padding:'14px 14px 14px 0', fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif', fontSize:15, fontWeight:600}}>{r.lane}</td>
                <td style={{padding:'14px'}}>{r.carriers}</td>
                <td style={{padding:'14px'}}>{r.tt}</td>
                <td style={{padding:'14px 0 14px 14px'}}>{r.cad}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

// Quote — short, no multi-step wizard. A pull-tab feel. "Tell us, we'll reply."
function TradeQuote(){
  return (
    <section id="trade-5" style={{background: TRADE_PALETTE_NAVY, color: TRADE_PALETTE_CREAM}}>
      <div className="container" style={{padding:'72px 32px', display:'grid', gridTemplateColumns:'1.2fr 1.8fr', gap:64, alignItems:'start'}}>
        <div>
          <div style={{fontFamily:'ui-monospace, Menlo, monospace', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', opacity:0.7, marginBottom:18}}>Ask for a price</div>
          <h2 style={{margin:0, fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif', fontSize:'clamp(40px,5vw,72px)', fontWeight:800, letterSpacing:'-0.02em', lineHeight:1}}>
            One pallet is fine. We start there too.
          </h2>
          <p style={{marginTop:20, maxWidth:'42ch', fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif', fontSize:17, lineHeight:1.55, opacity:0.85}}>
            No portal, no form-builder. Send us your line, your destination, your volume — we reply with a price, an origin, and an honest lead time. Usually within a few hours.
          </p>
        </div>
        <form onSubmit={e=>e.preventDefault()} style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
          {[
            ['Your name','text','col1'],
            ['Company','text','col2'],
            ['City / port','text','col1'],
            ['WhatsApp or phone','text','col2'],
            ['What you need (line, volume, frequency)','textarea','full'],
          ].map(([lbl,t,sp],i)=>(
            <label key={i} style={{display:'block', gridColumn: sp==='full'?'1 / -1':'auto'}}>
              <span style={{display:'block', fontFamily:'ui-monospace, Menlo, monospace', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', opacity:0.7, marginBottom:8}}>{lbl}</span>
              {t==='textarea'
                ? <textarea rows={4} style={{width:'100%', background:'transparent', border:`1px solid rgba(244,239,226,0.3)`, color:'inherit', padding:'12px 14px', fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif', fontSize:15, borderRadius:0}}/>
                : <input type={t} style={{width:'100%', background:'transparent', border:`1px solid rgba(244,239,226,0.3)`, color:'inherit', padding:'12px 14px', fontFamily:'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif', fontSize:15, borderRadius:0}}/>}
            </label>
          ))}
          <div style={{gridColumn:'1 / -1', display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:12, gap:24, flexWrap:'wrap'}}>
            <span style={{fontFamily:'ui-monospace, Menlo, monospace', fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', opacity:0.7}}>
              We reply by hand · usually within 4 hours, business hours UK / EAT.
            </span>
            <button type="submit" style={{
              padding:'14px 28px', background: TRADE_PALETTE_CREAM, color: TRADE_PALETTE_NAVY,
              border:'none', fontFamily:'ui-monospace, Menlo, monospace', fontSize:13, letterSpacing:'0.14em', textTransform:'uppercase', fontWeight:700, cursor:'pointer'
            }}>Send to the desk →</button>
          </div>
        </form>
      </div>
    </section>
  );
}

// Footer — bookmatched newspaper foot.
function TradeFooter(){
  return (
    <footer style={{background: TRADE_PALETTE_CREAM, color: TRADE_PALETTE_NAVY, borderTop:`3px solid ${TRADE_PALETTE_RULE}`}}>
      <div className="container" style={{padding:'48px 32px 32px'}}>
        <div style={{
          display:'flex', justifyContent:'space-between', alignItems:'baseline', flexWrap:'wrap', gap:32,
          fontFamily:'ui-monospace, Menlo, monospace', fontSize:12, letterSpacing:'0.12em', textTransform:'uppercase'
        }}>
          <div style={{fontWeight:800, fontSize:14}}>P&amp;L England · Fresh produce export</div>
          <div>London · Nairobi · Mombasa</div>
          <div>+44 ___ ___ ____  ·  trade@plengland.co.uk</div>
        </div>
        <div style={{
          marginTop:32, paddingTop:18, borderTop:`1px solid ${TRADE_PALETTE_RULE}`,
          display:'flex', justifyContent:'space-between',
          fontFamily:'ui-monospace, Menlo, monospace', fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', opacity:0.7
        }}>
          <span>© P&amp;L England Ltd. Family-run since 2014.</span>
          <span>Set on a desk in West London. Set in your morning, hopefully.</span>
        </div>
      </div>
    </footer>
  );
}

function TradePage(){
  React.useEffect(()=>{
    document.body.classList.add('style-trade');
    return ()=> document.body.classList.remove('style-trade');
  }, []);
  return (
    <>
      <TradeMasthead/>
      <TradeTicker/>
      <TradeLetter/>
      <TradeThisWeek/>
      <TradeCatalogue/>
      <TradeManifest/>
      <TradeRoutes/>
      <TradeQuote/>
      <TradeFooter/>
    </>
  );
}

Object.assign(window, { TradePage });