// Brown Ocean — homepage sections + reusable bits const { useState: useS, useEffect: useE, useRef: useR, useMemo: useM } = React; // ============== HERO ============== function Hero({ variant = "editorial", showLeaves = true, onQuote }) { return (
{variant === "editorial" && } {variant === "cinematic" && } {variant === "product" && }
{/* trust strip */}
{CERTIFICATIONS.slice(0, 4).map(c => (
{c.code} CERTIFIED
))}
EXPORTING SINCE MMXX
); } function HeroEditorial({ onQuote }) { return (
BROWN OCEAN EXPORTS · SINGLE-ORIGIN MAKHANA

The Euryale Ferox,
raised to export grade.

Hand-harvested from Bihar's Purnia and Katihar wetlands. Graded, slow-roasted and shipped, traceable, to the world's better grocers.

Explore the range
{[ ["12", "countries shipped"], ["18-24", "mm pop, hand-graded"], ["100%", "traceable to grower"] ].map(([k, v]) => (
{k}
{v}
))}
Brown Ocean — Roasted Makhana, Himalayan Salt, 50g
Available · FCL & LCL
LOT 24-PUR-0142
Himalayan Salt
22 mm pop | 50 g retail
); } function HeroCinematic({ onQuote }) { return (
SINCE MMXX · BIHAR · INDIA

Brown
Ocean.

Premium makhana from Bihar's Purnia and Katihar wetlands — graded, roasted, and shipped to fifty markets.

Explore the range
); } function HeroProductLed({ onQuote }) { return (
FLAVOUR · 01
Peri Peri
SPICY · AFRICAN HEAT

Eleven
flavours.

From Himalayan Salt to Lime & Mint — every flavour, batch-roasted on a single line and graded to the same export-ready standard.

); } // ============== BRAND STORY ============== function BrandStory() { return (

"Makhana is harvested from pond-water by hand, dried in the sun, and popped one kernel at a time. There is no industrial shortcut. That's why grade matters."

— VISHAL · FOUNDER, ASCENDANCE AGRO
); } // ============== DIFFERENTIATION ============== function Differentiation() { return (
{DIFFERENTIATORS.map((d, i) => (
{d.n}

{d.title}

{d.body}

))}
); } // ============== FLAVOUR SELECTOR ============== function FlavourGrid({ onQuote }) { const [active, setActive] = useS(FLAVOURS[0].id); const f = FLAVOURS.find(x => x.id === active); return (
{/* Selector */}
{FLAVOURS.map((fl, i) => { const isActive = fl.id === active; return ( ); })}
{/* Detail card */}
FLAVOUR · {String(FLAVOURS.findIndex(x => x.id === f.id) + 1).padStart(2, "0")}

{f.name}

