// 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:[48.85,2.35], fromName:'Paris', to:[-26.2,28.0], toName:'Johannesburg', line:'AF / KL' },
  { from:[48.85,2.35], fromName:'Paris', to:[-33.9,18.4], toName:'Cape Town', line:'AF' },
  { from:[48.85,2.35], fromName:'Paris', to:[25.2,55.3], toName:'Dubai', line:'AF / EK' },
  { from:[48.85,2.35], fromName:'Paris', to:[24.7,46.7], toName:'Riyadh', line:'AF / SV' },
  { from:[48.85,2.35], fromName:'Paris', to:[25.3,51.5], toName:'Doha', line:'AF / QR' },
  { from:[48.85,2.35], fromName:'Paris', to:[25.8,-80.2], toName:'Miami', line:'AF / DL' },
  { from:[48.85,2.35], fromName:'Paris', to:[-4.6,55.5], toName:'Seychelles', line:'AF' },
  { from:[48.85,2.35], fromName:'Paris', to:[-20.3,57.5], toName:'Mauritius', line:'AF' },
  { from:[48.85,2.35], fromName:'Paris', to:[40.7,-74.0], toName:'New York', line:'AF / DL' },
  { from:[48.85,2.35], fromName:'Paris', to:[-1.3,36.8], toName:'Nairobi', line:'AF / KQ' },
  { from:[48.85,2.35], fromName:'Paris', to:[30.0,31.2], toName:'Cairo', line:'AF / MS' },
];

// Fetches the Natural Earth country topology once and caches it (module-level,
// shared across mounts) — never re-fetched on re-render.
let worldAtlasPromise = null;
function loadWorldAtlas(){
  if (!worldAtlasPromise) {
    worldAtlasPromise = fetch('https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json')
      .then(r => r.json())
      .then(topology => topojson.feature(topology, topology.objects.countries));
  }
  return worldAtlasPromise;
}
function useWorldAtlas(){
  const [land, setLand] = useState(null);
  useEffect(() => {
    let alive = true;
    loadWorldAtlas().then(fc => { if (alive) setLand(fc); }).catch(() => {});
    return () => { alive = false; };
  }, []);
  return land;
}

