// Hero + about + trust strip
const HERO_PRODUCE = ['Peach','Cherry','Strawberry','Lemon','Mango','Tomato','Pepper','Grape'];

// Plays a list of videos in sequence, looping the whole list smoothly.
// Uses two stacked <video> elements with a crossfade so there is no flash of
// a static frame between clips. Each clip pre-buffers in the off-screen
// element while the on-screen one is playing.
function VideoCycle({ sources = [] }){
  const [i, setI] = React.useState(0);
  const [active, setActive] = React.useState(0); // 0 or 1 — which video element is on top
  const refs = [React.useRef(null), React.useRef(null)];
  const hlsRefs = [React.useRef(null), React.useRef(null)];

  const nextIdx = (i + 1) % sources.length;
  const slot = (which) => (which === active ? i : nextIdx);

  // Lazy-load hls.js once for browsers without native HLS (Chromium/Firefox).
  // Safari plays HLS natively and skips this entirely.
  React.useEffect(() => {
    if (window.Hls || window.__hlsLoading) return;
    const probe = document.createElement('video');
    if (probe.canPlayType('application/vnd.apple.mpegurl')) return;
    window.__hlsLoading = true;
    const s = document.createElement('script');
    s.src = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.15/dist/hls.min.js';
    s.async = true;
    document.head.appendChild(s);
  }, []);

  const attach = (slotIdx, url) => {
    const v = refs[slotIdx].current;
    if (!v || !url) return;
    const isHls = /\.m3u8(\?|$)/i.test(url);
    if (hlsRefs[slotIdx].current) {
      try { hlsRefs[slotIdx].current.destroy(); } catch(e){}
      hlsRefs[slotIdx].current = null;
    }
    if (isHls && window.Hls && window.Hls.isSupported() && !v.canPlayType('application/vnd.apple.mpegurl')) {
      const hls = new window.Hls({ maxBufferLength: 6 });
      hls.loadSource(url);
      hls.attachMedia(v);
      hlsRefs[slotIdx].current = hls;
    } else {
      v.src = url;
    }
  };

  React.useEffect(() => {
    const tryBind = () => {
      attach(0, sources[slot(0)]);
      attach(1, sources[slot(1)]);
      const v = refs[active].current;
      if (!v) return;
      v.muted = true;
      const p = v.play();
      if (p && typeof p.catch === 'function') p.catch(() => {});
    };
    tryBind();
    if (!window.Hls && window.__hlsLoading) {
      const tick = setInterval(() => {
        if (window.Hls) { clearInterval(tick); tryBind(); }
      }, 100);
      return () => clearInterval(tick);
    }
  }, [active, i]);

  React.useEffect(() => () => {
    hlsRefs.forEach(r => { if (r.current) try { r.current.destroy(); } catch(e){} });
  }, []);

  const handleEnded = () => {
    const newActive = active === 0 ? 1 : 0;
    setActive(newActive);
    setI(nextIdx);
  };

  return (
    <div style={{position:'relative', width:'100%', height:'100%'}}>
      {[0, 1].map((slotIdx) => (
        <video
          key={slotIdx}
          ref={refs[slotIdx]}
          autoPlay={slotIdx === active}
          muted
          playsInline
          preload="auto"
          onEnded={slotIdx === active ? handleEnded : undefined}
          style={{
            position:'absolute', inset:0, width:'100%', height:'100%',
            objectFit:'cover', display:'block',
            opacity: slotIdx === active ? 1 : 0,
            transition:'opacity 600ms ease',
            background:'transparent'
          }}
        />
      ))}
    </div>
  );
}

