// hf-storefront.jsx — Create storefront (PUC-4/5/7) hi-fi + states.
const { HFScreen: FScreen, HFWordmark: FWordmark, HFTopBar: FTopBar, HFAccountChip: FChip,
  HFFooter: FFooter, HFAuthCard: FAuthCard, HFField: FField, HFBanner: FBanner,
  HFPrimary: FPrimary, HFStateCard: FStateCard, HFStates: FStates, HF_H: F, HF_DSC: FDS } = window;
const { Eyebrow: FEyebrow } = FDS;

function CreateForm({ s = {} }) {
  return (
    <>
      <div>
        <FEyebrow style={{ margin: '0 0 12px' }}>One storefront, fully yours</FEyebrow>
        <h1 style={{ fontFamily: F.disp, fontWeight: 700, letterSpacing: '-0.015em', fontSize: 27, color: F.star, margin: '0 0 9px', lineHeight: 1.08 }}>
          Create your storefront
        </h1>
        <p style={{ fontFamily: F.body, fontSize: 14.5, lineHeight: 1.55, color: F.soft, margin: 0 }}>
          This is the one thing to do right now. It costs nothing and commits you to nothing.
        </p>
      </div>
      {s.alreadyOwns && <FBanner title="Your account already has its storefront">
        ecomm is one storefront per account today. <a className="lk" href="#">Go to your admin →</a>
      </FBanner>}
      <FField label="Storefront name" optional placeholder="e.g. Ben's Bets" value={s.name}
        focus={!s.name && !s.blankPreview} error={s.nameError}
        helper="You can leave this blank — we'll pick a placeholder name you can change any time." />
      {s.blankPreview && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: -8, fontFamily: F.body, fontSize: 13, color: F.mute }}>
          <span aria-hidden="true" style={{ color: F.lilac }}>◇</span>
          Saves as <span style={{ color: F.soft, fontStyle: 'italic' }}>“ben's storefront”</span> — change it later.
        </div>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <FPrimary disabled={s.creating}>{s.creating ? 'Creating…' : 'Create storefront'}</FPrimary>
        <p style={{ fontFamily: F.body, fontSize: 13, color: F.mute, lineHeight: 1.5, margin: 0 }}>
          You can rename, configure, or close your storefront whenever you like.
        </p>
      </div>
    </>
  );
}

function HFCreate({ device = 'desktop', s = {} }) {
  const desktop = device === 'desktop';
  return (
    <FScreen horizon>
      <FTopBar pad={desktop ? '0 36px' : '0 20px'} left={<FWordmark size={desktop ? 22 : 20} />}
        right={desktop ? <FChip /> : <button className="signout">Sign out</button>} />
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: desktop ? 32 : 18 }}>
        <FAuthCard width={desktop ? 448 : '100%'}><CreateForm s={s} /></FAuthCard>
      </div>
      {desktop && <FFooter />}
    </FScreen>
  );
}

function HFCreateStates() {
  return (
    <FStates>
      <FStateCard label="Blank name allowed" note="PUC-4 · default generated">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <FField label="Storefront name" optional placeholder="e.g. Ben's Bets" helper="Leave blank and we'll name it for you." />
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, fontFamily: F.body, fontSize: 13, color: F.mute }}>
            <span aria-hidden="true" style={{ color: F.lilac }}>◇</span>
            Saves as <span style={{ color: F.soft, fontStyle: 'italic' }}>“ben's storefront”</span>
          </div>
        </div>
      </FStateCard>
      <FStateCard label="Creating" note="button busy, single submit">
        <FPrimary disabled>Creating…</FPrimary>
      </FStateCard>
      <FStateCard label="Already owns one" note="409 · defense in depth (PUC-7)">
        <FBanner title="Your account already has its storefront">
          ecomm is one storefront per account today. <a className="lk" href="#">Go to your admin →</a>
        </FBanner>
      </FStateCard>
    </FStates>
  );
}

Object.assign(window, { HFCreate, HFCreateStates });