/* global React */
// Shared primitive components

function Icon({ name, size = 24 }) {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true };
  switch (name) {
    case "book":
      return (<svg {...common}><path d="M4 4.5A2.5 2.5 0 016.5 2H20v15H6.5a2.5 2.5 0 00-2.5 2.5z"/><path d="M4 4.5v15A2.5 2.5 0 006.5 22H20v-5"/><path d="M9 7h7M9 11h7"/></svg>);
    case "quill":
      return (<svg {...common}><path d="M20 4L4 20"/><path d="M14 4h6v6"/><path d="M20 4c-4 2-7 5-9 9"/><path d="M8 16l-4 4"/></svg>);
    case "wave":
      return (<svg {...common}><path d="M3 12v0M7 8v8M11 5v14M15 8v8M19 12v0"/></svg>);
    case "mosque":
      return (<svg {...common}><path d="M12 2c-1 2-3 3-3 5s1 3 3 3 3-1 3-3-2-3-3-5z"/><path d="M4 20V11a4 4 0 018 0v9M12 20V11a4 4 0 018 0v9"/><path d="M2 20h20"/><path d="M8 20v-4a2 2 0 014 0v4"/></svg>);
    case "compass":
      return (<svg {...common}><circle cx="12" cy="12" r="10"/><path d="M15 9l-2 6-4 2 2-6 4-2z" fill="currentColor" fillOpacity=".2"/></svg>);
    case "beads":
      return (<svg {...common}><circle cx="6" cy="12" r="2"/><circle cx="12" cy="6" r="2"/><circle cx="18" cy="12" r="2"/><circle cx="12" cy="18" r="2"/><path d="M7.4 10.6l3.2-3.2M13.4 7.4l3.2 3.2M16.6 13.4l-3.2 3.2M10.6 16.6L7.4 13.4"/></svg>);
    case "circle":
      return (<svg {...common}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/></svg>);
    case "bookmark":
      return (<svg {...common}><path d="M6 3h12v18l-6-4-6 4z"/></svg>);
    case "play":
      return (<svg {...common}><polygon points="6 4 20 12 6 20 6 4" fill="currentColor"/></svg>);
    case "pause":
      return (<svg {...common}><rect x="6" y="4" width="4" height="16" fill="currentColor"/><rect x="14" y="4" width="4" height="16" fill="currentColor"/></svg>);
    case "arrow-left":
      return (<svg {...common}><path d="M19 12H5M12 19l-7-7 7-7"/></svg>);
    case "arrow-right":
      return (<svg {...common}><path d="M5 12h14M12 5l7 7-7 7"/></svg>);
    case "arrow-down":
      return (<svg {...common}><path d="M12 5v14M19 12l-7 7-7-7"/></svg>);
    case "check":
      return (<svg {...common}><path d="M20 6L9 17l-5-5"/></svg>);
    case "apple":
      return (
        <svg
          viewBox="0 0 24 24"
          width={size}
          height={size}
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M12 6.528V3a1 1 0 0 1 1-1h0" />
          <path d="M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10 3 3 0 0 0 3.648.648 5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21" />
        </svg>
      );
    case "play-store":
      return (
        <svg
          viewBox="0 0 24 24"
          width={size}
          height={size}
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M5 3l14 9-14 9z" />
          <path d="M5 3l8 9-8 9" />
        </svg>
      );
    case "star":
      return (<svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>);
    case "globe":
      return (<svg {...common}><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20"/></svg>);
    case "shield":
      return (<svg {...common}><path d="M12 2l9 4v6c0 5-4 9-9 10-5-1-9-5-9-10V6l9-4z"/></svg>);
    case "download":
      return (<svg {...common}><path d="M12 3v12M6 11l6 6 6-6M4 21h16"/></svg>);
    case "location":
      return (<svg {...common}><path d="M12 22s-7-7-7-12a7 7 0 0114 0c0 5-7 12-7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>);
    case "bell":
      return (<svg {...common}><path d="M18 16v-5a6 6 0 10-12 0v5l-2 2h16z"/><path d="M10 21a2 2 0 004 0"/></svg>);
    case "heart":
      return (<svg {...common}><path d="M20.84 4.6a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.07a5.5 5.5 0 00-7.78 7.78L12 21.23l8.84-8.85a5.5 5.5 0 000-7.78z"/></svg>);
    case "x":
      return (<svg {...common}><path d="M18 6L6 18M6 6l12 12"/></svg>);
    case "plus":
      return (<svg {...common}><path d="M12 5v14M5 12h14"/></svg>);
    case "moon":
      return (<svg {...common}><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>);
    case "sun":
      return (<svg {...common}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>);
    case "sunrise":
      return (<svg {...common}><path d="M17 18a5 5 0 00-10 0"/><path d="M12 2v7M4.9 10.9l1.4 1.4M17.7 12.3l1.4-1.4M2 18h20M8 6l4-4 4 4"/></svg>);
    case "sunset":
      return (<svg {...common}><path d="M17 18a5 5 0 00-10 0"/><path d="M12 9V2M4.9 10.9l1.4 1.4M17.7 12.3l1.4-1.4M2 18h20M16 5l-4 4-4-4"/></svg>);
    case "dawn":
      return (<svg {...common}><path d="M3 18a9 9 0 0118 0"/><path d="M12 2v4M5 7l2 2M19 7l-2 2M2 18h20"/></svg>);
    case "afternoon":
      return (<svg {...common}><circle cx="12" cy="12" r="4"/><path d="M12 2v1M12 21v1M3 12h1M20 12h1M5.6 5.6l.7.7M17.7 17.7l.7.7M5.6 18.4l.7-.7M17.7 6.3l.7-.7"/></svg>);
    default:
      return (<svg {...common}><circle cx="12" cy="12" r="9"/></svg>);
  }
}

function StoreButtons({ size = "md", inverted = false }) {
  const cls = "store-btn" + (inverted ? " store-btn--light" : "");
  const i18n = window.__i18n;
  const isArabic = !i18n || i18n.lang === "ar";
  const stores = [
    {
      key: "apple",
      href: "https://apps.apple.com/eg/app/wahi-albayan-وحي-البيان/id6677048801?l=fr-FR",
      icon: "assets/apple.svg",
      label: "App Store",
      small: isArabic ? "حمل التطبيق من" : "Download on the",
      big: isArabic ? "متجر أبل ستور" : "App Store",
    },
    {
      key: "google",
      href: "https://play.google.com/store/apps/details?id=com.hellaletYounes.wahyalbayan",
      icon: "assets/google.svg",
      label: "Google Play",
      small: isArabic ? "حمل التطبيق من" : "Get it on",
      big: isArabic ? "متجر جوجل بلاي" : "Google Play",
    },
  ];

  return (
    <>
      {stores.map((store) => (
        <a
          key={store.key}
          className={cls + " store-btn--" + store.key}
          href={store.href}
          target="_blank"
          rel="noopener"
          aria-label={store.label}
        >
          <span className="store-btn__icon" aria-hidden="true">
            <img src={store.icon} alt="" className="store-btn__icon-img" />
          </span>
          <span className="store-btn__txt">
            <small>{store.small}</small>
            <b>{store.big}</b>
          </span>
        </a>
      ))}
    </>
  );
}

function Stars({ n = 5, total = 5, size = 14 }) {
  return (
    <span className="hero__stars" aria-label={`${n} من ${total}`}>
      {Array.from({ length: total }).map((_, i) => (
        <svg key={i} viewBox="0 0 24 24" width={size} height={size} fill={i < n ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.5">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
        </svg>
      ))}
    </span>
  );
}

function Reveal({ children, delay = 0 }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const ob = new IntersectionObserver((es) => {
      es.forEach((e) => {
        if (e.isIntersecting) { setTimeout(() => el.classList.add("is-in"), delay); ob.unobserve(el); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    ob.observe(el);
    return () => ob.disconnect();
  }, [delay]);
  return <div ref={ref} className="reveal">{children}</div>;
}

Object.assign(window, { Icon, StoreButtons, Stars, Reveal });