// Rungis Market narrative sections — Problem, Solution, How It Works, Our
// Sourcing, Produce Gallery, Documentation, Stats, Markets.
// Shared pill label + mixed-typography headline live here too.

function Pill({ children, dark }){
  return <div className={`pill-label${dark ? ' dark' : ''}`}>{children}</div>;
}

// Headline with the last `emPhrase` rendered in italic serif tomato-red.
function MixedHeadline({ tag='h2', className='h-1', text='', emPhrase }){
  const Tag = tag;
  if (!emPhrase) return <Tag className={`${className} h-mixed`}>{text}</Tag>;
  const parts = text.split(emPhrase);
  return (
    <Tag className={`${className} h-mixed`}>
      {parts[0]}<em>{emPhrase}</em>{parts[1]}
    </Tag>
  );
}

function ProblemSection(){
  const problems = [
    { title:'Language Barrier', body:'Most vendors at Rungis speak little or no English. Negotiating quality and price without a local contact is nearly impossible.' },
    { title:'Complex Documentation', body:'Phytosanitary certificates, customs paperwork, export compliance — all time-consuming, all overwhelming, all in French.' },
    { title:'No Contacts', body:'Building the right relationships at Rungis takes years. Buyers arrive and leave with little to show for it.' },
  ];
  return (
    <section className="section-pad" style={{background:'var(--forest-deep)', color:'var(--cream)'}}>
      <div className="container">
        <div style={{maxWidth:760, margin:'0 auto 56px', textAlign:'center'}}>
          <Pill dark>The Challenge</Pill>
          <MixedHeadline emPhrase="isn't easy." className="h-1" text="Rungis is the world's finest produce market. Getting access to it isn't easy."/>
          <p style={{margin:'20px auto 0', fontSize:17, lineHeight:1.6, color:'rgba(244,239,226,0.75)', maxWidth:'58ch'}}>
            International buyers across the USA, Middle East and Africa face the same challenges when trying to source from Rungis.
          </p>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}} className="problem-grid">
          {problems.map((p,i)=>(
            <div key={i} style={{background:'rgba(255,255,255,0.05)', border:'1px solid rgba(255,255,255,0.12)', borderRadius:'var(--radius-lg)', padding:'32px 28px'}}>
              <div style={{fontFamily:'var(--serif)', fontSize:32, color:'var(--tomato)', marginBottom:16, lineHeight:1}}>0{i+1}</div>
              <h3 style={{fontFamily:'var(--sans)', fontWeight:500, fontSize:22, margin:'0 0 12px', color:'var(--cream)'}}>{p.title}</h3>
              <p style={{margin:0, fontSize:15, lineHeight:1.6, color:'rgba(244,239,226,0.72)'}}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 900px){ .problem-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function SolutionSection(){
  const rows = [
    ['Language barrier at Rungis', 'English-speaking team on the ground'],
    ['Complex French documentation', 'All paperwork handled for you'],
    ['No English contacts at the market', 'Direct relationships with top vendors'],
    ['Days wasted navigating the market', 'You place the order, we do the rest'],
    ['Overwhelming compliance process', 'Fully compliant, every shipment'],
    ['Multiple invoices and contacts', 'One partner, one invoice, done'],
  ];
  return (
    <section className="section-pad">
      <div className="container">
        <div style={{maxWidth:720, margin:'0 auto 48px', textAlign:'center'}}>
          <Pill>The Solution</Pill>
          <h2 className="h-1 h-mixed">Your English-speaking partner at Rungis.<br/><em>We handle everything.</em></h2>
        </div>
        <div className="solution-table" style={{border:'1px solid var(--line)', borderRadius:'var(--radius-lg)', overflow:'hidden'}}>
          <div className="sol-row sol-head" style={{display:'grid', gridTemplateColumns:'1fr 1fr', background:'var(--paper-2)', borderBottom:'1px solid var(--line)'}}>
            <div style={{padding:'16px 24px', fontSize:12, fontWeight:500, letterSpacing:'0.08em', color:'var(--ink-3)'}}>Without P&amp;L England</div>
            <div style={{padding:'16px 24px', fontSize:12, fontWeight:500, letterSpacing:'0.08em', color:'var(--tomato)', borderLeft:'1px solid var(--line)'}}>With P&amp;L England</div>
          </div>
          {rows.map((r,i)=>(
            <div key={i} className="sol-row" style={{display:'grid', gridTemplateColumns:'1fr 1fr', borderBottom: i<rows.length-1 ? '1px solid var(--line-soft)' : 'none'}}>
              <div className="sol-cell-without" style={{padding:'18px 24px', fontSize:15, color:'var(--ink-3)', display:'flex', alignItems:'center', gap:10}}>
                <span style={{color:'var(--ink-3)'}}>✕</span> {r[0]}
              </div>
              <div className="sol-cell-with" style={{padding:'18px 24px', fontSize:15, color:'var(--ink)', fontWeight:500, borderLeft:'1px solid var(--line-soft)', display:'flex', alignItems:'center', gap:10}}>
                <span style={{color:'var(--leaf)'}}>✓</span> {r[1]}
              </div>
            </div>
          ))}
        </div>

        {/* Mobile-only: two separate stacked lists (all "without" rows, then
            all "with" rows) instead of the side-by-side table above. */}
        <div className="solution-mobile" style={{display:'none'}}>
          <div className="sol-mobile-group">
            <div className="sol-mobile-heading" style={{color:'var(--ink-3)'}}>Without P&amp;L England</div>
            {rows.map((r,i)=>(
              <div key={i} className="sol-mobile-row" style={{color:'var(--ink-3)'}}>
                <span style={{color:'var(--ink-3)'}}>✕</span> {r[0]}
              </div>
            ))}
          </div>
          <div className="sol-mobile-group">
            <div className="sol-mobile-heading" style={{color:'var(--tomato)'}}>With P&amp;L England</div>
            {rows.map((r,i)=>(
              <div key={i} className="sol-mobile-row" style={{color:'var(--ink)', fontWeight:500}}>
                <span style={{color:'var(--leaf)'}}>✓</span> {r[1]}
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 720px){
          .solution-table { display: none !important; }
          .solution-mobile { display: block !important; }
          .sol-mobile-group {
            border: 1px solid var(--line); border-radius: var(--radius-lg);
            overflow: hidden; margin-bottom: 20px;
          }
          .sol-mobile-group:last-child { margin-bottom: 0; }
          .sol-mobile-heading {
            padding: 14px 20px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
            background: var(--paper-2); border-bottom: 1px solid var(--line);
          }
          .sol-mobile-row {
            padding: 16px 20px; font-size: 15px; display: flex; align-items: center; gap: 10px;
            border-bottom: 1px solid var(--line-soft); background: var(--paper);
          }
          .sol-mobile-row:last-child { border-bottom: none; }
        }
      `}</style>
    </section>
  );
}

function HowItWorks(){
  const steps = [
    { t:'You place your order', d:'Tell us what you need, quantities and destination.' },
    { t:'We prepare your documentation', d:'Phytosanitary certificates, commercial invoice, packing list, certificate of origin — all handled before your goods move.' },
    { t:'We source at Rungis in Paris', d:'Our team handpicks your produce directly at Rungis International Market, drawing on longstanding relationships with growers and producers.' },
    { t:'We pack and ship', d:'Ice-packed and held at 2–8°C, then flown direct from Paris CDG to your destination worldwide.' },
    { t:'Delivered to your door', d:'Full documentation included. You just receive.' },
  ];
  return (
    <section className="section-pad" style={{background:'var(--forest-deep)', color:'var(--cream)'}}>
      <div className="container">
        <div style={{maxWidth:720, margin:'0 auto 56px', textAlign:'center'}}>
          <Pill dark>How It Works</Pill>
          <MixedHeadline emPhrase="Five steps." className="h-1" text="From Rungis to your door. Five steps."/>
        </div>
        <div className="steps-row" style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:16}}>
          {steps.map((s,i)=>(
            <div key={i} style={{
              position:'relative', padding:'28px 22px',
              background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.1)',
              borderRadius:'var(--radius-lg)', transition:'background 0.2s, border-color 0.2s'
            }}>
              <div style={{fontFamily:'var(--serif)', fontSize:32, color:'var(--tomato)', marginBottom:14, lineHeight:1}}>{String(i+1).padStart(2,'0')}</div>
              <h3 style={{fontFamily:'var(--sans)', fontWeight:500, fontSize:17, margin:'0 0 10px', color:'var(--cream)', lineHeight:1.25}}>{s.t}</h3>
              <p style={{margin:0, fontSize:13.5, lineHeight:1.55, color:'rgba(244,239,226,0.65)'}}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .steps-row > div:hover { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.18); }
        @media (max-width: 1024px){ .steps-row { grid-template-columns: repeat(2, 1fr) !important; gap:16px !important; } }
        @media (max-width: 560px){ .steps-row { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function OurSourcing(){
  return (
    <section className="section-pad">
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:64, alignItems:'start'}} className="sourcing-grid">
          <div>
            <Pill>Our Sourcing</Pill>
            <MixedHeadline emPhrase="Paris." className="h-1" text="Rungis International Market, Paris."/>
          </div>
          <div>
            <p style={{margin:'0 0 24px', fontSize:17, lineHeight:1.65, color:'var(--ink-2)', fontFamily:'var(--sans)'}}>
              We source exclusively from Rungis International Market — 234 hectares at the gates of Paris, home to over 1,200 businesses and the largest fresh produce market in the world. As an English-speaking Rungis agent, we handle the air freight export of fresh fruits and vegetables from Paris on your behalf — from fresh cherries and stone fruit to red endive, shallots and Agria potatoes.
            </p>
            <p style={{margin:'0 0 28px', fontSize:17, lineHeight:1.65, color:'var(--ink-2)', fontFamily:'var(--sans)'}}>
              Our team is based at <strong style={{color:'var(--ink)'}}>Rungis International Market</strong>, handpicking produce daily to ensure only the finest quality reaches our buyers worldwide.
            </p>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24, paddingTop:24, borderTop:'1px solid var(--line)'}} className="sourcing-stats">
              {[['234','Hectares'],['1,200+','Businesses'],["World's Largest",'Fresh Produce Market']].map(([n,l],i)=>(
                <div key={i}>
                  <div style={{fontFamily:'var(--sans)', fontWeight:500, fontSize:'clamp(26px, 3vw, 34px)', color:'var(--tomato)', lineHeight:1.1}}>{n}</div>
                  <div style={{fontSize:12.5, color:'var(--ink-2)', textTransform:'uppercase', letterSpacing:'0.06em', marginTop:6, fontFamily:'var(--sans)'}}>{l}</div>
                </div>
              ))}
            </div>
            <a href="https://www.rungisinternational.com" target="_blank" rel="noopener noreferrer" style={{display:'inline-flex', alignItems:'center', gap:6, marginTop:28, fontSize:13.5, fontWeight:500, fontFamily:'var(--sans)', color:'var(--tomato)'}}>
              Learn more about Rungis <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 900px){ .sourcing-grid { grid-template-columns: 1fr !important; gap:32px !important; } .sourcing-stats { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </section>
  );
}

// Spare drop targets appended after the named produce photos so new images can
// be added from the browser without editing this list.
const SPARE_PRODUCE_SLOTS = 6;

// True when the page is running in the editor (the host injects writeFile).
// Empty spare slots are for authoring only — on the published site they'd read
// as an unfinished gallery — but a spare that HAS a photo must always render.
function useIsEditable(){
  const [editable, setEditable] = useState(() => !!(window.omelette && window.omelette.writeFile));
  useEffect(() => {
    if (editable) return;
    // The host can inject writeFile after first paint, so poll briefly.
    let n = 0;
    const t = setInterval(() => {
      if (window.omelette && window.omelette.writeFile) { setEditable(true); clearInterval(t); }
      else if (++n > 20) clearInterval(t);
    }, 250);
    return () => clearInterval(t);
  }, [editable]);
  return editable;
}

function ProduceGallery(){
  const produce = ['Cherries','Strawberries','Blueberries','Raspberries','Peaches','Nectarines','White Grapes','Red Grapes','Rosé Grapes','Tomatoes on the Vine','Cherry Tomatoes','Charentais Melon','Red Endive','White Endive','Chanterelle Mushrooms','Agria Potatoes','Rocket','Yellow Courgette','Shallots','Apricots','Plums','Figs','Watermelon','Kiwi','Green Beans','Fennel','Leeks','Aubergine','Red Peppers','Asparagus'];
  const editable = useIsEditable();
  // SEO alt text for each produce photo — applied once real images are dropped
  // into the <image-slot> placeholders below (the component doesn't expose an
  // alt attribute itself, so this map is ready for whoever wires up real <img> alt).
  const PRODUCE_ALT = {
    'Stone Fruits':'Premium stone fruits sourced directly from Rungis Market Paris for export',
    'Cherries':'Fresh cherries air freight export from Rungis International Market Paris',
    'Strawberries':'Premium strawberries from Rungis International Market France',
    'Blueberries':'Fresh blueberries air freight export from Paris Rungis',
    'Raspberries':'Fresh raspberries wholesale export from Rungis Market',
    'Peaches':'Stone fruit peaches sourced directly from Rungis Paris',
    'Nectarines':'Fresh nectarines export from Rungis International Market',
    'White Grapes':'White seedless grapes wholesale export from France',
    'Red Grapes':'Red grapes fresh produce export from Rungis Paris',
    'Tomatoes on the Vine':'Tomatoes on the vine air freight export from Paris France',
    'Cherry Tomatoes':'Cherry tomatoes fresh produce sourced from Rungis Market',
    'Charentais Melon':'Charentais melon wholesale export from Rungis Paris',
    'Chanterelle Mushrooms':'Fresh chanterelle mushrooms export from Rungis Market France',
    'Red Endive':'Fresh red endive wholesale export from Rungis Market France',
    'White Endive':'Fresh white endive sourced from Rungis Paris for export',
    'Shallots':'Fresh shallots wholesale export from Rungis International Market',
    'Agria Potatoes':'Fresh Agria potatoes export from Rungis Market Paris France',
    'Rocket':'Fresh rocket salad export from Rungis International Market',
    'Yellow Courgette':'Yellow courgette fresh produce export from Paris Rungis',
  };
  const categories = ['Stone Fruit','Berries','Grapes','Tomatoes','Mediterranean','Alliums & Roots','Salad','Mushrooms & Specialty'];
  return (
    <section id="produce" className="section-pad" style={{background:'var(--forest-deep)', color:'var(--cream)'}}>
      <div className="container">
        <div style={{maxWidth:720, margin:'0 auto 20px', textAlign:'center'}}>
          <Pill dark>Our Produce</Pill>
          <MixedHeadline emPhrase="we source." className="h-1" text="What we source."/>
          <p style={{margin:'20px auto 0', fontSize:16, lineHeight:1.6, color:'rgba(244,239,226,0.75)'}}>
{PRODUCTS.length} product lines across 22 categories, from fresh cherries air freight from Paris to endive export from Rungis International Market. Photos of some of our products showcasing quality.
          </p>
        </div>
        <div className={`gallery-grid${editable ? '' : ' gallery-not-editable'}`} style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:14, marginTop:40}}>
          {produce.map((p,i)=>(
            <div key={i} style={{aspectRatio:'4/3', borderRadius:'var(--radius)', overflow:'hidden', position:'relative'}}>
              <image-slot id={`produce-${i}`} shape="rect" placeholder={p} data-seo-alt={PRODUCE_ALT[p] || `${p} fresh produce sourced from Rungis International Market Paris for export`}></image-slot>
            </div>
          ))}
          {/* Spare slots so new photos can be added without touching the code.
              Empty ones read as subtle dashed frames in the editor; the CSS
              below hides any that are still empty on the published site. */}
          {Array.from({length: SPARE_PRODUCE_SLOTS}, (_,k)=>(
            <div key={`spare-${k}`} className="produce-spare" style={{aspectRatio:'4/3', borderRadius:'var(--radius)', overflow:'hidden', position:'relative'}}>
              <image-slot id={`produce-extra-${k}`} shape="rect" placeholder="Add a photo" data-seo-alt="Fresh produce sourced from Rungis International Market Paris for export"></image-slot>
            </div>
          ))}
        </div>
        <div style={{
          marginTop:40, background:'var(--paper)', borderRadius:'var(--radius-lg)',
          padding:'32px', color:'var(--ink)'
        }}>
          <ProductCatalogueBody/>
        </div>
      </div>
      <style>{`
        /* Empty spares sit quietly until filled; a dropped photo makes the
           frame indistinguishable from the named slots. */
        .produce-spare { outline: 1px dashed rgba(255,255,255,0.16); outline-offset: -1px; }
        .produce-spare:has(image-slot[data-filled]) { outline: none; }
        /* Published site: only spares that actually hold a photo survive. */
        .gallery-not-editable .produce-spare:not(:has(image-slot[data-filled])) { display: none; }
        @media (max-width: 900px){ .gallery-grid { grid-template-columns: repeat(4, 1fr) !important; } }
        @media (max-width: 560px){ .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; } }
      `}</style>
    </section>
  );
}

function DocumentationSection(){
  const items = [
    'Phytosanitary Certificate',
    'Commercial Invoice — origin, gross & net weight',
    'Air Waybill with temperature instructions',
    'FSVP Documentation',
    'FDA Prior Notice filed before every flight',
    'Import Permit — e.g. USDA-APHIS PPQ Form 587 for the USA',
    'EUR.1 — reduces or eliminates import duties',
  ];
  return (
    <section id="documentation" className="section-pad" style={{background:'var(--forest-deep)', color:'var(--cream)'}}>
      <div className="container">
        <div style={{maxWidth:720, margin:'0 auto 56px', textAlign:'center'}}>
          <Pill dark>Documentation</Pill>
          <MixedHeadline emPhrase="fully documented." className="h-1" text="Every shipment, fully documented."/>
          <p style={{margin:'20px auto 0', fontSize:16, lineHeight:1.6, color:'rgba(244,239,226,0.75)', maxWidth:'60ch'}}>
            Wherever you are in the world — USA, Middle East, Africa or beyond — we handle every compliance requirement for your destination. You never touch a form.
          </p>
        </div>
        <div style={{background:'rgba(255,255,255,0.05)', border:'1px solid rgba(255,255,255,0.12)', borderRadius:'var(--radius-lg)', padding:'40px 36px', maxWidth:640, margin:'0 auto'}}>
          <ul style={{margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:16}}>
            {items.map((it,j)=>(
              <li key={j} style={{fontSize:16, lineHeight:1.5, color:'rgba(244,239,226,0.85)', display:'flex', gap:12}}>
                <span style={{color:'var(--leaf)', flexShrink:0}}>✓</span>{it}
              </li>
            ))}
          </ul>
        </div>

        {/* FDA registration — sits directly under the checklist because it's the
            credential that underwrites the FSVP and Prior Notice items above. */}
        <div style={{maxWidth:640, margin:'20px auto 0', display:'flex', gap:14, alignItems:'flex-start', padding:'18px 22px', background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.1)', borderRadius:'var(--radius)'}}>
          <span style={{color:'var(--leaf)', flexShrink:0, fontSize:16, lineHeight:1.5}}>✓</span>
          <div style={{fontSize:15, lineHeight:1.55, color:'rgba(244,239,226,0.85)'}}>
            <strong style={{color:'var(--cream)', fontWeight:500}}>FDA-registered facility.</strong> Our Rungis operation at 121 Rue de Chateaurenard, 94572 Rungis Cedex, France is registered with the US Food &amp; Drug Administration — a prerequisite for shipping food into the United States.
          </div>
        </div>

        {/* US customs broker — pairs with the FDA note above; together they are
            what a US buyer needs to know before their first order. */}
        <div style={{maxWidth:640, margin:'12px auto 0', display:'flex', gap:14, alignItems:'flex-start', padding:'18px 22px', background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.1)', borderRadius:'var(--radius)'}}>
          <span style={{color:'var(--leaf)', flexShrink:0, fontSize:16, lineHeight:1.5}}>✓</span>
          <div style={{fontSize:15, lineHeight:1.55, color:'rgba(244,239,226,0.85)'}}>
            <strong style={{color:'var(--cream)', fontWeight:500}}>US shipments: broker in place.</strong> We work with an appointed customs broker in the United States who handles clearance and customs fees, then onward delivery to your premises.
          </div>
        </div>

        {/* Hand-holding on the buyer's own paperwork — the reassurance that
            first-time importers ask for most. */}
        <div style={{maxWidth:640, margin:'12px auto 0', display:'flex', gap:14, alignItems:'flex-start', padding:'18px 22px', background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.1)', borderRadius:'var(--radius)'}}>
          <span style={{color:'var(--leaf)', flexShrink:0, fontSize:16, lineHeight:1.5}}>✓</span>
          <div style={{fontSize:15, lineHeight:1.55, color:'rgba(244,239,226,0.85)'}}>
            <strong style={{color:'var(--cream)', fontWeight:500}}>We walk you through your own paperwork.</strong> Where a document has to be in your name — an import permit, for example — we'll get on the phone and guide you through it step by step. You're never left to work it out alone.
          </div>
        </div>

        {/* Sample documents — collapsed behind a reveal button so they don't
            show until the visitor asks to see them. */}
        <div style={{marginTop:56, paddingTop:48, borderTop:'1px solid rgba(255,255,255,0.12)'}}>
          <div style={{textAlign:'center', marginBottom:32}}>
            <div style={{fontFamily:'var(--sans)', fontWeight:500, fontSize:20, color:'var(--cream)'}}>Sample documents</div>
            <p style={{margin:'8px auto 0', fontSize:14.5, color:'rgba(244,239,226,0.65)', maxWidth:480}}>Examples of the paperwork that travels with every shipment.</p>
          </div>
          <DocSampleReveal/>
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px){ .doc-sample-grid { grid-template-columns: repeat(3, 1fr) !important; } }
        @media (max-width: 560px){ .doc-sample-grid { grid-template-columns: repeat(2, 1fr) !important; } }
      `}</style>
    </section>
  );
}

function DocSampleReveal(){
  const [open, setOpen] = useState(false);
  const [zoom, setZoom] = useState(false);
  const labels = ['Phytosanitary Certificate','Commercial Invoice','Air Waybill','EUR.1 Form'];
  // The permit page is a fixed 612px-wide document. scale() takes a unitless
  // number, so the ratio has to be computed in JS from the tile's real width —
  // measured in useLayoutEffect (before paint) rather than via an observer
  // callback that may never fire.
  const tileRef = useRef(null);
  const [thumbScale, setThumbScale] = useState(0);
  React.useLayoutEffect(() => {
    if (!open) return;
    const measure = () => {
      const el = tileRef.current;
      if (!el) return;
      const w = el.getBoundingClientRect().width;
      if (w > 0) setThumbScale(w / 612);
    };
    measure();
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, [open]);
  if (!open) {
    return (
      <div style={{textAlign:'center'}}>
        <button onClick={()=>setOpen(true)} className="btn btn-ghost" style={{color:'var(--cream)', borderColor:'rgba(255,255,255,0.25)'}}>
          View sample documents <Icon.Arrow size={14}/>
        </button>
      </div>
    );
  }
  return (
    <>
      <div className="doc-sample-grid" style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:16}}>
        {labels.map((label,i)=>(
          <div key={i} style={{display:'flex', flexDirection:'column', gap:10}}>
            <div style={{aspectRatio:'3/4', borderRadius:'var(--radius)', overflow:'hidden', border:'1px solid rgba(255,255,255,0.14)'}}>
              <image-slot id={`doc-sample-${i}`} shape="rect" placeholder={label}></image-slot>
            </div>
            <span style={{fontSize:12.5, color:'rgba(244,239,226,0.6)', textAlign:'center'}}>{label}</span>
          </div>
        ))}
        <div style={{display:'flex', flexDirection:'column', gap:10}}>
          <button ref={tileRef} className="doc-permit-tile" onClick={()=>setZoom(true)} title="Click to enlarge" style={{
            aspectRatio:'3/4', borderRadius:'var(--radius)', overflow:'hidden', padding:0,
            border:'1px solid rgba(255,255,255,0.14)', background:'#fff', cursor:'zoom-in', position:'relative', display:'block'
          }}>
            <div className="doc-permit-page" style={{position:'absolute', top:0, left:0, width:612, height:792, transformOrigin:'top left', transform:`scale(${thumbScale})`, visibility: thumbScale ? 'visible' : 'hidden'}}>
              <UsdaPermitPage/>
            </div>
          </button>
          <span style={{fontSize:12.5, color:'rgba(244,239,226,0.6)', textAlign:'center'}}>USDA Import Permit</span>
        </div>
      </div>
      {zoom && (
        <div onClick={()=>setZoom(false)} style={{
          position:'fixed', inset:0, zIndex:9000, background:'rgba(10,20,14,0.82)',
          display:'flex', alignItems:'center', justifyContent:'center', padding:24, cursor:'zoom-out'
        }}>
          <div onClick={e=>e.stopPropagation()} style={{maxHeight:'92vh', overflowY:'auto', borderRadius:8, background:'#fff', cursor:'default', boxShadow:'0 30px 80px -20px rgba(0,0,0,0.6)'}}>
            <UsdaPermitPage/>
          </div>
          <button onClick={()=>setZoom(false)} aria-label="Close" style={{
            position:'fixed', top:20, right:24, width:40, height:40, borderRadius:'50%', border:'1px solid rgba(255,255,255,0.3)',
            background:'rgba(255,255,255,0.1)', color:'#fff', fontSize:20, lineHeight:1, cursor:'pointer'
          }}>×</button>
        </div>
      )}
    </>
  );
}

// Resolves an asset through the bundler's inlined resource map in the
// standalone build, falling back to the relative path in dev.
const RES = (id, path) => (typeof window !== 'undefined' && window.__resources && window.__resources[id]) || path;

// Page 1 of the USDA-APHIS PPQ import permit, rebuilt as markup so it stays
// legible at any zoom and inlines into the standalone build. Identity fields
// carry the same black redaction blocks as the source scan.
function UsdaPermitPage(){
  const B = '1px solid #000';
  // Redaction block: solid black with the crossed diagonals of the source scan.
  const Blk = ({ w='100%', h=26 }) => (
    <div style={{width:w, height:h, background:'#000', position:'relative', overflow:'hidden'}}>
      <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style={{position:'absolute', inset:0}}>
        <line x1="0" y1="0" x2="100" y2="100" stroke="#555" strokeWidth="0.8" vectorEffect="non-scaling-stroke"/>
        <line x1="100" y1="0" x2="0" y2="100" stroke="#555" strokeWidth="0.8" vectorEffect="non-scaling-stroke"/>
      </svg>
    </div>
  );
  const lbl = { fontWeight:700, whiteSpace:'nowrap' };
  const rows = [
    ['1.', 'Belgium', 'Fresh', 'Leek (Allium porrum)', 'All Plant Parts Including Seed'],
    ['2.', 'France', 'Fresh', 'Cantaloupe (Cucumis melo subsp. melo var. cantalupo)', 'Fruit'],
  ];
  return (
    <div style={{
      width:612, minHeight:792, background:'#fff', color:'#000', boxSizing:'border-box',
      padding:'22px 26px 16px', fontFamily:"'Times New Roman', Times, serif", fontSize:9, lineHeight:1.35,
      display:'flex', flexDirection:'column'
    }}>
      <img src={RES('usdaLogo','assets/usda-logo.png')} alt="United States Department of Agriculture" style={{width:150, height:'auto', display:'block', marginBottom:14}}/>

      <div style={{textAlign:'center', lineHeight:1.45}}>
        <div>United States Department of Agriculture</div>
        <div>Animal and Plant Health Inspection Service</div>
        <div>Plant Protection &amp; Quarantine</div>
        <div>4700 River Road</div>
        <div>Riverdale, MD 20737</div>
        <div style={{fontWeight:700, fontSize:12.5, marginTop:8}}>Permit to Import Plants and Plant Products</div>
        <div style={{fontWeight:700, fontSize:12.5}}>Regulated by 7 CFR 319. 56</div>
      </div>

      <div style={{borderTop:'1.5px solid #000', borderBottom:'1.5px solid #000', margin:'10px 0 0', padding:'4px 0', textAlign:'center', fontWeight:700, fontSize:10.5}}>
        This permit was generated electronically via the eFile system
      </div>

      <table style={{width:'100%', borderCollapse:'collapse', tableLayout:'fixed'}}>
        <tbody>
          <tr>
            <td style={{border:B, padding:'3px 6px', width:'20%'}}><span style={lbl}>APPLICATION NUMBER:</span></td>
            <td style={{border:B, padding:'3px 6px', width:'30%'}}><Blk h={16}/></td>
            <td style={{border:B, padding:'3px 6px', width:'20%'}}><span style={lbl}>DATE ISSUED:</span></td>
            <td style={{border:B, padding:'3px 6px', width:'30%'}}>08/26/2026</td>
          </tr>
          <tr>
            <td style={{border:B, padding:'3px 6px'}}><span style={lbl}>PERMIT NUMBER:</span></td>
            <td style={{border:B, padding:'3px 6px'}}><Blk h={16}/></td>
            <td style={{border:B, padding:'3px 6px'}}><span style={lbl}>EFFECTIVE:</span></td>
            <td style={{border:B, padding:'3px 6px', fontWeight:700}}>08/26/2026 &ndash; 08/26/2029</td>
          </tr>
          <tr>
            <td style={{border:B, padding:'3px 6px', verticalAlign:'top'}}>
              <div style={lbl}>APPLICANT NAME:</div>
              <div style={{fontWeight:700}}>(Relationship to Permittee)</div>
              <div style={{height:26}}/>
              <div style={lbl}>ORGANIZATION:</div>
              <div style={lbl}>ADDRESS:</div>
              <div style={{height:26}}/>
              <div style={lbl}>MAILING ADDRESS:</div>
              <div style={{height:26}}/>
              <div style={lbl}>PHONE:</div>
              <div style={lbl}>EMAIL:</div>
            </td>
            <td style={{border:B, padding:'3px 6px', verticalAlign:'top'}}><Blk h={168}/></td>
            <td style={{border:B, padding:'3px 6px', verticalAlign:'top'}}>
              <div style={lbl}>PERMITTEE NAME:</div>
              <div style={{height:38}}/>
              <div style={lbl}>ORGANIZATION:</div>
              <div style={lbl}>ADDRESS:</div>
              <div style={{height:44}}/>
              <div style={lbl}>MAILING ADDRESS:</div>
              <div style={{height:26}}/>
              <div style={lbl}>PHONE:</div>
              <div style={lbl}>EMAIL:</div>
            </td>
            <td style={{border:B, padding:'3px 6px', verticalAlign:'top'}}>
              <Blk h={16}/>
              <div style={{height:22}}/>
              <Blk h={48}/>
              <div style={{height:8}}/>
              <Blk h={34}/>
              <div style={{height:8}}/>
              <Blk h={28}/>
            </td>
          </tr>
          <tr>
            <td style={{border:B, padding:'3px 6px', verticalAlign:'top', textAlign:'center'}}><span style={lbl}>DESIGNATED PORTS:</span></td>
            <td style={{border:B, padding:'3px 6px', verticalAlign:'top'}} colSpan="3">
              Various Approved Ports of Entry Specified under the Conditions and Staffed by CBP-Agriculture Specialists
            </td>
          </tr>
        </tbody>
      </table>

      <div style={{borderTop:'1.5px solid #000', margin:'18px 0 14px'}}/>

      <table style={{width:'100%', borderCollapse:'collapse', tableLayout:'fixed'}}>
        <tbody>
          <tr><td colSpan="4" style={{border:B, padding:'5px 6px', textAlign:'center'}}>Under the conditions specified, this permit authorizes the following:</td></tr>
          <tr><td colSpan="4" style={{border:B, padding:'5px 6px'}}><strong>Intended Use:</strong>&nbsp; Not for Propagation and Planting</td></tr>
          <tr style={{fontWeight:700, textAlign:'center'}}>
            <td style={{border:B, padding:'4px 6px', width:'21%'}}>Country/<br/>Countries of Origin</td>
            <td style={{border:B, padding:'4px 6px', width:'18%'}}>Process Type</td>
            <td style={{border:B, padding:'4px 6px', width:'35%'}}>Articles</td>
            <td style={{border:B, padding:'4px 6px', width:'26%'}}>Plant Parts</td>
          </tr>
          {rows.map((r,i)=>(
            <tr key={i}>
              <td style={{border:B, padding:'5px 6px', verticalAlign:'top'}}><strong>{r[0]}</strong>&nbsp; {r[1]}</td>
              <td style={{border:B, padding:'5px 6px', verticalAlign:'top'}}>{r[2]}</td>
              <td style={{border:B, padding:'5px 6px', verticalAlign:'top', textAlign:'center'}}>{r[3]}</td>
              <td style={{border:B, padding:'5px 6px', verticalAlign:'top'}}>{r[4]}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <div style={{flex:1, minHeight:24}}/>

      <div style={{textAlign:'right', fontSize:7.6, marginBottom:2}}>Permit Number: 556-26-238-61343A1</div>
      <table style={{width:'100%', borderCollapse:'collapse', tableLayout:'fixed'}}>
        <tbody>
          <tr>
            <td style={{border:B, padding:'5px 7px', width:'66%', verticalAlign:'top'}}>
              <div>THIS PERMIT HAS BEEN APPROVED ELECTRONICALLY BY THE FOLLOWING PPQ HEADQUARTER OFFICIAL VIA EFILE</div>
              <div style={{fontWeight:700, marginTop:10}}>APHIS eFile Automatic Issued Permit Regulated by 7 CFR 319. 56</div>
            </td>
            <td style={{border:B, padding:'5px 7px', verticalAlign:'top'}}>
              <div>DATE</div>
              <div style={{fontWeight:700, marginTop:10}}>08/26/2026</div>
            </td>
          </tr>
        </tbody>
      </table>

      <div style={{fontSize:6.8, marginTop:4, lineHeight:1.3}}>
        WARNING: Any alteration, forgery or unauthorized use of this Federal Form is subject to civil penalties of up to $250,000 (7 U.S.C.s 7734(b)) or punishable by a fine of not more than $10,000, or imprisonment of not more than 5 years, or both (18 U.S.C.s 1001)
      </div>
      <div style={{fontSize:7.4, textAlign:'center', marginTop:2}}>Page 1 of 5</div>
    </div>
  );
}

function StatsRow(){
  const stats = [['161','Product lines available'],['22','Produce categories'],['4+','Continents served'],['Weekly','Shipment frequency']];
  return (
    <section className="section-pad-sm">
      <div className="container" style={{textAlign:'center'}}>
        <Pill>By The Numbers</Pill>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:32, marginTop:12}} className="bignum-grid">
          {stats.map(([n,l],i)=>(
            <div key={i}>
              <div style={{fontFamily:'var(--serif)', fontSize:'clamp(40px, 5vw, 60px)', color:'var(--tomato)', lineHeight:1, letterSpacing:'-0.02em'}}>{n}</div>
              <div style={{fontSize:13.5, color:'var(--ink-2)', textTransform:'uppercase', letterSpacing:'0.06em', marginTop:8}}>{l}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 720px){ .bignum-grid { grid-template-columns: 1fr 1fr !important; gap:24px !important; } }`}</style>
    </section>
  );
}

function Markets(){
  const shipping = ['🇹🇿 Tanzania','🇿🇦 South Africa','🇸🇨 Seychelles','🇲🇺 Mauritius'];
  const expanding = ['🇺🇸 USA','🇦🇪 UAE','🇸🇦 Saudi Arabia','🇶🇦 Qatar'];
  return (
    <section className="section-pad" style={{background:'var(--paper-2)'}}>
      <div className="container">
        <div style={{maxWidth:720, margin:'0 auto 48px', textAlign:'center'}}>
          <Pill>Where We Deliver</Pill>
          <MixedHeadline emPhrase="to the world." className="h-1" text="From Paris to the world."/>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:32}} className="markets-grid">
          <div>
            <div className="mono" style={{fontSize:12, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--leaf)', marginBottom:16}}>Currently shipping to</div>
            <div style={{display:'flex', flexDirection:'column', gap:12}}>
              {shipping.map((s,i)=>(<div key={i} style={{fontSize:17, fontFamily:'var(--serif)'}}>{s}</div>))}
            </div>
          </div>
          <div>
            <div className="mono" style={{fontSize:12, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--amber)', marginBottom:16}}>Expanding to</div>
            <div style={{display:'flex', flexDirection:'column', gap:12}}>
              {expanding.map((s,i)=>(<div key={i} style={{fontSize:17, fontFamily:'var(--serif)', opacity:0.75}}>{s}</div>))}
            </div>
          </div>
        </div>
        <p style={{margin:'40px 0 0', fontSize:15, color:'var(--ink-2)'}}>
          Don't see your country? Get in touch — if we can fly it, we can deliver it.
        </p>
      </div>
      <style>{`@media (max-width: 640px){ .markets-grid { grid-template-columns: 1fr !important; gap:28px !important; } }`}</style>
    </section>
  );
}

Object.assign(window, { Pill, MixedHeadline, ProblemSection, SolutionSection, HowItWorks, OurSourcing, ProduceGallery, DocumentationSection, StatsRow, Markets });
