// ─────────────────────────────────────────────────────────────────────────
// SmartShamba Search (smartshamba.com) — booth panels.
// Warm/earthy look: DM Serif Display + DM Sans, forest green + sage + honey.
// Phone screens authored in a fixed 360×740 space, scaled by <PhoneSS>.
// ─────────────────────────────────────────────────────────────────────────

const SS = {
  forest: '#14532D', forestMid: '#1B6B3A', forestLight: '#22C55E',
  sage: '#F0FDF4', sageBorder: '#BBF7D0',
  honey: '#C8952E', honeyLight: '#FEF9C3', amber: '#D97706', amberDark: '#78350F', amberLight: '#FEF3C7',
  wa: '#25D366', danger: '#DC2626', dangerBg: '#FEE2E2', dangerBorder: '#FECACA',
  surface: '#F8FAFC', card: '#FFFFFF', border: '#E5E7EB', borderMid: '#D1D5DB',
  ink: '#0F172A', ink2: '#475569', muted: '#94A3B8',
  serif: "'DM Serif Display', Georgia, serif",
  sans: "'DM Sans', system-ui, sans-serif"
};

const VERDICT = {
  Suitable: { bg: SS.sage, color: SS.forest, border: SS.sageBorder, en: 'Suitable', sw: 'Inafaa' },
  Moderate: { bg: SS.amberLight, color: SS.amberDark, border: '#FCD34D', en: 'Moderate', sw: 'Wastani' },
  Unsuitable: { bg: SS.dangerBg, color: SS.danger, border: SS.dangerBorder, en: 'Unsuitable', sw: 'Haifai' }
};
const RISK = { HIGH: { c: SS.danger, bg: SS.dangerBg }, MEDIUM: { c: SS.amberDark, bg: SS.amberLight }, LOW: { c: SS.forest, bg: SS.sage } };

const SC_W = 360,SC_H = 740;

