// Routes map + live tracker + testimonials + FAQ
const ROUTES = [
  { from:[48.85,2.35], fromName:'Paris', to:[-6.8,39.3], toName:'Dar es Salaam', line:'AF / KL' },
  { from:[-6.2,106.85], fromName:'Jakarta', to:[-6.8,39.3], toName:'Dar es Salaam', line:'QR / EK' },
  { from:[48.85,2.35], fromName:'Paris', to:[-26.2,28.0], toName:'South Africa', line:'AF' },
  { from:[30.0,31.2], fromName:'Cairo', to:[-6.8,39.3], toName:'Dar es Salaam', line:'MS / ET' },
  { from:[-26.2,28.0], fromName:'Johannesburg', to:[48.85,2.35], toName:'Paris', line:'AF' },
  { from:[48.85,2.35], fromName:'Paris', to:[-26.2,28.0], toName:'Johannesburg', line:'AF / KL' },
  { from:[-33.9,18.4], fromName:'Cape Town', to:[-6.8,39.3], toName:'Dar es Salaam', line:'ET' },
  { from:[40.4,-3.7], fromName:'Madrid', to:[-6.8,39.3], toName:'Dar es Salaam', line:'KL / QR' },
];

// Project lat/lng → SVG coords for our world rect (mercator-ish, simplified)
function project([lat,lng], W=1000, H=500){
  const x = ((lng + 180) / 360) * W;
  const y = ((90 - lat) / 180) * H;
  return [x, y];
}

