// KisanYantra — shared UI components
// Expects React + ReactDOM loaded globally.
const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;
// ---------- Viewport hook ----------
// Returns `true` when the viewport is at or below `maxWidth`. Subscribes to
// matchMedia changes so layout swaps (e.g. tabs → accordion) react to resize.
function useIsBelow(maxWidth = 900) {
const [below, setBelow] = useState(() =>
typeof window !== "undefined" ? window.matchMedia(`(max-width: ${maxWidth}px)`).matches : false
);
useEffect(() => {
const mq = window.matchMedia(`(max-width: ${maxWidth}px)`);
const onChange = () => setBelow(mq.matches);
mq.addEventListener ? mq.addEventListener("change", onChange) : mq.addListener(onChange);
return () => {
mq.removeEventListener ? mq.removeEventListener("change", onChange) : mq.removeListener(onChange);
};
}, [maxWidth]);
return below;
}
// ---------- Role & language context ----------
const RoleCtx = React.createContext({ role: "farmer", setRole: () => {} });
const ROLES = {
farmer: {
label: "Farmer",
hindi: "किसान",
tag: "Kisaan",
accent: "var(--ky-saffron)",
accentSoft: "var(--ky-saffron-soft)",
accentDeep: "var(--ky-saffron-deep)",
heroKicker: "For farmers who grow our food",
},
owner: {
label: "Owner",
hindi: "मालिक",
tag: "Maalik",
accent: "var(--ky-forest)",
accentSoft: "var(--ky-forest-soft)",
accentDeep: "var(--ky-forest-deep)",
heroKicker: "For owners who keep machines earning",
},
operator: {
label: "Operator",
hindi: "चालक",
tag: "Chaalak",
accent: "var(--ky-op-blue)",
accentSoft: "var(--ky-op-blue-soft)",
accentDeep: "var(--ky-op-blue-deep)",
heroKicker: "For operators who run the fields",
},
};
// ---------- Logo ----------
// `size` is the rendered HEIGHT in px; width auto-scales by the image's
// aspect ratio (~549/455 ≈ 1.21). Callers historically passed size=30–34
// as the icon-only height; we bump those small values up so the wordmark
// (which is now baked into the image) reads at the same visual weight.
// `mono=true` (used in the dark-background footer) flips the colors via
// a CSS filter so the brand stays readable.
function KYLogo({ size = 32, mono = false }) {
// Callers historically passed size=30–34 as a small icon-only height. The
// new image bakes the wordmark in, so we scale up generously (~2.2×) so
// the brand reads at proper marketing weight in the nav and footer.
const renderHeight = size * 2.2;
return (
);
}
// ---------- Button ----------
function Btn({ children, variant = "primary", size = "md", icon, iconRight, style = {}, ...rest }) {
const h = size === "lg" ? 56 : size === "sm" ? 36 : 46;
const px = size === "lg" ? 28 : size === "sm" ? 14 : 20;
const fs = size === "lg" ? 16 : size === "sm" ? 13 : 14.5;
const bg = {
primary: "var(--ky-saffron)",
forest: "var(--ky-forest)",
ink: "var(--ky-ink)",
ghost: "transparent",
cream: "var(--ky-cream)",
}[variant];
const color = variant === "ghost" ? "var(--ky-ink)" :
variant === "cream" ? "var(--ky-ink)" : "var(--ky-cream)";
const border = variant === "ghost" ? "1px solid var(--ky-cream-line)" :
variant === "cream" ? "1px solid var(--ky-cream-line)" : "none";
const shadow = variant === "primary" ? "var(--sh-saffron)" :
variant === "ghost" ? "none" : "var(--sh-md)";
return (
);
}
// ---------- Store badges ----------
function StoreBadge({ store = "play", dark = true }) {
const bg = dark ? "#1E1A12" : "var(--ky-cream)";
const fg = dark ? "var(--ky-cream)" : "var(--ky-ink)";
const sub = dark ? "rgba(253,250,245,0.7)" : "var(--ky-ink-3)";
return (
{store === "play" ? (
) : (
)}
{store === "play" ? "Get it on" : "Download on the"}
{store === "play" ? "Google Play" : "App Store"}
{kicker && (
{kicker}
{kickerHindi && (
{kickerHindi}
)}
)}
{title}
{titleHindi && (
{titleHindi}
)}
{sub && (
{sub}
)}
{/* Invisible "tallest" tagline keeps layout stable — English is usually widest */}
Farm equipment,
in your language.
{/* Animated taglines layered on top */}
{TAGLINES.map((t, i) => (
{t.head}
{t.tail}
))}