// iffs-emblems.jsx — fresh start.
// Five varied directions, each a different *kind* of mark:
//
// 1. wordmark — pure typographic IFFS, no symbol
// 2. monogram-i — uppercase I with the dot replaced by a salmon-pink
// disc; quietly references the company initial
// 3. river-curl — abstract flowing curl (river/line) inside a soft circle
// 4. fish-arc — minimal salmon as a single arc + tail wedge, no detail
// 5. mountain-mark — two triangles (mountains) with a horizon line / river
// beneath; the most landscape-leaning option
//
// All marks are mono-stroke, single-color (currentColor) so they sit on
// any palette and read at any size. No banners, no rope rings, no
// arc-text.
// ─── 1. Wordmark only ───────────────────────────────────────────────────
function EmblemWordmark({ size = 64, color = "currentColor" }) {
// Returns a tiny placeholder square just so the lockup spacing stays
// consistent — visually invisible. The real "mark" is the wordmark in
// the Logo component itself.
return ;
}
// ─── 2. Monogram I ──────────────────────────────────────────────────────
function EmblemMonogramI({ size = 64, color = "currentColor" }) {
return (
);
}
// ─── 3a. River bend — hairline circle, slow meander ─────────────────────
// One bold meandering stroke inside a thin engraved circle.
// No loops; reads like a heritage signet with generous negative space.
function EmblemRiverCurl({ size = 64, color = "currentColor" }) {
return (
);
}
// ─── 3b. River bend — two-weight, with horizon line ─────────────────────
// Bold vertical meander with hairline tributaries; horizon for elegance.
function EmblemRiverHorizon({ size = 64, color = "currentColor" }) {
return (
);
}
// ─── 3c. River bend — engraved square, banker's mark feel ───────────────
function EmblemRiverSquare({ size = 64, color = "currentColor" }) {
return (
);
}
// ─── 3d. River bend — frameless, single confident stroke ────────────────
function EmblemRiverPure({ size = 64, color = "currentColor" }) {
return (
);
}
// ─── PRODUCT SUB-MARKS ──────────────────────────────────────────────────
// Each product gets a variant of the master river-bend, with one small
// element added that signals what the product *does*:
// RM (River Management) → adds *control / stewardship* vocabulary
// AA (Angler App) → adds *fishing / the catch* vocabulary
//
// All product-marks live inside a 100×100 square engraving frame so they
// read as a "stamp" — distinct from the company mark, which is unframed.
//
// Helpers ───────────────────────────────────────────────────────────────
function StampFrame({ children, copper = false }) {
return (
<>
{children}
{copper && (
)}
);
}
// The shared bend path used inside all product stamps. Slight S-curve,
// no loops, fills the 16–84 inner zone.
const PRODUCT_BEND = "M 16 78 C 28 76, 30 56, 44 50 C 58 44, 64 64, 78 56 C 86 51, 84 32, 92 24";
// A vertically-shorter bend, leaving headroom at top of the stamp
const PRODUCT_BEND_LOW = "M 16 80 C 28 78, 30 64, 44 60 C 58 56, 64 72, 78 66 C 86 62, 84 50, 92 44";
// ─── RM-A · Beat ticks (river-mile markers) ────────────────────────────
// The bend is annotated with little perpendicular ticks — beats numbered
// along the river. Reads as "this water is divided, scheduled, managed."
function EmblemRMBeats({ size = 64 }) {
return (
);
}
// ─── RM-B · Boundary frame (managed water) ─────────────────────────────
// The bend sits inside an inner *property/license* boundary — a second
// thin square, slightly cropped corners. Reads as "this is bounded,
// permitted, stewarded land."
function EmblemRMBoundary({ size = 64 }) {
return (
);
}
// ─── AA-A · Tied fly above the bend ────────────────────────────────────
// Bend in the lower half; a tiny tied fly hangs above it (hook + hackle
// + thread band). Most traditional / heritage angling signal.
function EmblemAAFly({ size = 64 }) {
return (
);
}
// ─── AA-B · Leaping salmon over the bend ───────────────────────────────
// A small salmon arcs over the river — the moment of the take. More
// dynamic and direct than the fly.
function EmblemAALeap({ size = 64 }) {
return (
);
}
// Product-mark router
function ProductMark({ product, variant, size = 64 }) {
if (product === 'rm') {
return variant === 'boundary'
?
: ;
}
if (product === 'aa') {
return variant === 'leap'
?
: ;
}
return null;
}
// ─── 4. Fish arc ────────────────────────────────────────────────────────
// Salmon reduced to its essence: one arc for the body, a wedge for the tail.
function EmblemFishArc({ size = 64, color = "currentColor" }) {
return (
);
}
// ─── 5. Mountain mark ───────────────────────────────────────────────────
// Two triangles (peaks) with a single line of river beneath.
function EmblemMountain({ size = 64, color = "currentColor" }) {
return (
);
}
// ─── 6. Angler · Rod · River (chosen mark) ──────────────────────────────
// The brand mark — heritage silhouette derived from a source photograph:
// a standing angler on a riverbank, rod lifted in fish-on tension, line
// dropping to a splash on the water below. Single-color, currentColor
// throughout — paste it on any palette and it inherits the surrounding
// hue. Stroke weights are absolute (1.1 / 1.5 / 0.7 etc.) so the mark
// reads consistently from favicon (24px) to hero (140px); we rely on the
// 120×120 viewBox + width/height on the SVG element rather than scaling
// stroke-width. See design_handoff_iffs_logo/README.md for the full
// anatomy + sizing spec.
function EmblemAnglerRodRiver({ size = 120, color = "currentColor" }) {
return (
);
}
// ─── Router + lockup ────────────────────────────────────────────────────
function Emblem({ variant, size = 56, color }) {
switch (variant) {
case 'wordmark': return ;
case 'monogram-i': return ;
case 'river-curl': return ;
case 'river-horizon': return ;
case 'river-square': return ;
case 'river-pure': return ;
case 'fish-arc': return ;
case 'mountain': return ;
case 'angler': return ;
// Default = the chosen brand mark. (Was 'monogram-i' during exploration.)
default: return ;
}
}
// Logo lockup. Renders the chosen brand mark + Fraunces wordmark + mono
// descriptor side by side (inline variant — used in the nav). The mark
// inherits color from the parent, so on a dark ground (default) it
// renders in paper; on a light ground caller passes onDark={false} and
// it inverts to ink. When variant === 'wordmark' we drop the mark column
// and render type only — handy for places where the mark would be
// redundant (e.g. tightly-packed footers).
function Logo({ variant = 'angler', size = 'md', onDark = true }) {
const markPx = size === 'sm' ? 28 : size === 'lg' ? 56 : 40;
const c = onDark ? 'var(--paper)' : 'var(--ink)';
const descColor = onDark ? 'rgba(244,239,228,.55)' : 'var(--ink-4)';
const isWordmarkOnly = variant === 'wordmark';
return (
{!isWordmarkOnly && (
)}
IFFS
Icelandic Fly Fishing Solutions
);
}
// ─── Generic icons (unchanged) ─────────────────────────────────────────
function Icon({ name, size = 28, color = "currentColor" }) {
const props = { width: size, height: size, viewBox: "0 0 32 32", fill: "none", stroke: color, strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };
switch (name) {
case 'cal': return ;
case 'fish': return ;
case 'doc': return ;
case 'pin': return ;
case 'bell': return ;
case 'people': return ;
case 'map': return ;
case 'sketch': return ;
case 'fly': return ;
case 'wifi': return ;
case 'crm': return ;
case 'plus': return ;
case 'arrow': return ;
default: return ;
}
}
Object.assign(window, {
Emblem, EmblemWordmark, EmblemMonogramI,
EmblemRiverCurl, EmblemRiverHorizon, EmblemRiverSquare, EmblemRiverPure,
EmblemFishArc, EmblemMountain,
EmblemAnglerRodRiver,
EmblemRMBeats, EmblemRMBoundary, EmblemAAFly, EmblemAALeap, ProductMark,
Logo, Icon,
});