// pages/onboarding.jsx — optional splash (never auto-opens phone)

function OnboardingSplash({ onDone }) {
  const assets = window.RinpoAssets;

  const enter = () => {
    try {
      localStorage.setItem('hap.onboarded.v1', '1');
    } catch (_) {}
    if (onDone) onDone();
    else HAPRouter.nav('#/');
  };

  return (
    <div className="onboard-splash">
      <div className="onboard-splash__hero">
        <img src="images/pebble-multicolour.jpg" alt="Decorative pebbles" decoding="async" />
        <div className="onboard-splash__shade" />
        <div className="onboard-splash__copy">
          {assets && (
            <RinpoAvatarImage variant="hero" showPill={false} className="onboard-splash__avatar" />
          )}
          <h1 className="serif">Enjoy your garden,<br />stone by stone.</h1>
          <button type="button" className="onboard-splash__cta" onClick={enter} aria-label="Enter store">
            <Icon name="arrow-right" size={28} />
          </button>
        </div>
      </div>
    </div>
  );
}

function OnboardingPage() {
  return <OnboardingSplash />;
}

window.OnboardingSplash = OnboardingSplash;
window.OnboardingPage = OnboardingPage;