/* ============================================================
   Fitted Landing — shared bits & icons
   ============================================================ */

/* Lucide-style stroke icons (small set we need) */
function Icon({ name, size = 18, stroke = 1.75, ...rest }) {
  const s = { width: size, height: size, ...rest.style };
  const common = {
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: stroke,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    style: s,
    ...rest,
  };
  switch (name) {
    case "arrow-right":
      return (<svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>);
    case "apple":
      return (<svg viewBox="0 0 24 24" fill="currentColor" style={s} {...rest}>
        <path d="M16.365 1.43c0 1.14-.493 2.27-1.177 3.08-.744.9-1.99 1.57-2.987 1.49-.12-1.12.42-2.3 1.116-3.08.78-.9 2.087-1.59 3.048-1.49zM20.83 17.39c-.566 1.32-.836 1.9-1.566 3.06-1.02 1.62-2.456 3.63-4.236 3.65-1.58.02-1.986-1.03-4.13-1.02-2.143.01-2.59 1.04-4.17 1.02-1.78-.02-3.142-1.84-4.16-3.46-2.86-4.55-3.16-9.88-1.39-12.72.99-1.59 2.55-2.51 4.02-2.51 1.5 0 2.45.82 3.69.82 1.21 0 1.95-.82 3.69-.82 1.31 0 2.7.71 3.69 1.94-3.25 1.78-2.72 6.42.66 8.04z"/>
      </svg>);
    case "search":
      return (<svg {...common}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>);
    case "bell":
      return (<svg {...common}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>);
    case "heart":
      return (<svg viewBox="0 0 24 24" fill="currentColor" style={s} {...rest}><path d="M12 21s-7-4.5-9.5-9C1 8 3 4 7 4c2 0 3.5 1 5 3 1.5-2 3-3 5-3 4 0 6 4 4.5 8C19 16.5 12 21 12 21z"/></svg>);
    case "send":
      return (<svg {...common}><path d="m22 2-7 20-4-9-9-4 20-7z"/><path d="M22 2 11 13"/></svg>);
    case "sparkles":
      return (<svg {...common}><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6 7.7 7.7M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>);
    case "camera":
      return (<svg {...common}><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3.5"/></svg>);
    case "tag":
      return (<svg {...common}><path d="M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z"/><circle cx="7" cy="7" r="1.5"/></svg>);
    case "trending":
      return (<svg {...common}><path d="m3 17 6-6 4 4 8-8"/><path d="M14 7h7v7"/></svg>);
    case "shopping":
      return (<svg {...common}><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg>);
    case "users":
      return (<svg {...common}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>);
    case "instagram":
      return (<svg {...common}><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.4a4 4 0 1 1-7.9 1 4 4 0 0 1 7.9-1z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>);
    case "tiktok":
      return (<svg viewBox="0 0 24 24" fill="currentColor" style={s} {...rest}><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V8.5a8.16 8.16 0 0 0 4.77 1.52V6.65a4.85 4.85 0 0 1-1.84.04z"/></svg>);
    case "x":
      return (<svg {...common}><path d="M18 6 6 18M6 6l12 12"/></svg>);
    case "plus":
      return (<svg {...common}><path d="M12 5v14M5 12h14"/></svg>);
    case "home":
      return (<svg {...common}><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>);
    case "shirt":
      return (<svg {...common}><path d="M20.4 7.4 16 3l-4 2-4-2-4.4 4.4 3 3L8 9v12h8V9l1.4 1.4z"/></svg>);
    case "user":
      return (<svg {...common}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>);
    case "wand":
      return (<svg {...common}><path d="M15 4V2M15 16v-2M8 9h2M20 9h2M17.8 11.8 19 13M15 9h0M17.8 6.2 19 5M3 21l9-9M12.2 6.2 11 5"/></svg>);
    case "cloud":
      return (<svg {...common}><path d="M17.5 19a4.5 4.5 0 0 0 0-9c-.32 0-.63.03-.93.09A6 6 0 0 0 5 13a4.5 4.5 0 0 0 0 9z"/></svg>);
    case "barcode":
      return (<svg {...common}><path d="M3 5v14M7 5v14M11 5v14M15 5v14M19 5v14"/></svg>);
    case "photo":
      return (<svg {...common}><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="9" cy="9" r="2"/><path d="m21 15-5-5L5 21"/></svg>);
    case "gmail":
      return (<svg viewBox="0 0 24 24" style={s} {...rest}>
        <path d="M2 6.5C2 5.67 2.67 5 3.5 5h17c.83 0 1.5.67 1.5 1.5v11c0 .83-.67 1.5-1.5 1.5h-17C2.67 19 2 18.33 2 17.5v-11z" fill="#fff" stroke="currentColor" strokeWidth="1.5"/>
        <path d="m3 6 9 7 9-7" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M22 6.5 12 14 2 6.5" fill="none" stroke="#EA4335" strokeWidth="0" />
        <path d="M22 6.5V18a1 1 0 0 1-1 1h-3V11l-6 4.5L6 11v8H3a1 1 0 0 1-1-1V6.5L12 14l10-7.5z" fill="#EA4335"/>
      </svg>);
    case "chat":
      return (<svg {...common}><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>);
    case "users-2":
      return (<svg {...common}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>);
    case "image":
      return (<svg {...common}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>);
    case "settings":
      return (<svg {...common}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82 1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>);
    case "bolt":
      return (<svg {...common}><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/></svg>);
    default:
      return null;
  }
}

/* App Store badge */
function AppStoreBadge({ inverse = false, ...rest }) {
  return (
    <a
      className={`appstore${inverse ? " inverse" : ""}`}
      href="https://apps.apple.com/us/app/fitted/id6596771952"
      data-analytics-event="app_download_click"
      data-analytics-cta="app_store_badge"
      data-analytics-target="app_store"
      {...rest}
    >
      <Icon name="apple" size={26} />
      <span className="label">
        <span className="top">Download on the</span>
        <span className="bot">App Store</span>
      </span>
    </a>
  );
}

/* Google Play badge */
function PlayStoreBadge({ inverse = false, ...rest }) {
  return (
    <a
      className={`appstore${inverse ? " inverse" : ""}`}
      href="https://play.google.com/store/apps/details?id=com.fittedcloset.app&hl=en_US"
      data-analytics-event="app_download_click"
      data-analytics-cta="play_store_badge"
      data-analytics-target="play_store"
      {...rest}
    >
      <svg width="24" height="24" viewBox="0 0 24 24" style={{ flex: "0 0 24px" }}>
        <defs>
          <linearGradient id="ps-grad-1" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#00d9ff"/><stop offset="1" stopColor="#0083ff"/>
          </linearGradient>
          <linearGradient id="ps-grad-2" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#ffea00"/><stop offset="1" stopColor="#ff9100"/>
          </linearGradient>
          <linearGradient id="ps-grad-3" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#ff3a44"/><stop offset="1" stopColor="#c31162"/>
          </linearGradient>
          <linearGradient id="ps-grad-4" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#00f076"/><stop offset="1" stopColor="#00b65e"/>
          </linearGradient>
        </defs>
        <path d="M3.5 1.6c-.3.3-.5.7-.5 1.3v18.2c0 .6.2 1 .5 1.3l9.9-9.9-9.9-9.9z" fill="url(#ps-grad-1)"/>
        <path d="M16.7 8.6 13.4 12l3.3 3.3 4-2.3c1.1-.6 1.1-1.8 0-2.4l-4-2z" fill="url(#ps-grad-2)"/>
        <path d="m3.5 22.4 9.9-9.9-9.9 9.9c.4.3 1 .3 1.7-.1l11.5-6.5-3.2-3.4z" fill="url(#ps-grad-3)"/>
        <path d="M5.2 1.7c-.7-.4-1.3-.4-1.7-.1l9.9 9.9 3.2-3.4L5.2 1.7z" fill="url(#ps-grad-4)"/>
      </svg>
      <span className="label">
        <span className="top">Get it on</span>
        <span className="bot">Google Play</span>
      </span>
    </a>
  );
}

/* Pair of store badges */
function StoreBadges({ inverse = false, analyticsCta = "store_badges" }) {
  return (
    <div className="store-badges">
      <AppStoreBadge inverse={inverse} data-analytics-cta={`${analyticsCta}_app_store`}/>
      <PlayStoreBadge inverse={inverse} data-analytics-cta={`${analyticsCta}_play_store`}/>
    </div>
  );
}

Object.assign(window, { Icon, AppStoreBadge, PlayStoreBadge, StoreBadges });