// Great-circle path between two [lat,lng] points, sampled + projected — this
// is what makes the route lines follow real earth curvature instead of an
// arbitrary bezier bow.
function greatCircleArc(fromLatLng, toLatLng, projection, steps=48){
  const a = [fromLatLng[1], fromLatLng[0]];
  const b = [toLatLng[1], toLatLng[0]];
  const interpolate = d3.geoInterpolate(a, b);
  const pts = [];
  for (let i = 0; i <= steps; i++) {
    const p = projection(interpolate(i / steps));
    if (p) pts.push(p);
  }
  return pts;
}

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

  return (
    <section id="routes" className="section-pad" style={{background:'var(--forest-deep)', color:'var(--cream)'}}>
      <div className="container">
        <div style={{textAlign:'center', marginBottom:48}}>
          <div className="eyebrow" style={{marginBottom:20}}>Routes</div>
          <h2 className="h-1" style={{margin:'0 auto', maxWidth:'18ch', color:'var(--cream)'}}>From Paris to <em>your warehouse.</em></h2>
          <p className="lead" style={{margin:'20px auto 0', maxWidth:480, color:'rgba(244,239,226,0.75)'}}>
            We coordinate air freight from Paris to 20+ destinations across Africa, the Middle East and the USA.
          </p>
        </div>

        <div style={{
          padding:0, position:'relative', overflow:'hidden'
        }}>
          <div style={{position:'relative', aspectRatio:'2/1', overflow:'hidden'}}>
            <WorldMap routes={ROUTES} active={active}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function WorldMap({ routes, active }){
  const W = 1000, H = 500;
  const land = useWorldAtlas();

  // Fit a flat projection to exactly the span our corridors cover.
  const projection = React.useMemo(() => {
    const pts = {
      type:'Feature',
      geometry:{ type:'MultiPoint', coordinates: routes.flatMap(r => [[r.from[1],r.from[0]], [r.to[1],r.to[0]]]) }
    };
    return d3.geoMercator().fitExtent([[30,40],[W-30,H-30]], pts);
  }, [routes]);
  const path = React.useMemo(() => d3.geoPath(projection), [projection]);

  // Precompute each route's great-circle path once per projection — shared
  // by both the static route lines and the plane.
  const routeDs = React.useMemo(() => {
    return routes.map(r => {
      const line = { type:'LineString', coordinates: sampleGreatCircle([r.from[1],r.from[0]], [r.to[1],r.to[0]], 64) };
      return { ...r, d: path(line) };
    }).filter(r => r.d);
  }, [routes, path]);

  // Drive the plane with rAF + real SVG path measurement (getPointAtLength)
  // — each leg is measured fresh so it can't get stuck partway.
  const activePathRef = React.useRef(null);
  const planeGroupRef = React.useRef(null);
  React.useEffect(() => {
    const el = activePathRef.current, plane = planeGroupRef.current;
    if (!el || !plane) return;
    let raf, len;
    try { len = el.getTotalLength(); } catch(e) { return; }
    const dur = 3000, t0 = performance.now();
    const tick = (now) => {
      const t = Math.min(1, (now - t0) / dur);
      const p = el.getPointAtLength(t * len);
      const p2 = el.getPointAtLength(Math.min(len, t * len + 1));
      const angle = Math.atan2(p2.y - p.y, p2.x - p.x) * 180 / Math.PI;
      plane.setAttribute('transform', `translate(${p.x},${p.y}) rotate(${angle})`);
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active, routeDs]);

  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{width:'100%', height:'100%', position:'absolute', inset:0}}>
      <defs>
        <radialGradient id="hot" cx="50%" cy="50%">
          <stop offset="0%" stopColor="var(--tomato)" stopOpacity="0.7"/>
          <stop offset="100%" stopColor="var(--tomato)" stopOpacity="0"/>
        </radialGradient>
        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="2" result="blur"/>
          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
        <radialGradient id="vignette" cx="50%" cy="50%" r="75%">
          <stop offset="55%" stopColor="#fff" stopOpacity="1"/>
          <stop offset="100%" stopColor="#fff" stopOpacity="0"/>
        </radialGradient>
        <mask id="fadeEdges">
          <rect width={W} height={H} fill="url(#vignette)"/>
        </mask>
      </defs>
      <rect width={W} height={H} fill="var(--forest-deep)" opacity="0"/>

      <g mask="url(#fadeEdges)">

      {/* Real country geometry (Natural Earth via topojson), recoloured to the brand palette */}
      {land && (
        <g fill="rgba(244,239,226,0.14)" stroke="rgba(244,239,226,0.28)" strokeWidth="0.6">
          {land.features.map((f,i) => <path key={i} d={path(f)}/>)}
        </g>
      )}

      {/* Great-circle flight corridors */}
      {routeDs.map((r,i)=>{
        const isActive = i===active;
        const p1 = projection([r.from[1], r.from[0]]);
        const p2 = projection([r.to[1], r.to[0]]);
        return (
          <g key={i} opacity={isActive?1:0.3}>
            <path ref={isActive ? activePathRef : undefined} d={r.d} fill="none"
                  stroke={isActive?'var(--tomato)':'rgba(255,255,255,0.55)'}
                  strokeWidth={isActive?2:1}
                  strokeLinecap="round"
                  filter={isActive?'url(#glow)':undefined}
                  strokeDasharray={isActive?'0':'1 5'}/>
            {p1 && <circle cx={p1[0]} cy={p1[1]} r="3" fill="var(--cream)" stroke="var(--forest-deep)" strokeWidth="1.5"/>}
            {p2 && <circle cx={p2[0]} cy={p2[1]} r="3" fill="var(--cream)" stroke={isActive?'var(--forest-deep)':'rgba(244,239,226,0.4)'} strokeWidth="1.5"/>}
            {isActive && p2 && (
              <circle cx={p2[0]} cy={p2[1]} r="14" fill="url(#hot)">
                <animate attributeName="r" from="5" to="18" dur="1.6s" repeatCount="indefinite"/>
                <animate attributeName="opacity" from="0.8" to="0" dur="1.6s" repeatCount="indefinite"/>
              </circle>
            )}
            {isActive && p1 && <text x={p1[0]} y={Math.max(14,p1[1]-14)} textAnchor="middle" fontSize="10.5" fontFamily="var(--sans)" fill="var(--cream)" fontWeight="600">{r.fromName}</text>}
            {isActive && p2 && <text x={p2[0]} y={Math.max(14,p2[1]-14)} textAnchor="middle" fontSize="10.5" fontFamily="var(--sans)" fill="var(--cream)" fontWeight="600">{r.toName}</text>}
          </g>
        );
      })}

      {/* A single persistent plane, positioned every frame by the rAF loop
          above via imperative transform. Icon's nose points along +x by
          default so rotate(angle) — with no fudge offset — faces travel
          direction. */}
      {routeDs.length > 0 && (
        <g ref={planeGroupRef} filter="url(#glow)">
          <g transform="rotate(90) scale(0.62) translate(-12,-12)">
            <path d="M21 16v-2l-8-5V3.5C13 2.67 12.33 2 11.5 2S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2.5 1.5V22l4-1 4 1v-1.5L13 19v-5.5l8 2.5z" fill="var(--cream)"/>
          </g>
        </g>
      )}
      </g>
    </svg>
  );
}