{f.tag}
SEASONING NOTES
{f.profile.map(p => ( {p} ))}
HEAT
{["Mild", "Light", "Medium", "Hot", "Extra hot"][f.heat]}
SKU
18g · 65g · 200g
); } // ============== CATEGORIES ============== function Categories({ onQuote }) { return (
{CATEGORIES.map((c, i) => (
{c.img ? {c.name} : ↳ {c.placeholder} }
{c.eyebrow}

{c.name}

{c.body}

    {c.bullets.map(b => (
  • {b}
    • ))}
))}
); } // ============== INGREDIENTS ============== function Ingredients() { return (
ADDITIVES (INS CODES)
{INGREDIENTS.additives.map(a => (
{a.code}
{a.name}
{a.role}
))}
); } function IngCol({ title, items, tone }) { return (
{title}
); } // ============== NUTRITION ============== function NutritionTable() { const [variant, setVariant] = useS("raw"); const data = NUTRITION[variant]; return (
{[["raw", "Raw kernels"], ["roasted", "Roasted, salted"]].map(([k, label]) => ( ))}
Nutrition
SERVING · {data.serving}
{variant.toUpperCase()}
{data.rows.map((r, i) => ( ))}
{r.label.replace("— ", "")} {r.value} {r.unit && {r.unit}}
); } // ============== CERTIFICATIONS ============== function Certifications() { const [hovered, setHovered] = useS(null); return (
{CERTIFICATIONS.map((c, i) => (
setHovered(c.code)} onMouseLeave={() => setHovered(null)} style={{ position: "relative", background: hovered === c.code ? "var(--brown-800)" : "var(--sand-100)", color: hovered === c.code ? "var(--sand-100)" : "var(--brown-900)", borderRadius: 22, padding: "36px 28px", aspectRatio: "1", display: "flex", flexDirection: "column", justifyContent: "space-between", boxShadow: "var(--shadow-sm)", transition: "background 0.3s ease, color 0.3s ease, transform 0.3s ease", transform: hovered === c.code ? "translateY(-4px)" : "none", cursor: "default", overflow: "hidden" }}>
SINCE {c.since}
{c.code}
{hovered === c.code ? c.desc : c.full}
{c.issued}
))}
); } // ============== PROCESS TIMELINE ============== function ProcessTimeline() { const [active, setActive] = useS(0); const refs = useR([]); useE(() => { const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { const idx = Number(e.target.dataset.idx); setActive(idx); } }); }, { threshold: 0.55, rootMargin: "-20% 0px -20% 0px" }); refs.current.forEach(r => r && io.observe(r)); return () => io.disconnect(); }, []); return (
{/* Sticky image column */}
{PROCESS_STEPS.map((s, i) => { const tones = ["#4F7A4D", "#8C5A38", "#B88A2E", "#6B4226", "#3D2418"]; return (
{s.img ? {s.title} :
↳ {s.placeholder}
}
); })}
STEP {PROCESS_STEPS[active].n}
{PROCESS_STEPS[active].title}
{/* Step list */}
{/* vertical line */}
{PROCESS_STEPS.map((s, i) => (
refs.current[i] = el} data-idx={i} style={{ paddingLeft: 56, paddingTop: 16, paddingBottom: 16, minHeight: 200, position: "relative" }}> {/* dot */}
{s.n} · {s.region}

{s.title}

{s.body}

))}
); } // ============== EXPORT MAP ============== function ExportMap() { const [hovered, setHovered] = useS(null); return (
{REGIONS.map(r => ( ))}
{/* World silhouette — abstract dots */} {Array.from({ length: 690 }).map((_, i) => { const x = (i % 30) * 3.4 + 1; const y = Math.floor(i / 30) * 3 + 1; const land = ( (x > 14 && x < 38 && y > 24 && y < 50) || (x > 24 && x < 34 && y > 48 && y < 65) || (x > 44 && x < 60 && y > 16 && y < 35) || (x > 46 && x < 66 && y > 35 && y < 68) || (x > 55 && x < 66 && y > 38 && y < 50) || (x > 64 && x < 90 && y > 22 && y < 56) || (x > 70 && x < 82 && y > 54 && y < 62) || (x > 78 && x < 92 && y > 60 && y < 68) ); if (!land) return null; return ; })} {/* Origin */} BIHAR {/* Routes */} {REGIONS.map(r => { const isHover = hovered === r.short; return ( {isHover && ( {r.short} )} ); })}
ORIGIN · BIHAR / IN
→ {REGIONS.length} DESTINATIONS
); } // ============== TESTIMONIALS ============== function Testimonials() { const [active, setActive] = useS(0); return (
"

{TESTIMONIALS[active].quote}

{TESTIMONIALS[active].author}
{TESTIMONIALS[active].company}
MARKET · {TESTIMONIALS[active].region}
{TESTIMONIALS.map((_, i) => (
); } // ============== FINAL CTA ============== function FinalCTA({ onQuote }) { return (
READY TO TRADE?

Let's load your
first container.

Tell us what you need — we'll come back inside one business day with pricing, samples and a sailing schedule.

); } Object.assign(window, { Hero, BrandStory, Differentiation, FlavourGrid, Categories, Ingredients, NutritionTable, Certifications, ProcessTimeline, ExportMap, Testimonials, FinalCTA });