// Hero background treatments — eight options the user can flip via Tweaks.
// All sit BEHIND the headline + container content; nothing hijacks the type.
function HeroBackground({ variant='none' }){
  if (variant === 'none') return null;

  if (variant === 'grid') {
    return (
      <div aria-hidden="true" style={{
        position:'absolute', inset:0, pointerEvents:'none', zIndex:0,
        backgroundImage:`
          linear-gradient(to right, color-mix(in oklab, var(--forest) 14%, transparent) 1px, transparent 1px),
          linear-gradient(to bottom, color-mix(in oklab, var(--forest) 14%, transparent) 1px, transparent 1px)
        `,
        backgroundSize:'48px 48px',
        maskImage:'radial-gradient(ellipse at 30% 40%, #000 30%, transparent 80%)',
        WebkitMaskImage:'radial-gradient(ellipse at 30% 40%, #000 30%, transparent 80%)'
      }}/>
    );
  }

  if (variant === 'video-cherries') {
    // Cycling playlist: cherries → nectarines → strawberries (when supplied).
    // VideoCycle handles autoplay, mute, loop on last clip until next file is
    // available. Free commercial use, no attribution required (Pexels).
    return (
      <div aria-hidden="true" style={{
        position:'absolute', inset:0, pointerEvents:'none', zIndex:0, overflow:'hidden'
      }}>
        <div style={{
          position:'absolute', top:0, right:0, width:'56%', height:'100%',
          maskImage:'linear-gradient(to left, #000 70%, transparent 100%), linear-gradient(to bottom, #000 80%, transparent 100%)',
          WebkitMaskImage:'linear-gradient(to left, #000 70%, transparent 100%), linear-gradient(to bottom, #000 80%, transparent 100%)',
          maskComposite:'intersect',
          WebkitMaskComposite:'source-in'
        }}>
          <VideoCycle
            sources={[
              'https://pub-9b2814a73e8546d4824315d3460fcfd2.r2.dev/4513018-uhd_4096_2160_24fps.mp4',
              'https://pub-9b2814a73e8546d4824315d3460fcfd2.r2.dev/4513019-uhd_4096_2160_24fps.mp4',
              'https://pub-9b2814a73e8546d4824315d3460fcfd2.r2.dev/4513022-uhd_4096_2160_24fps.mp4'
            ]}
          />
        </div>
      </div>
    );
  }

  if (variant === 'photo-right') {
    // Real product photography supplied by P&L England — stone-fruit medley
    // (cherries, plums, peaches, nectarines, apricots) on white. Sits on the
    // right ~52% of the hero, with a soft mask fading the very far edge into
    // the paper so themes with non-white backgrounds (forest, market) don't
    // show a hard edge.
    return (
      <div aria-hidden="true" style={{
        position:'absolute', inset:0, pointerEvents:'none', zIndex:0, overflow:'hidden'
      }}>
        <div style={{
          position:'absolute', top:0, right:0, width:'56%', height:'100%',
          backgroundImage:'url("assets/hero-stonefruit.jpg")',
          backgroundSize:'cover', backgroundPosition:'center right',
          backgroundRepeat:'no-repeat',
          maskImage:'linear-gradient(to left, #000 70%, transparent 100%), linear-gradient(to bottom, #000 80%, transparent 100%)',
          WebkitMaskImage:'linear-gradient(to left, #000 70%, transparent 100%), linear-gradient(to bottom, #000 80%, transparent 100%)',
          maskComposite:'intersect',
          WebkitMaskComposite:'source-in'
        }}/>
      </div>
    );
  }

  if (variant === 'photo-strip') {
    const photos = [
      'https://images.unsplash.com/photo-1553279768-865429fa0078?w=600&q=80', // mango
      'https://images.unsplash.com/photo-1519996529931-28324d5a630e?w=600&q=80', // avocado
      'https://images.unsplash.com/photo-1574631818020-72147f6b30db?w=600&q=80', // passion fruit
      'https://images.unsplash.com/photo-1528821128474-27f963b062bf?w=600&q=80', // cherries
      'https://images.unsplash.com/photo-1515872474884-c6a1b13a78fa?w=600&q=80', // asparagus
    ];
    return (
      <div aria-hidden="true" style={{
        position:'absolute', left:0, right:0, bottom:0, height:240, zIndex:0, display:'flex',
        borderTop:'1px solid var(--line)'
      }}>
        {photos.map((src,i)=>(
          <div key={i} style={{
            flex:1, backgroundImage:`url("${src}")`, backgroundSize:'cover', backgroundPosition:'center',
            filter:'saturate(1.05)'
          }}/>
        ))}
      </div>
    );
  }

  if (variant === 'topo') {
    // Faint dotted route lines + tiny city dots — "we ship globally" without the
    // glossy world-map cliché.
    return (
      <svg aria-hidden="true" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice"
           style={{position:'absolute', inset:0, width:'100%', height:'100%', zIndex:0, opacity:0.55}}>
        <defs>
          <pattern id="topoDots" width="6" height="6" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="0.6" fill="var(--forest)" opacity="0.18"/>
          </pattern>
        </defs>
        <rect width="1200" height="600" fill="url(#topoDots)"/>
        {[
          ['M 200 360 Q 460 180 760 220','Lima','Nairobi'],
          ['M 760 220 Q 880 280 1040 200','Nairobi','London'],
          ['M 1040 200 Q 1080 230 1140 260','London','Dubai'],
          ['M 200 360 Q 540 480 880 440','Madrid','Mombasa'],
        ].map((p,i)=>(
          <path key={i} d={p[0]} fill="none" stroke="var(--forest)" strokeWidth="1.2" strokeDasharray="3 5" opacity="0.5"/>
        ))}
        {[[200,360],[760,220],[1040,200],[1140,260],[880,440],[540,480]].map(([x,y],i)=>(
          <circle key={i} cx={x} cy={y} r="3.5" fill="var(--tomato)" opacity="0.7"/>
        ))}
      </svg>
    );
  }

  if (variant === 'texture') {
    // Paper-fibre noise — SVG turbulence, very low opacity.
    return (
      <svg aria-hidden="true" style={{position:'absolute', inset:0, width:'100%', height:'100%', zIndex:0, opacity:0.35, mixBlendMode:'multiply'}}>
        <filter id="paperGrain">
          <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/>
          <feColorMatrix values="0 0 0 0 0.45  0 0 0 0 0.40  0 0 0 0 0.30  0 0 0 0.18 0"/>
        </filter>
        <rect width="100%" height="100%" filter="url(#paperGrain)"/>
      </svg>
    );
  }

  if (variant === 'botanical') {
    // Hand-drawn line-art mango branch in tomato red, large in the corner.
    return (
      <svg aria-hidden="true" viewBox="0 0 600 600"
           style={{position:'absolute', top:-40, right:-80, width:'48vw', maxWidth:680, height:'auto', zIndex:0, opacity:0.18}}>
        <g fill="none" stroke="var(--tomato)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          {/* branch */}
          <path d="M 60 480 C 180 380, 280 360, 360 280"/>
          <path d="M 360 280 C 400 250, 440 220, 480 160"/>
          {/* leaf 1 */}
          <path d="M 200 410 C 260 360, 320 360, 340 410 C 320 440, 240 440, 200 410 Z"/>
          <path d="M 220 412 C 260 405, 300 405, 330 412"/>
          {/* leaf 2 */}
          <path d="M 290 360 C 350 320, 410 330, 430 380 C 410 410, 320 410, 290 360 Z"/>
          <path d="M 310 365 C 350 360, 390 365, 420 380"/>
          {/* mango fruit */}
          <ellipse cx="380" cy="240" rx="78" ry="58" transform="rotate(-25 380 240)"/>
          <path d="M 320 230 C 360 215, 400 215, 440 235" opacity="0.6"/>
          {/* small leaf at top */}
          <path d="M 460 170 C 490 145, 520 145, 530 175 C 520 195, 480 195, 460 170 Z"/>
        </g>
      </svg>
    );
  }

  if (variant === 'data-strip') {
    // Quiet morning-status line at the very bottom of the hero. Doesn't fight
    // the headline; says "real working business."
    return (
      <div aria-hidden="true" style={{
        position:'absolute', left:0, right:0, bottom:0, zIndex:0,
        borderTop:'1px solid var(--line)',
        background:'color-mix(in oklab, var(--paper) 70%, var(--paper-2))',
        padding:'12px 0'
      }}>
        <div className="container">
          <div style={{
            display:'flex', justifyContent:'space-between', alignItems:'center', gap:24, flexWrap:'wrap',
            fontFamily:'ui-monospace, "SF Mono", Menlo, monospace',
            fontSize:11.5, letterSpacing:'0.12em', textTransform:'uppercase',
            color:'var(--ink-2)'
          }}>
            <span style={{display:'inline-flex', alignItems:'center', gap:8}}>
              <span style={{width:7, height:7, borderRadius:'50%', background:'#22C55E'}}/>
              This morning, {new Date().toLocaleDateString('en-GB',{weekday:'short', day:'numeric', month:'short'})}
            </span>
            <span>NBO → LHR · KQ100 · 4.2T mango + passion</span>
            <span>AMS → DXB · KL427 · 1.8T mixed pallet</span>
            <span style={{color:'var(--tomato)', fontWeight:700}}>14 AWBs in transit</span>
          </div>
        </div>
      </div>
    );
  }

  if (variant === 'glow') {
    return (
      <div aria-hidden="true" style={{
        position:'absolute', inset:0, pointerEvents:'none', zIndex:0,
        background:`
          radial-gradient(ellipse 60% 50% at 100% 0%, color-mix(in oklab, var(--tomato) 22%, transparent) 0%, transparent 60%),
          radial-gradient(ellipse 50% 60% at 0% 100%, color-mix(in oklab, var(--forest) 18%, transparent) 0%, transparent 60%)
        `
      }}/>
    );
  }

  return null;
}