function MSi({ name, size = 24, color = SS.ink2, fill = 0, weight = 400, style }) {
  return (
    <span className="material-symbols-outlined" style={{ fontSize: size, color, lineHeight: 1, flexShrink: 0, fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' 0, 'opsz' 24`, ...style }}>{name}</span>);

}

// brand wordmark: sprout + "SmartShamba" (serif)
function Wordmark({ size = 24, color = SS.forest, icon = true }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
      {icon && <span style={{ width: size * 1.3, height: size * 1.3, borderRadius: '50%', background: '#fff', border: `1px solid ${SS.sageBorder}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', flexShrink: 0 }}><img src="assets/ss-mark.png" style={{ width: '80%', height: '80%', objectFit: 'contain' }} /></span>}
      <span style={{ fontFamily: SS.sans, fontWeight: 800, fontSize: size, color, letterSpacing: '-0.03em' }}>SmartShamba</span>
    </span>);

}

function PhoneSS({ w = 300, children, tilt = 0, style }) {
  const bezel = Math.round(w * 0.028);
  const innerW = w - bezel * 2;
  const s = innerW / SC_W;
  const innerH = SC_H * s,h = innerH + bezel * 2;
  const radius = Math.round(w * 0.12);
  return (
    <div style={{ position: 'relative', width: w, height: h, transform: tilt ? `rotate(${tilt}deg)` : undefined, ...style }}>
      <div aria-hidden="true" style={{ position: 'absolute', left: '-9%', right: '-9%', top: '7%', bottom: '-11%', background: 'radial-gradient(closest-side, rgba(20,60,40,0.32), rgba(20,60,40,0.16) 58%, rgba(20,60,40,0) 100%)', zIndex: 0, pointerEvents: 'none' }} />
      <div style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%', background: '#10241a', borderRadius: radius, padding: bezel, boxSizing: 'border-box', boxShadow: 'inset 0 0 0 1.5px #1d3a2a' }}>
        <div style={{ width: innerW, height: innerH, background: SS.surface, borderRadius: radius - bezel, overflow: 'hidden', position: 'relative' }}>
          <div style={{ position: 'absolute', top: Math.round(innerW * 0.034), left: '50%', transform: 'translateX(-50%)', width: Math.round(innerW * 0.045), height: Math.round(innerW * 0.045), background: '#08160f', borderRadius: '50%', zIndex: 40 }} />
          <div style={{ width: SC_W, height: SC_H, transform: `scale(${s})`, transformOrigin: 'top left', fontFamily: SS.sans, color: SS.ink }}>
            {children}
          </div>
        </div>
      </div>
    </div>);

}

const scWrap = { width: SC_W, height: SC_H, background: SS.surface, position: 'relative', overflow: 'hidden' };

function StatusBarSS() {
  return (
    <div style={{ height: 30, padding: '10px 20px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontWeight: 700, fontSize: 11, color: SS.ink }}>
      <span>9:41</span>
      <span style={{ display: 'flex', gap: 5 }}><MSi name="signal_cellular_alt" size={12} color={SS.ink} /><MSi name="wifi" size={12} color={SS.ink} /><MSi name="battery_full" size={13} color={SS.ink} /></span>
    </div>);

}

function TopBarSS({ lang = 'EN' }) {
  return (
    <div style={{ padding: '8px 16px 10px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: `1px solid ${SS.border}`, background: SS.card }}>
      <Wordmark size={17} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, fontWeight: 700, color: SS.forest, background: SS.sage, border: `1px solid ${SS.sageBorder}`, borderRadius: 999, padding: '4px 9px' }}><MSi name="translate" size={12} color={SS.forest} />{lang} · SW</span>
        <div style={{ width: 28, height: 28, borderRadius: '50%', background: SS.sage, border: `1px solid ${SS.sageBorder}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><MSi name="person" size={15} color={SS.forestMid} /></div>
      </div>
    </div>);

}

function Chips() {
  const items = [['Beans', 'Meru', 'eco'], ['Maize', 'Eldoret', 'grass'], ['Coffee', 'Nyeri', 'local_cafe'], ['Tomatoes', 'Naivasha', 'nutrition'], ['Avocado', "Murang'a", 'park'], ['Dairy Cow', 'Nyandarua', 'pets']];
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, justifyContent: 'center' }}>
      {items.map(([c, l, ic]) =>
      <span key={c} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '6px 10px', borderRadius: 999, background: SS.card, border: `1px solid ${SS.border}`, fontSize: 11.5, fontWeight: 600 }}>
          <MSi name={ic} size={12} color={SS.forestMid} />{c}<MSi name="location_on" size={10} color={SS.muted} /><span style={{ color: SS.ink2 }}>{l}</span>
        </span>
      )}
    </div>);

}