// Samples n points along the great-circle path between two [lon,lat] points —
// used to build a real GeoJSON LineString so d3.geoPath's orthographic
// clipping hides the segment that wraps to the far side of the globe.
function sampleGreatCircle(a, b, n){
  const interpolate = d3.geoInterpolate(a, b);
  return Array.from({length: n+1}, (_, i) => interpolate(i / n));
}

// Is this [lat,lng] point on the hemisphere currently facing the viewer?
function isFront(rotation, latLng){
  const center = [-rotation[0], -rotation[1]];
  return d3.geoDistance([latLng[1], latLng[0]], center) < Math.PI/2;
}

// Map raw status strings (whatever ops type into the sheet) to a display colour.
// Falls back to a neutral colour if we don't recognise it.
function shipmentStatusColor(raw){
  const s = String(raw || '').toLowerCase();
  if (/(deliver|landed|arrived|complete)/.test(s)) return 'var(--leaf)';
  if (/(flight|transit|en route|enroute|departed)/.test(s)) return 'var(--amber)';
  if (/(custom|clearing|hold)/.test(s)) return 'var(--ink)';
  if (/(load|prep|book|confirm|schedul)/.test(s)) return 'var(--ink-3)';
  return 'var(--ink-3)';
}

function ShipmentTracker(){
  // Live data from the public Google Sheet — see sheet-data.jsx for the source URL
  // and column mapping. Edit the sheet, the table re-renders.
  const { shipments, loading, error, lastUpdated } = useShipments();
  const [, force] = React.useReducer(x => x + 1, 0);
  const [showAll, setShowAll] = useState(false);
  // Tick the "Updated X min ago" label so it stays accurate between fetches.
  React.useEffect(() => { const t = setInterval(force, 30_000); return () => clearInterval(t); }, []);
  const visibleShipments = shipments && (showAll ? shipments : shipments.slice(0, 3));

  return (
    <section id="tracker" className="section-pad-sm">
      <div className="container">
        <div style={{textAlign:'center', marginBottom:24}}>
          <div className="eyebrow" style={{marginBottom:14}}><span className="live-dot"/> Live cargo tracker</div>
          <h2 className="h-2" style={{margin:'0 auto', maxWidth:'24ch'}}>Every shipment, <em>trackable in real time.</em></h2>
          <p style={{margin:'10px auto 0', color:'var(--ink-2)', fontSize:14, maxWidth:'52ch'}}>Once goods depart, you'll receive an AWB number. Click <strong>Track Live</strong> to follow your shipment on the carrier's official portal.</p>
          <div style={{marginTop:16, display:'flex', justifyContent:'center'}}><ShipmentCounters/></div>
          <span className="mono" style={{display:'block', marginTop:16}}>
            {error ? 'Connection issue' : loading ? 'Loading…' : `Updated ${formatRelative(lastUpdated)}`}
          </span>
        </div>

        <div style={{
          background:'var(--paper)', border:'1px solid var(--line)',
          borderRadius:'var(--radius-lg)', overflow:'hidden'
        }}>
          {/* Header row */}
          <div className="ship-row ship-row-head" style={{
            display:'grid',
            gridTemplateColumns:'1.4fr 1.1fr 1fr 1fr 130px 130px 120px',
            padding:'14px 24px', gap:18, alignItems:'center',
            borderBottom:'1px solid var(--line)',
            background:'var(--paper-2)',
            fontSize:11, textTransform:'uppercase', letterSpacing:'0.1em',
            fontWeight:600, color:'var(--ink-3)'
          }}>
            <span>Airway Bill Number</span>
            <span>Airline</span>
            <span>Origin</span>
            <span>Destination</span>
            <span>Status</span>
            <span>ETA</span>
            <span/>
          </div>

          {error && !shipments && (
            <div style={{padding:'40px 24px', textAlign:'center', color:'var(--ink-2)', fontSize:14}}>
              Couldn't reach the live shipment sheet. Please refresh in a moment.
            </div>
          )}
          {loading && !shipments && (
            <div style={{padding:'40px 24px', textAlign:'center', color:'var(--ink-3)', fontSize:14}}>
              Loading live shipments…
            </div>
          )}
          {shipments && shipments.length === 0 && (
            <div style={{padding:'40px 24px', textAlign:'center', color:'var(--ink-2)', fontSize:14}}>
              No active shipments right now. Check back soon.
            </div>
          )}

          {shipments && visibleShipments.map((s,i)=>{
            const color = shipmentStatusColor(s.status);
            return (
              <div key={i} className="ship-row" style={{
                display:'grid',
                gridTemplateColumns:'1.4fr 1.1fr 1fr 1fr 130px 130px 120px',
                padding:'18px 24px', alignItems:'center', gap:18,
                borderBottom: i < visibleShipments.length-1 ? '1px solid var(--line-soft)' : 'none',
                fontSize:14
              }}>
                <div style={{display:'flex', flexDirection:'column', gap:2}}>
                  <span className="mono" style={{color:'var(--ink)', fontWeight:600, fontFamily:'var(--sans)'}}>{s.awb ? `AWB ${s.awb}` : '—'}</span>
                </div>
                <span style={{color:'var(--ink-2)'}}>{s.airline || '—'}</span>
                <span style={{color:'var(--ink-2)'}}>{s.origin || '—'}</span>
                <span style={{color:'var(--ink-2)'}}>{s.destination || '—'}</span>
                <span style={{display:'flex', alignItems:'center', gap:8}}>
                  <span style={{width:8, height:8, borderRadius:'50%', background:color, flexShrink:0}}/>
                  <span style={{fontWeight:500, color}}>{s.status || '—'}</span>
                </span>
                <span className="mono" style={{fontSize:12, color:'var(--ink-2)'}}>{s.eta || '—'}</span>
                {s.trackingUrl ? (
                  <a href={s.trackingUrl} target="_blank" rel="noopener noreferrer" className="btn btn-ghost" style={{padding:'8px 14px', fontSize:12.5, justifySelf:'end', whiteSpace:'nowrap'}}>
                    Track Live <Icon.Arrow size={12}/>
                  </a>
                ) : (
                  <span style={{justifySelf:'end', fontSize:12, color:'var(--ink-3)'}}>—</span>
                )}
              </div>
            );
          })}
        </div>
        {shipments && shipments.length > 3 && (
          <div style={{textAlign:'center', marginTop:20}}>
            <button onClick={()=>setShowAll(!showAll)} className="pill">
              {showAll ? 'Show less' : `See ${shipments.length - 3} more`}
            </button>
          </div>
        )}
      </div>
      <style>{`
        @media (max-width: 900px) {
          .ship-row-head { display: none !important; }
          .ship-row {
            grid-template-columns: 1fr 1fr !important;
            gap: 10px 16px !important;
            padding: 16px 18px !important;
          }
          /* Stack the action button full-width at the bottom */
          .ship-row > a, .ship-row > a.btn { grid-column: 1 / -1; justify-self: stretch !important; justify-content: center; }
        }
      `}</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(--forest-deep)', color:'var(--cream)'}}>
      <div className="container">
        <div style={{margin:'0 auto 56px', maxWidth:720, textAlign:'center'}}>
          <Pill dark>Testimonials</Pill>
          <h2 className="h-1" style={{margin:0, color:'var(--cream)'}}>Trusted by wholesalers <em>across three continents.</em></h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}} className="t-grid">
          {items.map((t,i)=>(
            <article key={i} style={{padding:'32px 30px', display:'flex', flexDirection:'column', gap:20, minHeight:360, background:'rgba(255,255,255,0.05)', border:'1px solid rgba(255,255,255,0.1)', borderRadius:'var(--radius-lg)'}}>
              <div className="mono" style={{fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--amber)'}}>{t.role}</div>
              <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(--cream)', flex:1}}>{t.body}</p>
              <div style={{paddingTop:20, borderTop:'1px solid rgba(255,255,255,0.12)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                <div>
                  <div style={{fontFamily:'var(--serif)', fontSize:18, color:'var(--cream)'}}>{t.name}</div>
                </div>
                <span style={{fontSize:13, color:'rgba(244,239,226,0.6)'}}>{t.country}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .t-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

const FAQS = [
  { q:'How long does it take to clear customs?', a:'Less than 24 hours if we\'ve taken the DDP route (applies to buyers in the USA). If you\'ve taken responsibility for clearing customs yourself, it should still be under 24 hours — but that responsibility sits with you.' },
  { q:'What is your minimum order quantity?', a:'500kg is our standard minimum. We may be able to offer a smaller first order as a test shipment, so you can check quality and we can confirm everything runs smoothly before scaling up.' },
  { q:'Can we mix products in one shipment?', a:'Yes — we can mix any of our available products into a single shipment for you, with no minimum item requirement.' },
  { q:'How does pricing work?', a:'We give you an inclusive set price covering both product and freight, and we\'re happy to share those costs separately for full transparency. Prices are set weekly at Rungis International Market and change based on supply and demand.' },
  { q:'If a product is damaged once received, what happens?', a:(<div>
    <p style={{margin:'0 0 10px'}}>We take full responsibility for any damage caused by us — rare, but when it happens we offer credit on your next order or a full refund. We'll need clear photos as soon as the goods arrive, with a timestamp shown on your device, plus video showing the damage.</p>
    <p style={{margin:'0 0 10px'}}>If the damage is caused by the airline, we compensate this too, though there may be a short delay while we claim through our cargo partner — we work closely with you through that process.</p>
    <p style={{margin:0}}>To help prevent damage, we can also include a temperature-control device (at additional cost) that records and stores the temperature your products travelled in, so you can see exactly what conditions they experienced. Note that delays caused by airline changes or global/political disruption are outside our control.</p>
  </div>) },
  { q:'What payment methods do you accept?', a:'Bank transfer or card — Visa, Mastercard and American Express, processed securely via Stripe. We can accept payment in whichever currency suits your country.' },
  { q:'What happens if there\'s an issue with documents or releasing goods at the destination airport?', a:'We work with you to resolve it and release the goods — we\'ll be with you every step of the way.' },
];

function TradeShows(){
  const events = [
    {
      name: 'Fruit Logistica',
      tagline: 'The leading global trade fair for the fresh produce business',
      city: 'Berlin', country: 'Germany', flag: '🇩🇪',
      venue: 'Messe Berlin',
      dateLine: '3 — 5 February 2027',
      iso: '2027-02-03',
      url: 'https://www.fruitlogistica.com',
    },
    {
      name: 'Fruit Attraction',
      tagline: 'The international meeting point of the fresh fruit and vegetable sector',
      city: 'Madrid', country: 'Spain', flag: '🇪🇸',
      venue: 'IFEMA Madrid',
      dateLine: '6 — 8 October 2026',
      iso: '2026-10-06',
      url: 'https://www.ifema.es/fruit-attraction',
    },
  ];
  return (
    <section id="events" className="section-pad-sm" style={{background:'var(--paper-2)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
      <div className="container">
        <div style={{textAlign:'center', marginBottom:28}}>
          <div className="eyebrow" style={{marginBottom:14}}>Trade Shows & Events</div>
          <h2 className="h-2" style={{margin:'0 auto', maxWidth:560}}>Come meet us at these <em>industry events.</em></h2>
          <p style={{margin:'12px auto 0', color:'var(--ink-2)', maxWidth:480, fontSize:15, lineHeight:1.55}}>
            We attend the calendar's most important fresh-produce fairs to meet growers, buyers and freight partners face to face. Drop us a line if you'd like to schedule a meeting on the floor.
          </p>
        </div>
        <div className="events-grid" style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:20}}>
          {events.map((e,i)=>(
            <a key={i} href={e.url} target="_blank" rel="noopener noreferrer" className="event-card" style={{
              display:'flex', flexDirection:'column', textDecoration:'none', color:'var(--ink)',
              background:'var(--paper)', border:'1px solid var(--line)', borderRadius:'var(--radius)',
              padding:'28px 28px 24px', position:'relative', overflow:'hidden',
              transition:'transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease',
            }}
            onMouseEnter={el=>{el.currentTarget.style.transform='translateY(-2px)';el.currentTarget.style.boxShadow='0 12px 32px -16px rgba(26,36,24,0.18)';el.currentTarget.style.borderColor='var(--ink-2)';}}
            onMouseLeave={el=>{el.currentTarget.style.transform='';el.currentTarget.style.boxShadow='';el.currentTarget.style.borderColor='var(--line)';}}
            >
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'start', gap:16, marginBottom:18}}>
                <div className="mono" style={{fontSize:13, letterSpacing:'0.08em', color:'var(--ink-2)'}}>
                  {e.dateLine.toUpperCase()}
                </div>
                <span style={{fontSize:22, lineHeight:1}}>{e.flag}</span>
              </div>
              <h3 className="h-2" style={{margin:'0 0 8px', fontSize:'clamp(28px, 3.2vw, 40px)', lineHeight:1.05}}>{e.name}</h3>
              <p style={{margin:'0 0 22px', color:'var(--ink-2)', fontSize:15, lineHeight:1.5}}>{e.tagline}</p>
              <div style={{marginTop:'auto', display:'flex', justifyContent:'space-between', alignItems:'end', gap:16, paddingTop:18, borderTop:'1px solid var(--line)'}}>
                <div>
                  <div style={{fontFamily:'var(--serif)', fontSize:18, fontWeight:500}}>{e.venue}</div>
                  <div className="mono" style={{fontSize:12, letterSpacing:'0.06em', color:'var(--ink-3)', marginTop:2}}>{e.city.toUpperCase()} · {e.country.toUpperCase()}</div>
                </div>
                <span style={{fontFamily:'var(--mono)', fontSize:12, letterSpacing:'0.08em', color:'var(--tomato, var(--ink))', display:'inline-flex', alignItems:'center', gap:6, whiteSpace:'nowrap'}}>
                  Visit site <span style={{fontSize:13}}>↗</span>
                </span>
              </div>
            </a>
          ))}
        </div>
        <p className="mono" style={{textAlign:'center', marginTop:24, fontSize:12, letterSpacing:'0.08em', color:'var(--ink-3)'}}>
          Want to schedule a meeting? Reach us at <a href="mailto:sales@plengland.co.uk" style={{color:'inherit', textDecoration:'underline'}}>sales@plengland.co.uk</a>
        </p>
        <style>{`
          @media (max-width: 720px){
            .events-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
            .event-card { padding: 22px 20px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function FAQ(){
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" 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 <em>before the first order.</em></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 });