// Hand-drawn-feel SVG icons + watercolor decorations.
// Strokes are intentionally a little wobbly. All currentColor.

const Icon = ({ children, size = 24, stroke = 1.6, ...rest }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none"
       stroke="currentColor" strokeWidth={stroke}
       strokeLinecap="round" strokeLinejoin="round" {...rest}>
    {children}
  </svg>
);

// ── Watercolor splotch (decorative bg behind hero illustration) ─────────
const Splotch = ({ color = "#7C9A7E", className = "", style = {} }) => (
  <svg viewBox="0 0 200 200" className={className}
       style={{ position: 'absolute', ...style }} aria-hidden="true">
    <defs>
      <filter id={`splotch-${color.replace('#','')}`}>
        <feTurbulence type="fractalNoise" baseFrequency="0.018" numOctaves="3" seed="3" />
        <feDisplacementMap in="SourceGraphic" scale="22" />
      </filter>
    </defs>
    <circle cx="100" cy="100" r="80" fill={color}
            filter={`url(#splotch-${color.replace('#','')})`} opacity="0.55" />
  </svg>
);

// ── Scanner camera frame icon ───────────────────────────────────────
const ScanIcon = ({ size = 28 }) => (
  <Icon size={size}>
    <path d="M3 7V5a2 2 0 0 1 2-2h2" />
    <path d="M17 3h2a2 2 0 0 1 2 2v2" />
    <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
    <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
    <path d="M3 12h18" />
  </Icon>
);

// ── Seed packet illustration — real watercolor packet asset ─────────
const SeedPacket = () => (
  <img src="assets/icon-seed-packet.png" alt=""
       style={{
         height: 84, width: 'auto',
         display: 'block',
         transform: 'rotate(-4deg)',
         filter: 'drop-shadow(0 6px 10px rgba(70,50,25,0.22))'
       }}/>
);

// ── Leaf — real watercolor PNG ──────────────────────────────────────
const LeafIcon = () => (
  <img src="assets/icon-leaf.png" alt=""
       style={{
         height: 84, width: 'auto',
         display: 'block',
         transform: 'rotate(6deg)',
         filter: 'drop-shadow(0 6px 10px rgba(60,80,40,0.18))'
       }}/>
);

// ── Diagnosis — real watercolor leaf-under-magnifier asset ──────────
const DiagnoseIcon = () => (
  <img src="assets/icon-diagnose.png" alt=""
       style={{
         height: 84, width: 'auto',
         display: 'block',
         transform: 'rotate(-3deg)',
         filter: 'drop-shadow(0 6px 10px rgba(60,80,40,0.18))'
       }}/>
);

// ── Houseplant — real watercolor monstera in pot ────────────────────
const HouseplantIcon = () => (
  <img src="assets/icon-houseplant.png" alt=""
       style={{
         height: 88, width: 'auto',
         display: 'block',
         transform: 'rotate(-2deg)',
         filter: 'drop-shadow(0 6px 10px rgba(60,80,40,0.20))'
       }}/>
);

// ── Barcode — real watercolor barcode on torn paper ─────────────────
const BarcodeIcon = () => (
  <img src="assets/icon-barcode.png" alt=""
       style={{
         height: 64, width: 'auto',
         display: 'block',
         transform: 'rotate(3deg)',
         filter: 'drop-shadow(0 6px 10px rgba(70,50,25,0.20))'
       }}/>
);

// ── Feature mini icons ─────────────────────────────────────────────
const PlanIcon = () => (
  <Icon size={40} stroke={1.4}>
    <rect x="3" y="4" width="18" height="18" rx="2"/>
    <path d="M3 9h18"/>
    <path d="M8 14h2M8 18h6"/>
    <path d="M14 13l2 2 3-4" stroke="currentColor"/>
  </Icon>
);
const BellIcon = () => (
  <Icon size={40} stroke={1.4}>
    <path d="M6 9a6 6 0 0 1 12 0c0 5 2 7 2 7H4s2-2 2-7Z"/>
    <path d="M10 19a2 2 0 0 0 4 0"/>
  </Icon>
);
const JournalIcon = () => (
  <Icon size={40} stroke={1.4}>
    <path d="M5 4h12a2 2 0 0 1 2 2v14H7a2 2 0 0 1-2-2Z"/>
    <path d="M9 8h6M9 12h6M9 16h4"/>
    <path d="M5 18a2 2 0 0 1 2-2h12"/>
  </Icon>
);

