// Brown Ocean — shared components const { useState, useEffect, useRef } = React; // -------------------- Wordmark (stacked Brown / Ocean per supplied logo) -------------------- function Wordmark({ size = 20, light = false }) { return (
Brown Ocean
); } // -------------------- Header -------------------- function Header({ route, onNavigate, onQuote }) { const [shrunk, setShrunk] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const onScroll = () => setShrunk(window.scrollY > 40); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { document.body.style.overflow = menuOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [menuOpen]); const links = [ { id: "home", label: "Home" }, { id: "products", label: "Products" }, { id: "process", label: "Process" }, { id: "exports", label: "Exports" }, { id: "contact", label: "Contact" } ]; const handleNavigate = (id) => { onNavigate(id); setMenuOpen(false); }; return ( <>
{ e.preventDefault(); handleNavigate("home"); }} style={{ display: "flex", alignItems: "center" }}> Brown Ocean Exports
{menuOpen && (
{links.map(l => ( { e.preventDefault(); handleNavigate(l.id); }} style={{ fontSize: 28, fontFamily: "var(--serif)", fontWeight: 500, color: route === l.id ? "var(--brown-900)" : "var(--ink-soft)", padding: "14px 40px", letterSpacing: "-0.01em", width: "100%", textAlign: "center", borderBottom: route === l.id ? "2px solid var(--gold)" : "2px solid transparent" }}> {l.label} ))}
)} ); } // -------------------- Footer -------------------- function Footer({ onNavigate, onQuote }) { return ( ); } function FooterCol({ title, items, onNavigate }) { return (
{title}
{items.map(it => ( { e.preventDefault(); onNavigate(it.to); }} style={{ fontSize: 14, color: "var(--sand-200)", transition: "color 0.15s" }} onMouseEnter={(e) => e.currentTarget.style.color = "var(--gold)"} onMouseLeave={(e) => e.currentTarget.style.color = "var(--sand-200)"}> {it.label} ))}
); } // -------------------- Floating leaves -------------------- function LeafSVG({ size = 36, color = "#6BA368", opacity = 0.5 }) { return ( ); } function FloatingLeaves({ show, density = 6 }) { if (!show) return null; const leaves = [ { top: "8%", left: "4%", size: 42, rot: -22, delay: 0, c: "#6BA368", o: 0.42 }, { top: "18%", right: "6%", size: 32, rot: 28, delay: 1.2, c: "#7AAF7A", o: 0.38 }, { top: "62%", left: "2%", size: 48, rot: 12, delay: 2.5, c: "#4F7A4D", o: 0.35 }, { top: "78%", right: "4%", size: 28, rot: -18, delay: 0.8, c: "#6BA368", o: 0.45 }, { top: "42%", left: "92%", size: 36, rot: 35, delay: 3.1, c: "#94B97E", o: 0.30 }, { top: "92%", left: "44%", size: 24, rot: -8, delay: 1.6, c: "#6BA368", o: 0.40 } ].slice(0, density); return (
{leaves.map((l, i) => (
))}
); } // -------------------- Reveal-on-scroll -------------------- function Reveal({ children, delay = 0, as: Tag = "div", ...rest }) { const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { setVisible(true); io.disconnect(); } }); }, { threshold: 0.15 }); io.observe(el); return () => io.disconnect(); }, []); return ( {children} ); } // -------------------- Section header -------------------- function SectionHeader({ eyebrow, title, italic, body, align = "left", light = false }) { return (
{eyebrow &&
{eyebrow}
}

{title} {italic && <> {italic}}

{body && (

{body}

)}
); } // -------------------- Image placeholder (monospace, striped) -------------------- function Placeholder({ label, ratio = "4 / 5", radius = "var(--radius-lg)", tone = "sand", caption, children, style = {} }) { const tones = { sand: { bg: "var(--sand-200)", stripe: "rgba(74, 44, 29, 0.06)", text: "var(--brown-600)" }, cream: { bg: "var(--sand-100)", stripe: "rgba(74, 44, 29, 0.05)", text: "var(--brown-700)" }, dark: { bg: "var(--brown-700)", stripe: "rgba(245, 232, 216, 0.06)", text: "var(--sand-300)" }, gold: { bg: "#E8D29A", stripe: "rgba(74, 44, 29, 0.08)", text: "var(--brown-800)" }, leaf: { bg: "#D8E5C8", stripe: "rgba(74, 44, 29, 0.06)", text: "var(--leaf-dark)" } }; const t = tones[tone] || tones.sand; return (
{children} {label && (
↳ {label}
)}
{caption && (
{caption}
)}
); } // keep ImageFrame as alias for back-compat — if src given, render real photo function ImageFrame({ alt, ratio = "4 / 5", radius = "var(--radius-lg)", caption, src, ...rest }) { if (!src) return ; return (
{alt}
{caption && (
{caption}
)}
); } // -------------------- Quote modal -------------------- function QuoteModal({ open, onClose, initialProduct }) { const [step, setStep] = useState(0); const [data, setData] = useState({ product: initialProduct || "", quantity: "", country: "", name: "", company: "", email: "", phone: "", notes: "" }); const [submitted, setSubmitted] = useState(false); useEffect(() => { if (open) { setStep(0); setSubmitted(false); } if (open) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = ""; } return () => { document.body.style.overflow = ""; }; }, [open]); useEffect(() => { if (initialProduct) setData(d => ({ ...d, product: initialProduct })); }, [initialProduct]); if (!open) return null; const set = (k, v) => setData(d => ({ ...d, [k]: v })); const next = () => setStep(s => Math.min(s + 1, 2)); const back = () => setStep(s => Math.max(s - 1, 0)); const canNext = (() => { if (step === 0) return data.product && data.quantity; if (step === 1) return data.country; if (step === 2) return data.name && data.email; return true; })(); return (
e.stopPropagation()}> {submitted ? (
✓

Quote received.

Our export team will reach you within one business day at {data.email}.

) : (
Step {step + 1} / 3

{step === 0 && <>Tell us what you need.} {step === 1 && <>Where is it shipping?} {step === 2 && <>How do we reach you?}

{/* progress */}
{[0, 1, 2].map(i => (
))}
{step === 0 && (
)} {step === 1 && (
set("country", e.target.value)} />