function Hero({ variant='editorial', heroBg='none' }){
  const isPhotoRight = heroBg === 'photo-right' || heroBg === 'video-cherries';
  return (
    <section style={{position:'relative', overflow:'hidden', paddingTop:24, paddingBottom: heroBg === 'photo-strip' ? 240 : (heroBg === 'data-strip' ? 56 : 0)}}>
      <HeroBackground variant={heroBg}/>
      <div className="container" style={{position:'relative'}}>
        {/* Grid lines — hidden on photo/video hero variants where they read
            as accidental scratches across the imagery. */}
        {!isPhotoRight && (
          <div style={{position:'absolute', inset:'0 var(--gutter)', pointerEvents:'none', opacity:0.5}}>
            <div style={{position:'absolute', top:0, bottom:0, left:'25%', width:1, background:'var(--line-soft)'}}/>
            <div style={{position:'absolute', top:0, bottom:0, left:'50%', width:1, background:'var(--line-soft)'}}/>
            <div style={{position:'absolute', top:0, bottom:0, left:'75%', width:1, background:'var(--line-soft)'}}/>
          </div>
        )}

        {/* Top meta row */}
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'12px 0 36px', position:'relative', zIndex:1}}>
          <span className="mono">Est. 2024 — London, UK</span>
          <span className="mono" style={{display:'flex', alignItems:'center', gap:8}}>
            <span className="live-dot"/> 14 shipments in transit
          </span>
        </div>

        {/* Headline — when photo-right is on, constrain the column to ~52% so
            the right photo doesn't sit under the type. */}
        <div style={{
          position:'relative', zIndex:1, paddingTop:16, paddingBottom:32,
          maxWidth: isPhotoRight ? '58%' : 'none'
        }} className={isPhotoRight ? 'hero-col-left' : ''}>
          <div className="eyebrow" style={{marginBottom:20}}>Fresh Produce Export · Europe → Africa</div>
          <Typewriter className="h-display" style={{maxWidth: isPhotoRight ? 'none' : '18ch', margin:'0 0 24px'}}/>
          <div className="hero-tagline" style={{margin:'0 0 28px', display:'flex', flexDirection:'column', gap:6}}>
            <span style={{fontFamily:'var(--serif)', fontSize:'clamp(20px, 2.4vw, 30px)', lineHeight:1.1, letterSpacing:'-0.01em', color:'var(--ink)'}}>
              Sourcing. Pricing. Documentation. Logistics.{' '}
              <span style={{
                position:'relative', display:'inline-block',
                fontStyle:'italic', color:'var(--tomato)'
              }}>
                <span style={{position:'relative', zIndex:1}}>All handled.</span>
                <span aria-hidden="true" style={{
                  position:'absolute', left:0, right:0, bottom:'0.06em',
                  height:'2px', background:'var(--tomato)', opacity:0.85,
                  transformOrigin:'left center',
                  animation:'underlinePop 1.2s 0.4s cubic-bezier(.7,0,.2,1) both'
                }}/>
                <span aria-hidden="true" style={{
                  position:'absolute', left:0, right:0, bottom:'-0.04em',
                  height:'2px', background:'var(--tomato)', opacity:0.45,
                  transformOrigin:'left center',
                  animation:'underlinePop 1.2s 0.7s cubic-bezier(.7,0,.2,1) both'
                }}/>
              </span>
            </span>
          </div>
          <style>{`
            @keyframes underlinePop {
              0% { transform: scaleX(0); }
              60% { transform: scaleX(1.04); }
              100% { transform: scaleX(1); }
            }
            @keyframes typeCaret {
              0%, 50% { opacity: 1; }
              51%, 100% { opacity: 0; }
            }
            .typewriter-caret {
              display: inline-block;
              width: 0.06em;
              height: 0.85em;
              background: var(--tomato);
              vertical-align: -0.08em;
              margin-left: 0.04em;
              animation: typeCaret 0.85s step-end infinite;
              transform: translateY(0.05em);
            }
            @media (max-width: 900px) {
              .hero-col-left { max-width: 100% !important; }
            }
          `}</style>
          <div style={{display:'grid', gridTemplateColumns:'1fr auto', gap:60, alignItems:'end', maxWidth: isPhotoRight ? 'none' : 1100}}>
            <p className="lead" style={{margin:0, color:'var(--ink-2)'}}>
              From a single peach order to a full pallet programme — one team, end to end.
            </p>
            <div style={{display:'flex', gap:12, flexShrink:0}}>
              <a href="#quote" className="btn btn-primary">Request a quote <Icon.Arrow size={14}/></a>
              <a href="#produce" className="btn btn-ghost">View produce</a>
            </div>
          </div>
        </div>

        {/* Hero visual: live shipment card — always shown so customers can
            click straight through to the live AWB. Sits below the headline. */}
        <div style={{position:'relative', zIndex:1, marginTop:40, marginBottom:40}}>
          <HeroVisual/>
        </div>
      </div>
    </section>
  );
}