// ── Season icons ────────────────────────────────────────────────────
const Snowflake = () => (
  <Icon size={32} stroke={1.5}>
    <path d="M12 3v18"/><path d="M3 12h18"/>
    <path d="M6 6l12 12"/><path d="M18 6L6 18"/>
    <path d="M12 6l-2 2M12 6l2 2"/>
    <path d="M12 18l-2-2M12 18l2-2"/>
  </Icon>
);
const Sprout2 = () => (
  <Icon size={32} stroke={1.5}>
    <path d="M12 20V10"/>
    <path d="M12 10C12 7 14 5 17 5c0 3-2 5-5 5Z"/>
    <path d="M12 12C12 9 10 7 7 7c0 3 2 5 5 5Z"/>
    <path d="M8 20h8"/>
  </Icon>
);
const Sun = () => (
  <Icon size={32} stroke={1.5}>
    <circle cx="12" cy="12" r="4"/>
    <path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4"/>
  </Icon>
);
const FallLeaf = () => (
  <Icon size={32} stroke={1.5}>
    <path d="M5 19c0-8 6-14 14-14-1 8-6 14-14 14Z"/>
    <path d="M5 19l8-8"/>
  </Icon>
);

// ── Data section icons ──────────────────────────────────────────────
const ShieldIcon = () => (
  <Icon size={32} stroke={1.5}>
    <path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3Z"/>
    <path d="M9 12l2 2 4-4"/>
  </Icon>
);
const NoSellIcon = () => (
  <Icon size={32} stroke={1.5}>
    <circle cx="12" cy="12" r="9"/>
    <path d="M5 5l14 14"/>
    <path d="M9 9c0 2 6 1 6 3s-3 2-3 2"/>
  </Icon>
);
const KeyIcon = () => (
  <Icon size={32} stroke={1.5}>
    <circle cx="8" cy="14" r="4"/>
    <path d="M11 11l9-9"/>
    <path d="M16 6l3 3"/>
  </Icon>
);
const TrashIcon = () => (
  <Icon size={32} stroke={1.5}>
    <path d="M4 7h16"/>
    <path d="M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13"/>
    <path d="M9 7V4h6v3"/>
    <path d="M10 11v7M14 11v7"/>
  </Icon>
);

// ── Store badge glyphs ──────────────────────────────────────────────
const GooglePlayGlyph = () => (
  <svg viewBox="0 0 24 24" width="22" height="22">
    <path d="M3 2v20l10-10z" fill="#A4C2A1"/>
    <path d="M3 2l14 8-3 2z" fill="#EFB740"/>
    <path d="M3 22l14-8-3-2z" fill="#C4622D"/>
    <path d="M17 10l4 2-4 2 -3-2z" fill="#7C9A7E"/>
  </svg>
);
const AppleGlyph = () => (
  <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
    <path d="M16.5 12.5c0-2.6 2.1-3.8 2.2-3.9-1.2-1.7-3-2-3.7-2-1.6-.2-3 .9-3.8.9-.8 0-2-.9-3.3-.8-1.7 0-3.2 1-4.1 2.5-1.7 3-.5 7.4 1.2 9.9.8 1.2 1.8 2.5 3.1 2.5 1.3-.1 1.7-.8 3.2-.8s1.9.8 3.3.8c1.4 0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8-.1-.1-2.4-.9-2.4-3.9zM14 4.6c.7-.9 1.2-2.1 1-3.4-1.1.1-2.4.7-3.1 1.6-.7.8-1.3 2-1.1 3.3 1.2.1 2.5-.7 3.2-1.5z"/>
  </svg>
);

// ── Verified seal — uses the real watercolor PNG ────────────────────
const VerifiedSeal = () => (
  <img src="assets/verified-stamp.png" alt="Verifisert av dyrkere"
       style={{ width: '100%', height: '100%', objectFit: 'contain',
                filter: 'drop-shadow(0 18px 22px rgba(140,90,30,0.25))' }}/>
);

// Expose to global so sections.jsx + main.jsx can use
Object.assign(window, {
  Icon, Splotch, ScanIcon, SeedPacket, LeafIcon, HouseplantIcon, BarcodeIcon, DiagnoseIcon,
  PlanIcon, BellIcon, JournalIcon,
  Snowflake, Sprout2, Sun, FallLeaf,
  ShieldIcon, NoSellIcon, KeyIcon, TrashIcon,
  GooglePlayGlyph, AppleGlyph, VerifiedSeal
});