function RoutesMap(){
  const [active, setActive] = useState(0);
  useEffect(()=>{
    const t = setInterval(()=>setActive(a => (a+1) % ROUTES.length), 2400);
    return ()=> clearInterval(t);
  },[]);

  return (
    <section id="routes" className="section-pad">
      <div className="container">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom:48, gap:40, flexWrap:'wrap'}}>
          <div>
            <div className="eyebrow" style={{marginBottom:20}}>Routes & destinations</div>
            <h2 className="h-1" style={{margin:0, maxWidth:'16ch'}}>From European hubs to your warehouse.</h2>
          </div>
          <p className="lead" style={{margin:0, maxWidth:380}}>
            We coordinate air freight from Spanish, Italian, French and Dutch sourcing hubs to 20+ destinations across Africa and the Middle East.
          </p>
        </div>

        <div style={{
          background:'var(--paper-2)', border:'1px solid var(--line)',
          borderRadius:'var(--radius-lg)', padding:32, position:'relative', overflow:'hidden'
        }}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 280px', gap:32, alignItems:'start'}} className="map-grid">
            <div style={{position:'relative', aspectRatio:'2/1', background:'var(--paper)', border:'1px solid var(--line-soft)', borderRadius:'var(--radius)', overflow:'hidden'}}>
              <WorldMap routes={ROUTES} active={active}/>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              <div className="mono" style={{marginBottom:8}}>Active corridors · {ROUTES.length}</div>
              {ROUTES.map((r,i)=>(
                <button key={i}
                  onClick={()=>setActive(i)}
                  style={{
                    textAlign:'left', padding:'12px 14px',
                    border:`1px solid ${active===i?'var(--ink)':'var(--line-soft)'}`,
                    background: active===i ? 'var(--ink)' : 'var(--paper)',
                    color: active===i ? 'var(--cream)' : 'var(--ink)',
                    borderRadius:'var(--radius)',
                    display:'flex', justifyContent:'space-between', alignItems:'center',
                    transition:'all 0.2s', cursor:'pointer'
                  }}>
                  <span style={{display:'flex', flexDirection:'column', alignItems:'flex-start'}}>
                    <span style={{fontSize:14, fontWeight:500}}>{r.fromName} → {r.toName}</span>
                    <span style={{fontSize:11, opacity:0.7, marginTop:2, fontFamily:'var(--sans)'}}>{r.line}</span>
                  </span>
                  <Icon.Arrow size={14}/>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .map-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function WorldMap({ routes, active }){
  const W = 1000, H = 500;
  // Simplified continent silhouettes
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{width:'100%', height:'100%', position:'absolute', inset:0}}>
      {/* Background dots representing land */}
      <defs>
        <pattern id="dots" x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="2" cy="2" r="1" fill="var(--line)"/>
        </pattern>
        <radialGradient id="hot" cx="50%" cy="50%">
          <stop offset="0%" stopColor="var(--tomato)" stopOpacity="0.6"/>
          <stop offset="100%" stopColor="var(--tomato)" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect width={W} height={H} fill="url(#dots)"/>

      {/* Stylised continents (very simplified) */}
      <g fill="var(--line-soft)" opacity="0.85">
        {/* Europe */}
        <path d="M 460 110 L 520 100 L 560 120 L 580 150 L 540 175 L 500 170 L 470 150 Z"/>
        {/* Africa */}
        <path d="M 480 200 L 560 200 L 590 240 L 600 320 L 560 380 L 510 380 L 470 320 L 460 240 Z"/>
        {/* Middle East */}
        <path d="M 580 165 L 640 170 L 680 220 L 660 260 L 600 250 L 590 210 Z"/>
        {/* Asia */}
        <path d="M 660 110 L 800 100 L 880 160 L 870 220 L 780 240 L 700 220 L 670 170 Z"/>
        {/* North America */}
        <path d="M 130 80 L 280 90 L 320 160 L 280 230 L 200 240 L 140 200 L 110 140 Z"/>
        {/* South America */}
        <path d="M 280 270 L 350 260 L 370 320 L 340 400 L 290 410 L 270 350 Z"/>
      </g>

      {/* Routes */}
      {routes.map((r,i)=>{
        const [x1,y1] = project(r.from, W, H);
        const [x2,y2] = project(r.to, W, H);
        const mx = (x1+x2)/2;
        const my = (y1+y2)/2 - Math.abs(x2-x1)*0.18;
        const isActive = i===active;
        return (
          <g key={i} opacity={isActive?1:0.35}>
            <path d={`M ${x1} ${y1} Q ${mx} ${my} ${x2} ${y2}`}
                  fill="none"
                  stroke={isActive?'var(--tomato)':'var(--ink-3)'}
                  strokeWidth={isActive?2:1}
                  strokeDasharray={isActive?'0':'4 4'}/>
            <circle cx={x1} cy={y1} r="3.5" fill="var(--forest)"/>
            <circle cx={x2} cy={y2} r="3.5" fill={isActive?'var(--tomato)':'var(--ink-3)'}/>
            {isActive && (
              <>
                <circle cx={x2} cy={y2} r="14" fill="url(#hot)">
                  <animate attributeName="r" from="6" to="20" dur="1.6s" repeatCount="indefinite"/>
                  <animate attributeName="opacity" from="0.8" to="0" dur="1.6s" repeatCount="indefinite"/>
                </circle>
                <text x={x1} y={y1-10} textAnchor="middle" fontSize="11" fontFamily="Inter Tight" fill="var(--ink)" fontWeight="600">{r.fromName}</text>
                <text x={x2} y={y2-10} textAnchor="middle" fontSize="11" fontFamily="Inter Tight" fill="var(--tomato)" fontWeight="600">{r.toName}</text>
              </>
            )}
          </g>
        );
      })}
    </svg>
  );
}

function ShipmentTracker(){
  // Each shipment links to the airline's official cargo tracking page.
  // AWB format: airline prefix (3 digits) - 8 digit serial. Replace with real AWBs as shipments dispatch.
  const shipments = [
    { id:'PL-2843', product:'Stone fruits & cherries', from:'Paris', to:'Dar es Salaam', status:'In flight', progress:55, carrier:'EK · AWB 176-23239882', awb:'17623239882', trackUrl:'https://eskycargo.emirates.com/app/offerandorder/#/shipments/list?type=D&values=17623239882' },
    { id:'PL-2841', product:'Stone fruit · 8 pallets', from:'Murcia', to:'Doha',  status:'In flight', progress:72,  carrier:'QR · AWB 157-84210018', awb:'15784210018', trackUrl:'https://www.qrcargo.com/s/track-your-shipment?awb=15784210018' },
    { id:'PL-2840', product:'Strawberries · 4 pallets', from:'Huelva', to:'Dubai', status:'Customs',   progress:88,  carrier:'EK · AWB 176-99012345', awb:'17699012345', trackUrl:'https://www.skycargo.com/track-your-shipment?awb=17699012345' },
    { id:'PL-2842', product:'Mixed veg · 3 pallets', from:'Almería', to:'Riyadh', status:'Loading',   progress:18,  carrier:'TK · AWB 235-77881122', awb:'23577881122', trackUrl:'https://www.turkishcargo.com/en/online-services/shipment-tracking?awb=23577881122' },
  ];
  const statusColor = s => ({
    'In flight':'var(--amber)', 'Customs':'#3B82F6', 'Delivered':'var(--leaf)', 'Loading':'var(--ink-3)'
  }[s]);

  return (
    <section className="section-pad-sm">
      <div className="container">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom:24, flexWrap:'wrap', gap:16}}>
          <div>
            <div className="eyebrow" style={{marginBottom:14}}><span className="live-dot"/> Live · sample tracker</div>
            <h2 className="h-2" style={{margin:0, maxWidth:'24ch'}}>Every shipment, trackable in real time.</h2>
            <p style={{margin:'10px 0 0', color:'var(--ink-2)', fontSize:14, maxWidth:'52ch'}}>Once goods depart, you'll receive an AWB number — click <strong>Track</strong> to follow your shipment on the carrier's official portal.</p>
          </div>
          <span className="mono">Updated just now</span>
        </div>

        <div style={{
          background:'var(--paper)', border:'1px solid var(--line)',
          borderRadius:'var(--radius-lg)', overflow:'hidden'
        }}>
          {shipments.map((s,i)=>(
            <div key={s.id} style={{
              display:'grid', gridTemplateColumns:'110px 1.4fr 130px 1.3fr 170px 110px',
              padding:'18px 24px', alignItems:'center', gap:18,
              borderBottom: i<shipments.length-1 ? '1px solid var(--line-soft)' : 'none',
              fontSize:14
            }} className="ship-row">
              <span className="mono" style={{color:'var(--ink)'}}>{s.id}</span>
              <span style={{color:'var(--ink-2)'}}>{s.product}</span>
              <span style={{display:'flex', alignItems:'center', gap:8}}>
                <span style={{width:8, height:8, borderRadius:'50%', background:statusColor(s.status)}}/>
                <span style={{fontWeight:500, color:statusColor(s.status)}}>{s.status}</span>
              </span>
              <div>
                <div style={{display:'flex', justifyContent:'space-between', fontSize:11, marginBottom:6, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.08em', fontWeight:600}}>
                  <span>{s.from}</span><span>{s.to}</span>
                </div>
                <div style={{height:4, background:'var(--line-soft)', borderRadius:2, position:'relative'}}>
                  <div style={{position:'absolute', inset:'0 auto 0 0', width:`${s.progress}%`, background:statusColor(s.status), borderRadius:2}}/>
                </div>
              </div>
              <div style={{display:'flex', flexDirection:'column', gap:2, fontSize:12}}>
                <span style={{color:'var(--ink-2)', fontWeight:500}}>{s.carrier}</span>
                <span className="mono" style={{fontSize:10}}>AWB {s.awb}</span>
              </div>
              <a href={s.trackUrl} target="_blank" rel="noopener noreferrer" className="btn btn-ghost" style={{padding:'8px 14px', fontSize:12.5, justifySelf:'end'}}>
                Track <Icon.Arrow size={12}/>
              </a>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 800px) {
          .ship-row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
          .ship-row > *:nth-child(n+5) { grid-column: 1 / -1; }
        }
      `}</style>
    </section>
  );
}

function Testimonials(){
  const items = [
    { name:'Tejash', role:'Wholesale Buyer', country:'🇰🇪 Kenya', body:'Delivery was quick, communication clear, and all export documentation was handled efficiently. The fruit arrived in excellent condition. Highly recommended for reliable sourcing.' },
    { name:'Zara', role:'Retail Distributor', country:'🇦🇪 UAE', body:"We've worked with several suppliers but it's been difficult to find one that handles everything smoothly — especially around the language barrier in Europe. P&L England made the entire process easy." },
    { name:'Ahmed', role:'Importer', country:'🇹🇿 Tanzania', body:"After reaching out to many companies in Spain with little response, P&L England offered great prices, managed all logistics and documentation, and delivered high-quality fruit in perfect condition. Game-changer for small businesses like ours." },
  ];
  return (
    <section className="section-pad" style={{background:'var(--paper-2)'}}>
      <div className="container">
        <div style={{marginBottom:56, maxWidth:720}}>
          <div className="eyebrow" style={{marginBottom:20}}>Testimonials</div>
          <h2 className="h-1" style={{margin:0}}>Trusted by wholesalers across three continents.</h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}} className="t-grid">
          {items.map((t,i)=>(
            <article key={i} className="card" style={{padding:'32px 30px', display:'flex', flexDirection:'column', gap:20, minHeight:360, background:'var(--paper)'}}>
              <div style={{fontFamily:'var(--serif)', fontSize:60, lineHeight:0.6, color:'var(--tomato)'}}>"</div>
              <p style={{margin:0, fontSize:16, lineHeight:1.55, color:'var(--ink)', flex:1}}>{t.body}</p>
              <div style={{paddingTop:20, borderTop:'1px solid var(--line-soft)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                <div>
                  <div style={{fontFamily:'var(--serif)', fontSize:18}}>{t.name}</div>
                  <div style={{fontSize:13, color:'var(--ink-3)', marginTop:2}}>{t.role}</div>
                </div>
                <span style={{fontSize:13, color:'var(--ink-2)'}}>{t.country}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .t-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

const FAQS = [
  { q:'What products do you offer?', a:(<div>
    <p style={{margin:'0 0 12px'}}><strong>Fruits:</strong> peaches, donut peaches, yellow flesh nectarines, royal sanguina nectarines, apricots, cherries, plums, oranges, lemons, mandarins, strawberries, blueberries, melons, grapes, kiwis.</p>
    <p style={{margin:0}}><strong>Vegetables:</strong> tomatoes, peppers, courgettes, cucumbers, lettuce, broccoli, asparagus, onions.</p>
  </div>) },
  { q:'Which countries do you ship to?', a:'We regularly export across Africa, the Middle East, and selected regions worldwide. For details on country eligibility, please contact our sales team.' },
  { q:'What are your minimum order quantities (MOQs)?', a:'MOQs depend on the product type and destination. Typically we are flexible — please contact us for specifics.' },
  { q:'Can I mix products in one shipment?', a:'Yes, we consolidate mixed product orders into a single shipment as long as they meet minimum requirements and shipping regulations.' },
  { q:'Do you handle customs and documentation?', a:(<div>
    <p style={{margin:'0 0 8px'}}>In full — including:</p>
    <ul style={{margin:0, paddingLeft:18, lineHeight:1.7}}>
      <li>Commercial Invoice & Packing List</li>
      <li>Air Waybill / Bill of Lading</li>
      <li>Phytosanitary Certificate</li>
      <li>EUR.1 Movement Certificate (where applicable)</li>
      <li>Certificate of Origin</li>
    </ul>
  </div>) },
  { q:'What are your payment terms?', a:'Visa, Mastercard, and American Express via secure online links. Bank transfers also available. Credit facilities may be offered to regular customers based on individual circumstances.' },
  { q:'How long does shipping take?', a:'Delivery depends on airline schedules and order timing. We require a minimum of 72 hours to complete documentation. Typically expect delivery within 7 days of order placement.' },
];

function FAQ(){
  const [open, setOpen] = useState(0);
  return (
    <section className="section-pad">
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.5fr', gap:80}} className="faq-grid">
          <div>
            <div className="eyebrow" style={{marginBottom:20}}>FAQ</div>
            <h2 className="h-1" style={{margin:'0 0 24px'}}>Things buyers ask before the first order.</h2>
            <p style={{color:'var(--ink-2)', fontSize:16, margin:0}}>Can't find what you need? <a href="#quote" style={{color:'var(--tomato)', textDecoration:'underline'}}>Send us a message</a> — we usually reply same-day.</p>
          </div>
          <div style={{borderTop:'1px solid var(--line)'}}>
            {FAQS.map((f,i)=>(
              <div key={i} style={{borderBottom:'1px solid var(--line)'}}>
                <button onClick={()=>setOpen(open===i?-1:i)}
                  style={{display:'flex', justifyContent:'space-between', alignItems:'center', width:'100%', padding:'24px 0', textAlign:'left', gap:20}}>
                  <span style={{fontFamily:'var(--serif)', fontSize:'clamp(18px, 1.6vw, 22px)', fontWeight:500}}>{f.q}</span>
                  <span style={{
                    width:32, height:32, borderRadius:'50%', border:'1px solid var(--line)',
                    display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
                    transition:'transform 0.2s, background 0.2s, color 0.2s',
                    background: open===i?'var(--ink)':'transparent',
                    color: open===i?'var(--cream)':'var(--ink)',
                    transform: open===i?'rotate(45deg)':'rotate(0deg)'
                  }}>
                    <Icon.Plus size={14}/>
                  </span>
                </button>
                {open===i && (
                  <div style={{padding:'0 0 24px', maxWidth:'60ch', color:'var(--ink-2)', fontSize:15.5, lineHeight:1.6}}>{f.a}</div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { RoutesMap, ShipmentTracker, Testimonials, FAQ });