// Typewriter — animates the H1 in three "phrases" so the reveal feels written
// rather than stamped. Uses requestAnimationFrame, respects prefers-reduced-motion,
// and renders the final markup statically once finished so SEO + accessibility
// keep working. Speeds tuned so the whole reveal lands in ~3.5s.
function Typewriter({ className, style }){
  // Each segment carries the rendered React node + a flat string used for
  // measuring how many chars to reveal. We split into 3 phrases for natural
  // pauses between them.
  const segments = React.useMemo(() => ([
    { plain: 'We source premium fresh produce', node: 'We source premium fresh produce' },
    { plain: ' and deliver directly to ', node: ' and deliver directly to ' },
    { plain: 'wholesalers, distributors and retailers', node: <span className="leaf" key="leaf">wholesalers, distributors and retailers</span>, italic:false },
    { plain: ' ', node: ' ' },
    { plain: 'worldwide.', node: <em key="em">worldwide.</em> },
  ]), []);

  const total = segments.reduce((a,s)=>a + s.plain.length, 0);
  const reduce = typeof window !== 'undefined'
    && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const [n, setN] = React.useState(reduce ? total : 0);

  React.useEffect(() => {
    if (reduce) return;
    let raf;
    let start = null;
    // Char-per-second pacing with small extra delay between segments to fake
    // a "thinking" pause between phrases.
    const cps = 38;
    const tick = (t) => {
      if (start == null) start = t;
      const elapsed = (t - start) / 1000;
      // Compute target n with phrase-pauses baked in: a 220ms pause at the
      // boundary of phrases 0|1, 2|3, 3|4.
      const pauses = [0, 0, 0.18, 0.18, 0.05];
      let consumed = 0;
      let chars = elapsed * cps;
      let target = 0;
      for (let i = 0; i < segments.length; i++) {
        const need = segments[i].plain.length;
        const pause = pauses[i] * cps;
        if (chars > pause) {
          chars -= pause;
          if (chars >= need) { chars -= need; target += need; consumed += need; }
          else { target += chars; chars = 0; break; }
        } else { break; }
      }
      target = Math.min(total, Math.floor(target));
      setN(target);
      if (target < total) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [reduce, total, segments]);

  // Render up to `n` characters across segments.
  let remaining = n;
  const rendered = [];
  for (let i = 0; i < segments.length; i++) {
    const s = segments[i];
    if (remaining <= 0) break;
    const take = Math.min(remaining, s.plain.length);
    if (take >= s.plain.length) {
      rendered.push(<React.Fragment key={i}>{s.node}</React.Fragment>);
    } else {
      // Mid-segment: show partial plain text inside the same wrapper as the
      // final node so styling stays consistent.
      const partial = s.plain.slice(0, take);
      if (typeof s.node === 'string') {
        rendered.push(<React.Fragment key={i}>{partial}</React.Fragment>);
      } else if (s.node && s.node.type === 'em') {
        rendered.push(<em key={i}>{partial}</em>);
      } else if (s.node && s.node.props && s.node.props.className === 'leaf') {
        rendered.push(<span key={i} className="leaf">{partial}</span>);
      } else {
        rendered.push(<React.Fragment key={i}>{partial}</React.Fragment>);
      }
    }
    remaining -= take;
  }

  return (
    <h1 className={className} style={{...style, position:'relative'}} aria-label="We source premium fresh produce and deliver directly to wholesalers, distributors and retailers worldwide.">
      {/* Invisible mirror of the final headline — reserves the full height up
          front so the section doesn't reflow as characters are added (which
          previously caused the right-side hero photo to "zoom" each frame). */}
      <span aria-hidden="true" style={{
        visibility:'hidden', display:'block', whiteSpace:'normal'
      }}>
        We source premium fresh produce and deliver directly to <span className="leaf">wholesalers, distributors and retailers</span> <em>worldwide.</em>
      </span>
      <span style={{position:'absolute', inset:0, display:'block'}}>
        {rendered}
        {n < total && <span className="typewriter-caret" aria-hidden="true"/>}
      </span>
    </h1>
  );
}

function HeroVisual(){
  return (
    <div style={{
      position:'relative',
      borderRadius:'var(--radius-xl)',
      overflow:'hidden',
      background:'linear-gradient(135deg, #1F3D2E 0%, #15281F 100%)',
      color:'var(--cream)',
      padding:'48px 56px',
      minHeight:420,
    }}>
      {/* Decorative produce */}
      <div style={{position:'absolute', top:-40, right:-30, opacity:0.95, transform:'rotate(15deg)'}}>
        <Produce.Peach size={220}/>
      </div>
      <div style={{position:'absolute', bottom:-40, right:180, opacity:0.85, transform:'rotate(-20deg)'}}>
        <Produce.Cherry size={140}/>
      </div>
      <div style={{position:'absolute', top:120, right:240, opacity:0.85, transform:'rotate(10deg)'}}>
        <Produce.Lemon size={110}/>
      </div>
      <div style={{position:'absolute', bottom:30, right:340, opacity:0.85, transform:'rotate(-12deg)'}}>
        <Produce.Strawberry size={90}/>
      </div>

      {/* Inset content */}
      <a href="https://eskycargo.emirates.com/app/offerandorder/#/shipments/list?type=D&values=17623239882"
         target="_blank" rel="noopener noreferrer"
         style={{
           position:'relative', maxWidth:520, display:'flex', flexDirection:'column', gap:28, height:'100%',
           color:'inherit', textDecoration:'none', cursor:'pointer'
         }}
         onMouseEnter={e=>{ const t = e.currentTarget.querySelector('[data-track-cta]'); if(t) t.style.background='rgba(255,255,255,0.14)'; }}
         onMouseLeave={e=>{ const t = e.currentTarget.querySelector('[data-track-cta]'); if(t) t.style.background='rgba(255,255,255,0.06)'; }}
      >
        <div style={{display:'flex', gap:8, alignItems:'center', flexWrap:'wrap'}}>
          <span className="pill" style={{background:'rgba(255,255,255,0.08)', color:'var(--cream)', borderColor:'rgba(255,255,255,0.18)'}}>
            <span className="live-dot"/> Live shipment
          </span>
          <span className="pill" style={{background:'rgba(255,255,255,0.08)', color:'var(--cream)', borderColor:'rgba(255,255,255,0.18)'}}>
            EK · AWB 176-23239882
          </span>
        </div>
        <div>
          <div className="mono" style={{color:'rgba(244,239,226,0.6)', marginBottom:8}}>Today, 06:42 GMT</div>
          <div style={{fontFamily:'var(--serif)', fontSize:32, lineHeight:1.1, marginBottom:6}}>
            Stone fruits & cherries
          </div>
          <div style={{fontSize:14, color:'rgba(244,239,226,0.7)'}}>Paris → Dar es Salaam</div>
        </div>

        {/* Mini route */}
        <div style={{
          background:'rgba(255,255,255,0.06)',
          border:'1px solid rgba(255,255,255,0.12)',
          borderRadius:'var(--radius)',
          padding:'18px 20px',
          marginTop:'auto'
        }}>
          <div style={{display:'flex', justifyContent:'space-between', fontSize:11, fontFamily:'var(--sans)', textTransform:'uppercase', letterSpacing:'0.12em', color:'rgba(244,239,226,0.5)', marginBottom:12}}>
            <span>Paris, FR</span>
            <span>Dar es Salaam, TZ</span>
          </div>
          <div style={{position:'relative', height:24}}>
            <div style={{position:'absolute', top:11, left:0, right:0, height:2, background:'rgba(255,255,255,0.15)'}}/>
            <div style={{position:'absolute', top:11, left:0, width:'55%', height:2, background:'var(--amber)'}}/>
            {[0,100].map((p,i)=>(
              <div key={i} style={{
                position:'absolute', left:`${p}%`, top:6, width:12, height:12, borderRadius:'50%',
                transform:'translateX(-50%)',
                background: p<=55?'var(--amber)':'rgba(255,255,255,0.2)',
                border:'2px solid var(--forest-deep)'
              }}/>
            ))}
            <div style={{position:'absolute', left:'55%', top:0, transform:'translateX(-50%)'}}>
              <div style={{fontSize:14}}>✈</div>
            </div>
          </div>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', fontSize:12, marginTop:10, color:'rgba(244,239,226,0.7)'}}>
            <span style={{color:'var(--amber)'}}>In flight</span>
            <span data-track-cta style={{
              display:'inline-flex', alignItems:'center', gap:6,
              padding:'5px 11px', borderRadius:99,
              background:'rgba(255,255,255,0.06)',
              border:'1px solid rgba(255,255,255,0.18)',
              color:'var(--cream)', fontSize:11.5, fontWeight:600,
              letterSpacing:'0.04em', transition:'background 0.15s'
            }}>
              Track on Emirates SkyCargo <span style={{fontSize:13}}>↗</span>
            </span>
          </div>
        </div>
      </a>
    </div>
  );
}

function TrustStrip(){
  const partners = ['Emirates SkyCargo','Qatar Airways Cargo','Turkish Cargo','KLM','AIR FRANCE','Ethiopian Cargo'];
  return (
    <section style={{padding:'40px 0', background:'var(--paper-2)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
      <div className="container" style={{display:'flex', alignItems:'center', gap:48, flexWrap:'wrap'}}>
        <div style={{flexShrink:0}}>
          <div className="mono" style={{fontSize:14, letterSpacing:'0.1em'}}>Cargo Partners</div>
        </div>
        <div style={{flex:1, overflow:'hidden', minWidth:280}}>
          <div className="marquee">
            <div className="marquee-track">
              {[...partners, ...partners].map((p,i)=>(
                <span key={i} style={{fontFamily:'var(--serif)', fontSize:22, color:'var(--ink-2)', whiteSpace:'nowrap'}}>{p}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function About(){
  const stats = [
    {n:'80+', l:'Fruit varieties'},
    {n:'50+', l:'Vegetable lines'},
    {n:'12', l:'Source countries'},
    {n:'72h', l:'Doc turnaround'},
  ];
  return (
    <section id="about" className="section-pad">
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:80, alignItems:'start'}} className="about-grid">
          <div>
            <div className="eyebrow" style={{marginBottom:20}}>About P&L England</div>
            <h2 className="h-1" style={{margin:'0 0 24px'}}>
              Specialists in moving fresh produce — without the friction.
            </h2>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:20, paddingTop:20}}>
            <p style={{fontSize:17, lineHeight:1.6, color:'var(--ink-2)', margin:0}}>
              Our team handles everything end-to-end: sourcing the best prices from trusted European growers, managing export documentation, and coordinating international air freight. Whether you're a wholesaler, distributor, or chef, we ensure fast, reliable delivery of top-quality fruits and vegetables.
            </p>
            <p style={{fontSize:17, lineHeight:1.6, color:'var(--ink-2)', margin:0}}>
              We ship using <strong style={{color:'var(--ink)'}}>Emirates, Qatar Airways, and KLM</strong> through their fresh cargo services — with 2–8°C temperature-controlled handling — so your produce arrives in peak condition.
            </p>
            <div>
              <a href="#services" className="btn btn-ink" style={{marginTop:8}}>What we do <Icon.Arrow size={14}/></a>
            </div>
          </div>
        </div>

        {/* Stats row */}
        <div style={{
          marginTop:80, paddingTop:40, borderTop:'1px solid var(--line)',
          display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:40
        }} className="stats-grid">
          {stats.map((s,i)=>(
            <div key={i} style={{display:'flex', flexDirection:'column', gap:6}}>
              <div style={{fontFamily:'var(--serif)', fontSize:'clamp(48px, 5.5vw, 72px)', lineHeight:1, color:'var(--tomato)', letterSpacing:'-0.02em'}}>{s.n}</div>
              <div style={{fontSize:14, color:'var(--ink-2)', textTransform:'uppercase', letterSpacing:'0.08em', fontWeight:500}}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .about-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero, TrustStrip, About });