// ── HOME (search engine) ─────────────────────────────────────────────────
function HomeScreen() {
  const water = [['Rainfed', 'rainy'], ['Irrigated', 'water_drop'], ['Mixed', 'partly_cloudy_day'], ['Greenhouse', 'home']];
  return (
    <div style={scWrap}>
      <StatusBarSS />
      <TopBarSS />
      <div style={{ padding: '22px 18px' }}>
        <div style={{ textAlign: 'center', marginBottom: 18 }}>
          <div style={{ width: 60, height: 60, borderRadius: '50%', background: '#fff', border: `1.5px solid ${SS.sageBorder}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10, overflow: 'hidden' }}><img src="assets/ss-mark.png" style={{ width: '78%', height: '78%', objectFit: 'contain' }} /></div>
          <div style={{ fontFamily: SS.sans, fontWeight: 800, fontSize: 27, color: SS.forest, lineHeight: 1.1 }}>SmartShamba</div>
          <div style={{ fontSize: 13, color: SS.ink2, marginTop: 4 }}>Get crop advice tailored to your farm</div>
        </div>
        {/* search card */}
        <div style={{ background: SS.card, border: `1px solid ${SS.sageBorder}`, borderRadius: 18, boxShadow: '0 2px 16px rgba(20,83,45,0.07)', padding: '16px 16px 14px' }}>
          <div style={{ textAlign: 'center', fontSize: 15, fontWeight: 700, lineHeight: 1.9, color: SS.ink }}>
            <span style={{ color: SS.ink2, fontWeight: 500, fontSize: 13 }}>I want to grow </span>
            <span style={{ background: SS.sage, borderBottom: `2px solid ${SS.forestLight}`, borderRadius: '6px 6px 2px 2px', padding: '3px 10px', color: SS.forest }}>Tomatoes<span style={{ opacity: 0.5 }}>|</span></span>
            <span style={{ color: SS.ink2, fontWeight: 500, fontSize: 13 }}> in </span>
            <span style={{ background: SS.surface, border: `1px solid ${SS.border}`, borderRadius: 8, padding: '3px 10px' }}>Naivasha</span>
          </div>
          <div style={{ display: 'flex', gap: 6, justifyContent: 'center', margin: '13px 0' }}>
            {water.map(([l, ic], i) =>
            <div key={l} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, padding: '8px 2px', borderRadius: 12, background: i === 0 ? SS.sage : SS.surface, border: `1px solid ${i === 0 ? SS.sageBorder : SS.border}` }}>
                <MSi name={ic} size={17} color={i === 0 ? SS.forestMid : SS.muted} />
                <span style={{ fontSize: 9, fontWeight: 700, color: i === 0 ? SS.forest : SS.ink2 }}>{l}</span>
              </div>
            )}
          </div>
          <div style={{ height: 46, borderRadius: 13, background: SS.forest, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, color: '#fff', fontWeight: 700, fontSize: 15 }}>
            <MSi name="search" size={19} color="#fff" /> Search · Tafuta
          </div>
        </div>
        <div style={{ textAlign: 'center', fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', color: SS.muted, textTransform: 'uppercase', margin: '16px 0 10px' }}>Popular in Kenya</div>
        <Chips />
        <div style={{ textAlign: 'center', fontSize: 11, color: SS.muted, marginTop: 16 }}>Free · No account needed</div>
      </div>
    </div>);

}

// ── small report bits ──────────────────────────────────────────────────────
function VerdictBadge({ v = 'Suitable', size = 13 }) {
  const c = VERDICT[v];
  return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: c.bg, color: c.color, border: `1px solid ${c.border}`, borderRadius: 999, padding: '4px 11px', fontSize: size, fontWeight: 700 }}>{c.en} · {c.sw}</span>;
}

// ── RESULT (suitability report) ────────────────────────────────────────────
function ResultScreen() {
  return (
    <div style={{ ...scWrap, display: 'flex', flexDirection: 'column' }}>
      <StatusBarSS />
      <div style={{ padding: '8px 16px 10px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: `1px solid ${SS.border}`, background: SS.card }}>
        <MSi name="arrow_back" size={18} color={SS.ink} />
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: SS.sans, fontWeight: 800, fontSize: 18, color: SS.ink }}>Tomatoes</div>
          <div style={{ fontSize: 10.5, color: SS.ink2, display: 'flex', alignItems: 'center', gap: 3 }}><MSi name="location_on" size={11} color={SS.muted} />Naivasha, Nakuru · Rainfed</div>
        </div>
        <div style={{ width: 30, height: 30, borderRadius: '50%', background: SS.wa, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><MSi name="chat" size={16} color="#fff" /></div>
      </div>
      <div style={{ flex: 1, padding: '14px 16px 16px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 11 }}>
        {/* verdict hero */}
        <div style={{ background: SS.sage, border: `1px solid ${SS.sageBorder}`, borderRadius: 16, padding: '14px 16px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.1em', color: SS.forestMid, textTransform: 'uppercase' }}>Verdict · Uamuzi</span>
            <MSi name="check_circle" size={20} color={SS.forest} fill={1} />
          </div>
          <div style={{ fontFamily: SS.sans, fontWeight: 800, fontSize: 30, color: SS.forest, lineHeight: 1.1, margin: '2px 0 4px' }}>Suitable</div>
          <div style={{ fontSize: 12, color: SS.forest, opacity: 0.85 }}>Inafaa — a good fit for your location, soil & season.</div>
        </div>
        {/* best varieties */}
        <div>
          <div style={{ fontSize: 11, fontWeight: 800, color: SS.ink2, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 7 }}>Best varieties</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[['Anna F1', '75 days', '25 t/acre'], ['Rio Grande', '90 days', '20 t/acre']].map(([n, d, y]) =>
            <div key={n} style={{ background: SS.card, border: `1px solid ${SS.border}`, borderRadius: 12, padding: '10px 13px', display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 30, height: 30, borderRadius: 9, background: SS.sage, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><MSi name="eco" size={16} color={SS.forestMid} fill={1} /></div>
                <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 700 }}>{n}</div><div style={{ fontSize: 10.5, color: SS.ink2 }}>{d} to maturity</div></div>
                <div style={{ fontSize: 12.5, fontWeight: 800, color: SS.forest }}>{y}</div>
              </div>
            )}
          </div>
        </div>
        {/* planting + cost row */}
        <div style={{ display: 'flex', gap: 10 }}>
          <div style={{ flex: 1, background: SS.card, border: `1px solid ${SS.border}`, borderRadius: 12, padding: '11px 13px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 3 }}><MSi name="event" size={14} color={SS.honey} /><span style={{ fontSize: 10, fontWeight: 700, color: SS.ink2 }}>Planting window</span></div>
            <div style={{ fontSize: 13.5, fontWeight: 700 }}>Mar–Apr</div>
            <div style={{ fontSize: 10.5, color: SS.ink2 }}>prepare 3 weeks ahead</div>
          </div>
          <div style={{ flex: 1, background: SS.honeyLight, border: '1px solid #FDE68A', borderRadius: 12, padding: '11px 13px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 3 }}><MSi name="payments" size={14} color={SS.honey} /><span style={{ fontSize: 10, fontWeight: 700, color: SS.amberDark }}>Input cost / acre</span></div>
            <div style={{ fontFamily: SS.sans, fontWeight: 800, fontSize: 17, color: SS.amberDark }}>KES 70,000</div>
            <div style={{ fontSize: 10.5, color: SS.amberDark, opacity: 0.8 }}>itemised below</div>
          </div>
        </div>
        {/* pest risks */}
        <div>
          <div style={{ fontSize: 11, fontWeight: 800, color: SS.ink2, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 7 }}>Pest & disease risk</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
            {[['Tuta absoluta', 'HIGH'], ['Early blight', 'MEDIUM'], ['Bacterial wilt', 'LOW']].map(([n, r]) =>
            <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                <span style={{ fontSize: 9, fontWeight: 800, color: RISK[r].c, background: RISK[r].bg, borderRadius: 6, padding: '3px 7px', width: 56, textAlign: 'center' }}>{r}</span>
                <span style={{ fontSize: 12, color: SS.ink }}>{n}</span>
              </div>
            )}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <div style={{ flex: 1, height: 44, borderRadius: 12, background: SS.forest, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, color: '#fff', fontWeight: 700, fontSize: 13 }}><MSi name="storefront" size={16} color="#fff" />Find agrovets</div>
          <div style={{ height: 44, padding: '0 16px', borderRadius: 12, background: SS.sage, border: `1px solid ${SS.sageBorder}`, display: 'flex', alignItems: 'center', gap: 6, color: SS.forest, fontWeight: 700, fontSize: 13 }}><MSi name="lightbulb" size={16} color={SS.forestMid} fill={1} />Tips</div>
        </div>
      </div>
    </div>);

}

Object.assign(window, { SS, VERDICT, RISK, SC_W, SC_H, MSi, Wordmark, PhoneSS, scWrap, StatusBarSS, TopBarSS, Chips, HomeScreen, VerdictBadge, ResultScreen });